:root {
    --bg: #f5f7fb;
    --card: rgba(255, 255, 255, .88);
    --text: #0f172a;
    --muted: #64748b;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --secondary: #06b6d4;
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #dc2626;
    --purple: #7c3aed;
    --orange: #f97316;
    --green: #16a34a;
    --sidebar: #08111f;
    --sidebar-soft: rgba(255,255,255,.08);
    --border: rgba(148, 163, 184, .28);
    --shadow: 0 20px 60px rgba(15, 23, 42, .10);
    --radius: 24px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Sarabun', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 15% 0%, rgba(37, 99, 235, .12), transparent 26rem),
        radial-gradient(circle at 95% 5%, rgba(6, 182, 212, .15), transparent 28rem),
        linear-gradient(135deg, #f8fafc 0%, #eef2ff 45%, #f0fdfa 100%);
}

a { text-decoration: none; }

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 286px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    padding: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 20% 5%, rgba(59,130,246,.45), transparent 18rem),
        linear-gradient(180deg, #07111f 0%, #0f172a 58%, #111827 100%);
    transform: translateX(0);
    transition: transform .22s ease;
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    padding: 8px 6px 20px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.brand-logo {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #38bdf8, #2563eb 55%, #7c3aed);
    box-shadow: 0 14px 32px rgba(37,99,235,.35);
    font-size: 22px;
}

.brand-link strong {
    display: block;
    font-size: 20px;
    line-height: 1;
}

.brand-link small {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.68);
    font-size: 13px;
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 24px;
}

.side-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 14px;
    color: rgba(255,255,255,.76);
    border-radius: 18px;
    transition: background .2s, color .2s, transform .2s;
}

.side-link i {
    width: 24px;
    text-align: center;
    font-size: 17px;
}

.side-link:hover,
.side-link.active {
    color: #fff;
    background: rgba(255,255,255,.12);
    transform: translateX(2px);
}

.side-link.active {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.sidebar-footer {
    margin-top: auto;
    display: grid;
    gap: 12px;
}

.office-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 20px;
    font-size: 13px;
    line-height: 1.45;
}

.logout-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 14px;
    color: #fee2e2;
    background: rgba(220,38,38,.12);
    border-radius: 16px;
    font-weight: 700;
}

.app-main {
    width: 100%;
    min-height: 100vh;
    margin-left: 286px;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 22px 34px 14px;
    backdrop-filter: blur(18px);
    background: rgba(245, 247, 251, .70);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sidebar-toggle {
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 16px;
    color: #0f172a;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15,23,42,.08);
}

.eyebrow {
    color: var(--primary);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 12px;
}

.page-heading {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -.03em;
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px 8px 8px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(15,23,42,.08);
}

.user-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
}

.user-meta {
    flex-direction: column;
    line-height: 1.12;
}

.user-meta strong { font-size: 14px; }
.user-meta small { color: var(--muted); font-size: 12px; margin-top: 4px; }

.content-wrap {
    padding: 14px 34px 42px;
}

.glass-card,
.stat-card,
.chart-card,
.filter-card,
.form-card,
.table-card {
    background: var(--card);
    border: 1px solid rgba(255,255,255,.78);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.stat-card {
    position: relative;
    overflow: hidden;
    min-height: 142px;
    padding: 22px;
}

.stat-card::after {
    content: '';
    position: absolute;
    right: -36px;
    top: -46px;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: rgba(37,99,235,.10);
}

.stat-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    font-size: 20px;
    margin-bottom: 16px;
}

.stat-value {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
}

.stat-label {
    color: var(--muted);
    font-weight: 600;
    margin-top: 6px;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 18px;
}

.chart-card,
.table-card,
.filter-card,
.form-card {
    padding: 22px;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.section-title h2,
.section-title h3 {
    margin: 0;
    font-weight: 800;
    letter-spacing: -.02em;
}

.section-title p {
    margin: 4px 0 0;
    color: var(--muted);
}

.btn-primary-soft,
.btn-gradient {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    box-shadow: 0 16px 30px rgba(37,99,235,.22);
}

.btn-gradient:hover,
.btn-primary-soft:hover {
    color: #fff;
    background: linear-gradient(135deg, #1d4ed8, #0891b2);
}

.form-control,
.form-select {
    border-radius: 16px;
    border-color: rgba(148,163,184,.35);
    min-height: 46px;
}

.form-control:focus,
.form-select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 .22rem rgba(37,99,235,.12);
}

.table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.table-modern thead th {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    border: 0;
    padding: 0 14px 5px;
}

.table-modern tbody tr {
    background: #fff;
    box-shadow: 0 10px 22px rgba(15,23,42,.05);
}

.table-modern tbody td {
    padding: 14px;
    border: 0;
    vertical-align: middle;
}

.table-modern tbody td:first-child { border-radius: 18px 0 0 18px; }
.table-modern tbody td:last-child { border-radius: 0 18px 18px 0; }

.status-badge,
.category-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.status-pending { color: #92400e; background: #fef3c7; }
.status-approved { color: #166534; background: #dcfce7; }
.status-returned { color: #991b1b; background: #fee2e2; }
.status-hidden { color: #334155; background: #e2e8f0; }

.category-person { color: #5b21b6; background: #ede9fe; }
.category-innovation { color: #9a3412; background: #ffedd5; }
.category-place { color: #166534; background: #dcfce7; }
.category-default { color: #334155; background: #e2e8f0; }

.resource-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.resource-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 24px;
    box-shadow: 0 18px 46px rgba(15,23,42,.08);
}

.resource-cover {
    width: 100%;
    height: 170px;
    object-fit: cover;
    background: #e2e8f0;
}

.resource-body { padding: 18px; }
.resource-title { font-size: 18px; font-weight: 800; line-height: 1.3; margin: 10px 0 8px; }
.resource-meta { color: var(--muted); font-size: 13px; line-height: 1.55; }

.category-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.category-option {
    position: relative;
    display: block;
    min-width: 0;
    cursor: pointer;
}

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

.category-option-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    min-height: 150px;
    height: 100%;
    padding: 22px;
    border-radius: 24px;
    border: 2px solid rgba(148,163,184,.22);
    background: #fff;
    overflow: hidden;
    transition: border-color .2s, transform .2s, box-shadow .2s, background .2s;
}

.category-option-card i {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    font-size: 22px;
}

.category-option-card strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
}

.category-option-card small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
}

.category-option input:checked + .category-option-card {
    border-color: #2563eb;
    box-shadow: 0 16px 38px rgba(37,99,235,.18);
    transform: translateY(-2px);
}


.category-option input:focus-visible + .category-option-card {
    outline: 4px solid rgba(37,99,235,.16);
    outline-offset: 3px;
}

.action-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.action-btn {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 14px;
    color: #334155;
    background: #f1f5f9;
}

.action-btn:hover { color: #0f172a; background: #e2e8f0; }
.action-btn.view { color: #1d4ed8; background: #dbeafe; }
.action-btn.edit { color: #92400e; background: #fef3c7; }
.action-btn.delete { color: #991b1b; background: #fee2e2; }
.action-btn.approve { color: #166534; background: #dcfce7; }

.map-box {
    overflow: hidden;
    height: 680px;
    border-radius: 28px;
    box-shadow: var(--shadow);
}

.empty-state {
    padding: 48px 20px;
    text-align: center;
    color: var(--muted);
}

.empty-state i {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    color: #2563eb;
    background: #dbeafe;
    border-radius: 24px;
    font-size: 30px;
}

.mobile-bottom-nav {
    display: none;
}

.sidebar-backdrop { display: none; }

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 22px;
    background:
        radial-gradient(circle at 18% 12%, rgba(37,99,235,.28), transparent 22rem),
        radial-gradient(circle at 82% 2%, rgba(6,182,212,.24), transparent 24rem),
        linear-gradient(135deg, #020617 0%, #0f172a 42%, #1e293b 100%);
}

.login-card {
    width: min(1080px, 100%);
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    overflow: hidden;
    border-radius: 34px;
    background: rgba(255,255,255,.95);
    box-shadow: 0 30px 90px rgba(0,0,0,.35);
}

.login-hero {
    position: relative;
    min-height: 560px;
    padding: 42px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(37,99,235,.98), rgba(6,182,212,.82)),
        url('../images/placeholder-resource.svg') center/cover;
}

.login-hero h1 {
    font-size: clamp(40px, 6vw, 68px);
    font-weight: 900;
    letter-spacing: -.05em;
    line-height: .95;
    margin: 70px 0 18px;
}

.login-hero p {
    max-width: 420px;
    font-size: 18px;
    color: rgba(255,255,255,.86);
}

.login-form-panel {
    padding: 54px 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-form-panel h2 {
    font-weight: 900;
    letter-spacing: -.03em;
}

.public-footer {
    margin-top: 8px;
    padding: 0 22px 18px;
}
.public-footer-inner {
    max-width: 1480px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 18px;
    padding: 14px 18px;
    border: 1px solid rgba(255,255,255,.76);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 12px 30px rgba(15,23,42,.06);
    color: #475569;
    font-size: 13px;
}
.public-footer strong { color: #0f172a; font-weight: 800; }

@media (max-width: 1199.98px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .sidebar-backdrop.show {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1030;
        background: rgba(15,23,42,.42);
        backdrop-filter: blur(4px);
    }
    .app-main { margin-left: 0; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .resource-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    body { background: #f8fafc; }
    .topbar {
        padding: 16px 16px 10px;
    }
    .content-wrap {
        padding: 10px 14px 96px;
    }
    .page-heading { font-size: 25px; }
    .stat-grid,
    .grid-2,
    .category-picker,
    .resource-card-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .category-option-card {
        min-height: 118px;
        padding: 18px;
        border-radius: 22px;
    }
    .category-option-card i {
        width: 46px;
        height: 46px;
        margin-bottom: 10px;
        border-radius: 16px;
    }
    .stat-card,
    .chart-card,
    .table-card,
    .filter-card,
    .form-card {
        border-radius: 22px;
        padding: 18px;
        box-shadow: 0 12px 34px rgba(15,23,42,.08);
    }
    .mobile-bottom-nav {
        position: fixed;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 1100;
        padding: 8px;
        border-radius: 26px;
        background: rgba(15,23,42,.92);
        backdrop-filter: blur(18px);
        box-shadow: 0 22px 70px rgba(15,23,42,.24);
    }
    .mobile-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 8px 4px;
        color: rgba(255,255,255,.70);
        border-radius: 18px;
        font-size: 11px;
        font-weight: 700;
    }
    .mobile-bottom-nav a i { font-size: 18px; }
    .mobile-bottom-nav a.active {
        color: #fff;
        background: rgba(255,255,255,.12);
    }
    .mobile-bottom-nav .mobile-add {
        color: #fff;
        background: linear-gradient(135deg, #2563eb, #06b6d4);
        transform: translateY(-8px);
        box-shadow: 0 16px 32px rgba(37,99,235,.35);
    }
    .table-responsive-mobile thead { display: none; }
    .table-responsive-mobile,
    .table-responsive-mobile tbody,
    .table-responsive-mobile tr,
    .table-responsive-mobile td { display: block; width: 100%; }
    .table-modern tbody tr { margin-bottom: 14px; border-radius: 20px; overflow: hidden; }
    .table-modern tbody td,
    .table-modern tbody td:first-child,
    .table-modern tbody td:last-child { border-radius: 0; }
    .table-responsive-mobile td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
    }
    .login-card { grid-template-columns: 1fr; border-radius: 28px; }
    .login-hero { min-height: 280px; padding: 28px; }
    .login-hero h1 { margin-top: 28px; font-size: 46px; }
    .login-form-panel { padding: 32px 24px; }
}

/* v191 - Keep desktop resource carousels inside the page width. */
body.public-home main.public-page.future-page,
body.public-home .public-category-group-list,
body.public-home .public-category-group {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body.public-home .public-category-group-list {
    grid-template-columns: minmax(0, 1fr) !important;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track,
body.public-home .public-selected-resource-grid.tmap-card-carousel-track {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    contain: inline-size;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-card-cover,
body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-card-cover {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-card-cover img,
body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-card-cover img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* === Professional UX additions: v6 === */
.professional-form .form-section {
    margin-top: 22px;
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(248,250,252,.86), rgba(255,255,255,.96));
}

.form-section-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.form-section-head h3 {
    margin: 0;
    color: var(--ink);
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -.02em;
}

.form-section-head p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.step-badge {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    border-radius: 16px;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    box-shadow: 0 14px 28px rgba(37,99,235,.24);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}
.status-active { color: #166534; background: #dcfce7; }
.status-hidden-pill { color: #334155; background: #e2e8f0; }

.info-tile {
    height: 100%;
    padding: 16px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, .16);
    color: #1e293b;
}
.info-tile strong {
    display: inline-block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 13px;
}

.location-panel {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(6,182,212,.10));
    border: 1px solid rgba(37,99,235,.14);
}
.location-panel h3 {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 900;
}
.location-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    box-shadow: 0 16px 30px rgba(37,99,235,.22);
}
.location-content {
    min-width: 0;
}
.location-map-preview {
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 20px;
    background: #e2eef8;
    box-shadow: 0 18px 34px rgba(15, 23, 42, .10);
}
.location-map-preview iframe,
.location-map-empty {
    display: block;
    width: 100%;
    height: 260px;
    border: 0;
}
.location-map-empty {
    display: grid;
    place-items: center;
    gap: 8px;
    align-content: center;
    color: #64748b;
    text-align: center;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(248, 250, 252, .95), rgba(224, 242, 254, .85));
}
.location-map-empty i {
    color: #2563eb;
    font-size: 30px;
}

.current-cover-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px dashed rgba(148, 163, 184, .45);
    border-radius: 18px;
    background: #fff;
}
.current-cover-preview img {
    width: 86px;
    height: 64px;
    object-fit: cover;
    border-radius: 14px;
}
.current-cover-preview span { color: var(--muted); font-weight: 800; font-size: 13px; }

.detail-image-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.detail-image-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, .22);
    box-shadow: 0 12px 26px rgba(15,23,42,.08);
}
.detail-image-grid.large {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.detail-image-grid.large img { border-radius: 22px; }

.sticky-action-bar {
    position: sticky;
    bottom: 14px;
    z-index: 20;
    padding: 12px;
    border-radius: 22px;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 48px rgba(15,23,42,.14);
}

.developer-credit {
    margin-left: 286px;
    padding: 12px 28px 24px;
    color: #64748b;
    font-size: 12px;
    text-align: right;
}

.action-group form { display: inline-flex; }
.action-btn.delete { border: 0; }

.public-footer {
    margin-top: 8px;
    padding: 0 22px 18px;
}
.public-footer-inner {
    max-width: 1480px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 18px;
    padding: 14px 18px;
    border: 1px solid rgba(255,255,255,.76);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 12px 30px rgba(15,23,42,.06);
    color: #475569;
    font-size: 13px;
}
.public-footer strong { color: #0f172a; font-weight: 800; }

@media (max-width: 1199.98px) {
    .developer-credit { margin-left: 0; }
}

@media (max-width: 767.98px) {
    .professional-form .form-section { padding: 16px; border-radius: 22px; }
    .form-section-head { gap: 10px; }
    .step-badge { min-width: 36px; height: 36px; border-radius: 14px; }
    .detail-image-grid, .detail-image-grid.large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .location-panel { flex-direction: column; }
    .location-map-preview iframe,
    .location-map-empty { height: 220px; }
    .sticky-action-bar { bottom: 88px; }
    .developer-credit { padding: 4px 14px 96px; text-align: center; }
}

/* === v7 Public Index + Compact Professional Scale === */
:root {
    --radius: 18px;
    --shadow: 0 14px 36px rgba(15, 23, 42, .08);
}

.sidebar { width: 254px; padding: 18px; }
.app-main { margin-left: 254px; }
.brand-logo { width: 44px; height: 44px; border-radius: 16px; font-size: 19px; }
.brand-link strong { font-size: 18px; }
.brand-link small { font-size: 12px; }
.side-nav { gap: 6px; margin-top: 18px; }
.side-link { min-height: 42px; padding: 9px 12px; border-radius: 15px; font-size: 14px; }
.side-link i { font-size: 15px; }
.office-card { padding: 11px; border-radius: 16px; font-size: 12px; }
.logout-link { padding: 10px 12px; border-radius: 14px; }
.topbar { padding: 16px 26px 10px; }
.content-wrap { padding: 10px 26px 32px; }
.page-heading { font-size: clamp(22px, 2.5vw, 30px); }
.eyebrow { font-size: 11px; }
.user-chip { padding: 6px 12px 6px 6px; }
.user-avatar { width: 36px; height: 36px; }
.user-meta strong { font-size: 13px; }
.user-meta small { font-size: 11px; }
.stat-grid { gap: 14px; }
.stat-card { min-height: 118px; padding: 18px; }
.stat-card::after { width: 96px; height: 96px; right: -28px; top: -38px; }
.stat-icon { width: 42px; height: 42px; border-radius: 15px; font-size: 17px; margin-bottom: 12px; }
.stat-value { font-size: 29px; }
.stat-label { font-size: 13px; }
.chart-card, .table-card, .filter-card, .form-card { padding: 18px; }
.section-title { margin-bottom: 13px; }
.section-title h2, .section-title h3 { font-size: 19px; }
.section-title p { font-size: 13px; }
.form-control, .form-select { min-height: 40px; border-radius: 12px; font-size: 14px; }
.btn { --bs-btn-border-radius: 12px; }
.table-modern { border-spacing: 0 8px; }
.table-modern thead th { font-size: 12px; padding: 0 12px 4px; }
.table-modern tbody td { padding: 11px 12px; font-size: 14px; }
.status-badge, .category-badge { min-height: 26px; padding: 4px 10px; font-size: 11px; }
.resource-card-grid { gap: 14px; }
.resource-card { border-radius: 18px; }
.resource-cover { height: 145px; }
.resource-body { padding: 14px; }
.resource-title { font-size: 16px; margin: 8px 0 6px; }
.resource-meta { font-size: 12px; }
.action-btn { width: 34px; height: 34px; border-radius: 12px; }
.professional-form .form-section { margin-top: 16px; padding: 18px; border-radius: 22px; }
.form-section-head h3 { font-size: 18px; }
.form-section-head p { font-size: 13px; }
.step-badge { min-width: 36px; height: 36px; border-radius: 14px; }
.developer-credit { margin-left: 254px; padding: 8px 26px 18px; }

.system-footer {
    margin-top: 24px;
    padding: 14px 18px;
    border-top: 1px solid rgba(148,163,184,.18);
    color: #475569;
    font-size: 13px;
}
.system-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 18px;
}
.system-footer strong { color: #0f172a; font-weight: 800; }

body.public-home {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 5% 0%, rgba(37,99,235,.10), transparent 22rem),
        radial-gradient(circle at 90% 8%, rgba(6,182,212,.12), transparent 24rem),
        linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%);
}

.public-navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 24px;
    background: rgba(255,255,255,.86);
    border-bottom: 1px solid rgba(148,163,184,.18);
    backdrop-filter: blur(18px);
}
.public-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #0f172a;
    min-width: 0;
}
.public-brand-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    box-shadow: 0 12px 26px rgba(37,99,235,.22);
}
.public-brand-text {
    display: block;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -.01em;
}
.public-nav-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.public-page { max-width: 1480px; padding: 16px 22px 22px; flex: 1 0 auto; }
.public-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.74);
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(135deg, rgba(30,64,175,.96), rgba(6,182,212,.82));
    box-shadow: 0 18px 46px rgba(37,99,235,.18);
    overflow: hidden;
}
.public-hero.compact-hero { min-height: 150px; }
.public-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; opacity: .84; }
.public-hero h1 { margin: 0; font-size: clamp(26px, 3.3vw, 46px); font-weight: 900; letter-spacing: -.04em; }
.public-hero p { margin: 8px 0 0; color: rgba(255,255,255,.84); font-size: 15px; }
.public-hero-actions {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.public-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.public-stat-card {
    min-height: 130px;
    display: grid;
    place-items: center;
    gap: 6px;
    text-align: center;
    padding: 18px;
    border-radius: 12px;
    border-bottom: 5px solid currentColor;
    background: rgba(255,255,255,.92);
    box-shadow: 0 12px 30px rgba(15,23,42,.07);
}
.public-stat-card i { font-size: 32px; }
.public-stat-card strong { font-size: 31px; line-height: 1; }
.public-stat-card span { color: #334155; font-weight: 700; }
.public-stat-label { color: #334155; font-weight: 800; }
.public-stat-card.total { color: #0891b2; }
.public-stat-card.person { color: #22a447; }
.public-stat-card.innovation { color: #f7b500; }
.public-stat-card.place { color: #df3348; }

.public-tab-nav {
    display: inline-flex;
    gap: 10px;
    margin: 4px 0 14px;
    padding: 0;
}
.public-tab-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 18px;
    color: #475569;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(100,116,139,.26);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(15,23,42,.05);
}
.public-tab-nav a.active {
    color: #fff;
    background: #1e3a70;
    border-color: #1e3a70;
    box-shadow: 0 10px 22px rgba(30,58,112,.28);
}
.public-chart-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 14px;
}
.public-panel {
    padding: 16px;
    border: 1px solid rgba(255,255,255,.76);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 12px 30px rgba(15,23,42,.07);
}
.public-section-head { margin-bottom: 10px; }
.public-section-head h2 {
    margin: 0;
    color: #1e3a70;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.01em;
}
.public-section-head p { margin: 3px 0 0; color: #64748b; font-size: 13px; }
.public-donut-wrap { height: 320px; display: grid; place-items: center; }
.public-donut-wrap canvas { max-height: 300px; }

.public-filter-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.15fr auto;
    gap: 10px;
    align-items: end;
}
.public-filter-form label {
    display: block;
    margin-bottom: 5px;
    color: #1f2937;
    font-size: 13px;
    font-weight: 800;
}
.public-filter-actions { display: inline-flex; gap: 6px; align-items: end; }
.public-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 10px;
}
.public-result-head h2 { margin: 0; font-size: 21px; font-weight: 900; }
.public-result-head p { margin: 2px 0 0; color: #64748b; font-size: 13px; }
.public-resource-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.public-resource-card {
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.25);
    border-top: 4px solid #94a3b8;
    background: #fff;
    box-shadow: 0 10px 26px rgba(15,23,42,.08);
}
.public-resource-card.category-person { border-top-color: #22a447; }
.public-resource-card.category-innovation { border-top-color: #f7b500; }
.public-resource-card.category-place { border-top-color: #df3348; }
.public-card-cover {
    height: 158px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f1f5f9;
}
.public-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.public-card-body { padding: 12px 14px 14px; }
.public-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.public-view-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 3px 8px;
    color: #f59e0b;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}
.public-card-body h3 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.25;
}
.public-card-body p { min-height: 34px; margin: 0 0 8px; color: #64748b; font-size: 13px; line-height: 1.35; }
.public-card-meta { display: grid; gap: 5px; color: #475569; font-size: 12.5px; font-weight: 700; }
.public-card-meta span { display: flex; align-items: flex-start; gap: 7px; }
.public-card-meta i { width: 14px; color: #64748b; margin-top: 2px; }
.public-empty { text-align: center; padding: 38px 16px; color: #64748b; }
.public-empty i { font-size: 42px; color: #94a3b8; margin-bottom: 10px; }
.public-empty h3 { color: #0f172a; font-weight: 900; }

.public-footer {
    margin-top: 8px;
    padding: 0 22px 18px;
}
.public-footer-inner {
    max-width: 1480px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 18px;
    padding: 14px 18px;
    border: 1px solid rgba(255,255,255,.76);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 12px 30px rgba(15,23,42,.06);
    color: #475569;
    font-size: 13px;
}
.public-footer strong { color: #0f172a; font-weight: 800; }

@media (max-width: 1199.98px) {
    .sidebar { transform: translateX(-105%); }
    .sidebar.open { transform: translateX(0); }
    .app-main, .developer-credit { margin-left: 0; }
    .public-chart-grid { grid-template-columns: 1fr; }
    .public-resource-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .public-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .public-navbar { align-items: flex-start; padding: 10px 12px; }
    .public-brand-icon { width: 38px; height: 38px; border-radius: 14px; }
    .public-brand-text { font-size: 15px; }
    .public-nav-actions { width: 100%; justify-content: flex-start; }
    .public-page { padding: 12px 10px 22px; }
    .public-hero { align-items: flex-start; flex-direction: column; padding: 18px; border-radius: 20px; }
    .public-hero h1 { font-size: 28px; }
    .public-hero p { font-size: 14px; }
    .public-hero-actions { width: 100%; }
    .public-footer { padding: 0 10px 88px; }
    .public-footer-inner, .system-footer-inner { flex-direction: column; align-items: flex-start; }
    .public-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .public-stat-card { min-height: 116px; padding: 14px; }
    .public-stat-card i { font-size: 26px; }
    .public-stat-card strong { font-size: 27px; }
    .public-tab-nav { display: grid; grid-template-columns: 1fr; width: 100%; gap: 8px; }
    .public-tab-nav a { justify-content: center; width: 100%; }
    .public-filter-form { grid-template-columns: 1fr; }
    .public-filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .public-resource-grid { grid-template-columns: 1fr; }
    .public-card-cover { height: 180px; }
    .public-donut-wrap { height: 280px; }
}

.eyebrow i { vertical-align: middle; }

/* ===== V13 FUTURISTIC PUBLIC INDEX ===== */
body.future-home {
    background:
        radial-gradient(circle at 12% 18%, rgba(51, 102, 255, .28), transparent 26%),
        radial-gradient(circle at 88% 12%, rgba(0, 217, 255, .20), transparent 24%),
        radial-gradient(circle at 80% 78%, rgba(255, 81, 130, .14), transparent 18%),
        linear-gradient(180deg, #07111f 0%, #0b1630 24%, #0d1e3f 58%, #e8f1ff 58%, #ecf6ff 100%);
    color: #e5f0ff;
}
.future-navbar {
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(22px);
    background: linear-gradient(180deg, rgba(6, 13, 28, .84), rgba(6, 13, 28, .58));
    border-bottom: 1px solid rgba(94, 234, 255, .16);
    box-shadow: 0 12px 26px rgba(0,0,0,.20);
}
.future-brand .public-brand-icon {
    background: linear-gradient(135deg, rgba(30, 136, 255, .92), rgba(0, 234, 255, .78));
    box-shadow: 0 12px 25px rgba(21, 131, 255, .35), inset 0 0 20px rgba(255,255,255,.22);
}
.future-brand .public-brand-text {
    color: #f8fbff;
    text-shadow: 0 0 18px rgba(90, 224, 255, .18);
}
.future-login-btn {
    border: 1px solid rgba(148, 231, 255, .36);
    background: linear-gradient(135deg, rgba(30, 144, 255, .98), rgba(108, 92, 231, .92));
    box-shadow: 0 14px 28px rgba(21, 131, 255, .32);
}
.future-page { padding-top: 18px; padding-bottom: 20px; }
.future-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    gap: 18px;
    min-height: 350px;
    padding: 26px 26px 22px;
    border-radius: 30px;
    border: 1px solid rgba(132, 223, 255, .18);
    background:
        linear-gradient(135deg, rgba(5, 16, 35, .96), rgba(8, 42, 90, .90) 48%, rgba(4, 108, 160, .84) 100%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    box-shadow: 0 24px 60px rgba(3, 10, 26, .40), inset 0 1px 0 rgba(255,255,255,.08);
}
.future-hero::before,
.future-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(12px);
    opacity: .6;
}
.future-hero::before {
    width: 240px; height: 240px; right: -40px; top: -60px;
    background: radial-gradient(circle, rgba(46, 196, 255, .45), transparent 70%);
}
.future-hero::after {
    width: 220px; height: 220px; left: -50px; bottom: -90px;
    background: radial-gradient(circle, rgba(122, 92, 255, .38), transparent 70%);
}
.future-hero-bg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.88), rgba(0,0,0,.22));
    pointer-events: none;
}
.future-hero-bg-rings {
    position: absolute; inset: auto auto -150px -120px; width: 420px; height: 420px;
    border-radius: 50%;
    border: 1px solid rgba(84, 225, 255, .14);
    box-shadow: 0 0 0 36px rgba(84, 225, 255, .06), 0 0 0 72px rgba(84, 225, 255, .03);
    pointer-events: none;
}
.future-hero-content, .future-hero-visual { position: relative; z-index: 1; }
.future-hero-content { align-self: center; }
.future-system-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; margin-bottom: 14px;
    border-radius: 999px;
    color: #ddf8ff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    background: rgba(255,255,255,.10); border: 1px solid rgba(153, 238, 255, .20);
    box-shadow: inset 0 0 20px rgba(255,255,255,.06), 0 10px 26px rgba(4, 13, 28, .18);
}
.future-title {
    margin: 0 0 4px;
    font-size: clamp(36px, 6vw, 64px);
    line-height: .95;
    font-weight: 900;
    color: #fff;
    letter-spacing: -.04em;
    text-shadow: 0 10px 30px rgba(0,0,0,.28), 0 0 25px rgba(55, 215, 255, .24);
}
.future-title span {
    color: #7cf8ff;
    text-shadow: 0 0 24px rgba(90, 242, 255, .58), 0 0 50px rgba(90, 242, 255, .22);
}
.future-subtitle {
    margin: 0 0 16px;
    font-size: clamp(20px, 2.1vw, 30px);
    line-height: 1.15;
    font-weight: 800;
    color: #f3f8ff;
}
.future-nowrap { white-space: nowrap; }
.future-hero-meta {
    display: flex; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 18px;
}
.future-hero-meta span {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px; font-weight: 600; color: #d7ecff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(152, 220, 255, .16);
}
.future-actions { gap: 10px; }
.future-actions .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 45px; padding: 10px 18px; border-radius: 999px; font-weight: 800; font-size: 15px;
    border: 1px solid transparent; transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.future-actions .btn:hover { transform: translateY(-2px); }
.future-action-primary {
    color: #091220; background: linear-gradient(135deg, #ffffff, #baf4ff);
    box-shadow: 0 14px 28px rgba(6, 18, 36, .22), 0 0 16px rgba(93, 241, 255, .25);
}
.future-action-secondary {
    color: #ecfbff; background: rgba(255,255,255,.08); border-color: rgba(171, 229, 255, .26) !important;
    box-shadow: inset 0 0 18px rgba(255,255,255,.05), 0 10px 24px rgba(3, 11, 24, .18);
}
.future-hero-visual {
    min-height: 300px;
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
    border: 1px solid rgba(146, 226, 255, .14);
    box-shadow: inset 0 0 35px rgba(255,255,255,.04), 0 20px 40px rgba(4, 12, 24, .16);
    overflow: hidden;
}
.future-hero-visual::before {
    content: '';
    position: absolute; inset: 10% 12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(86, 196, 255, .10), transparent 60%);
    filter: blur(10px);
}
.future-core-node {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 170px; height: 170px;
}
.future-core-dot {
    position: absolute; inset: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 18px; font-weight: 900; letter-spacing: .08em; color: #fff;
    background: radial-gradient(circle at 30% 30%, #62f0ff, #2563eb 55%, #0b1020 100%);
    box-shadow: 0 0 0 10px rgba(98, 240, 255, .10), 0 0 35px rgba(87, 240, 255, .38);
    animation: tmapPulse 4s ease-in-out infinite;
}
.future-core-ring {
    position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(131, 237, 255, .16);
}
.future-core-ring.ring-a { animation: spinSlow 14s linear infinite; }
.future-core-ring.ring-b { inset: 16px; border-style: dashed; animation: spinReverse 18s linear infinite; }
.future-line {
    position: absolute; height: 2px; transform-origin: left center;
    background: linear-gradient(90deg, rgba(110, 231, 255, .0), rgba(110, 231, 255, .68), rgba(110, 231, 255, .0));
    box-shadow: 0 0 14px rgba(102, 233, 255, .36);
}
.line-1 { width: 170px; left: 45%; top: 27%; transform: rotate(-35deg); }
.line-2 { width: 185px; left: 22%; top: 37%; transform: rotate(16deg); }
.line-3 { width: 160px; left: 48%; top: 58%; transform: rotate(28deg); }
.line-4 { width: 130px; left: 28%; top: 67%; transform: rotate(-28deg); }
.future-pin {
    position: absolute;
    display: grid; justify-items: center; gap: 4px;
    color: #fff; font-size: 11px; font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,.35);
    animation: floatPin 3.8s ease-in-out infinite;
}
.future-pin i {
    position: relative;
    font-size: 24px;
    color: #7df5ff;
    filter: drop-shadow(0 6px 12px rgba(0, 245, 255, .35));
}
.future-pin i::after {
    content: '';
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(117, 245, 255, .36);
    animation: pinWave 2.6s ease-out infinite;
}
.pin-1 { left: 19%; top: 18%; animation-delay: .15s; }
.pin-2 { right: 17%; top: 20%; animation-delay: .45s; }
.pin-3 { right: 21%; bottom: 21%; animation-delay: .75s; }
.pin-4 { left: 18%; bottom: 14%; animation-delay: 1.05s; }
.pin-5 { left: 30%; top: 52%; animation-delay: 1.35s; }
.pin-6 { right: 34%; top: 40%; animation-delay: 1.65s; }
.future-data-chip {
    position: absolute; padding: 8px 12px; border-radius: 14px;
    font-size: 12px; font-weight: 800; color: #e6fbff;
    background: rgba(8, 18, 35, .55); border: 1px solid rgba(153, 229, 255, .18);
    box-shadow: 0 10px 22px rgba(0,0,0,.16);
}
.chip-1 { left: 12%; top: 48%; }
.chip-2 { right: 10%; top: 56%; }
.chip-3 { left: 36%; bottom: 8%; }
.future-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.future-stat-card {
    position: relative;
    overflow: hidden;
    min-height: 164px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 26px;
    background: linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,255,255,.76));
    box-shadow: 0 18px 40px rgba(7, 17, 35, .12);
    isolation: isolate;
}
.future-card-glow {
    position: absolute; inset: auto auto -35px -15px; width: 140px; height: 140px; border-radius: 50%;
    filter: blur(18px); opacity: .35;
}
.future-card-orb {
    position: absolute; right: -14px; top: -14px; width: 100px; height: 100px; border-radius: 50%; opacity: .18;
}
.future-stat-icon {
    width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 18px;
    font-size: 24px; color: #fff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .18);
}
.future-stat-card .public-stat-label {
    color: #243449; font-weight: 800; font-size: 22px; line-height: 1.15;
}
.future-stat-value { margin-top: 8px; }
.future-stat-value strong {
    font-size: 42px; font-weight: 900; line-height: 1; letter-spacing: -.04em;
}
.future-stat-value span { font-size: 24px; font-weight: 700; color: #5b6b85; }
.future-stat-card.total { border-color: rgba(0, 189, 214, .20); }
.future-stat-card.total .future-stat-icon { background: linear-gradient(135deg, #00bcd4, #2563eb); }
.future-stat-card.total .future-card-glow { background: rgba(0, 188, 212, .78); }
.future-stat-card.total .future-card-orb { background: #00bcd4; }
.future-stat-card.total .future-stat-value strong { color: #009cc6; }
.future-stat-card.person { border-color: rgba(46, 204, 113, .22); }
.future-stat-card.person .future-stat-icon { background: linear-gradient(135deg, #16a34a, #74ef9d); }
.future-stat-card.person .future-card-glow { background: rgba(22, 163, 74, .7); }
.future-stat-card.person .future-card-orb { background: #5cef91; }
.future-stat-card.person .future-stat-value strong { color: #18a64f; }
.future-stat-card.innovation { border-color: rgba(247, 181, 0, .24); }
.future-stat-card.innovation .future-stat-icon { background: linear-gradient(135deg, #ffb300, #ffd54f); }
.future-stat-card.innovation .future-card-glow { background: rgba(255, 179, 0, .72); }
.future-stat-card.innovation .future-card-orb { background: #ffd54f; }
.future-stat-card.innovation .future-stat-value strong { color: #eea700; }
.future-stat-card.place { border-color: rgba(255, 83, 112, .20); }
.future-stat-card.place .future-stat-icon { background: linear-gradient(135deg, #ff4d6d, #ff8fab); }
.future-stat-card.place .future-card-glow { background: rgba(255, 77, 109, .74); }
.future-stat-card.place .future-card-orb { background: #ff8fab; }
.future-stat-card.place .future-stat-value strong { color: #f64063; }
.future-visitor-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.future-visitor-card {
    display: flex; align-items: center; gap: 14px;
    min-height: 102px;
    padding: 16px 18px; border-radius: 22px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(165deg, rgba(8, 18, 35, .92), rgba(15, 42, 86, .84));
    box-shadow: 0 16px 34px rgba(3, 10, 26, .24);
}
.future-visitor-icon {
    flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px;
    font-size: 22px; color: #fff;
    box-shadow: inset 0 0 12px rgba(255,255,255,.10), 0 10px 22px rgba(0,0,0,.18);
}
.future-visitor-label { font-size: 15px; font-weight: 700; color: #d6e9ff; margin-bottom: 2px; }
.future-visitor-value strong { font-size: 34px; font-weight: 900; color: #fff; line-height: 1; }
.future-visitor-value span { font-size: 17px; font-weight: 700; color: #97b2d7; }
.visitor-today .future-visitor-icon { background: linear-gradient(135deg, #00c2ff, #3a7bff); }
.visitor-month .future-visitor-icon { background: linear-gradient(135deg, #00e676, #00b8d4); }
.visitor-total .future-visitor-icon { background: linear-gradient(135deg, #7c4dff, #00b0ff); }
.future-tab-nav {
    background: rgba(8, 19, 36, .80);
    border: 1px solid rgba(149, 221, 255, .12);
    box-shadow: 0 16px 30px rgba(5, 12, 24, .18);
}
.future-tab-nav a {
    color: #c8d7f2; font-weight: 800; border: 1px solid transparent;
}
.future-tab-nav a.active {
    color: #0d1728;
    background: linear-gradient(135deg, #ffffff, #bff5ff);
    box-shadow: 0 12px 22px rgba(32, 173, 255, .18);
}
.future-panel {
    background: linear-gradient(180deg, rgba(8, 18, 36, .92), rgba(12, 28, 56, .88));
    border: 1px solid rgba(145, 221, 255, .12);
    box-shadow: 0 18px 36px rgba(4, 12, 24, .24);
}
.future-section-head h2 { color: #f8fbff; }
.future-section-head p, .future-result-head p { color: #9ab0cf; }
.future-donut-wrap { min-height: 290px; }
.future-result-head h2 { color: #f8fbff; }
.future-resource-card {
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88));
    box-shadow: 0 18px 34px rgba(5, 12, 24, .14);
}
.future-resource-card:hover { transform: translateY(-6px); }
.public-footer-inner {
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88));
}
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spinReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes tmapPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(98, 240, 255, .10), 0 0 35px rgba(87, 240, 255, .38); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(98, 240, 255, .06), 0 0 42px rgba(87, 240, 255, .54); }
}
@keyframes floatPin {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes pinWave {
    0% { transform: translate(-50%, -50%) scale(.6); opacity: .85; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}
@media (max-width: 1199.98px) {
    .future-hero { grid-template-columns: 1fr; }
    .future-hero-visual { min-height: 280px; }
    .future-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .future-page { padding-left: 12px; padding-right: 12px; }
    .future-hero { padding: 18px 16px 16px; min-height: auto; border-radius: 24px; }
    .future-system-badge { font-size: 11px; }
    .future-title { font-size: 34px; }
    .future-subtitle { font-size: 18px; }
    .future-hero-meta { display: grid; gap: 8px; }
    .future-hero-meta span { font-size: 12px; }
    .future-actions .btn { width: 100%; }
    .future-hero-visual { min-height: 240px; }
    .future-data-chip { display: none; }
    .future-stat-grid,
    .future-visitor-strip,
    .future-chart-grid { grid-template-columns: 1fr; }
    .future-stat-card { min-height: 144px; }
    .future-stat-card .public-stat-label { font-size: 20px; }
    .future-stat-value strong { font-size: 36px; }
    .future-stat-value span { font-size: 20px; }
    .future-visitor-value strong { font-size: 30px; }
    .pin-1 { left: 12%; top: 12%; }
    .pin-2 { right: 10%; top: 12%; }
    .pin-3 { right: 12%; bottom: 14%; }
    .pin-4 { left: 12%; bottom: 10%; }
}

/* ===== V15 HERO MAP REFINEMENT ===== */
.future-hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
    min-height: 324px;
    padding: 26px 26px 22px;
}
.future-hero-content {
    padding: 4px 0;
}
.future-system-badge {
    margin-bottom: 18px;
}
.future-title {
    margin-bottom: 10px;
    line-height: 1.05;
}
.future-subtitle {
    margin-bottom: 20px;
    line-height: 1.38;
    letter-spacing: -.015em;
}
.future-hero-meta {
    gap: 12px;
    margin-bottom: 22px;
}
.future-hero-meta span {
    line-height: 1.25;
}
.prachuap-map-panel {
    min-height: 286px;
    background:
        radial-gradient(circle at 50% 42%, rgba(60, 224, 255, .20), transparent 33%),
        linear-gradient(160deg, rgba(255,255,255,.105), rgba(255,255,255,.035));
}
.prachuap-map-panel::before {
    inset: 5% 7%;
    border-radius: 28px;
    background:
        linear-gradient(rgba(120, 223, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 223, 255, .05) 1px, transparent 1px),
        radial-gradient(circle at 50% 48%, rgba(103, 232, 249, .18), transparent 44%);
    background-size: 24px 24px, 24px 24px, auto;
    filter: none;
    opacity: 1;
}
.map-holo-layer {
    position: absolute;
    inset: 18px;
    border-radius: 24px;
    border: 1px solid rgba(120, 223, 255, .14);
    background:
        radial-gradient(circle at 48% 48%, rgba(89, 213, 255, .10), transparent 34%),
        linear-gradient(145deg, rgba(87, 196, 255, .08), rgba(124, 77, 255, .035));
    box-shadow: inset 0 0 32px rgba(120, 223, 255, .08), 0 18px 40px rgba(3, 10, 24, .18);
}
.prachuap-map-svg {
    position: absolute;
    width: min(42%, 190px);
    height: 86%;
    left: 41%;
    top: 7%;
    overflow: visible;
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .24));
}
.pk-map-shadow {
    fill: none;
    stroke: rgba(10, 18, 35, .42);
    stroke-width: 42;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pk-map-body {
    fill: none;
    stroke: url(#pkMapGradient);
    stroke-width: 34;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: url(#pkGlow);
}
.pk-map-coast {
    fill: none;
    stroke: rgba(190, 248, 255, .55);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 16 12;
    animation: coastFlow 9s linear infinite;
}
.pk-map-network {
    fill: none;
    stroke: rgba(137, 238, 255, .62);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 6 10;
    animation: networkFlow 6s linear infinite;
}
.district-pin {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px 5px 6px;
    border-radius: 999px;
    color: #effbff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    background: rgba(6, 18, 36, .62);
    border: 1px solid rgba(132, 235, 255, .20);
    box-shadow: 0 12px 22px rgba(0,0,0,.18), inset 0 0 14px rgba(255,255,255,.045);
    transform: translate(-50%, -50%);
    animation: districtFloat 3.8s ease-in-out infinite;
    white-space: nowrap;
}
.district-pin i {
    position: relative;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: #76f6ff;
    font-size: 18px;
    filter: drop-shadow(0 0 10px rgba(117, 245, 255, .55));
}
.district-pin i::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(117, 245, 255, .40);
    animation: pinWave 2.8s ease-out infinite;
}
.district-pin.huahin { left: 52%; top: 16%; animation-delay: .1s; }
.district-pin.pranburi { left: 67%; top: 25%; animation-delay: .25s; }
.district-pin.samroiyod { left: 36%; top: 34%; animation-delay: .4s; }
.district-pin.kuiburi { left: 61%; top: 45%; animation-delay: .55s; }
.district-pin.mueang { left: 34%; top: 55%; animation-delay: .70s; }
.district-pin.tapsakae { left: 64%; top: 66%; animation-delay: .85s; }
.district-pin.bangsaphan { left: 35%; top: 76%; animation-delay: 1s; }
.district-pin.bangsaphannoi { left: 63%; top: 87%; animation-delay: 1.15s; }
.future-data-chip,
.future-core-node,
.future-line {
    display: none !important;
}
.future-visitor-strip.compact-visits {
    margin-top: 18px;
    margin-bottom: 4px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.compact-visits .future-visitor-card {
    min-height: 74px;
    padding: 11px 13px;
    border-radius: 18px;
    background: linear-gradient(165deg, rgba(8, 18, 35, .86), rgba(15, 42, 86, .75));
}
.compact-visits .future-visitor-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    font-size: 17px;
}
.compact-visits .future-visitor-label {
    font-size: 12px;
    margin-bottom: 1px;
}
.compact-visits .future-visitor-value strong {
    font-size: 22px;
}
.compact-visits .future-visitor-value span {
    font-size: 12px;
}
.future-chart-grid {
    grid-template-columns: .95fr 1.05fr;
}
.future-panel {
    padding: 13px;
}
.future-section-head h2 {
    font-size: 16px;
}
.future-section-head p {
    font-size: 11px;
}
.future-donut-wrap {
    min-height: 240px;
    height: 250px;
}
.future-chart-grid canvas#publicSchoolChart {
    max-height: 190px !important;
}
@keyframes coastFlow {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -56; }
}
@keyframes networkFlow {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -64; }
}
@keyframes districtFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-5px); }
}
@media (max-width: 1199.98px) {
    .future-hero { grid-template-columns: 1fr; }
    .prachuap-map-svg { left: 42%; width: min(36%, 180px); }
    .district-pin.huahin { left: 45%; top: 16%; }
    .district-pin.pranburi { left: 62%; top: 25%; }
    .district-pin.samroiyod { left: 35%; top: 34%; }
    .district-pin.kuiburi { left: 58%; top: 45%; }
    .district-pin.mueang { left: 33%; top: 55%; }
    .district-pin.tapsakae { left: 60%; top: 66%; }
    .district-pin.bangsaphan { left: 35%; top: 76%; }
    .district-pin.bangsaphannoi { left: 61%; top: 87%; }
}
@media (max-width: 767.98px) {
    .future-title { font-size: 31px; }
    .future-subtitle { font-size: 16px; line-height: 1.35; }
    .future-nowrap { white-space: normal; }
    .prachuap-map-panel { min-height: 330px; }
    .prachuap-map-svg { width: 42%; left: 38%; top: 6%; height: 88%; }
    .district-pin { font-size: 10px; padding: 4px 7px 4px 5px; }
    .district-pin i { width: 19px; height: 19px; font-size: 15px; }
    .district-pin.huahin { left: 48%; top: 13%; }
    .district-pin.pranburi { left: 66%; top: 23%; }
    .district-pin.samroiyod { left: 31%; top: 33%; }
    .district-pin.kuiburi { left: 64%; top: 43%; }
    .district-pin.mueang { left: 35%; top: 54%; }
    .district-pin.tapsakae { left: 63%; top: 65%; }
    .district-pin.bangsaphan { left: 33%; top: 76%; }
    .district-pin.bangsaphannoi { left: 62%; top: 88%; }
    .future-visitor-strip.compact-visits { grid-template-columns: 1fr; }
    .future-donut-wrap { min-height: 220px; height: 230px; }
}

/* ===== V16 RESPONSIVE FIT FOR MOBILE / TABLET / IPAD ===== */
html, body { max-width: 100%; overflow-x: hidden; }
.public-home * { -webkit-tap-highlight-color: transparent; }

@media (min-width: 768px) and (max-width: 1199.98px) {
    .public-navbar.future-navbar {
        padding: 10px 16px;
        gap: 10px;
    }
    .future-brand .public-brand-text {
        max-width: 620px;
        font-size: 15px;
        line-height: 1.22;
    }
    .future-page {
        padding: 14px 16px 18px;
    }
    .future-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 22px;
        gap: 16px;
        border-radius: 26px;
    }
    .future-hero-content {
        max-width: 100%;
    }
    .future-title {
        font-size: clamp(34px, 6.5vw, 52px);
    }
    .future-subtitle {
        font-size: clamp(18px, 3.2vw, 25px);
        line-height: 1.34;
    }
    .future-hero-meta {
        gap: 8px;
        margin-bottom: 16px;
    }
    .future-hero-meta span {
        font-size: 12px;
        padding: 7px 10px;
    }
    .future-actions .btn {
        min-height: 40px;
        padding: 9px 15px;
        font-size: 13px;
    }
    .prachuap-map-panel {
        width: 100%;
        min-height: 340px;
        border-radius: 24px;
    }
    .map-holo-layer { inset: 14px; }
    .prachuap-map-svg {
        width: min(30%, 165px);
        height: 86%;
        left: 43%;
        top: 7%;
    }
    .district-pin {
        font-size: 10px;
        padding: 4px 8px 4px 5px;
        gap: 5px;
        z-index: 3;
    }
    .district-pin i {
        width: 19px;
        height: 19px;
        font-size: 15px;
    }
    .district-pin.huahin { left: 43%; top: 14%; }
    .district-pin.pranburi { left: 62%; top: 24%; }
    .district-pin.samroiyod { left: 33%; top: 33%; }
    .district-pin.kuiburi { left: 59%; top: 43%; }
    .district-pin.mueang { left: 32%; top: 54%; }
    .district-pin.tapsakae { left: 60%; top: 65%; }
    .district-pin.bangsaphan { left: 34%; top: 76%; }
    .district-pin.bangsaphannoi { left: 60%; top: 88%; }

    .future-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .future-stat-card {
        min-height: 132px;
        padding: 15px;
        border-radius: 22px;
    }
    .future-stat-icon {
        width: 44px;
        height: 44px;
        border-radius: 15px;
        font-size: 19px;
        margin-bottom: 10px;
    }
    .future-stat-card .public-stat-label { font-size: 17px; }
    .future-stat-value strong { font-size: 32px; }
    .future-stat-value span { font-size: 17px; }

    .future-chart-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .future-panel { padding: 13px; border-radius: 18px; }
    .future-donut-wrap { height: 225px; min-height: 225px; }
    .future-chart-grid canvas#publicSchoolChart { max-height: 155px !important; }
    .public-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .public-filter-actions { align-self: end; }
    .future-resource-grid, .public-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .compact-visits.future-visitor-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
    }
    .compact-visits .future-visitor-card {
        min-height: 64px;
        padding: 9px 11px;
    }
}

@media (max-width: 767.98px) {
    .public-navbar.future-navbar {
        position: sticky;
        align-items: stretch;
        padding: 9px 10px;
        gap: 8px;
    }
    .future-brand {
        width: 100%;
        align-items: flex-start;
    }
    .future-brand .public-brand-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 13px;
        font-size: 15px;
    }
    .future-brand .public-brand-text {
        font-size: 12.5px;
        line-height: 1.25;
        max-width: calc(100vw - 72px);
    }
    .public-nav-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
    }
    .public-nav-actions .btn {
        width: 100%;
        min-height: 36px;
        font-size: 12px;
    }
    .future-page {
        padding: 10px 9px 18px;
    }
    .future-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 15px 13px 13px;
        gap: 12px;
        border-radius: 21px;
    }
    .future-system-badge {
        margin-bottom: 10px;
        padding: 6px 10px;
        font-size: 10px;
        letter-spacing: .04em;
        white-space: normal;
    }
    .future-title {
        font-size: clamp(29px, 11vw, 38px);
        line-height: 1;
        margin-bottom: 8px;
    }
    .future-subtitle {
        font-size: 15px;
        line-height: 1.42;
        margin-bottom: 12px;
    }
    .future-nowrap { white-space: nowrap; }
    .future-hero-meta {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
        margin-bottom: 12px;
    }
    .future-hero-meta span {
        font-size: 11px;
        line-height: 1.28;
        padding: 7px 9px;
        border-radius: 14px;
    }
    .future-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .future-actions .btn {
        width: 100%;
        min-height: 38px;
        padding: 8px 12px;
        font-size: 12.5px;
    }

    .prachuap-map-panel {
        min-height: 315px;
        border-radius: 20px;
        overflow: hidden;
    }
    .map-holo-layer {
        inset: 10px;
        border-radius: 18px;
    }
    .prachuap-map-svg {
        width: 38%;
        max-width: 145px;
        height: 86%;
        left: 41%;
        top: 7%;
    }
    .district-pin {
        gap: 3px;
        padding: 3px 5px 3px 4px;
        font-size: 8.7px;
        line-height: 1;
        border-radius: 999px;
        max-width: 122px;
        z-index: 4;
    }
    .district-pin i {
        width: 16px;
        height: 16px;
        font-size: 13px;
    }
    .district-pin i::after {
        width: 22px;
        height: 22px;
    }
    .district-pin.huahin { left: 45%; top: 13%; }
    .district-pin.pranburi { left: 66%; top: 23%; }
    .district-pin.samroiyod { left: 29%; top: 32%; }
    .district-pin.kuiburi { left: 64%; top: 43%; }
    .district-pin.mueang { left: 33%; top: 54%; }
    .district-pin.tapsakae { left: 64%; top: 65%; }
    .district-pin.bangsaphan { left: 32%; top: 76%; }
    .district-pin.bangsaphannoi { left: 61%; top: 88%; }

    .future-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .future-stat-card {
        min-height: 116px;
        padding: 11px;
        border-radius: 18px;
    }
    .future-card-orb { width: 72px; height: 72px; }
    .future-card-glow { width: 105px; height: 105px; }
    .future-stat-icon {
        width: 37px;
        height: 37px;
        border-radius: 13px;
        font-size: 16px;
        margin-bottom: 8px;
    }
    .future-stat-card .public-stat-label {
        font-size: 14px;
        line-height: 1.22;
    }
    .future-stat-value { margin-top: 6px; }
    .future-stat-value strong { font-size: 27px; }
    .future-stat-value span { font-size: 13px; }

    .future-tab-nav {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 7px;
        padding: 7px;
        border-radius: 18px;
    }
    .future-tab-nav a {
        justify-content: center;
        min-height: 37px;
        font-size: 12.5px;
        padding: 8px 12px;
    }
    .future-chart-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .future-panel {
        padding: 10px;
        border-radius: 17px;
    }
    .future-section-head h2 { font-size: 14px; }
    .future-section-head p { font-size: 10.5px; }
    .future-donut-wrap { height: 205px; min-height: 205px; }
    .future-chart-grid canvas#publicSchoolChart { max-height: 135px !important; }

    .public-filter-form {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .public-filter-form label { font-size: 12px; margin-bottom: 4px; }
    .public-filter-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .future-result-head h2 { font-size: 17px; }
    .future-result-head p { font-size: 12px; }
    .future-resource-grid, .public-resource-grid { grid-template-columns: 1fr; }
    .public-card-cover { height: 160px; }
    .public-card-body h3 { font-size: 15px; }
    .public-card-body p { font-size: 12px; min-height: auto; }
    .public-card-meta { font-size: 11.5px; }

    .compact-visits.future-visitor-strip {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 12px;
    }
    .compact-visits .future-visitor-card {
        min-height: 56px;
        padding: 8px 10px;
        border-radius: 15px;
    }
    .compact-visits .future-visitor-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 14px;
    }
    .compact-visits .future-visitor-label { font-size: 11px; }
    .compact-visits .future-visitor-value strong { font-size: 19px; }
    .compact-visits .future-visitor-value span { font-size: 11px; }
    .public-footer { padding-bottom: 16px; }
    .public-footer-inner { font-size: 11.5px; border-radius: 14px; }
}

@media (max-width: 420px) {
    .future-page { padding-left: 7px; padding-right: 7px; }
    .future-title { font-size: 28px; }
    .future-subtitle { font-size: 14px; }
    .future-nowrap { white-space: normal; }
    .prachuap-map-panel { min-height: 300px; }
    .prachuap-map-svg { width: 36%; left: 41%; }
    .district-pin span { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
    .district-pin.bangsaphannoi span { max-width: 82px; }
    .district-pin { font-size: 8px; }
    .district-pin.huahin { left: 44%; top: 12%; }
    .district-pin.pranburi { left: 66%; top: 22%; }
    .district-pin.samroiyod { left: 28%; top: 31%; }
    .district-pin.kuiburi { left: 65%; top: 42%; }
    .district-pin.mueang { left: 32%; top: 54%; }
    .district-pin.tapsakae { left: 65%; top: 65%; }
    .district-pin.bangsaphan { left: 31%; top: 76%; }
    .district-pin.bangsaphannoi { left: 61%; top: 88%; }
    .future-stat-grid { gap: 7px; }
    .future-stat-card { padding: 10px 8px; }
    .future-stat-card .public-stat-label { font-size: 13px; }
    .future-stat-value strong { font-size: 25px; }
}

/* ===== V17 REAL PRACHUAP NEON OUTLINE MAP ===== */
.prachuap-map-panel {
    min-height: 310px;
    background:
        radial-gradient(circle at 46% 50%, rgba(91, 220, 255, .22), transparent 35%),
        radial-gradient(circle at 66% 24%, rgba(124, 92, 255, .14), transparent 28%),
        linear-gradient(160deg, rgba(255,255,255,.105), rgba(255,255,255,.035));
}
.prachuap-map-panel::before {
    inset: 5% 6%;
    border-radius: 28px;
    background:
        linear-gradient(rgba(134, 235, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(134, 235, 255, .055) 1px, transparent 1px),
        radial-gradient(circle at 50% 48%, rgba(103, 232, 249, .17), transparent 44%);
    background-size: 22px 22px, 22px 22px, auto;
}
.map-holo-layer {
    inset: 16px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 48% 48%, rgba(108, 245, 255, .14), transparent 34%),
        linear-gradient(145deg, rgba(87, 196, 255, .09), rgba(124, 77, 255, .035));
}
.prachuap-map-svg.real-prachuap-outline {
    width: min(44%, 210px);
    height: 91%;
    left: 41%;
    top: 4.5%;
    overflow: visible;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.28));
}
.pk-map-aura {
    fill: none;
    stroke: rgba(100, 231, 255, .28);
    stroke-width: 22;
    filter: url(#pkSoftGlow);
}
.pk-map-fill {
    fill: url(#pkMapInner);
    stroke: rgba(128, 245, 255, .18);
    stroke-width: 1.2;
}
.pk-map-outline {
    fill: none;
    stroke: url(#pkMapGradient);
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: url(#pkGlow);
}
.pk-district-line {
    fill: none;
    stroke: rgba(184, 251, 255, .68);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 8 10;
    filter: drop-shadow(0 0 7px rgba(115,245,255,.55));
    animation: districtLineFlow 6s linear infinite;
}
.pk-map-spine {
    fill: none;
    stroke: rgba(107, 241, 255, .64);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: 5 9;
    filter: drop-shadow(0 0 8px rgba(111, 245, 255, .52));
    animation: networkFlow 7s linear infinite;
}
.pk-map-coast {
    fill: none;
    stroke: rgba(255, 255, 255, .58);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 12 10;
    filter: drop-shadow(0 0 8px rgba(191, 248, 255, .48));
    animation: coastFlow 9s linear infinite;
}
.pk-map-network {
    fill: none;
    stroke: rgba(137, 238, 255, .62);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 6 12;
    filter: drop-shadow(0 0 8px rgba(137, 238, 255, .45));
    animation: networkFlow 6s linear infinite;
}
.district-pin {
    z-index: 4;
    background: rgba(3, 14, 31, .70);
    border-color: rgba(128, 245, 255, .25);
    box-shadow: 0 12px 24px rgba(0,0,0,.22), inset 0 0 16px rgba(115, 245, 255, .055);
}
.district-pin i {
    color: #83fbff;
    filter: drop-shadow(0 0 11px rgba(117,245,255,.76));
}
.district-pin.huahin { left: 49%; top: 14%; }
.district-pin.pranburi { left: 65%; top: 24%; }
.district-pin.samroiyod { left: 31%; top: 34%; }
.district-pin.kuiburi { left: 63%; top: 44%; }
.district-pin.mueang { left: 32%; top: 55%; }
.district-pin.tapsakae { left: 64%; top: 66%; }
.district-pin.bangsaphan { left: 31%; top: 77%; }
.district-pin.bangsaphannoi { left: 62%; top: 89%; }
@keyframes districtLineFlow {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -72; }
}
@media (max-width: 1199.98px) {
    .prachuap-map-svg.real-prachuap-outline { width: min(35%, 205px); left: 42%; height: 90%; top: 5%; }
    .district-pin.huahin { left: 45%; top: 13%; }
    .district-pin.pranburi { left: 64%; top: 23%; }
    .district-pin.samroiyod { left: 32%; top: 33%; }
    .district-pin.kuiburi { left: 61%; top: 43%; }
    .district-pin.mueang { left: 33%; top: 55%; }
    .district-pin.tapsakae { left: 62%; top: 66%; }
    .district-pin.bangsaphan { left: 33%; top: 77%; }
    .district-pin.bangsaphannoi { left: 61%; top: 89%; }
}
@media (max-width: 767.98px) {
    .prachuap-map-panel { min-height: 345px; }
    .prachuap-map-svg.real-prachuap-outline { width: min(37%, 155px); left: 41%; top: 5%; height: 89%; }
    .district-pin { font-size: 8.5px; padding: 3px 6px 3px 4px; gap: 4px; }
    .district-pin i { width: 18px; height: 18px; font-size: 14px; }
    .district-pin span { max-width: 78px; overflow: hidden; text-overflow: ellipsis; }
    .district-pin.bangsaphannoi span { max-width: 92px; }
    .district-pin.huahin { left: 43%; top: 12%; }
    .district-pin.pranburi { left: 65%; top: 22%; }
    .district-pin.samroiyod { left: 28%; top: 32%; }
    .district-pin.kuiburi { left: 64%; top: 43%; }
    .district-pin.mueang { left: 31%; top: 55%; }
    .district-pin.tapsakae { left: 65%; top: 66%; }
    .district-pin.bangsaphan { left: 30%; top: 77%; }
    .district-pin.bangsaphannoi { left: 62%; top: 89%; }
}

/* ===== V18 REALER PRACHUAP MAP + NON-OVERLAP HERO TEXT + HORIZONTAL CHART ===== */
.future-subtitle {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 18px;
    line-height: 1.34;
}
.future-subtitle-line {
    display: block;
}
.future-nowrap {
    display: inline-block;
    white-space: nowrap;
}
.future-actions .future-action-secondary {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(0, 178, 255, .96), rgba(84, 96, 255, .95)) !important;
    border-color: rgba(155, 234, 255, .48) !important;
    box-shadow: 0 14px 30px rgba(0, 178, 255, .28), inset 0 1px 0 rgba(255,255,255,.18);
}
.future-actions .future-action-secondary:hover {
    color: #ffffff !important;
    box-shadow: 0 18px 38px rgba(0, 178, 255, .38), 0 0 18px rgba(124, 245, 255, .30);
}
.province-map-stage {
    display: grid;
    place-items: center;
    min-height: 350px;
    padding: 16px;
    background:
        radial-gradient(circle at 48% 48%, rgba(80, 236, 255, .26), transparent 30%),
        radial-gradient(circle at 67% 22%, rgba(124, 92, 255, .18), transparent 28%),
        linear-gradient(160deg, rgba(255,255,255,.115), rgba(255,255,255,.035));
}
.province-map-stage::before {
    inset: 5% 5%;
    border-radius: 28px;
    background:
        linear-gradient(rgba(134, 235, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(134, 235, 255, .055) 1px, transparent 1px),
        radial-gradient(circle at 50% 48%, rgba(103, 232, 249, .18), transparent 44%);
    background-size: 20px 20px, 20px 20px, auto;
}
.province-map-stage .map-holo-layer {
    position: absolute;
    inset: 16px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 48% 50%, rgba(108, 245, 255, .12), transparent 34%),
        linear-gradient(145deg, rgba(87, 196, 255, .09), rgba(124, 77, 255, .04));
    border: 1px solid rgba(130, 225, 255, .10);
}
.province-neon-map {
    position: relative;
    z-index: 2;
    width: min(96%, 610px);
    height: 330px;
    overflow: visible;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.26));
}
.province-shadow {
    fill: none;
    stroke: rgba(85, 230, 255, .22);
    stroke-width: 19;
    filter: url(#provinceSoftGlow);
}
.province-segment {
    stroke: rgba(223, 252, 255, .70);
    stroke-width: 2.2;
    stroke-linejoin: round;
    filter: url(#provinceGlow);
    transition: filter .25s ease, opacity .25s ease;
}
.seg-1, .seg-4, .seg-7 { fill: url(#provinceSegmentA); }
.seg-2, .seg-5, .seg-8 { fill: url(#provinceSegmentB); }
.seg-3, .seg-6 { fill: url(#provinceSegmentC); }
.province-segment:nth-child(even) { opacity: .86; }
.province-segment:nth-child(odd) { opacity: .96; }
.province-outline-main {
    fill: none;
    stroke: #98f6ff;
    stroke-width: 4.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: url(#provinceGlow);
}
.province-spine {
    fill: none;
    stroke: rgba(255,255,255,.60);
    stroke-width: 1.7;
    stroke-dasharray: 7 8;
    stroke-linecap: round;
    filter: drop-shadow(0 0 7px rgba(145,245,255,.54));
    animation: networkFlow 8s linear infinite;
}
.province-network-line {
    fill: none;
    stroke: rgba(126, 237, 255, .34);
    stroke-width: 1.6;
    stroke-dasharray: 6 10;
    stroke-linecap: round;
    animation: networkFlow 7s linear infinite;
}
.district-callout line {
    stroke: rgba(132, 242, 255, .46);
    stroke-width: 1.8;
    stroke-dasharray: 5 8;
    animation: networkFlow 7s linear infinite;
}
.district-callout rect {
    fill: rgba(3, 14, 31, .78);
    stroke: rgba(122, 237, 255, .28);
    stroke-width: 1;
    filter: drop-shadow(0 9px 16px rgba(0,0,0,.26));
}
.district-callout circle {
    fill: #83fbff;
    filter: drop-shadow(0 0 8px rgba(117,245,255,.90));
    animation: calloutPulse 2.8s ease-in-out infinite;
}
.district-callout text {
    fill: #ffffff;
    font-family: 'Sarabun', sans-serif;
    font-size: 13px;
    font-weight: 800;
    paint-order: stroke;
    stroke: rgba(5, 15, 30, .58);
    stroke-width: 2px;
    stroke-linejoin: round;
}
@keyframes calloutPulse {
    0%, 100% { opacity: .85; transform: scale(1); transform-origin: center; }
    50% { opacity: 1; transform: scale(1.24); transform-origin: center; }
}
.future-chart-grid .future-panel:nth-child(2) {
    min-height: 245px;
}
.future-chart-grid .future-panel:nth-child(2) canvas#publicSchoolChart {
    height: 170px !important;
    max-height: 170px !important;
}
.compact-visits.future-visitor-strip {
    margin-top: 16px;
}
@media (max-width: 1199.98px) {
    .province-map-stage { min-height: 360px; }
    .province-neon-map { height: 340px; width: min(98%, 620px); }
    .future-chart-grid .future-panel:nth-child(2) { min-height: 250px; }
}
@media (max-width: 767.98px) {
    .future-subtitle {
        gap: 7px;
        margin-top: 10px;
        margin-bottom: 14px;
        line-height: 1.32;
    }
    .future-nowrap { white-space: nowrap; }
    .province-map-stage {
        min-height: 390px;
        padding: 10px;
        overflow: hidden;
    }
    .province-neon-map {
        width: 100%;
        height: 380px;
        transform: scale(.92);
    }
    .district-callout text { font-size: 11px; }
    .district-callout rect { opacity: .96; }
    .future-chart-grid .future-panel:nth-child(2) {
        min-height: 245px;
    }
    .future-chart-grid .future-panel:nth-child(2) canvas#publicSchoolChart {
        height: 165px !important;
        max-height: 165px !important;
    }
}
@media (max-width: 420px) {
    .future-nowrap { white-space: normal; }
    .province-map-stage { min-height: 360px; }
    .province-neon-map {
        height: 360px;
        transform: scale(.88);
    }
    .district-callout text { font-size: 10px; }
}

/* ===== V19 PROFESSIONAL FIX: TRUE PIN MAP + CLEAR HERO TEXT + CLEAR BUTTON STATES ===== */
.single-thai-line {
    display: block;
    margin-top: 14px;
    white-space: nowrap;
    font-size: clamp(18px, 2.2vw, 26px) !important;
    line-height: 1.55 !important;
    letter-spacing: -.015em;
    color: rgba(245, 250, 255, .96);
    text-shadow: 0 6px 18px rgba(0, 0, 0, .28), 0 0 20px rgba(100, 220, 255, .20);
}
.future-title {
    margin-bottom: 0 !important;
    line-height: .98 !important;
}
.future-hero-meta {
    margin-top: 14px;
}
.future-actions {
    margin-top: 18px;
}
.future-actions .future-action-primary {
    color: #06152a !important;
    background: linear-gradient(135deg, #ffffff 0%, #d8fbff 48%, #8eeaff 100%) !important;
    border: 1px solid rgba(255,255,255,.80) !important;
    box-shadow: 0 14px 28px rgba(0, 204, 255, .20), inset 0 1px 0 rgba(255,255,255,.88) !important;
}
.future-actions .future-action-secondary {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 55%, #4f46e5 100%) !important;
    border: 1px solid rgba(164, 232, 255, .58) !important;
    box-shadow: 0 14px 30px rgba(37, 99, 235, .34), 0 0 20px rgba(56, 189, 248, .22) !important;
}
.future-actions .future-action-secondary i,
.future-actions .future-action-primary i { opacity: 1; }
.future-actions .btn:hover {
    filter: saturate(1.08) brightness(1.05);
    transform: translateY(-2px) scale(1.015);
}
.future-tab-nav {
    display: inline-flex;
    gap: 8px;
    padding: 7px;
    border-radius: 999px;
    background: rgba(5, 16, 34, .88) !important;
    border: 1px solid rgba(98, 223, 255, .20) !important;
    box-shadow: 0 16px 32px rgba(2, 8, 23, .28), inset 0 0 24px rgba(59, 130, 246, .10) !important;
}
.future-tab-nav a {
    color: #f8fbff !important;
    background: linear-gradient(135deg, rgba(18, 42, 83, .96), rgba(15, 23, 42, .94)) !important;
    border: 1px solid rgba(148, 219, 255, .22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.future-tab-nav a.active {
    color: #051326 !important;
    background: linear-gradient(135deg, #ffffff 0%, #c8f7ff 52%, #6de7ff 100%) !important;
    border-color: rgba(255,255,255,.84) !important;
    box-shadow: 0 12px 26px rgba(6, 182, 212, .22), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.future-tab-nav a:not(.active):hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(14, 116, 144, .96), rgba(30, 64, 175, .96)) !important;
    border-color: rgba(125, 245, 255, .34) !important;
}
.province-neon-map {
    overflow: visible;
}
.district-pin-callouts .map-district {
    animation: calloutFadeIn .9s ease both;
}
.district-pin-callouts .map-district.huahin { animation-delay: .05s; }
.district-pin-callouts .map-district.pranburi { animation-delay: .12s; }
.district-pin-callouts .map-district.samroiyod { animation-delay: .19s; }
.district-pin-callouts .map-district.kuiburi { animation-delay: .26s; }
.district-pin-callouts .map-district.mueang { animation-delay: .33s; }
.district-pin-callouts .map-district.tapsakae { animation-delay: .40s; }
.district-pin-callouts .map-district.bangsaphan { animation-delay: .47s; }
.district-pin-callouts .map-district.bangsaphannoi { animation-delay: .54s; }
.pin-leader {
    stroke: rgba(127, 245, 255, .72);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: 4 7;
    filter: drop-shadow(0 0 6px rgba(92, 234, 255, .62));
    animation: districtLineFlow 5.5s linear infinite;
}
.neon-map-pin {
    transform-box: fill-box;
    transform-origin: center bottom;
    filter: drop-shadow(0 8px 14px rgba(0, 225, 255, .48));
    animation: truePinFloat 3.2s ease-in-out infinite;
}
.pin-body {
    fill: url(#provinceSegmentA);
    stroke: rgba(255, 255, 255, .88);
    stroke-width: 1.8;
}
.pin-core {
    fill: #ffffff;
    stroke: rgba(9, 23, 44, .28);
    stroke-width: 1.2;
}
.neon-map-pin::after { content: none; }
.district-label-bg {
    fill: rgba(6, 18, 38, .86);
    stroke: rgba(137, 242, 255, .34);
    stroke-width: 1;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .32));
}
.district-label-text {
    fill: #f8fbff;
    font-family: 'Sarabun', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-shadow: 0 0 8px rgba(90, 237, 255, .38);
}
.province-segment {
    stroke-width: 1.45 !important;
}
.province-outline-main {
    stroke-width: 4.2 !important;
}
.province-spine {
    stroke-width: 1.4 !important;
    opacity: .62;
}
.province-network-line {
    opacity: .38;
}
.future-chart-grid .future-panel:nth-child(2) {
    min-height: 280px;
}
.future-chart-grid .future-panel:nth-child(2) canvas {
    max-height: 220px;
}
@keyframes truePinFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.04); }
}
@keyframes calloutFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1199.98px) {
    .single-thai-line {
        white-space: normal;
        font-size: clamp(17px, 3vw, 23px) !important;
    }
}
@media (max-width: 767.98px) {
    .single-thai-line {
        margin-top: 10px;
        font-size: 16px !important;
        line-height: 1.45 !important;
        white-space: normal;
    }
    .future-tab-nav {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        border-radius: 20px;
    }
    .future-tab-nav a {
        justify-content: center;
        border-radius: 16px !important;
    }
    .pin-leader { stroke-width: 1.4; }
    .district-label-bg { opacity: .94; }
    .district-label-text { font-size: 10.5px; }
    .neon-map-pin { transform: scale(.82); }
    .province-outline-main { stroke-width: 3.4 !important; }
}
@media (max-width: 420px) {
    .district-label-text { font-size: 9.8px; }
    .future-actions .btn { min-height: 40px; font-size: 13px; }
}

/* ===== V20 REAL PRACHUAP OUTLINE MAP ===== */
.future-hero-visual.province-map-stage {
    min-height: 430px;
    padding: 12px;
}
.province-map-stage .map-holo-layer {
    inset: 14px;
    border-radius: 28px;
    background:
        linear-gradient(rgba(132, 235, 255, .065) 1px, transparent 1px),
        linear-gradient(90deg, rgba(132, 235, 255, .065) 1px, transparent 1px),
        radial-gradient(circle at 58% 44%, rgba(88, 220, 255, .20), transparent 32%),
        linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    background-size: 18px 18px, 18px 18px, auto, auto;
    border: 1px solid rgba(134, 236, 255, .14);
    box-shadow: inset 0 0 40px rgba(92, 213, 255, .10), 0 20px 42px rgba(0,0,0,.12);
}
.province-neon-map.real-pk-map {
    position: relative;
    z-index: 2;
    width: min(100%, 650px);
    height: 410px;
    display: block;
    margin: 0 auto;
    overflow: visible;
}
.pk-map-shadow {
    fill: rgba(58, 220, 255, .22);
    stroke: rgba(112, 239, 255, .08);
    stroke-width: 8;
    filter: url(#pkMapSoftGlow);
}
.pk-segment {
    stroke: rgba(214, 252, 255, .78);
    stroke-width: 1.7;
    stroke-linejoin: round;
    filter: url(#pkMapGlow);
}
.pk-s1, .pk-s4, .pk-s7 { fill: url(#pkSegA); }
.pk-s2, .pk-s5, .pk-s8 { fill: url(#pkSegB); }
.pk-s3, .pk-s6 { fill: url(#pkSegC); }
.pk-s1 { opacity: .98; }
.pk-s2 { opacity: .90; }
.pk-s3 { opacity: .94; }
.pk-s4 { opacity: .88; }
.pk-s5 { opacity: .95; }
.pk-s6 { opacity: .88; }
.pk-s7 { opacity: .96; }
.pk-s8 { opacity: .86; }
.pk-outline {
    fill: none;
    stroke: rgba(145, 252, 255, .98);
    stroke-width: 4.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: url(#pkMapGlow);
}
.pk-coast {
    fill: none;
    stroke: rgba(255, 255, 255, .52);
    stroke-width: 1.3;
    stroke-dasharray: 5 7;
    stroke-linecap: round;
}
.pk-spine {
    fill: none;
    stroke: rgba(255, 255, 255, .48);
    stroke-width: 1.4;
    stroke-dasharray: 4 8;
    stroke-linecap: round;
}
.pk-route {
    fill: none;
    stroke: rgba(178, 245, 255, .78);
    stroke-width: 1.2;
    stroke-dasharray: 8 10;
    stroke-linecap: round;
    animation: districtLineFlow 5.8s linear infinite;
}
.pk-callouts line {
    stroke: rgba(135, 238, 255, .52);
    stroke-width: 1.6;
    stroke-dasharray: 6 6;
    stroke-linecap: round;
    animation: districtLineFlow 6s linear infinite;
}
.pk-callouts rect {
    fill: rgba(8, 22, 42, .88);
    stroke: rgba(139, 241, 255, .30);
    stroke-width: 1.1;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.25));
}
.pk-callouts text {
    fill: #f6fdff;
    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
    font-weight: 900;
    paint-order: stroke;
    stroke: rgba(0, 20, 38, .45);
    stroke-width: 2.5px;
}
.pk-map-pin {
    filter: drop-shadow(0 10px 18px rgba(61, 239, 255, .42));
    animation: districtFloat 3.8s ease-in-out infinite;
}
.pk-callout:nth-child(2) .pk-map-pin { animation-delay: .12s; }
.pk-callout:nth-child(3) .pk-map-pin { animation-delay: .24s; }
.pk-callout:nth-child(4) .pk-map-pin { animation-delay: .36s; }
.pk-callout:nth-child(5) .pk-map-pin { animation-delay: .48s; }
.pk-callout:nth-child(6) .pk-map-pin { animation-delay: .60s; }
.pk-callout:nth-child(7) .pk-map-pin { animation-delay: .72s; }
.pk-callout:nth-child(8) .pk-map-pin { animation-delay: .84s; }
.pk-map-pin path {
    fill: url(#pkSegA);
    stroke: rgba(255, 255, 255, .92);
    stroke-width: 2;
}
.pk-map-pin circle {
    fill: #ffffff;
    stroke: rgba(48, 213, 255, .92);
    stroke-width: 2;
}
.pk-map-pin::after { content: none; }
.pk-real-map {
    transform-box: fill-box;
    transform-origin: center;
    animation: mapBreath 5.6s ease-in-out infinite;
}
@keyframes mapBreath {
    0%, 100% { opacity: .96; }
    50% { opacity: 1; }
}
@media (max-width: 1199.98px) {
    .future-hero-visual.province-map-stage { min-height: 410px; }
    .province-neon-map.real-pk-map { height: 390px; }
    .pk-callouts text { font-size: 16px; }
}
@media (max-width: 767.98px) {
    .future-hero-visual.province-map-stage {
        min-height: 390px;
        padding: 8px;
        overflow: hidden;
    }
    .province-neon-map.real-pk-map {
        width: 116%;
        height: 370px;
        margin-left: -8%;
    }
    .pk-callouts text { font-size: 14px; stroke-width: 2px; }
    .pk-callouts rect { opacity: .94; }
    .pk-callouts line { stroke-width: 1.1; }
    .pk-outline { stroke-width: 3.4; }
    .pk-segment { stroke-width: 1.2; }
    .pk-map-pin { transform: scale(.82); transform-box: fill-box; transform-origin: center; }
}
@media (max-width: 420px) {
    .province-neon-map.real-pk-map {
        width: 128%;
        margin-left: -14%;
        height: 355px;
    }
    .pk-callouts text { font-size: 12.5px; }
}

/* ===== V21 HERO 3D PRACHUAP MAP IMAGE ===== */
.hero-map-image-stage {
    position: relative;
    min-height: 330px;
    padding: 18px;
    display: grid;
    place-items: center;
    border-radius: 30px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(89, 239, 255, .22), transparent 42%),
        linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.025));
    border: 1px solid rgba(143, 230, 255, .16);
    box-shadow: inset 0 0 36px rgba(255,255,255,.05), 0 20px 44px rgba(4, 12, 24, .18);
}
.hero-map-image-stage::before {
    content: '';
    position: absolute;
    inset: 18px;
    border-radius: 24px;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .75;
    pointer-events: none;
}
.hero-map-orbit {
    position: absolute;
    border-radius: 999px;
    border: 1px solid rgba(118, 241, 255, .22);
    filter: drop-shadow(0 0 18px rgba(93, 230, 255, .24));
    pointer-events: none;
}
.hero-map-orbit.orbit-a {
    width: 62%;
    height: 62%;
    transform: rotate(-14deg);
    animation: mapOrbit 16s linear infinite;
}
.hero-map-orbit.orbit-b {
    width: 45%;
    height: 45%;
    transform: rotate(20deg);
    border-style: dashed;
    opacity: .55;
    animation: mapOrbitReverse 20s linear infinite;
}
.hero-map-image {
    position: relative;
    z-index: 2;
    display: block;
    width: min(94%, 700px);
    max-height: 310px;
    object-fit: contain;
    filter: drop-shadow(0 22px 34px rgba(0,0,0,.35)) drop-shadow(0 0 26px rgba(119, 242, 255, .18));
    transform: perspective(900px) rotateX(2deg) rotateY(-4deg);
}
.hero-map-pin {
    position: absolute;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transform: translate(-50%, -50%);
    padding: 5px 9px 5px 6px;
    border-radius: 999px;
    color: #effaff;
    background: rgba(7, 18, 34, .84);
    border: 1px solid rgba(123, 238, 255, .26);
    box-shadow: 0 10px 24px rgba(0,0,0,.24), 0 0 18px rgba(86, 230, 255, .20);
    backdrop-filter: blur(12px);
    animation: mapPinFloat 4.5s ease-in-out infinite;
}
.hero-map-pin i {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #082032;
    background: linear-gradient(135deg, #b9fbff, #37d9ff);
    box-shadow: 0 0 16px rgba(86, 230, 255, .50);
    font-size: 12px;
}
.hero-map-pin i::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(110, 238, 255, .40);
    animation: pinPing 2.5s ease-out infinite;
}
.hero-map-pin span {
    white-space: nowrap;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: -.01em;
    text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.hero-map-pin.pin-hh { left: 58%; top: 14%; animation-delay: .1s; }
.hero-map-pin.pin-pnb { left: 65%; top: 21%; animation-delay: .25s; }
.hero-map-pin.pin-sry { left: 54%; top: 31%; animation-delay: .45s; }
.hero-map-pin.pin-kbr { left: 61%; top: 42%; animation-delay: .65s; }
.hero-map-pin.pin-mkk { left: 48%; top: 53%; animation-delay: .85s; }
.hero-map-pin.pin-tsk { left: 55%; top: 64%; animation-delay: 1.05s; }
.hero-map-pin.pin-bsp { left: 44%; top: 76%; animation-delay: 1.25s; }
.hero-map-pin.pin-bsn { left: 52%; top: 87%; animation-delay: 1.45s; }
.future-title { margin-bottom: 12px; }
.future-subtitle {
    margin-top: 0;
    margin-bottom: 18px;
    font-size: clamp(18px, 1.55vw, 23px);
    line-height: 1.55;
    letter-spacing: -.01em;
}
.future-nowrap { white-space: nowrap; }
.future-action-secondary {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
    border-color: rgba(199, 242, 255, .42) !important;
    box-shadow: 0 14px 28px rgba(37,99,235,.32), 0 0 18px rgba(14,165,233,.24);
}
@keyframes mapOrbit {
    from { transform: rotate(-14deg); }
    to { transform: rotate(346deg); }
}
@keyframes mapOrbitReverse {
    from { transform: rotate(20deg); }
    to { transform: rotate(-340deg); }
}
@keyframes mapPinFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-5px); }
}
@keyframes pinPing {
    0% { transform: scale(.6); opacity: .75; }
    100% { transform: scale(1.8); opacity: 0; }
}
@media (max-width: 1199.98px) {
    .hero-map-image-stage { min-height: 360px; }
    .hero-map-image { max-height: 335px; width: min(95%, 760px); }
}
@media (max-width: 767.98px) {
    .hero-map-image-stage {
        min-height: 285px;
        padding: 12px;
        border-radius: 24px;
    }
    .hero-map-image-stage::before { inset: 10px; }
    .hero-map-image {
        width: 108%;
        max-height: 250px;
        transform: perspective(900px) rotateX(0deg) rotateY(0deg);
    }
    .hero-map-pin { padding: 4px 7px 4px 5px; gap: 4px; }
    .hero-map-pin i { width: 18px; height: 18px; font-size: 10px; }
    .hero-map-pin span { font-size: 10px; }
    .hero-map-pin.pin-hh { left: 57%; top: 12%; }
    .hero-map-pin.pin-pnb { left: 66%; top: 20%; }
    .hero-map-pin.pin-sry { left: 53%; top: 31%; }
    .hero-map-pin.pin-kbr { left: 61%; top: 42%; }
    .hero-map-pin.pin-mkk { left: 46%; top: 53%; }
    .hero-map-pin.pin-tsk { left: 57%; top: 64%; }
    .hero-map-pin.pin-bsp { left: 43%; top: 76%; }
    .hero-map-pin.pin-bsn { left: 54%; top: 88%; }
    .future-subtitle { font-size: 17px; line-height: 1.45; }
}

/* ===== V22 GLASS MAP PINS: โปร่งใส + กระจายตำแหน่งตามโซนอำเภอ ===== */
.hero-map-pin {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 10px 5px 6px !important;
    border-radius: 999px !important;
    color: rgba(255,255,255,.96) !important;
    background: linear-gradient(135deg, rgba(7, 17, 34, .52), rgba(8, 36, 62, .36)) !important;
    border: 1px solid rgba(120, 242, 255, .38) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, .22),
        inset 0 0 16px rgba(255,255,255,.08),
        0 0 16px rgba(82, 230, 255, .18) !important;
    text-shadow: 0 1px 7px rgba(0,0,0,.45) !important;
    opacity: .92 !important;
}
.hero-map-pin::before {
    content: '';
    position: absolute;
    left: -38px;
    top: 50%;
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, rgba(117, 244, 255, 0), rgba(117, 244, 255, .55));
    transform: translateY(-50%);
    opacity: .55;
    pointer-events: none;
}
.hero-map-pin.pin-sry::before,
.hero-map-pin.pin-mkk::before,
.hero-map-pin.pin-bsp::before {
    left: auto;
    right: -38px;
    background: linear-gradient(90deg, rgba(117, 244, 255, .55), rgba(117, 244, 255, 0));
}
.hero-map-pin i {
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
    color: #082036 !important;
    background: radial-gradient(circle at 30% 25%, #ffffff, #7cf7ff 45%, #00b7d7 100%) !important;
    border: 1px solid rgba(255,255,255,.62) !important;
    box-shadow:
        0 0 12px rgba(112, 247, 255, .55),
        inset 0 0 8px rgba(255,255,255,.32) !important;
}
.hero-map-pin span {
    color: rgba(255,255,255,.98) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
    white-space: nowrap !important;
}
.hero-map-pin.pin-hh { left: 56% !important; top: 13% !important; }
.hero-map-pin.pin-pnb { left: 67% !important; top: 22% !important; }
.hero-map-pin.pin-sry { left: 60% !important; top: 41% !important; }
.hero-map-pin.pin-kbr { left: 40% !important; top: 31% !important; }
.hero-map-pin.pin-mkk { left: 57% !important; top: 61% !important; }
.hero-map-pin.pin-tsk { left: 38% !important; top: 50% !important; }
.hero-map-pin.pin-bsp { left: 35% !important; top: 75% !important; }
.hero-map-pin.pin-bsn { left: 59% !important; top: 86% !important; }

@media (max-width: 1199.98px) {
    .hero-map-pin.pin-hh { left: 56% !important; top: 12% !important; }
    .hero-map-pin.pin-pnb { left: 68% !important; top: 21% !important; }
    .hero-map-pin.pin-sry { left: 60% !important; top: 41% !important; }
    .hero-map-pin.pin-kbr { left: 40% !important; top: 31% !important; }
    .hero-map-pin.pin-mkk { left: 57% !important; top: 61% !important; }
    .hero-map-pin.pin-tsk { left: 38% !important; top: 50% !important; }
    .hero-map-pin.pin-bsp { left: 35% !important; top: 75% !important; }
    .hero-map-pin.pin-bsn { left: 59% !important; top: 86% !important; }
}

@media (max-width: 767.98px) {
    .hero-map-pin {
        padding: 3px 7px 3px 4px !important;
        gap: 4px !important;
        border-radius: 999px !important;
    }
    .hero-map-pin::before { width: 20px; left: -21px; }
    .hero-map-pin.pin-sry::before,
    .hero-map-pin.pin-mkk::before,
    .hero-map-pin.pin-bsp::before { right: -21px; }
    .hero-map-pin i {
        width: 17px !important;
        height: 17px !important;
        font-size: 9px !important;
    }
    .hero-map-pin span {
        font-size: 9px !important;
        max-width: 86px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hero-map-pin.pin-hh { left: 55% !important; top: 12% !important; }
    .hero-map-pin.pin-pnb { left: 67% !important; top: 21% !important; }
    .hero-map-pin.pin-sry { left: 59% !important; top: 41% !important; }
    .hero-map-pin.pin-kbr { left: 38% !important; top: 31% !important; }
    .hero-map-pin.pin-mkk { left: 56% !important; top: 61% !important; }
    .hero-map-pin.pin-tsk { left: 36% !important; top: 49% !important; }
    .hero-map-pin.pin-bsp { left: 33% !important; top: 74% !important; }
    .hero-map-pin.pin-bsn { left: 58% !important; top: 85% !important; }
}

/* ===== v32 top menu add ===== */
.public-navbar.future-navbar.with-top-menu {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
}
.future-top-menu-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.future-top-menu-inline a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 16px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
    color: rgba(255,255,255,.88);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    transition: all .18s ease;
}
.future-top-menu-inline a:hover {
    background: rgba(255,255,255,.12);
    color: #ffffff;
    transform: translateY(-1px);
}
.future-top-menu-inline a.active {
    background: #eef1ff;
    color: #5a61e8;
    border-color: rgba(255,255,255,.4);
    box-shadow: 0 8px 18px rgba(90, 97, 232, .14);
}
.future-top-menu-inline a i { font-size: 15px; }
@media (max-width: 1199.98px) {
    .public-navbar.future-navbar.with-top-menu {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }
    .future-top-menu-inline {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        padding-bottom: 2px;
    }
    .future-top-menu-inline a {
        white-space: nowrap;
    }
    .public-nav-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ===== v33 grouped top menu ===== */
.public-navbar.future-navbar.with-top-menu {
    grid-template-columns: auto 1fr !important;
}
.public-navbar.future-navbar.with-top-menu .public-nav-actions {
    display: none !important;
}
.future-top-menu-inline.grouped-menu {
    justify-content: flex-end;
    gap: 0 !important;
    background: rgba(8, 20, 43, .72);
    border: 1px solid rgba(118, 186, 255, .14);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 10px 26px rgba(0, 0, 0, .18);
}
.future-top-menu-inline.grouped-menu a {
    min-height: 46px;
    padding: 10px 18px;
    border-radius: 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
    background: transparent !important;
    color: rgba(241, 247, 255, .92);
    box-shadow: none !important;
    font-size: 15px;
    letter-spacing: -.01em;
}
.future-top-menu-inline.grouped-menu a:first-child {
    border-top-left-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
}
.future-top-menu-inline.grouped-menu a:last-child {
    border-right: 0 !important;
    border-top-right-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}
.future-top-menu-inline.grouped-menu a i {
    font-size: 16px;
    opacity: .98;
}
.future-top-menu-inline.grouped-menu a:hover {
    background: rgba(255,255,255,.06) !important;
    color: #ffffff;
    transform: none !important;
}
.future-top-menu-inline.grouped-menu a.active {
    background: linear-gradient(135deg, #f8fbff, #eef1ff 55%, #dfe7ff) !important;
    color: #6168f2 !important;
}
.future-top-menu-inline.grouped-menu a.menu-login-cta {
    background: linear-gradient(135deg, #2d92ff, #6c63ff) !important;
    color: #ffffff !important;
    font-weight: 900;
}
.future-top-menu-inline.grouped-menu a.menu-login-cta:hover {
    background: linear-gradient(135deg, #2397ff, #7a6bff) !important;
}
@media (max-width: 1199.98px) {
    .public-navbar.future-navbar.with-top-menu {
        grid-template-columns: 1fr !important;
    }
    .future-top-menu-inline.grouped-menu {
        justify-content: flex-start;
        width: 100%;
    }
}
@media (max-width: 767.98px) {
    .future-top-menu-inline.grouped-menu a {
        min-height: 42px;
        padding: 8px 14px;
        font-size: 14px;
    }
    .future-top-menu-inline.grouped-menu a span {
        white-space: nowrap;
    }
}


/* ===== v34 restore futuristic login styles after public index update ===== */
.future-login-page {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px;
    overflow: hidden;
    font-family: 'Sarabun', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #ecf8ff;
    background:
        radial-gradient(circle at 16% 18%, rgba(56, 189, 248, .22), transparent 24rem),
        radial-gradient(circle at 86% 12%, rgba(124, 77, 255, .18), transparent 28rem),
        radial-gradient(circle at 72% 88%, rgba(0, 230, 118, .10), transparent 20rem),
        linear-gradient(135deg, #030816 0%, #081326 42%, #06263a 100%);
}
.future-login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at center, rgba(0,0,0,.92), transparent 76%);
}
.future-login-page::after {
    content: '';
    position: absolute;
    inset: -40%;
    pointer-events: none;
    opacity: .24;
    background: conic-gradient(from 120deg, transparent, rgba(80, 238, 255, .20), transparent, rgba(124, 77, 255, .18), transparent);
    animation: loginAurora 18s linear infinite;
}
.login-grid-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 110%, rgba(82, 231, 255, .12), transparent 42%);
}
.login-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(125, 231, 255, .15);
    box-shadow: 0 0 80px rgba(56, 189, 248, .12), inset 0 0 40px rgba(255,255,255,.03);
    pointer-events: none;
}
.login-orbit.orb-a { width: 520px; height: 520px; left: -160px; top: -160px; }
.login-orbit.orb-b { width: 620px; height: 620px; right: -220px; bottom: -220px; }
.future-login-shell {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    min-height: 620px;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    overflow: hidden;
    border-radius: 34px;
    border: 1px solid rgba(151, 235, 255, .18);
    background: rgba(9, 18, 35, .68);
    box-shadow: 0 36px 110px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(24px);
}
.future-login-visual {
    position: relative;
    overflow: hidden;
    padding: 34px 38px 28px;
    background:
        radial-gradient(circle at 26% 24%, rgba(56, 189, 248, .24), transparent 24rem),
        linear-gradient(145deg, rgba(37, 99, 235, .84), rgba(6, 182, 212, .54));
}
.future-login-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(120deg, rgba(0,0,0,.86), rgba(0,0,0,.20));
}
.login-holo-line {
    position: absolute;
    width: 420px;
    height: 420px;
    right: -150px;
    top: -150px;
    border-radius: 50%;
    border: 1px solid rgba(202, 248, 255, .18);
    box-shadow: 0 0 0 42px rgba(202, 248, 255, .05), 0 0 0 86px rgba(202, 248, 255, .025);
}
.login-brand-pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 999px;
    color: #f8fdff;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.20);
    box-shadow: inset 0 0 18px rgba(255,255,255,.06);
    font-weight: 800;
}
.login-title-group {
    position: relative;
    z-index: 1;
    margin-top: 44px;
}
.login-kicker {
    margin: 0 0 8px;
    color: #d9fbff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}
.login-title-group h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(42px, 6vw, 76px);
    line-height: .92;
    font-weight: 900;
    letter-spacing: -.055em;
    text-shadow: 0 14px 34px rgba(0,0,0,.30), 0 0 30px rgba(102, 231, 255, .26);
}
.login-title-group h1 span {
    color: #7df7ff;
    text-shadow: 0 0 28px rgba(111, 245, 255, .56);
}
.login-title-group h2 {
    margin: 18px 0 0;
    color: rgba(255,255,255,.88);
    font-size: clamp(17px, 2vw, 23px);
    line-height: 1.42;
    font-weight: 700;
}
.login-map-stage {
    position: relative;
    z-index: 1;
    width: min(430px, 100%);
    height: 245px;
    margin-top: 28px;
    border-radius: 26px;
    background: linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
    border: 1px solid rgba(205, 249, 255, .18);
    box-shadow: inset 0 0 34px rgba(255,255,255,.05), 0 20px 48px rgba(3, 9, 22, .26);
    overflow: hidden;
}
.login-map-image {
    position: absolute;
    width: 96%;
    height: 96%;
    left: 2%;
    top: 2%;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .22)) saturate(1.15);
    animation: loginMapFloat 5.8s ease-in-out infinite;
}
.login-map-pulse {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(116, 245, 255, .22);
    animation: loginPulse 3.6s ease-out infinite;
}
.login-map-pulse.pulse-1 { width: 170px; height: 170px; right: 38px; top: 18px; }
.login-map-pulse.pulse-2 { width: 126px; height: 126px; left: 44px; bottom: 16px; animation-delay: 1.4s; }
.login-map-pin {
    position: absolute;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(212,250,255,.88));
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 0 0 8px rgba(125, 247, 255, .12), 0 10px 24px rgba(0, 0, 0, .18), 0 0 24px rgba(98, 240, 255, .34);
    animation: loginPinFloat 3.8s ease-in-out infinite;
}
.login-map-pin::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(125, 247, 255, .18);
    animation: loginPulse 3.2s ease-out infinite;
}
.login-map-pin::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 14px;
    height: 14px;
    background: rgba(114, 244, 255, .32);
    border-radius: 999px 999px 999px 0;
    transform: translateX(-50%) rotate(-45deg);
    filter: blur(.2px);
}
.login-map-pin i {
    position: relative;
    z-index: 1;
    font-size: 18px;
    color: #0c203a;
}
.login-map-pin.pin-a { left: 17%; top: 26%; }
.login-map-pin.pin-b { right: 23%; top: 15%; animation-delay: .8s; }
.login-map-pin.pin-c { left: 51%; bottom: 15%; animation-delay: 1.4s; }
.login-data-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.login-data-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #eaffff;
    background: rgba(5, 15, 30, .35);
    border: 1px solid rgba(183, 243, 255, .16);
    font-size: 13px;
    font-weight: 800;
}
.future-login-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 42px 44px;
    background:
        radial-gradient(circle at 86% 0%, rgba(56, 189, 248, .16), transparent 18rem),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(235,246,255,.91));
    color: #0f172a;
}
.login-back-link {
    position: absolute;
    left: 34px;
    top: 28px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
}
.login-form-head { margin-bottom: 20px; }
.login-secure-badge { display: none; }
.login-form-head h2 {
    margin: 0;
    color: #07111f;
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 900;
    letter-spacing: -.05em;
}
.login-form-head p { display: none; }
.future-login-form { display: grid; gap: 16px; }
.login-field label {
    display: block;
    margin-bottom: 7px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
}
.future-input-wrap {
    display: grid;
    grid-template-columns: 54px 1fr;
    align-items: center;
    min-height: 58px;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(37, 99, 235, .15);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .07), inset 0 0 0 1px rgba(255,255,255,.68);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.future-input-wrap:focus-within {
    border-color: rgba(6, 182, 212, .68);
    box-shadow: 0 16px 34px rgba(14, 165, 233, .18), 0 0 0 4px rgba(56, 189, 248, .14);
    transform: translateY(-1px);
}
.future-input-icon {
    height: 100%;
    display: grid;
    place-items: center;
    color: #0f172a;
    background: linear-gradient(180deg, rgba(224, 242, 254, .95), rgba(255,255,255,.72));
    font-size: 18px;
}
.future-input {
    width: 100%;
    height: 58px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #0f172a;
    font-size: 17px;
    font-weight: 700;
    padding: 0 16px;
}
.future-input::placeholder { color: #94a3b8; font-weight: 600; }

.future-input-wrap.has-action {
    grid-template-columns: 54px 1fr 58px;
}
.password-toggle-btn {
    width: 58px;
    height: 58px;
    border: 0;
    outline: 0;
    background: linear-gradient(180deg, rgba(224, 242, 254, .95), rgba(255,255,255,.72));
    color: #2563eb;
    font-size: 18px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color .18s ease, transform .18s ease, background .18s ease;
}
.password-toggle-btn:hover {
    color: #0f172a;
    background: linear-gradient(180deg, rgba(191, 245, 255, .98), rgba(255,255,255,.82));
}
.password-toggle-btn:active { transform: scale(.97); }
.future-login-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 58px;
    margin-top: 4px;
    border: 0;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #06b6d4 60%, #00e5ff);
    box-shadow: 0 16px 34px rgba(37, 99, 235, .30), inset 0 1px 0 rgba(255,255,255,.22);
    font-size: 19px;
    font-weight: 900;
    overflow: hidden;
}
.future-login-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    transition: transform .45s ease;
}
.future-login-submit:hover::before { transform: translateX(120%); }
.future-login-submit:hover { filter: brightness(1.04); }
.login-helper-panel { display: none; }
.login-footer-credit {
    display: grid;
    gap: 3px;
    margin-top: 18px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}
@keyframes loginAurora { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes loginMapFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.02); } }
@keyframes loginPulse { 0% { transform: scale(.7); opacity: .85; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes loginPinFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (max-width: 991.98px) {
    .future-login-page { padding: 18px; align-items: start; }
    .future-login-shell { grid-template-columns: 1fr; min-height: 0; border-radius: 28px; }
    .future-login-visual { padding: 28px; }
    .login-title-group { margin-top: 30px; }
    .login-title-group h1 { font-size: 48px; }
    .login-title-group h2 { font-size: 18px; }
    .login-map-stage { height: 220px; }
    .future-login-panel { padding: 54px 26px 28px; }
    .login-back-link { top: 20px; left: 24px; }
}
@media (max-width: 575.98px) {
    .future-login-page { padding: 10px; }
    .future-login-shell { border-radius: 24px; }
    .future-login-visual { padding: 22px; }
    .login-brand-pill { min-height: 36px; font-size: 13px; }
    .login-title-group h1 { font-size: 38px; }
    .login-title-group h2 { font-size: 16px; }
    .login-map-stage { height: 180px; border-radius: 22px; }
    .login-data-row { display: none; }
    .future-login-panel { padding: 54px 18px 24px; }
    .login-form-head h2 { font-size: 34px; }
    .login-form-head p { font-size: 14px; }
    .future-input-wrap { grid-template-columns: 46px 1fr; min-height: 52px; border-radius: 16px; }
    .future-input-wrap.has-action { grid-template-columns: 46px 1fr 52px; }
    .future-input { height: 52px; font-size: 16px; }
    .password-toggle-btn { width: 52px; height: 52px; font-size: 17px; }
    .future-login-submit { min-height: 54px; font-size: 17px; }
}


/* === v28 login title one-line override === */
.login-title-group h2 {
    white-space: nowrap;
    max-width: 100%;
    font-size: clamp(18px, 1.35vw, 21px) !important;
    line-height: 1.35 !important;
}
@media (max-width: 991.98px) {
    .login-title-group h2 {
        white-space: normal;
        font-size: 17px !important;
    }
}
@media (max-width: 575.98px) {
    .login-title-group h2 {
        white-space: normal;
        font-size: 15px !important;
    }
}

/* ===== v36 ultra futuristic login enhancement ===== */
.future-login-page {
    background:
        radial-gradient(circle at 16% 14%, rgba(0, 229, 255, .20), transparent 24rem),
        radial-gradient(circle at 88% 8%, rgba(123, 97, 255, .20), transparent 28rem),
        radial-gradient(circle at 50% 100%, rgba(0, 255, 170, .10), transparent 22rem),
        linear-gradient(135deg, #020611 0%, #061224 38%, #071c35 100%);
}
.future-login-page::after {
    opacity: .34;
    background: conic-gradient(from 120deg, transparent, rgba(86, 226, 255, .20), transparent, rgba(124, 77, 255, .20), transparent, rgba(0, 255, 170, .12), transparent);
}
.login-grid-layer {
    background:
        radial-gradient(circle at 50% 110%, rgba(82, 231, 255, .12), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.02), transparent 20%, transparent 80%, rgba(255,255,255,.02));
}
.future-login-shell {
    min-height: 650px;
    border: 1px solid rgba(151, 235, 255, .22);
    background: rgba(9, 18, 35, .60);
    box-shadow: 0 36px 110px rgba(0,0,0,.58), 0 0 0 1px rgba(125, 231, 255, .06), inset 0 1px 0 rgba(255,255,255,.09);
}
.future-login-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255,255,255,.05), transparent 18%, transparent 82%, rgba(255,255,255,.04));
}
.future-login-visual {
    padding: 36px 40px 30px;
    background:
        radial-gradient(circle at 28% 22%, rgba(56, 189, 248, .30), transparent 22rem),
        radial-gradient(circle at 90% 10%, rgba(125, 92, 255, .22), transparent 18rem),
        linear-gradient(145deg, rgba(24, 87, 210, .88), rgba(5, 154, 212, .56));
}
.future-login-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, transparent 20%, rgba(255,255,255,.06) 40%, transparent 60%);
    mix-blend-mode: screen;
    opacity: .45;
}
.login-brand-pill {
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
    border-color: rgba(255,255,255,.24);
    box-shadow: inset 0 0 18px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.12);
}
.login-kicker {
    color: #ddfaff;
    text-shadow: 0 0 14px rgba(125, 247, 255, .22);
}
.login-title-group h1 {
    background: linear-gradient(180deg, #ffffff 10%, #def6ff 55%, #aef5ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}
.login-title-group h1 span {
    color: unset;
    background: linear-gradient(180deg, #85f8ff 0%, #5bd6ff 50%, #8a8eff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 18px rgba(111, 245, 255, .22));
}
.login-title-group h2 {
    color: rgba(245,252,255,.92) !important;
}
.login-map-stage {
    width: min(455px, 100%);
    height: 258px;
    border-radius: 28px;
    background: linear-gradient(155deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
    border: 1px solid rgba(205, 249, 255, .22);
    box-shadow: inset 0 0 44px rgba(255,255,255,.06), 0 24px 54px rgba(3, 9, 22, .32), 0 0 0 1px rgba(112, 241, 255, .06);
}
.login-map-stage::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.08);
    pointer-events: none;
}
.login-map-stage::after {
    content: '';
    position: absolute;
    left: -15%;
    top: 12%;
    width: 42%;
    height: 180%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transform: rotate(18deg);
    animation: loginScanBeam 7s linear infinite;
    pointer-events: none;
}
.login-map-image {
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .24)) saturate(1.22) brightness(1.03);
}
.login-map-pulse { border-color: rgba(116, 245, 255, .28); }
.login-map-pin {
    width: 48px;
    height: 48px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(208,246,255,.90));
    border-color: rgba(255,255,255,.76);
    box-shadow: 0 0 0 10px rgba(125, 247, 255, .10), 0 14px 30px rgba(0, 0, 0, .20), 0 0 26px rgba(98, 240, 255, .40);
}
.login-map-pin::before { inset: -12px; border-color: rgba(125, 247, 255, .22); }
.login-map-pin i { font-size: 19px; color: #0c203a; }
.login-data-chip {
    background: linear-gradient(180deg, rgba(4, 18, 40, .45), rgba(8, 25, 48, .28));
    border-color: rgba(183, 243, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px rgba(0,0,0,.10);
}
.future-login-panel {
    background:
        radial-gradient(circle at 88% 0%, rgba(56, 189, 248, .18), transparent 18rem),
        radial-gradient(circle at 10% 100%, rgba(123, 97, 255, .08), transparent 18rem),
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(231,243,255,.88));
}
.future-login-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 30%);
}
.login-back-link {
    left: 30px;
    top: 24px;
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.52);
    border: 1px solid rgba(37,99,235,.10);
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
    text-decoration: none;
}
.login-form-head { margin-bottom: 22px; }
.login-panel-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 12px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(6,182,212,.12));
    color: #2563eb;
    border: 1px solid rgba(56,189,248,.18);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.login-form-head h2 {
    font-size: clamp(34px, 4vw, 48px);
    text-shadow: 0 12px 30px rgba(15,23,42,.08);
}
.login-form-head p {
    display: block;
    margin: 10px 0 0;
    color: #607088;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
}
.future-input-wrap {
    background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(249,252,255,.82));
    border: 1px solid rgba(37, 99, 235, .12);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .06), inset 0 0 0 1px rgba(255,255,255,.72);
}
.future-input-wrap:focus-within {
    border-color: rgba(6, 182, 212, .82);
    box-shadow: 0 18px 40px rgba(14, 165, 233, .16), 0 0 0 5px rgba(56, 189, 248, .10);
}
.future-input-icon,
.password-toggle-btn {
    background: linear-gradient(180deg, rgba(228, 245, 255, .96), rgba(255,255,255,.78));
}
.future-login-submit {
    min-height: 60px;
    border-radius: 20px;
    background: linear-gradient(135deg, #2357ff 0%, #2dc4ff 55%, #33f1ff 100%);
    box-shadow: 0 20px 42px rgba(37, 99, 235, .24), 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.26);
}
.future-login-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}
.login-footer-credit {
    color: #6a7b92;
    font-size: 12px;
}
@keyframes loginScanBeam {
    0% { transform: translateX(-10%) rotate(18deg); opacity: 0; }
    12% { opacity: .8; }
    50% { opacity: .55; }
    100% { transform: translateX(240%) rotate(18deg); opacity: 0; }
}
@media (max-width: 991.98px) {
    .future-login-shell { min-height: 0; }
    .future-login-visual { padding: 28px; }
    .login-map-stage { width: 100%; height: 235px; }
}
@media (max-width: 575.98px) {
    .login-panel-badge { font-size: 11px; }
    .login-form-head p { font-size: 14px; }
    .login-back-link { left: 18px; top: 16px; }
    .future-login-submit { min-height: 56px; border-radius: 18px; }
}

/* ===== v37 style B : T-MAP portal alternative ===== */
body.login-style-b .future-login-shell {
    grid-template-columns: 1.08fr .92fr;
    min-height: 640px;
    border-radius: 34px;
}
body.login-style-b .future-login-visual {
    position: relative;
    overflow: hidden;
    padding: 34px 38px 28px;
    background:
        radial-gradient(circle at 18% 18%, rgba(0, 245, 255, .22), transparent 18rem),
        radial-gradient(circle at 78% 22%, rgba(111, 97, 255, .22), transparent 18rem),
        linear-gradient(160deg, rgba(7, 44, 108, .95) 0%, rgba(9, 105, 193, .85) 48%, rgba(0, 161, 204, .82) 100%);
}
body.login-style-b .future-login-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: .20;
    pointer-events: none;
}
body.login-style-b .login-holo-line {
    background: linear-gradient(90deg, transparent, rgba(108, 236, 255, .8), transparent);
}
body.login-style-b .login-brand-pill {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 14px;
    font-size: 16px;
    letter-spacing: .01em;
}
body.login-style-b .login-title-group {
    margin-top: 48px;
    max-width: 560px;
}
body.login-style-b .login-kicker {
    font-size: 12px;
    letter-spacing: .22em;
    margin-bottom: 10px;
    color: rgba(231, 250, 255, .86);
}
body.login-style-b .login-title-group h1 {
    margin: 0 0 10px;
    font-size: clamp(58px, 7.8vw, 96px);
    line-height: .92;
    letter-spacing: -.05em;
    background: linear-gradient(180deg, #ffffff 0%, #e4fbff 45%, #8ef2ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.login-style-b .login-title-group h1 span {
    background: linear-gradient(180deg, #ffffff 0%, #dffcff 35%, #67edff 65%, #8b86ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 24px rgba(104, 239, 255, .25));
}
body.login-style-b .login-title-group h2 {
    margin: 0;
    max-width: 540px;
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.25;
    color: rgba(245, 252, 255, .94) !important;
    text-shadow: 0 10px 22px rgba(0,0,0,.14);
}
body.login-style-b .login-style-b-copy {
    margin: 12px 0 0;
    max-width: 520px;
    color: rgba(232, 246, 255, .78);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 600;
}
body.login-style-b .login-map-stage {
    margin-top: 28px;
    width: min(440px, 100%);
    height: 230px;
    border-radius: 26px;
    align-self: flex-start;
}
body.login-style-b .login-data-row { margin-top: 18px; }
body.login-style-b .future-login-panel {
    padding: 82px 42px 34px;
}
body.login-style-b .login-back-link {
    top: 22px;
    left: 24px;
}
body.login-style-b .login-form-head h2 {
    font-size: clamp(32px, 3vw, 44px);
}
body.login-style-b .login-form-head p {
    margin-top: 8px;
    max-width: 430px;
}
body.login-style-b .future-input-wrap {
    min-height: 62px;
    border-radius: 18px;
}
body.login-style-b .future-input,
body.login-style-b .password-toggle-btn,
body.login-style-b .future-input-icon { height: 60px; }
body.login-style-b .future-login-submit {
    margin-top: 8px;
    min-height: 62px;
    border-radius: 18px;
}
@media (max-width: 991.98px) {
    body.login-style-b .future-login-shell {
        grid-template-columns: 1fr;
    }
    body.login-style-b .login-title-group {
        margin-top: 28px;
    }
    body.login-style-b .login-title-group h1 {
        font-size: clamp(48px, 12vw, 72px);
    }
    body.login-style-b .login-title-group h2 {
        font-size: 24px;
    }
    body.login-style-b .future-login-panel {
        padding: 72px 28px 28px;
    }
}
@media (max-width: 575.98px) {
    body.login-style-b .future-login-visual {
        padding: 24px 20px 22px;
    }
    body.login-style-b .login-title-group h1 {
        font-size: 46px;
    }
    body.login-style-b .login-title-group h2 {
        font-size: 20px;
    }
    body.login-style-b .login-style-b-copy {
        font-size: 14px;
    }
    body.login-style-b .future-login-panel {
        padding: 68px 18px 22px;
    }
}


/* ===== v38 T-MAP Command Center Login ===== */
body.login-style-c.future-login-page {
    padding: 26px;
    background:
        radial-gradient(circle at 14% 16%, rgba(0, 229, 255, .22), transparent 24rem),
        radial-gradient(circle at 86% 12%, rgba(120, 92, 255, .26), transparent 25rem),
        radial-gradient(circle at 50% 96%, rgba(0, 255, 170, .10), transparent 23rem),
        linear-gradient(135deg, #020510 0%, #061329 44%, #061d33 100%);
}
body.login-style-c.future-login-page::before {
    background:
        linear-gradient(rgba(121, 234, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(121, 234, 255, .05) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(80, 238, 255, .10), transparent 50%);
    background-size: 32px 32px, 32px 32px, auto;
    mask-image: radial-gradient(circle at center, rgba(0,0,0,.98), transparent 84%);
}
body.login-style-c .login-orbit.orb-a {
    width: 740px;
    height: 740px;
    left: -260px;
    top: -260px;
    border-color: rgba(125, 247, 255, .12);
}
body.login-style-c .login-orbit.orb-b {
    width: 820px;
    height: 820px;
    right: -280px;
    bottom: -300px;
    border-color: rgba(139, 92, 246, .14);
}
body.login-style-c .future-login-shell {
    width: min(1240px, 100%);
    min-height: 650px;
    grid-template-columns: 1.16fr .84fr;
    border-radius: 34px;
    background: rgba(2, 10, 24, .66);
    border: 1px solid rgba(131, 234, 255, .18);
    box-shadow:
        0 42px 130px rgba(0,0,0,.62),
        0 0 0 1px rgba(131, 234, 255, .06),
        inset 0 1px 0 rgba(255,255,255,.08);
}
body.login-style-c .future-login-shell::after {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.045);
    pointer-events: none;
}
body.login-style-c .future-login-visual {
    padding: 34px 42px;
    background:
        radial-gradient(circle at 35% 38%, rgba(0, 198, 255, .28), transparent 20rem),
        radial-gradient(circle at 70% 70%, rgba(0, 255, 170, .10), transparent 16rem),
        linear-gradient(145deg, rgba(3, 35, 84, .92), rgba(4, 107, 153, .70));
}
body.login-style-c .future-login-visual::before {
    background:
        linear-gradient(rgba(255,255,255,.048) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.048) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .62;
}
body.login-style-c .future-login-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(120deg, transparent 18%, rgba(255,255,255,.08) 42%, transparent 66%),
        radial-gradient(circle at 52% 50%, rgba(100, 245, 255, .11), transparent 26rem);
    animation: commandSweep 8s linear infinite;
}
body.login-style-c .login-brand-pill {
    min-height: 42px;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
    border: 1px solid rgba(185, 244, 255, .20);
}
body.login-style-c .login-title-group {
    margin-top: 36px;
}
body.login-style-c .login-kicker {
    font-size: 11px;
    letter-spacing: .23em;
    color: rgba(184, 247, 255, .86);
}
body.login-style-c .login-title-group h1 {
    margin: 0 0 8px;
    font-size: clamp(54px, 7vw, 86px);
    line-height: .88;
    letter-spacing: -.055em;
}
body.login-style-c .login-title-group h1 span {
    background: linear-gradient(180deg, #ffffff 0%, #bff9ff 36%, #3ee8ff 68%, #8e88ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 26px rgba(73, 232, 255, .32));
}
body.login-style-c .login-title-group h2 {
    max-width: 600px;
    margin: 0;
    white-space: normal !important;
    font-size: clamp(21px, 2.1vw, 30px) !important;
    line-height: 1.22 !important;
    color: rgba(245, 252, 255, .95) !important;
}
body.login-style-c .login-style-b-copy {
    max-width: 560px;
    margin: 12px 0 0;
    color: rgba(224, 244, 255, .80);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 600;
}
body.login-style-c .login-map-stage {
    width: min(520px, 100%);
    height: 270px;
    margin-top: 26px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 50%, rgba(109, 245, 255, .14), transparent 18rem),
        linear-gradient(155deg, rgba(255,255,255,.15), rgba(255,255,255,.035));
    border: 1px solid rgba(205, 249, 255, .20);
    box-shadow:
        inset 0 0 50px rgba(255,255,255,.055),
        0 28px 68px rgba(0,0,0,.28),
        0 0 0 1px rgba(111, 238, 255, .055);
}
body.login-style-c .login-map-stage::before {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.075);
    pointer-events: none;
}
body.login-style-c .login-map-stage::after {
    content: '';
    position: absolute;
    left: -20%;
    top: -15%;
    width: 40%;
    height: 150%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
    animation: loginScanBeam 6.5s linear infinite;
    pointer-events: none;
}
body.login-style-c .login-map-image {
    width: 98%;
    height: 98%;
    left: 1%;
    top: 1%;
    filter: drop-shadow(0 22px 34px rgba(0,0,0,.28)) saturate(1.22) brightness(1.04);
}
body.login-style-c .login-map-pin {
    width: 46px;
    height: 46px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(201,248,255,.88));
}
body.login-style-c .login-map-pin.pin-a { left: 16%; top: 31%; }
body.login-style-c .login-map-pin.pin-b { right: 21%; top: 18%; }
body.login-style-c .login-map-pin.pin-c { left: 52%; bottom: 17%; }
body.login-style-c .login-data-row {
    margin-top: 18px;
}
body.login-style-c .login-data-chip {
    background: rgba(5, 16, 34, .42);
    border-color: rgba(183, 243, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 22px rgba(0,0,0,.13);
}
body.login-style-c .future-login-panel {
    padding: 76px 44px 34px;
    background:
        radial-gradient(circle at 85% 0%, rgba(49, 194, 255, .16), transparent 18rem),
        radial-gradient(circle at 15% 100%, rgba(115, 103, 255, .08), transparent 16rem),
        linear-gradient(180deg, rgba(247, 253, 255, .95), rgba(226, 241, 255, .90));
}
body.login-style-c .future-login-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.22), transparent 38%),
        linear-gradient(120deg, rgba(255,255,255,.12), transparent 26%);
}
body.login-style-c .login-back-link {
    top: 22px;
    left: 26px;
    min-height: 38px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(37,99,235,.10);
    text-decoration: none;
}
body.login-style-c .login-panel-badge {
    background: linear-gradient(135deg, rgba(37,99,235,.11), rgba(6,182,212,.13));
    color: #2563eb;
    border-color: rgba(56,189,248,.20);
}
body.login-style-c .login-form-head h2 {
    font-size: clamp(34px, 3.8vw, 46px);
}
body.login-style-c .login-form-head p {
    display: block;
    max-width: 440px;
    color: #66768e;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
}
body.login-style-c .future-login-form {
    gap: 17px;
}
body.login-style-c .future-input-wrap {
    min-height: 60px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,252,255,.84));
}
body.login-style-c .future-input,
body.login-style-c .future-input-icon,
body.login-style-c .password-toggle-btn {
    height: 60px;
}
body.login-style-c .future-login-submit {
    min-height: 62px;
    border-radius: 20px;
    background: linear-gradient(135deg, #245cff 0%, #1fc8ff 56%, #39f2ff 100%);
    box-shadow:
        0 22px 46px rgba(37, 99, 235, .25),
        0 0 0 1px rgba(255,255,255,.15),
        inset 0 1px 0 rgba(255,255,255,.25);
}
body.login-style-c .future-login-submit:hover {
    transform: translateY(-1px);
}
@keyframes commandSweep {
    0% { opacity: .20; transform: translateX(-18%); }
    50% { opacity: .45; }
    100% { opacity: .20; transform: translateX(18%); }
}
@media (max-width: 991.98px) {
    body.login-style-c .future-login-shell {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    body.login-style-c .future-login-visual {
        padding: 28px;
    }
    body.login-style-c .login-title-group {
        margin-top: 26px;
    }
    body.login-style-c .login-title-group h1 {
        font-size: clamp(50px, 12vw, 74px);
    }
    body.login-style-c .login-title-group h2 {
        font-size: 22px !important;
    }
    body.login-style-c .login-map-stage {
        width: 100%;
        height: 235px;
    }
    body.login-style-c .future-login-panel {
        padding: 70px 28px 28px;
    }
}
@media (max-width: 575.98px) {
    body.login-style-c.future-login-page {
        padding: 10px;
    }
    body.login-style-c .future-login-visual {
        padding: 22px 18px;
    }
    body.login-style-c .login-title-group h1 {
        font-size: 46px;
    }
    body.login-style-c .login-title-group h2 {
        font-size: 19px !important;
    }
    body.login-style-c .login-style-b-copy {
        font-size: 14px;
    }
    body.login-style-c .login-map-stage {
        height: 185px;
    }
    body.login-style-c .future-login-panel {
        padding: 66px 18px 22px;
    }
}

/* ===== v39 login map single pin + thailand background ===== */
body.login-style-c .login-map-stage {
    overflow: hidden;
    isolation: isolate;
}
body.login-style-c .login-thailand-bg {
    position: absolute;
    left: 6%;
    top: 8%;
    width: 30%;
    height: 82%;
    z-index: 0;
    opacity: .30;
    background: linear-gradient(180deg, rgba(140,245,255,.95), rgba(84,214,255,.55));
    clip-path: polygon(57% 0%, 66% 6%, 64% 14%, 71% 20%, 67% 29%, 74% 37%, 68% 49%, 61% 58%, 64% 66%, 55% 75%, 58% 84%, 52% 92%, 44% 100%, 36% 93%, 33% 84%, 24% 77%, 25% 66%, 19% 57%, 23% 47%, 18% 39%, 23% 31%, 27% 22%, 36% 16%, 40% 8%, 47% 3%);
    filter: blur(1px) drop-shadow(0 0 20px rgba(109,245,255,.40)) drop-shadow(0 0 42px rgba(109,245,255,.28));
}
body.login-style-c .login-thailand-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: inherit;
    border: 1px solid rgba(220, 253, 255, .7);
    box-shadow: inset 0 0 18px rgba(255,255,255,.30);
}
body.login-style-c .login-thailand-bg::after {
    content: '';
    position: absolute;
    inset: 14% 18% 12% 18%;
    clip-path: inherit;
    border: 1px dashed rgba(236, 255, 255, .55);
    opacity: .55;
}
body.login-style-c .login-map-image {
    z-index: 1;
    width: 84%;
    height: auto;
    left: 18%;
    top: 7%;
}
body.login-style-c .login-map-pulse.pulse-focus {
    width: 132px;
    height: 132px;
    left: 53%;
    top: 45%;
    transform: translate(-50%, -50%);
    border-color: rgba(125,247,255,.24);
    background: radial-gradient(circle, rgba(123,245,255,.18), rgba(123,245,255,.06) 45%, transparent 68%);
    animation: loginPulse 3s ease-out infinite;
    z-index: 2;
}
body.login-style-c .login-map-pin.pin-focus {
    width: 72px;
    height: 72px;
    left: 53%;
    top: 45%;
    transform: translate(-50%, -50%);
    z-index: 3;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(210,248,255,.92));
    box-shadow: 0 0 0 12px rgba(125,247,255,.10), 0 18px 36px rgba(0, 0, 0, .22), 0 0 30px rgba(98,240,255,.44);
}
body.login-style-c .login-map-pin.pin-focus::before {
    inset: -14px;
    border-color: rgba(125,247,255,.24);
}
body.login-style-c .login-map-pin.pin-focus::after {
    bottom: -12px;
    width: 22px;
    height: 22px;
}
body.login-style-c .login-map-pin.pin-focus i {
    font-size: 28px;
}
@media (max-width: 991.98px) {
    body.login-style-c .login-thailand-bg {
        width: 26%;
        left: 4%;
        top: 10%;
        opacity: .24;
    }
    body.login-style-c .login-map-image {
        width: 88%;
        left: 12%;
        top: 8%;
    }
}
@media (max-width: 575.98px) {
    body.login-style-c .login-thailand-bg {
        width: 24%;
        height: 72%;
        top: 12%;
        left: 4%;
    }
    body.login-style-c .login-map-pulse.pulse-focus {
        width: 96px;
        height: 96px;
        left: 52%;
        top: 46%;
    }
    body.login-style-c .login-map-pin.pin-focus {
        width: 58px;
        height: 58px;
        left: 52%;
        top: 46%;
    }
    body.login-style-c .login-map-pin.pin-focus i { font-size: 22px; }
}


/* ===== v40 Clean Futuristic Login Visual ===== */
body.login-style-c .login-map-stage {
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 52% 48%, rgba(103, 245, 255, .18), transparent 12rem),
        radial-gradient(circle at 75% 18%, rgba(125, 92, 255, .16), transparent 11rem),
        linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.035)) !important;
    border: 1px solid rgba(205, 249, 255, .22);
    box-shadow:
        inset 0 0 56px rgba(255,255,255,.06),
        0 28px 68px rgba(0,0,0,.28),
        0 0 0 1px rgba(111, 238, 255, .055);
}
body.login-style-c .login-map-stage::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.08);
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .45;
}
body.login-style-c .login-map-stage::after {
    content: '';
    position: absolute;
    left: -24%;
    top: -16%;
    width: 36%;
    height: 150%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
    animation: loginScanBeam 6.8s linear infinite;
    pointer-events: none;
}
body.login-style-c .login-thailand-bg {
    display: none !important;
}
body.login-style-c .login-map-image {
    z-index: 1;
    width: 96% !important;
    height: 96% !important;
    left: 2% !important;
    top: 2% !important;
    object-fit: contain;
    filter:
        drop-shadow(0 22px 34px rgba(0,0,0,.28))
        saturate(1.20)
        brightness(1.04);
}
body.login-style-c .login-map-pulse.pulse-focus {
    z-index: 2;
    width: 118px;
    height: 118px;
    left: 56%;
    top: 49%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(125,247,255,.26);
    background:
        radial-gradient(circle, rgba(123,245,255,.20), rgba(123,245,255,.08) 42%, transparent 70%);
    animation: loginPulse 3s ease-out infinite;
}
body.login-style-c .login-map-pin.pin-focus {
    z-index: 3;
    width: 58px;
    height: 58px;
    left: 56%;
    top: 49%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    color: #eaffff;
    background:
        linear-gradient(180deg, rgba(10, 32, 62, .58), rgba(8, 20, 42, .34));
    border: 1px solid rgba(160, 247, 255, .62);
    backdrop-filter: blur(10px);
    box-shadow:
        0 0 0 9px rgba(111,247,255,.10),
        0 16px 34px rgba(0,0,0,.22),
        0 0 26px rgba(98,240,255,.42),
        inset 0 1px 0 rgba(255,255,255,.18);
}
body.login-style-c .login-map-pin.pin-focus::before {
    inset: -12px;
    border: 1px solid rgba(125,247,255,.24);
    animation: loginPulse 3.2s ease-out infinite;
}
body.login-style-c .login-map-pin.pin-focus::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 16px;
    height: 16px;
    border-radius: 999px 999px 999px 0;
    background: rgba(100, 241, 255, .46);
    transform: translateX(-50%) rotate(-45deg);
    box-shadow: 0 0 18px rgba(100, 241, 255, .42);
}
body.login-style-c .login-map-pin.pin-focus i {
    position: relative;
    z-index: 1;
    color: #dffcff;
    font-size: 23px;
    filter: drop-shadow(0 0 10px rgba(112,247,255,.54));
}
@media (max-width: 991.98px) {
    body.login-style-c .login-map-pulse.pulse-focus {
        left: 55%;
        top: 50%;
    }
    body.login-style-c .login-map-pin.pin-focus {
        left: 55%;
        top: 50%;
    }
}
@media (max-width: 575.98px) {
    body.login-style-c .login-map-pulse.pulse-focus {
        width: 92px;
        height: 92px;
        left: 54%;
        top: 50%;
    }
    body.login-style-c .login-map-pin.pin-focus {
        width: 48px;
        height: 48px;
        left: 54%;
        top: 50%;
    }
    body.login-style-c .login-map-pin.pin-focus i {
        font-size: 20px;
    }
}


/* ===== v41 soft image background slideshow: index + login ===== */
.tmap-bg-slideshow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.tmap-bg-slideshow span {
    position: absolute;
    inset: -8%;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1);
    animation: tmapBgFadeZoom 45s infinite;
    will-change: opacity, transform;
    filter: saturate(1.1) contrast(1.03);
}
.tmap-bg-slideshow span:nth-child(1) { animation-delay: 0s; }
.tmap-bg-slideshow span:nth-child(2) { animation-delay: 9s; }
.tmap-bg-slideshow span:nth-child(3) { animation-delay: 18s; }
.tmap-bg-slideshow span:nth-child(4) { animation-delay: 27s; }
.tmap-bg-slideshow span:nth-child(5) { animation-delay: 36s; }

.tmap-hero-bg-slideshow {
    border-radius: inherit;
    opacity: .34;
}
.tmap-hero-bg-slideshow::after,
.tmap-login-bg-slideshow::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(2, 8, 22, .72), rgba(4, 24, 58, .48)),
        radial-gradient(circle at 68% 42%, rgba(0, 229, 255, .16), transparent 28rem);
}
.future-hero > .future-hero-bg-grid,
.future-hero > .future-hero-bg-rings,
.future-hero > .future-hero-content,
.future-hero > .future-hero-visual {
    position: relative;
    z-index: 2;
}
.tmap-page-bg {
    position: fixed;
    opacity: .18;
}
.tmap-login-bg-slideshow span {
    filter: blur(1px) saturate(1.05) contrast(1.02);
}
.future-login-shell {
    position: relative;
    z-index: 3;
}
.login-orbit,
.login-grid-layer {
    z-index: 1;
}
body.login-style-c .login-map-pin.pin-focus,
body.login-style-c .login-map-pulse.pulse-focus,
body.login-style-c .login-map-pin,
body.login-style-c .login-map-pulse {
    display: none !important;
}
body.login-style-c .login-map-image {
    width: 96% !important;
    height: 96% !important;
    left: 2% !important;
    top: 2% !important;
}
@keyframes tmapBgFadeZoom {
    0% { opacity: 0; transform: scale(1); }
    5% { opacity: .42; }
    20% { opacity: .42; transform: scale(1.10); }
    25% { opacity: 0; transform: scale(1.15); }
    100% { opacity: 0; transform: scale(1.15); }
}
@media (max-width: 767.98px) {
    .tmap-hero-bg-slideshow { opacity: .26; }
    .tmap-page-bg { opacity: .14; }
}


/* ===== v42 index proportion + background visibility refinement ===== */

/* Increase slideshow visibility by about 15% without overpowering the content */
.tmap-hero-bg-slideshow {
    opacity: .39 !important;
}
.tmap-page-bg {
    opacity: .21 !important;
}
.tmap-hero-bg-slideshow::after,
.tmap-login-bg-slideshow::after {
    background:
        linear-gradient(135deg, rgba(2, 8, 22, .64), rgba(4, 24, 58, .40)),
        radial-gradient(circle at 68% 42%, rgba(0, 229, 255, .18), transparent 28rem) !important;
}

/* Better public index proportions on desktop */
.public-page.future-page {
    max-width: 1480px;
    margin-inline: auto;
    padding-top: 18px;
}
.public-hero.future-hero {
    min-height: 480px !important;
    display: grid !important;
    grid-template-columns: minmax(390px, .95fr) minmax(520px, 1.05fr) !important;
    align-items: center !important;
    gap: clamp(24px, 4vw, 54px) !important;
    padding: clamp(38px, 4.2vw, 58px) !important;
    overflow: hidden;
}
.future-hero-content {
    align-self: center !important;
    padding-top: 0 !important;
    max-width: 560px !important;
}
.future-system-badge {
    margin-bottom: 14px !important;
}
.future-title {
    font-size: clamp(46px, 4.5vw, 72px) !important;
    line-height: .94 !important;
    margin-bottom: 8px !important;
}
.future-subtitle {
    font-size: clamp(22px, 2.1vw, 32px) !important;
    line-height: 1.18 !important;
    margin-bottom: 16px !important;
}
.future-hero-meta {
    margin-top: 16px !important;
    gap: 10px !important;
}
.future-hero-meta span {
    font-size: 13px !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
}
.public-hero-actions.future-actions {
    margin-top: 28px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
.future-actions .btn {
    min-height: 46px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
}

/* Make the map card balanced and not squeezed into the bottom-right corner */
.future-hero-visual.hero-map-image-stage {
    width: 100% !important;
    max-width: 650px !important;
    min-height: 360px !important;
    justify-self: center !important;
    align-self: center !important;
    padding: clamp(16px, 2vw, 24px) !important;
}
.hero-map-image-stage .hero-map-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: scale(1.02);
}
.hero-map-pin {
    transform: translate(-50%, -50%) scale(.94);
}

/* Tighten statistic cards so the section starts naturally after hero */
.public-stat-grid.future-stat-grid {
    margin-top: 18px !important;
    gap: 16px !important;
}
.future-stat-card {
    min-height: 154px !important;
    padding: 22px 20px !important;
}

/* Desktop menu proportion */
.public-navbar.future-navbar.with-top-menu {
    padding: 10px 18px !important;
}
.future-top-menu-inline.grouped-menu a {
    min-height: 42px !important;
    padding: 9px 16px !important;
}

/* Tablet */
@media (max-width: 1199.98px) {
    .public-page.future-page {
        max-width: 100%;
        padding-inline: 14px;
    }
    .public-hero.future-hero {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        padding: 30px !important;
        gap: 26px !important;
    }
    .future-hero-content {
        max-width: 720px !important;
    }
    .future-hero-visual.hero-map-image-stage {
        max-width: 760px !important;
        min-height: 330px !important;
    }
    .future-title {
        font-size: clamp(40px, 7vw, 62px) !important;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .public-page.future-page {
        padding-top: 10px;
        padding-inline: 10px;
    }
    .public-hero.future-hero {
        padding: 22px 16px !important;
        border-radius: 26px !important;
        gap: 20px !important;
    }
    .future-title {
        font-size: 36px !important;
        line-height: .98 !important;
    }
    .future-subtitle {
        font-size: 19px !important;
        line-height: 1.25 !important;
    }
    .future-hero-meta {
        display: grid !important;
        gap: 8px !important;
    }
    .public-hero-actions.future-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100%;
        margin-top: 20px !important;
    }
    .future-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .future-hero-visual.hero-map-image-stage {
        min-height: 230px !important;
        border-radius: 22px !important;
        padding: 12px !important;
    }
    .hero-map-pin {
        transform: translate(-50%, -50%) scale(.78);
    }
    .public-stat-grid.future-stat-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .future-stat-card {
        min-height: 128px !important;
        padding: 16px 12px !important;
    }
}

/* Small phones */
@media (max-width: 420px) {
    .public-stat-grid.future-stat-grid {
        grid-template-columns: 1fr !important;
    }
    .future-title {
        font-size: 32px !important;
    }
    .future-subtitle {
        font-size: 17px !important;
    }
}


/* ===== v44: move slideshow background to the outer page layer ===== */

/* The image slideshow is now the main page background, not inside the hero card. */
.public-home.future-home {
    position: relative;
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(2, 8, 22, .92), rgba(3, 22, 48, .88)),
        #061326 !important;
}

.tmap-public-page-bg {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    opacity: .36 !important;
}

.tmap-public-page-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(2, 8, 22, .58), rgba(4, 24, 58, .38)),
        radial-gradient(circle at 70% 38%, rgba(0, 229, 255, .18), transparent 30rem);
}

/* Keep all actual page UI above the page background. */
.public-navbar.future-navbar,
.public-page.future-page {
    position: relative !important;
    z-index: 2 !important;
}

/* Hero becomes a glass panel sitting above the page background. */
.public-hero.future-hero {
    background:
        linear-gradient(135deg, rgba(5, 18, 43, .72), rgba(6, 48, 74, .56)) !important;
    backdrop-filter: blur(8px);
    min-height: 390px !important;
    display: grid !important;
    grid-template-columns: minmax(420px, .92fr) minmax(500px, 1.08fr) !important;
    align-items: center !important;
    gap: clamp(20px, 3.2vw, 40px) !important;
    padding: clamp(28px, 3.2vw, 40px) !important;
    overflow: hidden !important;
}

.tmap-hero-bg-slideshow {
    display: none !important;
}

.future-hero-bg-rings {
    opacity: .20 !important;
    transform: translate(8%, 0%) scale(.72) !important;
    transform-origin: center !important;
}

.future-hero-content {
    max-width: 590px !important;
    align-self: center !important;
    justify-self: start !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.future-system-badge {
    margin-bottom: 12px !important;
}

.future-title {
    font-size: clamp(44px, 4.2vw, 66px) !important;
    line-height: .96 !important;
    margin: 0 0 7px !important;
}

.future-subtitle {
    font-size: clamp(21px, 1.8vw, 28px) !important;
    line-height: 1.2 !important;
    margin: 0 0 14px !important;
}

.future-hero-meta {
    margin-top: 12px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.future-hero-meta span {
    min-height: 33px !important;
    padding: 7px 11px !important;
    font-size: 12px !important;
}

.public-hero-actions.future-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 24px !important;
}

.future-actions .btn {
    min-height: 42px !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
}

.future-hero-visual.hero-map-image-stage {
    width: 100% !important;
    max-width: 620px !important;
    min-height: 300px !important;
    height: 300px !important;
    justify-self: center !important;
    align-self: center !important;
    padding: 14px !important;
    margin: 0 !important;
    transform: none !important;
}

.hero-map-image-stage .hero-map-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: scale(1.02) !important;
}

.hero-map-pin {
    transform: translate(-50%, -50%) scale(.82) !important;
}

.public-stat-grid.future-stat-grid {
    margin-top: 16px !important;
    gap: 14px !important;
}

.future-stat-card {
    min-height: 145px !important;
    padding: 20px 18px !important;
}

@media (max-width: 1199.98px) {
    .public-hero.future-hero {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        padding: 28px !important;
        gap: 22px !important;
    }

    .future-hero-content {
        max-width: 720px !important;
    }

    .future-hero-visual.hero-map-image-stage {
        max-width: 720px !important;
        height: 320px !important;
        min-height: 320px !important;
    }
}

@media (max-width: 767.98px) {
    .tmap-public-page-bg {
        opacity: .28 !important;
    }

    .public-hero.future-hero {
        padding: 22px 16px !important;
        border-radius: 26px !important;
        gap: 20px !important;
    }

    .future-title {
        font-size: 36px !important;
        line-height: .98 !important;
    }

    .future-subtitle {
        font-size: 19px !important;
        line-height: 1.25 !important;
    }

    .future-hero-meta {
        display: grid !important;
        gap: 8px !important;
    }

    .public-hero-actions.future-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100%;
        margin-top: 20px !important;
    }

    .future-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .future-hero-visual.hero-map-image-stage {
        min-height: 230px !important;
        height: 230px !important;
        border-radius: 22px !important;
        padding: 12px !important;
    }

    .hero-map-pin {
        transform: translate(-50%, -50%) scale(.72) !important;
    }
}


/* ===== v46 emergency fix: map must never be cropped ===== */

/* Keep the page background slideshow at the outermost layer. */
.tmap-public-page-bg {
    opacity: .52 !important;
}
.tmap-public-page-bg::after {
    background:
        linear-gradient(135deg, rgba(2, 8, 22, .46), rgba(4, 24, 58, .22)),
        radial-gradient(circle at 70% 38%, rgba(0, 229, 255, .20), transparent 32rem) !important;
}

/* Hero compact, but not so short that the map gets cut. */
.public-hero.future-hero {
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(410px, .92fr) minmax(560px, 1.08fr) !important;
    align-items: center !important;
    gap: clamp(20px, 3vw, 38px) !important;
    padding: 28px 34px !important;
    overflow: hidden !important;
}

/* Text block: compact but readable. */
.future-hero-content {
    max-width: 570px !important;
    align-self: center !important;
    padding: 0 !important;
    margin: 0 !important;
}
.future-system-badge {
    margin-bottom: 10px !important;
}
.future-title {
    font-size: clamp(42px, 4vw, 64px) !important;
    line-height: .96 !important;
    margin: 0 0 6px !important;
}
.future-subtitle {
    font-size: clamp(20px, 1.75vw, 28px) !important;
    line-height: 1.18 !important;
    margin: 0 0 12px !important;
}
.future-hero-meta {
    margin-top: 10px !important;
    gap: 8px !important;
}
.future-hero-meta span {
    min-height: 32px !important;
    padding: 7px 10px !important;
    font-size: 11px !important;
}
.public-hero-actions.future-actions {
    margin-top: 20px !important;
    gap: 10px !important;
}
.future-actions .btn {
    min-height: 40px !important;
    padding: 8px 15px !important;
    font-size: 13px !important;
}

/* Map card: restore enough height and force contain-center. */
.future-hero-visual.hero-map-image-stage {
    width: 100% !important;
    max-width: 640px !important;
    height: 330px !important;
    min-height: 330px !important;
    padding: 14px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: center !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05)) !important;
}

/* Hard reset all older image positioning that caused cropping. */
.future-hero-visual.hero-map-image-stage .hero-map-image,
.hero-map-image-stage .hero-map-image,
img.hero-map-image {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 96% !important;
    height: 96% !important;
    max-width: 96% !important;
    max-height: 96% !important;
    margin: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
}

/* Pin scale matched to the restored full map. */
.hero-map-pin {
    transform: translate(-50%, -50%) scale(.86) !important;
}

/* Keep the next section close without compressing the hero. */
.public-stat-grid.future-stat-grid {
    margin-top: 12px !important;
}

/* Tablet */
@media (max-width: 1199.98px) {
    .public-hero.future-hero {
        grid-template-columns: 1fr !important;
        padding: 26px 22px !important;
        gap: 20px !important;
    }
    .future-hero-visual.hero-map-image-stage {
        max-width: 720px !important;
        height: 360px !important;
        min-height: 360px !important;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .public-hero.future-hero {
        padding: 20px 14px !important;
        gap: 16px !important;
        border-radius: 26px !important;
    }
    .future-title {
        font-size: 34px !important;
    }
    .future-subtitle {
        font-size: 18px !important;
    }
    .future-hero-visual.hero-map-image-stage {
        height: 250px !important;
        min-height: 250px !important;
        padding: 10px !important;
        border-radius: 22px !important;
    }
    .hero-map-pin {
        transform: translate(-50%, -50%) scale(.70) !important;
    }
}

/* Small phones */
@media (max-width: 420px) {
    .future-hero-visual.hero-map-image-stage {
        height: 220px !important;
        min-height: 220px !important;
    }
}


/* ===== v48: clearer outer background + explicit hero layout fix ===== */

/* พื้นหลังชั้นหลังสุดให้ชัดขึ้นอีก */
.tmap-public-page-bg {
    opacity: .76 !important;
}
.tmap-public-page-bg span {
    filter: saturate(1.08) contrast(1.04) brightness(1.02) !important;
}
.tmap-public-page-bg::after {
    background:
        linear-gradient(135deg, rgba(2, 8, 22, .22), rgba(4, 24, 58, .08)),
        radial-gradient(circle at 70% 38%, rgba(0, 229, 255, .14), transparent 32rem) !important;
}

/* โครง Hero ให้ล็อกตำแหน่งชัดเจน: ซ้าย=ข้อความ ขวา=แผนที่ */
.public-hero.future-hero {
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(380px, .92fr) minmax(520px, 1.08fr) !important;
    grid-template-areas: "content visual" !important;
    align-items: center !important;
    gap: clamp(20px, 3vw, 34px) !important;
    padding: 22px 26px !important;
    background: linear-gradient(135deg, rgba(5, 18, 43, .54), rgba(6, 48, 74, .36)) !important;
    backdrop-filter: blur(7px);
    overflow: hidden !important;
}

.public-hero.future-hero .future-hero-content {
    grid-area: content !important;
    order: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    max-width: 560px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.public-hero.future-hero .future-hero-visual.hero-map-image-stage {
    grid-area: visual !important;
    order: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 620px !important;
    height: 320px !important;
    min-height: 320px !important;
    padding: 12px !important;
    margin: 0 !important;
    border-radius: 26px !important;
    background: linear-gradient(160deg, rgba(255,255,255,.15), rgba(255,255,255,.05)) !important;
}

.public-hero.future-hero .hero-map-image-stage .hero-map-image,
.public-hero.future-hero img.hero-map-image {
    position: absolute !important;
    inset: 0 !important;
    width: 96% !important;
    height: 96% !important;
    max-width: 96% !important;
    max-height: 96% !important;
    margin: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
}

.public-hero.future-hero .future-hero-bg-rings {
    opacity: .12 !important;
    transform: translate(8%, 0%) scale(.60) !important;
}

.public-hero.future-hero .future-system-badge {
    margin-bottom: 10px !important;
}
.public-hero.future-hero .future-title {
    font-size: clamp(42px, 3.9vw, 60px) !important;
    line-height: .95 !important;
    margin: 0 0 6px !important;
}
.public-hero.future-hero .future-subtitle {
    font-size: clamp(20px, 1.65vw, 25px) !important;
    line-height: 1.18 !important;
    margin: 0 0 10px !important;
}
.public-hero.future-hero .future-hero-meta {
    margin-top: 10px !important;
    gap: 8px !important;
}
.public-hero.future-hero .future-hero-meta span {
    min-height: 31px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
}
.public-hero.future-hero .public-hero-actions.future-actions {
    margin-top: 18px !important;
    gap: 10px !important;
}
.public-hero.future-hero .future-actions .btn {
    min-height: 40px !important;
    padding: 8px 15px !important;
    font-size: 13px !important;
}
.public-hero.future-hero .hero-map-pin {
    transform: translate(-50%, -50%) scale(.80) !important;
}

/* ให้ส่วนสถิติขึ้นชิดต่อจาก Hero แบบพอดี */
.public-stat-grid.future-stat-grid {
    margin-top: 10px !important;
}

/* Tablet / mobile */
@media (max-width: 1199.98px) {
    .public-hero.future-hero {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "content"
            "visual" !important;
        padding: 20px !important;
        gap: 16px !important;
    }
    .public-hero.future-hero .future-hero-content,
    .public-hero.future-hero .future-hero-visual.hero-map-image-stage {
        justify-self: stretch !important;
    }
    .public-hero.future-hero .future-hero-visual.hero-map-image-stage {
        max-width: 720px !important;
        height: 340px !important;
        min-height: 340px !important;
        margin-inline: auto !important;
    }
}

@media (max-width: 767.98px) {
    .tmap-public-page-bg {
        opacity: .58 !important;
    }
    .public-hero.future-hero {
        padding: 18px 14px !important;
        gap: 14px !important;
        border-radius: 24px !important;
    }
    .public-hero.future-hero .future-title {
        font-size: 34px !important;
    }
    .public-hero.future-hero .future-subtitle {
        font-size: 18px !important;
    }
    .public-hero.future-hero .future-hero-visual.hero-map-image-stage {
        height: 240px !important;
        min-height: 240px !important;
        border-radius: 20px !important;
        padding: 10px !important;
    }
    .public-hero.future-hero .hero-map-pin {
        transform: translate(-50%, -50%) scale(.68) !important;
    }
}


/* ===== v49 FORCE COMPACT HERO: ตัดพื้นที่ว่างในกรอบ Hero แบบบังคับ ===== */

/* ให้พื้นหลังนอกกรอบชัดขึ้น */
.tmap-public-page-bg {
    opacity: .82 !important;
}
.tmap-public-page-bg::after {
    background:
        linear-gradient(135deg, rgba(2, 8, 22, .16), rgba(4, 24, 58, .06)),
        radial-gradient(circle at 70% 38%, rgba(0, 229, 255, .10), transparent 32rem) !important;
}

/* ล็อกกรอบ Hero ให้สูงเท่ากับเนื้อหา ไม่ปล่อยพื้นที่ล่างโล่ง */
main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
    box-sizing: border-box !important;
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    padding: 24px 30px !important;
    margin-top: 12px !important;
    display: grid !important;
    grid-template-columns: minmax(380px, .95fr) minmax(500px, 1.05fr) !important;
    grid-template-areas: "content visual" !important;
    align-items: center !important;
    column-gap: 30px !important;
    row-gap: 0 !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, rgba(5, 18, 43, .48), rgba(6, 48, 74, .32)) !important;
    backdrop-filter: blur(6px) !important;
}

/* ซ่อนวงแหวนกลางกรอบที่ทำให้ดูโล่ง */
main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-bg-rings {
    display: none !important;
}

/* ซ่อน grid ใน hero ให้ภาพพื้นหลังด้านนอกเด่นขึ้น */
main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-bg-grid {
    opacity: .22 !important;
}

/* ข้อความอยู่กลางซ้าย ไม่ลอยสูง */
main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-content {
    grid-area: content !important;
    position: relative !important;
    z-index: 3 !important;
    align-self: center !important;
    justify-self: start !important;
    max-width: 560px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

/* ปรับขนาดข้อความให้พอดีกับกรอบ 360px */
main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-system-badge {
    margin: 0 0 10px !important;
    min-height: 30px !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-title {
    margin: 0 0 5px !important;
    font-size: clamp(40px, 3.8vw, 58px) !important;
    line-height: .95 !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-subtitle {
    margin: 0 0 10px !important;
    font-size: clamp(19px, 1.55vw, 24px) !important;
    line-height: 1.15 !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-meta {
    margin: 10px 0 0 !important;
    gap: 7px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-meta span {
    min-height: 29px !important;
    padding: 6px 10px !important;
    font-size: 10.8px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .public-hero-actions.future-actions {
    margin: 18px 0 0 !important;
    gap: 9px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-actions .btn {
    min-height: 38px !important;
    padding: 7px 14px !important;
    font-size: 12.5px !important;
}

/* แผนที่อยู่กลางขวา และกรอบสูงพอดี ไม่เหลือพื้นที่ล่างใน hero */
main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
    grid-area: visual !important;
    position: relative !important;
    z-index: 3 !important;
    align-self: center !important;
    justify-self: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 610px !important;
    height: 290px !important;
    min-height: 290px !important;
    max-height: 290px !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
    border-radius: 26px !important;
    background: linear-gradient(160deg, rgba(255,255,255,.15), rgba(255,255,255,.05)) !important;
}

/* บังคับรูปแผนที่แสดงครบ */
main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage .hero-map-image,
main.public-page.future-page > section.public-hero.future-hero#hero-map-zone img.hero-map-image {
    position: absolute !important;
    inset: 0 !important;
    width: 96% !important;
    height: 96% !important;
    max-width: 96% !important;
    max-height: 96% !important;
    margin: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .hero-map-pin {
    transform: translate(-50%, -50%) scale(.74) !important;
}

/* ให้การ์ดสถิติต่อจาก hero แบบไม่ห่าง */
main.public-page.future-page > .public-stat-grid.future-stat-grid {
    margin-top: 10px !important;
}

/* Tablet */
@media (max-width: 1199.98px) {
    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "content"
            "visual" !important;
        padding: 22px !important;
        row-gap: 16px !important;
    }

    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
        max-width: 720px !important;
        height: 330px !important;
        min-height: 330px !important;
        max-height: 330px !important;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .tmap-public-page-bg {
        opacity: .62 !important;
    }

    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
        padding: 18px 14px !important;
        border-radius: 24px !important;
        row-gap: 14px !important;
    }

    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-title {
        font-size: 33px !important;
    }

    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-subtitle {
        font-size: 17px !important;
    }

    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
        height: 235px !important;
        min-height: 235px !important;
        max-height: 235px !important;
        border-radius: 20px !important;
    }

    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .hero-map-pin {
        transform: translate(-50%, -50%) scale(.64) !important;
    }
}


/* ===== v50: fix hero title/subtitle overlap ===== */
main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-title {
    margin: 0 0 12px !important;
    line-height: 1.02 !important;
    letter-spacing: -0.02em !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-subtitle {
    display: block !important;
    margin: 8px 0 14px !important;
    line-height: 1.26 !important;
    letter-spacing: 0 !important;
    max-width: 540px !important;
    word-break: keep-all !important;
}

@media (max-width: 767.98px) {
    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-title {
        margin-bottom: 10px !important;
        line-height: 1.04 !important;
    }

    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-subtitle {
        margin-top: 6px !important;
        margin-bottom: 12px !important;
        line-height: 1.28 !important;
    }
}


/* ===== v51: reduce index + login visual scale by about 35% ===== */

/* ---------- INDEX: compact desktop/tablet proportion ---------- */
.public-navbar.future-navbar.with-top-menu {
    padding: 7px 14px !important;
    min-height: 48px !important;
}

.public-brand.future-brand {
    gap: 8px !important;
}

.public-brand-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}

.public-brand-text {
    font-size: 13px !important;
    line-height: 1.15 !important;
}

.future-top-menu-inline.grouped-menu a {
    min-height: 34px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    gap: 6px !important;
}

.future-top-menu-inline.grouped-menu a i {
    font-size: 12px !important;
}

.public-page.future-page {
    max-width: 1260px !important;
    padding-top: 8px !important;
}

/* Force hero to be smaller but keep map visible */
main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
    height: 265px !important;
    min-height: 265px !important;
    max-height: 265px !important;
    padding: 16px 22px !important;
    margin-top: 8px !important;
    column-gap: 22px !important;
    grid-template-columns: minmax(320px, .94fr) minmax(410px, 1.06fr) !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-system-badge {
    min-height: 24px !important;
    padding: 4px 9px !important;
    margin-bottom: 7px !important;
    font-size: 9.5px !important;
    border-radius: 999px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-title {
    font-size: clamp(30px, 2.8vw, 42px) !important;
    line-height: 1.02 !important;
    margin: 0 0 7px !important;
    letter-spacing: -0.02em !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-subtitle {
    font-size: clamp(14px, 1.25vw, 17px) !important;
    line-height: 1.26 !important;
    margin: 5px 0 8px !important;
    max-width: 410px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-meta {
    margin-top: 7px !important;
    gap: 6px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-meta span {
    min-height: 23px !important;
    padding: 4px 8px !important;
    font-size: 8.8px !important;
    gap: 5px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-meta span i {
    font-size: 9px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .public-hero-actions.future-actions {
    margin-top: 12px !important;
    gap: 7px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-actions .btn {
    min-height: 30px !important;
    padding: 5px 11px !important;
    font-size: 10px !important;
    border-radius: 999px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
    max-width: 455px !important;
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
    padding: 9px !important;
    border-radius: 20px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage .hero-map-image,
main.public-page.future-page > section.public-hero.future-hero#hero-map-zone img.hero-map-image {
    width: 96% !important;
    height: 96% !important;
    max-width: 96% !important;
    max-height: 96% !important;
    object-fit: contain !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .hero-map-pin {
    transform: translate(-50%, -50%) scale(.60) !important;
}

/* Stat cards and panels smaller */
.public-stat-grid.future-stat-grid {
    margin-top: 8px !important;
    gap: 10px !important;
}

.public-stat-card.future-stat-card,
.future-stat-card {
    min-height: 98px !important;
    padding: 12px 11px !important;
    border-radius: 18px !important;
}

.future-stat-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    margin-bottom: 7px !important;
}

.public-stat-label {
    font-size: 12px !important;
    line-height: 1.2 !important;
}

.future-stat-value strong {
    font-size: 24px !important;
    line-height: 1 !important;
}

.future-stat-value span {
    font-size: 11px !important;
}

.public-tab-nav.future-tab-nav {
    gap: 8px !important;
    margin: 10px 0 !important;
}

.public-tab-nav.future-tab-nav a {
    min-height: 34px !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    border-radius: 14px !important;
}

.future-panel,
.public-panel.future-panel {
    border-radius: 18px !important;
    padding: 14px !important;
}

.future-section-head h2,
.public-section-head h2 {
    font-size: 15px !important;
}

.future-section-head p,
.public-section-head p {
    font-size: 11px !important;
}

.future-chart-grid {
    gap: 12px !important;
}

.public-donut-wrap.future-donut-wrap {
    max-height: 250px !important;
    overflow: hidden !important;
}

#publicCategoryChart {
    max-height: 220px !important;
}

#publicSchoolChart {
    max-height: 210px !important;
}

/* ---------- LOGIN: reduce by about 35% ---------- */
.future-login-page {
    padding: 18px !important;
}

.future-login-shell {
    width: min(920px, 100%) !important;
    min-height: 470px !important;
    border-radius: 26px !important;
    grid-template-columns: 1.05fr .95fr !important;
}

.future-login-visual {
    padding: 24px 27px 22px !important;
}

.login-brand-pill {
    min-height: 30px !important;
    padding: 6px 11px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    gap: 7px !important;
}

.login-title-group {
    margin-top: 26px !important;
}

.login-kicker {
    font-size: 9px !important;
    letter-spacing: .14em !important;
    margin-bottom: 6px !important;
}

.login-title-group h1 {
    font-size: clamp(34px, 4.8vw, 56px) !important;
    line-height: .95 !important;
    margin-bottom: 7px !important;
}

.login-title-group h2 {
    font-size: clamp(13px, 1.25vw, 17px) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
}

.login-style-b-copy {
    margin-top: 7px !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    max-width: 420px !important;
}

.login-map-stage {
    width: min(330px, 100%) !important;
    height: 168px !important;
    margin-top: 17px !important;
    border-radius: 18px !important;
}

.login-data-row {
    gap: 7px !important;
    margin-top: 12px !important;
}

.login-data-chip {
    min-height: 28px !important;
    padding: 5px 9px !important;
    font-size: 10px !important;
    gap: 6px !important;
}

.future-login-panel {
    padding: 54px 30px 24px !important;
}

.login-back-link {
    top: 16px !important;
    left: 20px !important;
    min-height: 30px !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
}

.login-panel-badge {
    min-height: 25px !important;
    padding: 5px 9px !important;
    margin-bottom: 8px !important;
    font-size: 9px !important;
}

.login-form-head {
    margin-bottom: 14px !important;
}

.login-form-head h2 {
    font-size: clamp(25px, 2.8vw, 34px) !important;
    line-height: 1.05 !important;
}

.login-form-head p {
    margin-top: 7px !important;
    font-size: 11px !important;
    line-height: 1.42 !important;
}

.future-login-form {
    gap: 11px !important;
}

.login-field label {
    margin-bottom: 5px !important;
    font-size: 11px !important;
}

.future-input-wrap {
    min-height: 44px !important;
    grid-template-columns: 42px 1fr !important;
    border-radius: 14px !important;
}

.future-input-wrap.has-action {
    grid-template-columns: 42px 1fr 44px !important;
}

.future-input,
.future-input-icon,
.password-toggle-btn {
    height: 44px !important;
}

.future-input {
    font-size: 13px !important;
    padding: 0 11px !important;
}

.future-input-icon,
.password-toggle-btn {
    font-size: 14px !important;
}

.password-toggle-btn {
    width: 44px !important;
}

.future-login-submit {
    min-height: 46px !important;
    margin-top: 4px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
}

.login-footer-credit {
    margin-top: 13px !important;
    font-size: 9.5px !important;
}

/* Tablet and small screens */
@media (max-width: 991.98px) {
    .future-login-shell {
        grid-template-columns: 1fr !important;
        width: min(720px, 100%) !important;
        min-height: 0 !important;
    }

    .future-login-visual {
        padding: 22px !important;
    }

    .login-title-group {
        margin-top: 22px !important;
    }

    .login-map-stage {
        width: 100% !important;
        height: 190px !important;
    }

    .future-login-panel {
        padding: 50px 22px 22px !important;
    }

    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "content"
            "visual" !important;
        padding: 18px !important;
        gap: 14px !important;
    }

    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
        max-width: 560px !important;
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
    }
}

/* Mobile: compact but readable */
@media (max-width: 575.98px) {
    .public-brand-text {
        font-size: 11px !important;
    }

    .future-top-menu-inline.grouped-menu a {
        min-height: 30px !important;
        padding: 5px 9px !important;
        font-size: 11px !important;
    }

    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
        padding: 14px 11px !important;
        border-radius: 20px !important;
    }

    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-title {
        font-size: 29px !important;
    }

    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-subtitle {
        font-size: 15px !important;
    }

    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
        height: 205px !important;
        min-height: 205px !important;
        max-height: 205px !important;
    }

    .public-stat-grid.future-stat-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .public-stat-card.future-stat-card,
    .future-stat-card {
        min-height: 90px !important;
        padding: 11px 9px !important;
    }

    .future-login-page {
        padding: 10px !important;
    }

    .future-login-shell {
        border-radius: 20px !important;
    }

    .future-login-visual {
        padding: 18px !important;
    }

    .login-title-group h1 {
        font-size: 38px !important;
    }

    .login-title-group h2 {
        font-size: 14px !important;
    }

    .login-map-stage {
        height: 155px !important;
    }

    .login-data-row {
        display: none !important;
    }

    .future-login-panel {
        padding: 48px 16px 18px !important;
    }
}


/* ===== v52: increase v51 scale by about 20% + center footer order ===== */

/* ---------- INDEX: +20% from v51 compact scale ---------- */
.public-navbar.future-navbar.with-top-menu {
    padding: 8px 17px !important;
    min-height: 58px !important;
}

.public-brand-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    font-size: 17px !important;
}

.public-brand-text {
    font-size: 15.5px !important;
    line-height: 1.18 !important;
}

.future-top-menu-inline.grouped-menu a {
    min-height: 41px !important;
    padding: 7px 14px !important;
    font-size: 14px !important;
    gap: 7px !important;
}

.future-top-menu-inline.grouped-menu a i {
    font-size: 14px !important;
}

.public-page.future-page {
    max-width: 1360px !important;
    padding-top: 10px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
    height: 318px !important;
    min-height: 318px !important;
    max-height: 318px !important;
    padding: 19px 26px !important;
    margin-top: 10px !important;
    column-gap: 26px !important;
    grid-template-columns: minmax(365px, .94fr) minmax(490px, 1.06fr) !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-system-badge {
    min-height: 29px !important;
    padding: 5px 11px !important;
    margin-bottom: 8px !important;
    font-size: 11px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-title {
    font-size: clamp(36px, 3.35vw, 50px) !important;
    line-height: 1.02 !important;
    margin: 0 0 9px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-subtitle {
    font-size: clamp(17px, 1.5vw, 20.5px) !important;
    line-height: 1.28 !important;
    margin: 6px 0 10px !important;
    max-width: 492px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-meta {
    margin-top: 9px !important;
    gap: 7px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-meta span {
    min-height: 28px !important;
    padding: 5px 10px !important;
    font-size: 10.5px !important;
    gap: 6px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-meta span i {
    font-size: 11px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .public-hero-actions.future-actions {
    margin-top: 14px !important;
    gap: 8px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-actions .btn {
    min-height: 36px !important;
    padding: 6px 13px !important;
    font-size: 12px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
    max-width: 546px !important;
    height: 252px !important;
    min-height: 252px !important;
    max-height: 252px !important;
    padding: 11px !important;
    border-radius: 22px !important;
}

main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .hero-map-pin {
    transform: translate(-50%, -50%) scale(.72) !important;
}

/* Stat cards and panels +20% */
.public-stat-grid.future-stat-grid {
    margin-top: 10px !important;
    gap: 12px !important;
}

.public-stat-card.future-stat-card,
.future-stat-card {
    min-height: 118px !important;
    padding: 14px 13px !important;
    border-radius: 20px !important;
}

.future-stat-icon {
    width: 41px !important;
    height: 41px !important;
    border-radius: 14px !important;
    font-size: 18px !important;
    margin-bottom: 8px !important;
}

.public-stat-label {
    font-size: 14px !important;
    line-height: 1.22 !important;
}

.future-stat-value strong {
    font-size: 29px !important;
}

.future-stat-value span {
    font-size: 13px !important;
}

.public-tab-nav.future-tab-nav {
    gap: 10px !important;
    margin: 12px 0 !important;
}

.public-tab-nav.future-tab-nav a {
    min-height: 41px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    border-radius: 16px !important;
}

.future-panel,
.public-panel.future-panel {
    border-radius: 20px !important;
    padding: 17px !important;
}

.future-section-head h2,
.public-section-head h2 {
    font-size: 18px !important;
}

.future-section-head p,
.public-section-head p {
    font-size: 13px !important;
}

.public-donut-wrap.future-donut-wrap {
    max-height: 300px !important;
}

#publicCategoryChart {
    max-height: 265px !important;
}

#publicSchoolChart {
    max-height: 250px !important;
}

/* ---------- LOGIN: +20% from v51 compact scale ---------- */
.future-login-page {
    padding: 22px !important;
}

.future-login-shell {
    width: min(1104px, 100%) !important;
    min-height: 564px !important;
    border-radius: 31px !important;
}

.future-login-visual {
    padding: 29px 32px 26px !important;
}

.login-brand-pill {
    min-height: 36px !important;
    padding: 7px 13px !important;
    font-size: 14px !important;
    gap: 8px !important;
}

.login-title-group {
    margin-top: 31px !important;
}

.login-kicker {
    font-size: 11px !important;
    margin-bottom: 7px !important;
}

.login-title-group h1 {
    font-size: clamp(41px, 5.75vw, 67px) !important;
    line-height: .96 !important;
    margin-bottom: 8px !important;
}

.login-title-group h2 {
    font-size: clamp(16px, 1.5vw, 20px) !important;
    line-height: 1.35 !important;
}

.login-style-b-copy {
    margin-top: 8px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    max-width: 504px !important;
}

.login-map-stage {
    width: min(396px, 100%) !important;
    height: 202px !important;
    margin-top: 20px !important;
    border-radius: 22px !important;
}

.login-data-row {
    gap: 8px !important;
    margin-top: 14px !important;
}

.login-data-chip {
    min-height: 34px !important;
    padding: 6px 11px !important;
    font-size: 12px !important;
    gap: 7px !important;
}

.future-login-panel {
    padding: 65px 36px 29px !important;
}

.login-back-link {
    top: 19px !important;
    left: 24px !important;
    min-height: 36px !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
}

.login-panel-badge {
    min-height: 30px !important;
    padding: 6px 11px !important;
    margin-bottom: 10px !important;
    font-size: 11px !important;
}

.login-form-head {
    margin-bottom: 17px !important;
}

.login-form-head h2 {
    font-size: clamp(30px, 3.35vw, 41px) !important;
    line-height: 1.05 !important;
}

.login-form-head p {
    margin-top: 8px !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
}

.future-login-form {
    gap: 13px !important;
}

.login-field label {
    margin-bottom: 6px !important;
    font-size: 13px !important;
}

.future-input-wrap {
    min-height: 53px !important;
    grid-template-columns: 50px 1fr !important;
    border-radius: 17px !important;
}

.future-input-wrap.has-action {
    grid-template-columns: 50px 1fr 53px !important;
}

.future-input,
.future-input-icon,
.password-toggle-btn {
    height: 53px !important;
}

.future-input {
    font-size: 16px !important;
    padding: 0 13px !important;
}

.future-input-icon,
.password-toggle-btn {
    font-size: 17px !important;
}

.password-toggle-btn {
    width: 53px !important;
}

.future-login-submit {
    min-height: 55px !important;
    margin-top: 5px !important;
    border-radius: 17px !important;
    font-size: 17px !important;
}

/* Footer: centered, requested order */
.public-footer,
.login-footer-credit {
    text-align: center !important;
    justify-items: center !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.login-footer-credit {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 4px !important;
    margin-top: 16px !important;
    font-size: 11.5px !important;
}

.public-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.public-footer::before {
    content: "จัดทำโดย : สำนักงาน สกร.ประจำจังหวัดประจวบคีรีขันธ์";
    display: block;
    font-weight: 700;
}

.public-footer::after {
    content: "พัฒนาระบบ : นายอรุธพล ถังเงิน";
    display: block;
    font-weight: 700;
}

/* Hide old footer text if it exists inside public footer */
.public-footer > * {
    display: none !important;
}

/* Tablet and small screens */
@media (max-width: 991.98px) {
    .future-login-shell {
        width: min(864px, 100%) !important;
        min-height: 0 !important;
    }

    .future-login-visual {
        padding: 26px !important;
    }

    .login-title-group {
        margin-top: 26px !important;
    }

    .login-map-stage {
        width: 100% !important;
        height: 228px !important;
    }

    .future-login-panel {
        padding: 60px 26px 26px !important;
    }

    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "content"
            "visual" !important;
        padding: 22px !important;
        gap: 17px !important;
    }

    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
        max-width: 672px !important;
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .public-brand-text {
        font-size: 13px !important;
    }

    .future-top-menu-inline.grouped-menu a {
        min-height: 36px !important;
        padding: 6px 11px !important;
        font-size: 13px !important;
    }

    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
        padding: 17px 13px !important;
        border-radius: 22px !important;
    }

    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-title {
        font-size: 35px !important;
    }

    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-subtitle {
        font-size: 18px !important;
    }

    main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
        height: 246px !important;
        min-height: 246px !important;
        max-height: 246px !important;
    }

    .future-login-page {
        padding: 12px !important;
    }

    .future-login-shell {
        border-radius: 22px !important;
    }

    .future-login-visual {
        padding: 22px !important;
    }

    .login-title-group h1 {
        font-size: 46px !important;
    }

    .login-title-group h2 {
        font-size: 17px !important;
    }

    .login-map-stage {
        height: 186px !important;
    }

    .future-login-panel {
        padding: 58px 19px 22px !important;
    }
}


/* ===== v53 exact footer text/order ===== */
.public-footer,
.login-footer-credit {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 4px !important;
    width: 100% !important;
}

.login-footer-credit {
    flex-direction: column !important;
}

.public-footer > * {
    display: none !important;
}

.public-footer::before {
    content: "© 2026 ระบบ Prachuap Learning T-Map  | พัฒนาโปรแกรม : นายอรุธพล ถังเงิน" !important;
    display: block !important;
    font-weight: 700 !important;
}

.public-footer::after {
    content: "สำนักงานส่งเสริมการเรียนรู้ประจำจังหวัดประจวบคีรีขันธ์" !important;
    display: block !important;
    font-weight: 700 !important;
}

.login-footer-credit span {
    display: block !important;
    width: 100% !important;
}

.login-footer-credit span:first-child {
    order: 1 !important;
}

.login-footer-credit span:last-child {
    order: 2 !important;
}

@media (max-width: 575.98px) {
    .public-footer,
    .login-footer-credit {
        font-size: 11px !important;
        line-height: 1.45 !important;
        padding-inline: 10px !important;
    }
}


/* ===== v54 exact footer + 25% smaller ===== */
.public-footer,
.login-footer-credit {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 3px !important;
    width: 100% !important;
    font-size: 9px !important; /* ลดขนาดลงประมาณ 25% */
    line-height: 1.4 !important;
    font-weight: 600 !important;
}

.public-footer > * {
    display: none !important;
}

.public-footer::before {
    content: "© 2026 ระบบ Prachuap Learning T-Map  | พัฒนาโปรแกรม : นายอรุธพล ถังเงิน" !important;
    display: block !important;
}

.public-footer::after {
    content: "สำนักงานส่งเสริมการเรียนรู้ประจำจังหวัดประจวบคีรีขันธ์" !important;
    display: block !important;
}

.login-footer-credit span {
    display: block !important;
    width: 100% !important;
}

.login-footer-credit span:first-child {
    order: 1 !important;
}

.login-footer-credit span:last-child {
    order: 2 !important;
}

@media (max-width: 575.98px) {
    .public-footer,
    .login-footer-credit {
        font-size: 8.5px !important;
        line-height: 1.45 !important;
        padding-inline: 8px !important;
    }
}


/* ===== v55 visitor count chip above footer ===== */
.public-visit-footer-chip {
    width: fit-content;
    max-width: calc(100% - 24px);
    margin: 14px auto 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 28px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(96, 38, 196, .92), rgba(102, 27, 150, .88));
    border: 1px solid rgba(206, 164, 255, .22);
    color: #e9d5ff;
    box-shadow: 0 10px 26px rgba(64, 16, 120, .22), inset 0 1px 0 rgba(255,255,255,.10);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.01em;
}

.public-visit-footer-chip i {
    color: #b77cff;
    font-size: 11px;
}

.public-visit-footer-chip i:last-child {
    color: rgba(233, 213, 255, .65);
    font-size: 9px;
}

/* Hide old visitor-card section at bottom if present; keep only the new chip. */
.public-visitor-grid,
.future-visitor-grid {
    display: none !important;
}

@media (max-width: 575.98px) {
    .public-visit-footer-chip {
        margin: 12px auto 7px;
        min-height: 26px;
        padding: 6px 10px;
        font-size: 10px;
    }
}


/* ===== v56 blue visitor chip + footer 20% larger ===== */

/* เปลี่ยนชิปผู้เข้าชมเป็นโทนน้ำเงิน */
.public-visit-footer-chip {
    background: linear-gradient(135deg, rgba(37, 99, 235, .96), rgba(14, 165, 233, .90)) !important;
    border: 1px solid rgba(191, 219, 254, .30) !important;
    color: #eff6ff !important;
    box-shadow:
        0 10px 26px rgba(37, 99, 235, .24),
        inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.public-visit-footer-chip i {
    color: #bfdbfe !important;
}

.public-visit-footer-chip i:last-child {
    color: rgba(239, 246, 255, .72) !important;
}

/* Footer ใหญ่ขึ้น 20% จาก v54/v55 */
.public-footer,
.login-footer-credit {
    font-size: 10.8px !important;
    line-height: 1.45 !important;
}

@media (max-width: 575.98px) {
    .public-footer,
    .login-footer-credit {
        font-size: 10.2px !important;
        line-height: 1.45 !important;
    }
}


/* ===== v57 footer text update ===== */
.public-footer::before {
    content: "© 2026 Prachuap Learning T-Map  | พัฒนาระบบ : นายอรุธพล ถังเงิน" !important;
}

.public-footer::after {
    content: "สำนักงานส่งเสริมการเรียนรู้ประจำจังหวัดประจวบคีรีขันธ์" !important;
}

.login-footer-credit span:first-child::before {
    content: none !important;
}


/* ===== v58 remove visitor cards section ===== */
/* ซ่อนการ์ดผู้เข้าชมวันนี้/เดือนนี้/สะสมทั้งหมด เหลือเฉพาะชิปผู้เข้าชมเหนือ footer */
.public-visitor-grid,
.future-visitor-grid,
.visitor-stat-grid,
.visitor-grid,
section:has(.visitor-today),
section:has(.visitor-month),
section:has(.visitor-total),
.future-stat-card.visitor-today,
.future-stat-card.visitor-month,
.future-stat-card.visitor-total,
.public-stat-card.visitor-today,
.public-stat-card.visitor-month,
.public-stat-card.visitor-total {
    display: none !important;
}


/* ===== v59 mobile responsive fix for stats charts ===== */
/* แก้กราฟโดนตัด/ล้นขอบบนมือถือ */
@media (max-width: 575.98px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .public-page.future-page,
    .public-home.future-home,
    main.public-page.future-page {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 10px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .public-stat-grid.future-stat-grid {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .public-stat-card.future-stat-card,
    .future-stat-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .public-tab-nav.future-tab-nav {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .public-tab-nav.future-tab-nav a {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .public-chart-grid.future-chart-grid,
    .future-chart-grid {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .public-panel.future-panel,
    .future-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 14px 12px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .public-donut-wrap.future-donut-wrap,
    .future-donut-wrap,
    .public-donut-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 245px !important;
        min-height: 245px !important;
        max-height: 245px !important;
        overflow: hidden !important;
        display: block !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    #publicCategoryChart {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 245px !important;
        max-height: 245px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    #publicSchoolChart {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 230px !important;
        max-height: 230px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .future-section-head h2,
    .public-section-head h2 {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    .future-section-head p,
    .public-section-head p {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }
}

/* จอเล็กมาก เช่น iPhone SE */
@media (max-width: 390px) {
    .public-page.future-page,
    main.public-page.future-page {
        padding-inline: 8px !important;
    }

    .public-panel.future-panel,
    .future-panel {
        padding: 12px 10px !important;
    }

    .public-donut-wrap.future-donut-wrap,
    .future-donut-wrap,
    .public-donut-wrap,
    #publicCategoryChart {
        height: 220px !important;
        max-height: 220px !important;
        min-height: 220px !important;
    }

    #publicSchoolChart {
        height: 225px !important;
        max-height: 225px !important;
    }
}

/* v192.1 - The bottom bar lives outside the transformed page header. */
.tmap-app-bottom-nav {
    display: none;
}

@media (max-width: 1024px) {
    body.public-home .future-top-menu-inline.grouped-menu,
    body.public-home .future-top-menu-inline.grouped-menu.is-open,
    body.public-home.tmap-menu-open .future-top-menu-inline.grouped-menu,
    body.public-home.tmap-menu-open .future-top-menu-inline.grouped-menu.is-open {
        display: none !important;
    }

    body.public-home .tmap-app-bottom-nav {
        position: fixed !important;
        z-index: 10050 !important;
        inset: auto 0 0 0 !important;
        width: 100vw !important;
        min-width: 0 !important;
        height: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 7px max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-left, 0px)) !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 4px !important;
        box-sizing: border-box !important;
        border-top: 1px solid rgba(104, 218, 255, 0.34) !important;
        background: rgba(5, 25, 49, 0.96) !important;
        box-shadow: 0 -10px 28px rgba(0, 10, 30, 0.38) !important;
        backdrop-filter: blur(18px) saturate(135%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
    }

    body.public-home .tmap-app-bottom-nav a {
        position: relative !important;
        min-width: 0 !important;
        height: 56px !important;
        padding: 6px 3px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        border-radius: 8px !important;
        color: #a9bad0 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    body.public-home .tmap-app-bottom-nav a::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 28px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: transparent;
        transform: translateX(-50%);
    }

    body.public-home .tmap-app-bottom-nav a i {
        width: 24px !important;
        height: 24px !important;
        display: grid !important;
        place-items: center !important;
        font-size: 18px !important;
    }

    body.public-home .tmap-app-bottom-nav a span {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.public-home .tmap-app-bottom-nav a.active {
        color: #66ddff !important;
        background: rgba(23, 145, 221, 0.14) !important;
    }

    body.public-home .tmap-app-bottom-nav a.active::before {
        background: linear-gradient(90deg, #2f8cff, #35e5e2);
        box-shadow: 0 0 12px rgba(53, 229, 226, 0.78);
    }

    body.public-home .tmap-app-bottom-nav a.active i {
        filter: drop-shadow(0 0 7px rgba(70, 215, 255, 0.72));
    }
}

@media (max-width: 390px) {
    body.public-home .tmap-app-bottom-nav a {
        font-size: 10px !important;
    }
}


/* ===== v60 hero description + school chart mobile fix ===== */
.future-hero-description{
    margin: 0 0 18px;
    max-width: 680px;
    font-size: 15px;
    line-height: 1.65;
    font-weight: 600;
    color: #d9ecff;
    letter-spacing: .01em;
    text-wrap: balance;
    text-shadow: 0 4px 18px rgba(0,0,0,.18);
}

@media (max-width: 767.98px){
    .future-hero-description{
        margin: 0 0 14px;
        font-size: 13px;
        line-height: 1.55;
    }

    .future-section-head h2,
    .public-section-head h2{
        font-size: 14px !important;
        line-height: 1.25 !important;
    }

    .future-section-head p,
    .public-section-head p{
        font-size: 10px !important;
        line-height: 1.35 !important;
    }

    #publicSchoolChart{
        height: 285px !important;
        max-height: 285px !important;
    }
}

@media (max-width: 575.98px){
    .future-hero-description{
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }

    .public-panel.future-panel,
    .future-panel{
        overflow: hidden !important;
    }

    #publicSchoolChart{
        height: 300px !important;
        max-height: 300px !important;
    }
}

@media (max-width: 390px){
    .future-hero-description{
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    #publicSchoolChart{
        height: 315px !important;
        max-height: 315px !important;
    }
}


/* ===== v61 navbar brand text update ===== */
.public-brand.future-brand {
    min-width: 0 !important;
}

.public-brand-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: min(54vw, 640px) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

@media (max-width: 767.98px) {
    .public-brand-text {
        max-width: calc(100vw - 150px) !important;
        font-size: 12px !important;
    }
}

@media (max-width: 390px) {
    .public-brand-text {
        max-width: calc(100vw - 135px) !important;
        font-size: 11px !important;
    }
}


/* ===== v62 header separator: use true vertical bar ===== */
.public-brand-text {
    letter-spacing: -0.01em !important;
}


/* ===== v63 : top menu capsule 3D style ===== */
.public-navbar.future-navbar.with-top-menu {
    align-items: center !important;
    gap: 16px !important;
}

.future-top-menu-inline.grouped-menu {
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px !important;
    background: linear-gradient(180deg, rgba(6, 18, 44, .48), rgba(4, 12, 32, .38)) !important;
    border: 1px solid rgba(118, 186, 255, .12) !important;
    border-radius: 22px !important;
    overflow: visible !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 14px 32px rgba(0, 0, 0, .22),
        0 0 0 1px rgba(8, 24, 54, .18) !important;
    backdrop-filter: blur(10px) saturate(1.05) !important;
}

.future-top-menu-inline.grouped-menu a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(150, 220, 255, .18) !important;
    border-right: 1px solid rgba(150, 220, 255, .18) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
        linear-gradient(135deg, rgba(18, 38, 84, .96), rgba(7, 19, 46, .98)) !important;
    color: #eef7ff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -10px 16px rgba(0, 0, 0, .14),
        0 8px 18px rgba(0, 0, 0, .20),
        0 0 18px rgba(32, 130, 255, .10) !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease !important;
    overflow: hidden !important;
}

.future-top-menu-inline.grouped-menu a::before {
    content: "" !important;
    position: absolute !important;
    inset: 1px 1px auto 1px !important;
    height: 52% !important;
    border-radius: inherit !important;
    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04)) !important;
    opacity: .70 !important;
    pointer-events: none !important;
}

.future-top-menu-inline.grouped-menu a::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 12px 5px 12px !important;
    height: 9px !important;
    border-radius: 999px !important;
    background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.20), transparent 72%) !important;
    opacity: .45 !important;
    pointer-events: none !important;
}

.future-top-menu-inline.grouped-menu a:first-child,
.future-top-menu-inline.grouped-menu a:last-child {
    border-radius: 999px !important;
}

.future-top-menu-inline.grouped-menu a i {
    position: relative !important;
    z-index: 1 !important;
    font-size: 15px !important;
    opacity: .96 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.28) !important;
}

.future-top-menu-inline.grouped-menu a span {
    position: relative !important;
    z-index: 1 !important;
    white-space: nowrap !important;
}

.future-top-menu-inline.grouped-menu a:hover {
    transform: translateY(-2px) scale(1.01) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -12px 18px rgba(0, 0, 0, .16),
        0 12px 26px rgba(0, 0, 0, .24),
        0 0 22px rgba(54, 173, 255, .18) !important;
}

.future-top-menu-inline.grouped-menu a.active {
    background:
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.30)),
        linear-gradient(135deg, #f7ffff 0%, #d7f5ff 45%, #9ae9ff 100%) !important;
    color: #2847d8 !important;
    border-color: rgba(194, 244, 255, .72) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82),
        inset 0 -10px 14px rgba(66, 164, 255, .14),
        0 10px 22px rgba(18, 110, 255, .16),
        0 0 26px rgba(109, 232, 255, .20) !important;
}

.future-top-menu-inline.grouped-menu a.active i,
.future-top-menu-inline.grouped-menu a.active span {
    text-shadow: none !important;
}

.future-top-menu-inline.grouped-menu a.menu-login-cta {
    background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
        linear-gradient(135deg, #2498ff 0%, #396bff 52%, #7b61ff 100%) !important;
    color: #ffffff !important;
    border-color: rgba(140, 215, 255, .48) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -12px 16px rgba(0, 28, 98, .20),
        0 12px 24px rgba(34, 112, 255, .24),
        0 0 26px rgba(72, 166, 255, .24) !important;
    font-weight: 900 !important;
}

.future-top-menu-inline.grouped-menu a.menu-login-cta:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)),
        linear-gradient(135deg, #22a6ff 0%, #4d72ff 50%, #8d6bff 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -12px 18px rgba(0, 28, 98, .24),
        0 14px 28px rgba(36, 118, 255, .28),
        0 0 28px rgba(76, 178, 255, .28) !important;
}

@media (max-width: 1199.98px) {
    .public-navbar.future-navbar.with-top-menu {
        grid-template-columns: 1fr !important;
    }

    .future-top-menu-inline.grouped-menu {
        justify-content: flex-start !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: thin !important;
        padding-bottom: 8px !important;
    }
}

@media (max-width: 767.98px) {
    .future-top-menu-inline.grouped-menu {
        gap: 8px !important;
        border-radius: 18px !important;
        padding: 5px !important 6px !important;
    }

    .future-top-menu-inline.grouped-menu a {
        min-height: 40px !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    .future-top-menu-inline.grouped-menu a i {
        font-size: 14px !important;
    }
}


/* ===== v64 T-MAP Gateway Login Redesign ===== */
body.login-style-d.future-login-page {
    padding: 24px;
    background:
        radial-gradient(circle at 14% 16%, rgba(0, 229, 255, .22), transparent 24rem),
        radial-gradient(circle at 86% 12%, rgba(120, 92, 255, .20), transparent 24rem),
        radial-gradient(circle at 50% 96%, rgba(0, 255, 170, .08), transparent 22rem),
        linear-gradient(135deg, #020814 0%, #08172d 42%, #062339 100%);
}
body.login-style-d .future-login-shell {
    width: min(1240px, 100%);
    min-height: 680px;
    grid-template-columns: 1.06fr .94fr;
    border-radius: 34px;
    background: rgba(2, 10, 24, .68);
    border: 1px solid rgba(131, 234, 255, .18);
    box-shadow:
        0 42px 120px rgba(0,0,0,.58),
        inset 0 1px 0 rgba(255,255,255,.06);
}
body.login-style-d .future-login-shell::after {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.05);
    pointer-events: none;
}
body.login-style-d .future-login-visual {
    padding: 38px 42px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        radial-gradient(circle at 24% 26%, rgba(56, 189, 248, .20), transparent 24rem),
        radial-gradient(circle at 78% 78%, rgba(16, 185, 129, .10), transparent 16rem),
        linear-gradient(150deg, rgba(4, 37, 88, .94), rgba(4, 117, 163, .68));
}
body.login-style-d .future-login-visual::before {
    background:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .55;
}
body.login-style-d .future-login-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 70% 30%, rgba(255,255,255,.08), transparent 26rem),
        linear-gradient(125deg, transparent 18%, rgba(255,255,255,.08) 42%, transparent 68%);
    animation: commandSweep 9s linear infinite;
}
body.login-style-d .login-brand-pill {
    min-height: 42px;
    padding: 8px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
    border: 1px solid rgba(185, 244, 255, .20);
    box-shadow: inset 0 0 18px rgba(255,255,255,.05);
}
body.login-style-d .login-brand-pill i {
    color: #9cf8ff;
}
body.login-style-d .login-title-group {
    position: relative;
    z-index: 1;
    margin-top: 28px;
}
body.login-style-d .login-title-group h1 {
    margin: 0 0 10px;
    font-size: clamp(56px, 7vw, 92px);
    line-height: .92;
    letter-spacing: -.055em;
    color: #ffffff;
    text-shadow: 0 16px 38px rgba(0,0,0,.24), 0 0 32px rgba(101, 241, 255, .18);
}
body.login-style-d .login-title-group h1 span {
    background: linear-gradient(180deg, #ffffff 0%, #d9fbff 30%, #66f0ff 72%, #87a1ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 26px rgba(73, 232, 255, .30));
}
body.login-style-d .login-title-group h2 {
    margin: 0;
    max-width: 600px;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.20;
    color: rgba(245, 252, 255, .95);
    font-weight: 800;
}
body.login-style-d .login-style-b-copy {
    margin: 12px 0 0;
    max-width: 560px;
    color: rgba(227, 246, 255, .82);
    font-size: 16px;
    line-height: 1.58;
    font-weight: 600;
}
body.login-style-d .login-datahub-stage {
    position: relative;
    z-index: 1;
    margin-top: 28px;
    width: min(500px, 100%);
    height: 290px;
    border-radius: 30px;
    background:
        linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
    border: 1px solid rgba(205, 249, 255, .16);
    box-shadow:
        inset 0 0 36px rgba(255,255,255,.05),
        0 24px 54px rgba(3, 9, 22, .26);
    overflow: hidden;
}
body.login-style-d .hub-grid {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(circle at center, rgba(0,0,0,1), transparent 92%);
}
body.login-style-d .hub-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(103, 242, 255, .18);
}
body.login-style-d .hub-ring.ring-a {
    width: 180px;
    height: 180px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 34px rgba(84, 235, 255, .10), inset 0 0 22px rgba(255,255,255,.03);
}
body.login-style-d .hub-ring.ring-b {
    width: 240px;
    height: 240px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: .7;
}
body.login-style-d .hub-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 132px;
    height: 132px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(173, 250, 255, .95), rgba(53, 209, 255, .72) 40%, rgba(56, 106, 255, .86) 72%, rgba(38, 73, 200, .92) 100%);
    box-shadow:
        0 0 0 12px rgba(104, 241, 255, .08),
        0 0 48px rgba(84, 235, 255, .26),
        inset 0 2px 12px rgba(255,255,255,.22);
    animation: hubFloat 5.5s ease-in-out infinite;
}
body.login-style-d .hub-core::after {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    border: 1px solid rgba(125, 247, 255, .16);
}
body.login-style-d .hub-core-inner {
    text-align: center;
    line-height: 1.05;
}
body.login-style-d .hub-core-kicker {
    display: block;
    color: rgba(230, 248, 255, .84);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 8px;
}
body.login-style-d .hub-core strong {
    display: block;
    color: #ffffff;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -.03em;
}
body.login-style-d .hub-core small {
    display: block;
    margin-top: 4px;
    color: rgba(232, 248, 255, .84);
    font-size: 11px;
    font-weight: 700;
}
body.login-style-d .hub-connection {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, rgba(88, 233, 255, 0), rgba(88, 233, 255, .75), rgba(88, 233, 255, 0));
    transform-origin: left center;
    opacity: .7;
}
body.login-style-d .hub-connection.line-a {
    width: 112px;
    left: 105px;
    top: 84px;
    transform: rotate(18deg);
}
body.login-style-d .hub-connection.line-b {
    width: 104px;
    right: 106px;
    top: 94px;
    transform: rotate(-20deg);
}
body.login-style-d .hub-connection.line-c {
    width: 114px;
    right: 94px;
    bottom: 84px;
    transform: rotate(22deg);
}
body.login-style-d .hub-node {
    position: absolute;
    min-width: 164px;
    max-width: 190px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(8, 22, 44, .68), rgba(7, 35, 67, .46));
    border: 1px solid rgba(155, 239, 255, .18);
    box-shadow:
        0 14px 28px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(18px);
}
body.login-style-d .hub-node .node-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, #33e2ff, #3478ff);
    box-shadow: 0 10px 18px rgba(52, 120, 255, .18);
}
body.login-style-d .hub-node .node-text strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.1;
}
body.login-style-d .hub-node .node-text small {
    display: block;
    margin-top: 4px;
    color: rgba(224, 245, 255, .74);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
}
body.login-style-d .node-person { left: 30px; top: 42px; animation: nodeFloat 5.2s ease-in-out infinite; }
body.login-style-d .node-innovation { right: 24px; top: 46px; animation: nodeFloat 5s ease-in-out infinite .3s; }
body.login-style-d .node-place { right: 38px; bottom: 42px; animation: nodeFloat 5.6s ease-in-out infinite .5s; }
body.login-style-d .hub-mini-pill {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #ecfbff;
    background: rgba(8, 21, 42, .72);
    border: 1px solid rgba(155, 239, 255, .16);
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(0,0,0,.16);
}
body.login-style-d .mini-school { left: 72px; bottom: 36px; }
body.login-style-d .mini-network { left: 186px; top: 22px; }
body.login-style-d .login-data-row {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
body.login-style-d .login-data-chip {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 999px;
    color: rgba(244, 253, 255, .94);
    background: rgba(7, 24, 44, .46);
    border: 1px solid rgba(155, 239, 255, .16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
body.login-style-d .future-login-panel {
    position: relative;
    padding: 78px 42px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        linear-gradient(180deg, rgba(248, 251, 255, .98), rgba(236, 245, 255, .96));
}
body.login-style-d .future-login-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 82% 10%, rgba(56, 189, 248, .10), transparent 18rem),
        radial-gradient(circle at 16% 80%, rgba(99, 102, 241, .08), transparent 18rem);
    pointer-events: none;
}
body.login-style-d .login-back-link {
    top: 24px;
    left: 26px;
}
body.login-style-d .login-panel-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 7px 14px;
    border-radius: 999px;
    color: #2f67ff;
    background: linear-gradient(180deg, rgba(191, 235, 255, .62), rgba(214, 232, 255, .78));
    border: 1px solid rgba(116, 187, 255, .28);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    margin-bottom: 18px;
}
body.login-style-d .login-form-head {
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}
body.login-style-d .login-form-head h2 {
    margin: 0;
    color: #07111f;
    font-size: clamp(36px, 4vw, 48px);
    font-weight: 900;
    letter-spacing: -.05em;
}
body.login-style-d .login-form-head p {
    display: block;
    margin: 10px 0 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.58;
    max-width: 430px;
    font-weight: 600;
}
body.login-style-d .future-login-form {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 16px;
}
body.login-style-d .login-footer-credit {
    position: relative;
    z-index: 1;
    margin-top: 18px;
}
body.login-style-d .future-input-wrap {
    min-height: 60px;
    border-radius: 18px;
}
body.login-style-d .future-input,
body.login-style-d .password-toggle-btn,
body.login-style-d .future-input-icon {
    height: 60px;
}
body.login-style-d .future-login-submit {
    min-height: 60px;
    margin-top: 6px;
    border-radius: 18px;
}
@keyframes hubFloat {
    0%,100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-7px); }
}
@keyframes nodeFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
@media (max-width: 991.98px) {
    body.login-style-d .future-login-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    body.login-style-d .future-login-visual {
        padding: 28px 26px 22px;
    }
    body.login-style-d .future-login-panel {
        padding: 70px 26px 28px;
    }
    body.login-style-d .login-title-group h1 {
        font-size: clamp(46px, 12vw, 76px);
    }
    body.login-style-d .login-title-group h2 {
        font-size: 22px;
    }
    body.login-style-d .login-datahub-stage {
        width: 100%;
        height: 270px;
    }
}
@media (max-width: 575.98px) {
    body.login-style-d.future-login-page {
        padding: 14px;
    }
    body.login-style-d .future-login-shell {
        border-radius: 26px;
    }
    body.login-style-d .future-login-visual {
        padding: 22px 18px 18px;
    }
    body.login-style-d .login-brand-pill {
        min-height: 38px;
        padding: 7px 12px;
        font-size: 13px;
    }
    body.login-style-d .login-title-group {
        margin-top: 20px;
    }
    body.login-style-d .login-title-group h1 {
        font-size: 42px;
    }
    body.login-style-d .login-title-group h2 {
        font-size: 18px;
        line-height: 1.30;
    }
    body.login-style-d .login-style-b-copy {
        font-size: 14px;
    }
    body.login-style-d .login-datahub-stage {
        height: 360px;
        margin-top: 22px;
    }
    body.login-style-d .hub-core {
        width: 108px;
        height: 108px;
    }
    body.login-style-d .hub-core strong {
        font-size: 24px;
    }
    body.login-style-d .node-person {
        left: 14px;
        top: 18px;
    }
    body.login-style-d .node-innovation {
        right: 14px;
        top: 18px;
    }
    body.login-style-d .node-place {
        right: 14px;
        bottom: 18px;
    }
    body.login-style-d .hub-node {
        min-width: 132px;
        max-width: 148px;
        padding: 10px 10px;
        gap: 8px;
    }
    body.login-style-d .hub-node .node-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        border-radius: 12px;
        font-size: 13px;
    }
    body.login-style-d .hub-node .node-text strong {
        font-size: 13px;
    }
    body.login-style-d .hub-node .node-text small {
        font-size: 10px;
        line-height: 1.25;
    }
    body.login-style-d .hub-mini-pill {
        font-size: 10px;
        padding: 7px 9px;
        min-height: 30px;
    }
    body.login-style-d .mini-school {
        left: 14px;
        bottom: 20px;
    }
    body.login-style-d .mini-network {
        left: 126px;
        top: 136px;
    }
    body.login-style-d .hub-connection.line-a {
        width: 86px;
        left: 84px;
        top: 88px;
    }
    body.login-style-d .hub-connection.line-b {
        width: 78px;
        right: 82px;
        top: 92px;
    }
    body.login-style-d .hub-connection.line-c {
        width: 80px;
        right: 78px;
        bottom: 95px;
    }
    body.login-style-d .future-login-panel {
        padding: 68px 18px 22px;
    }
    body.login-style-d .login-form-head h2 {
        font-size: 34px;
    }
}


/* ===== v65 clean T-MAP hub + rotating world-map login background ===== */

/* Layer: map-grid/globe feeling, rotating behind login title */
body.login-style-d .future-login-visual {
    isolation: isolate !important;
}
body.login-style-d .login-world-map {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: .90;
}
body.login-style-d .login-world-map::before {
    content: '';
    position: absolute;
    inset: -20% -15% auto auto;
    width: 540px;
    height: 540px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(112, 246, 255, .18), transparent 58%),
        repeating-radial-gradient(circle at 50% 50%, rgba(174, 248, 255, .12) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(90deg, rgba(174, 248, 255, .10) 0 1px, transparent 1px 32px),
        repeating-linear-gradient(0deg, rgba(174, 248, 255, .07) 0 1px, transparent 1px 32px);
    box-shadow: inset 0 0 80px rgba(86, 236, 255, .10), 0 0 90px rgba(42, 180, 255, .12);
    transform: rotate(-12deg);
    animation: worldSpin 28s linear infinite;
    mask-image: radial-gradient(circle at center, rgba(0,0,0,.86), transparent 72%);
}
body.login-style-d .login-world-map::after {
    content: '';
    position: absolute;
    left: -18%;
    bottom: -34%;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    border: 1px solid rgba(140, 246, 255, .10);
    box-shadow:
        0 0 0 44px rgba(100, 230, 255, .035),
        0 0 0 88px rgba(100, 230, 255, .020),
        inset 0 0 70px rgba(100, 230, 255, .07);
    animation: worldSpinReverse 36s linear infinite;
}
body.login-style-d .world-globe {
    position: absolute;
    right: -92px;
    top: -72px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    border: 1px solid rgba(189, 250, 255, .16);
    background:
        linear-gradient(90deg, transparent 47%, rgba(180, 248, 255, .20) 49%, rgba(180, 248, 255, .20) 51%, transparent 53%),
        repeating-radial-gradient(ellipse at center, rgba(180, 248, 255, .13) 0 1px, transparent 1px 34px);
    opacity: .55;
    animation: worldSpin 24s linear infinite;
}
body.login-style-d .world-orbit {
    position: absolute;
    right: -70px;
    top: -50px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    border: 1px solid rgba(160, 245, 255, .12);
}
body.login-style-d .world-orbit.orbit-x {
    transform: rotateX(70deg) rotateZ(20deg);
    animation: worldSpin 18s linear infinite;
}
body.login-style-d .world-orbit.orbit-y {
    transform: rotateY(60deg) rotateZ(-20deg);
    animation: worldSpinReverse 22s linear infinite;
}
body.login-style-d .login-brand-pill,
body.login-style-d .login-title-group,
body.login-style-d .login-datahub-stage,
body.login-style-d .login-data-row {
    position: relative !important;
    z-index: 2 !important;
}

/* Fix English title being clipped/cut */
body.login-style-d .login-title-group {
    overflow: visible !important;
}
body.login-style-d .login-title-group h1 {
    overflow: visible !important;
    font-size: clamp(48px, 6.15vw, 78px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    padding: 0 0 6px !important;
    margin: 0 0 6px !important;
}
body.login-style-d .login-title-group h1 span {
    display: inline-block !important;
    padding-bottom: 4px !important;
}
body.login-style-d .login-title-group h2 {
    margin-top: 0 !important;
    font-size: clamp(20px, 1.9vw, 27px) !important;
    line-height: 1.34 !important;
}
body.login-style-d .login-style-b-copy {
    margin-top: 10px !important;
    font-size: 15px !important;
    line-height: 1.68 !important;
}

/* Clean datahub: remove floating Thai text cards, use icon-only network points */
body.login-style-d .clean-datahub-stage {
    height: 270px !important;
}
body.login-style-d .clean-datahub-stage .hub-node,
body.login-style-d .clean-datahub-stage .hub-mini-pill {
    display: none !important;
}
body.login-style-d .hub-ring.ring-c {
    position: absolute;
    width: 310px;
    height: 310px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed rgba(118, 246, 255, .15);
    animation: worldSpin 26s linear infinite;
}
body.login-style-d .hub-icon-node {
    position: absolute;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #ffffff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.03)),
        linear-gradient(135deg, #32dfff 0%, #2f79ff 56%, #6d5bff 100%);
    border: 1px solid rgba(190, 248, 255, .28);
    box-shadow:
        0 13px 26px rgba(0,0,0,.20),
        0 0 26px rgba(71, 205, 255, .20),
        inset 0 1px 0 rgba(255,255,255,.20);
    font-size: 18px;
    animation: iconNodeFloat 5.2s ease-in-out infinite;
}
body.login-style-d .hub-icon-node::after {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: inherit;
    border: 1px solid rgba(103, 242, 255, .10);
    opacity: .80;
}
body.login-style-d .icon-person { left: 58px; top: 56px; }
body.login-style-d .icon-innovation { right: 70px; top: 58px; animation-delay: .25s; }
body.login-style-d .icon-place { right: 84px; bottom: 56px; animation-delay: .45s; }
body.login-style-d .icon-school { left: 88px; bottom: 58px; animation-delay: .65s; }
body.login-style-d .icon-network {
    left: 50%;
    top: 26px;
    transform: translateX(-50%);
    animation-delay: .85s;
}
body.login-style-d .hub-connection {
    opacity: .62 !important;
}
body.login-style-d .hub-connection.line-a {
    width: 146px !important;
    left: 96px !important;
    top: 92px !important;
    transform: rotate(20deg) !important;
}
body.login-style-d .hub-connection.line-b {
    width: 144px !important;
    right: 106px !important;
    top: 98px !important;
    transform: rotate(-20deg) !important;
}
body.login-style-d .hub-connection.line-c {
    width: 136px !important;
    right: 112px !important;
    bottom: 92px !important;
    transform: rotate(23deg) !important;
}
body.login-style-d .hub-connection.line-d {
    width: 132px !important;
    left: 122px !important;
    bottom: 96px !important;
    transform: rotate(-20deg) !important;
}

/* Login heading: smaller, with more breathing room */
body.login-style-d .login-form-head {
    margin-bottom: 24px !important;
}
body.login-style-d .login-form-head h2 {
    font-size: clamp(28px, 3vw, 38px) !important;
    line-height: 1.28 !important;
    letter-spacing: -.035em !important;
}
body.login-style-d .login-form-head p {
    margin-top: 16px !important;
    font-size: 14px !important;
    line-height: 1.88 !important;
    max-width: 450px !important;
}

/* Slightly more space inside form after shrinking heading */
body.login-style-d .future-login-form {
    gap: 17px !important;
}

@keyframes worldSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes worldSpinReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}
@keyframes iconNodeFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
}

/* responsive */
@media (max-width: 991.98px) {
    body.login-style-d .login-title-group h1 {
        font-size: clamp(42px, 10vw, 68px) !important;
    }
    body.login-style-d .clean-datahub-stage {
        height: 280px !important;
    }
}
@media (max-width: 575.98px) {
    body.login-style-d .login-title-group h1 {
        font-size: 40px !important;
        line-height: 1.10 !important;
        letter-spacing: -.025em !important;
    }
    body.login-style-d .login-title-group h2 {
        font-size: 17px !important;
        line-height: 1.42 !important;
    }
    body.login-style-d .login-style-b-copy {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }
    body.login-style-d .clean-datahub-stage {
        height: 300px !important;
    }
    body.login-style-d .hub-icon-node {
        width: 42px !important;
        height: 42px !important;
        border-radius: 15px !important;
        font-size: 16px !important;
    }
    body.login-style-d .icon-person { left: 28px !important; top: 50px !important; }
    body.login-style-d .icon-innovation { right: 32px !important; top: 52px !important; }
    body.login-style-d .icon-place { right: 44px !important; bottom: 54px !important; }
    body.login-style-d .icon-school { left: 46px !important; bottom: 56px !important; }
    body.login-style-d .icon-network { top: 22px !important; }
    body.login-style-d .login-form-head h2 {
        font-size: 30px !important;
        line-height: 1.32 !important;
    }
    body.login-style-d .login-form-head p {
        line-height: 1.78 !important;
    }
}


/* ===== v66 restore login background slideshow like index ===== */
/* ให้หน้า Login ใช้ background slide ชั้นหลังสุดเหมือนหน้า index */
body.login-style-d.future-login-page {
    background: transparent !important;
    overflow-x: hidden !important;
}

/* บังคับ background slideshow ของหน้า login ให้กลับมาอยู่ชั้นหลังสุดและเห็นชัด */
body.login-style-d .tmap-login-bg-slideshow,
body.login-style-d .tmap-page-bg,
body.login-style-d .tmap-bg-slideshow {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    opacity: .78 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

body.login-style-d .tmap-login-bg-slideshow span,
body.login-style-d .tmap-page-bg span,
body.login-style-d .tmap-bg-slideshow span {
    position: absolute !important;
    inset: 0 !important;
    background-image: var(--bg) !important;
    background-size: cover !important;
    background-position: center center !important;
    filter: saturate(1.08) contrast(1.04) brightness(1.02) !important;
}

/* overlay ให้เหมือน index แต่ไม่มืดทึบ */
body.login-style-d .tmap-login-bg-slideshow::after,
body.login-style-d .tmap-page-bg::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(135deg, rgba(2, 8, 22, .28), rgba(4, 24, 58, .10)),
        radial-gradient(circle at 70% 38%, rgba(0, 229, 255, .13), transparent 32rem) !important;
    z-index: 2 !important;
}

/* layer effect อื่น ๆ อยู่เหนือ background แต่ต่ำกว่า login card */
body.login-style-d.future-login-page::before,
body.login-style-d.future-login-page::after,
body.login-style-d .login-orbit,
body.login-style-d .login-grid-layer {
    z-index: 1 !important;
}

body.login-style-d .future-login-shell {
    z-index: 3 !important;
}

/* ลดความทึบของแผงซ้ายให้เห็น background ชั้นนอกยังคงมีมิติ */
body.login-style-d .future-login-shell {
    background: rgba(2, 10, 24, .58) !important;
    backdrop-filter: blur(22px) saturate(1.05) !important;
}

body.login-style-d .future-login-visual {
    background:
        radial-gradient(circle at 24% 26%, rgba(56, 189, 248, .18), transparent 24rem),
        radial-gradient(circle at 78% 78%, rgba(16, 185, 129, .08), transparent 16rem),
        linear-gradient(150deg, rgba(4, 37, 88, .82), rgba(4, 117, 163, .56)) !important;
}

body.login-style-d .future-login-panel {
    background:
        linear-gradient(180deg, rgba(248, 251, 255, .94), rgba(236, 245, 255, .91)) !important;
}


/* ===== v67 responsive hamburger menu for tablet/mobile ===== */

/* Desktop: show capsule menu as usual, hide hamburger */
.tmap-menu-toggle,
.tmap-mobile-backdrop {
    display: none;
}

@media (min-width: 1200px) {
    .future-top-menu-inline.grouped-menu {
        position: static !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
}

/* Tablet / iPad / Mobile: collapse capsule menu into hamburger */
@media (max-width: 1199.98px) {
    .public-navbar.future-navbar.with-top-menu {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        min-height: 58px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1300 !important;
    }

    .public-brand.future-brand {
        min-width: 0 !important;
        width: 100% !important;
    }

    .public-brand-text {
        max-width: calc(100vw - 116px) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .tmap-menu-toggle {
        position: relative;
        display: inline-grid !important;
        place-items: center;
        width: 48px;
        height: 42px;
        padding: 0;
        border: 1px solid rgba(152, 220, 255, .28);
        border-radius: 999px;
        background:
            linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.03)),
            linear-gradient(135deg, rgba(18, 38, 84, .98), rgba(7, 19, 46, .98));
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.10),
            inset 0 -10px 16px rgba(0, 0, 0, .16),
            0 10px 24px rgba(0, 0, 0, .22),
            0 0 22px rgba(32, 130, 255, .14);
        cursor: pointer;
        overflow: hidden;
        z-index: 1320;
    }

    .tmap-menu-toggle::before {
        content: "";
        position: absolute;
        inset: 1px 1px auto 1px;
        height: 50%;
        border-radius: inherit;
        background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.04));
        pointer-events: none;
    }

    .tmap-menu-toggle span {
        position: relative;
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 999px;
        background: #eaf8ff;
        box-shadow: 0 0 10px rgba(94, 234, 255, .42);
        transition: transform .20s ease, opacity .20s ease, top .20s ease;
    }

    .tmap-menu-toggle span:nth-child(1) { transform: translateY(-6px); }
    .tmap-menu-toggle span:nth-child(2) { transform: translateY(0); }
    .tmap-menu-toggle span:nth-child(3) { transform: translateY(6px); }

    .tmap-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(2px) rotate(45deg);
    }

    .tmap-menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .tmap-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-2px) rotate(-45deg);
    }

    .future-top-menu-inline.grouped-menu {
        position: fixed !important;
        top: calc(env(safe-area-inset-top, 0px) + 66px) !important;
        left: 12px !important;
        right: 12px !important;
        z-index: 1310 !important;
        width: auto !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-content: stretch !important;
        gap: 9px !important;
        padding: 12px !important;
        border-radius: 24px !important;
        background:
            radial-gradient(circle at 18% 0%, rgba(56, 189, 248, .18), transparent 18rem),
            linear-gradient(180deg, rgba(5, 17, 41, .96), rgba(3, 11, 28, .94)) !important;
        border: 1px solid rgba(134, 218, 255, .18) !important;
        box-shadow:
            0 24px 64px rgba(0, 0, 0, .42),
            inset 0 1px 0 rgba(255,255,255,.08),
            0 0 0 1px rgba(8, 24, 54, .20) !important;
        backdrop-filter: blur(18px) saturate(1.08) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-height: calc(100vh - 86px) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(-12px) scale(.98) !important;
        transition:
            opacity .20s ease,
            transform .20s ease,
            visibility .20s ease !important;
    }

    .future-top-menu-inline.grouped-menu.is-open {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }

    .future-top-menu-inline.grouped-menu a {
        width: 100% !important;
        min-height: 50px !important;
        padding: 12px 15px !important;
        border-radius: 18px !important;
        justify-content: flex-start !important;
        font-size: 15px !important;
        border: 1px solid rgba(150, 220, 255, .16) !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02)),
            linear-gradient(135deg, rgba(18, 38, 84, .96), rgba(7, 19, 46, .98)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.08),
            inset 0 -10px 16px rgba(0, 0, 0, .14),
            0 8px 18px rgba(0, 0, 0, .18) !important;
    }

    .future-top-menu-inline.grouped-menu a.active {
        background:
            linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.35)),
            linear-gradient(135deg, #f7ffff 0%, #d7f5ff 45%, #9ae9ff 100%) !important;
        color: #2847d8 !important;
    }

    .future-top-menu-inline.grouped-menu a.menu-login-cta {
        justify-content: center !important;
        min-height: 52px !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
            linear-gradient(135deg, #2498ff 0%, #396bff 52%, #7b61ff 100%) !important;
        color: #ffffff !important;
    }

    .future-top-menu-inline.grouped-menu a i {
        width: 22px !important;
        text-align: center !important;
        font-size: 15px !important;
    }

    .future-top-menu-inline.grouped-menu a span {
        white-space: nowrap !important;
    }

    .tmap-mobile-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1290;
        display: block !important;
        background: rgba(1, 7, 18, .42);
        backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .20s ease, visibility .20s ease;
    }

    body.tmap-menu-open .tmap-mobile-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.tmap-menu-open {
        overflow: hidden;
    }
}

@media (max-width: 575.98px) {
    .public-navbar.future-navbar.with-top-menu {
        padding: 9px 10px !important;
    }

    .public-brand-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
    }

    .public-brand-text {
        max-width: calc(100vw - 96px) !important;
        font-size: 11.5px !important;
    }

    .tmap-menu-toggle {
        width: 44px;
        height: 40px;
    }

    .future-top-menu-inline.grouped-menu {
        top: calc(env(safe-area-inset-top, 0px) + 60px) !important;
        left: 10px !important;
        right: 10px !important;
        border-radius: 22px !important;
        padding: 10px !important;
    }

    .future-top-menu-inline.grouped-menu a {
        min-height: 48px !important;
        font-size: 14px !important;
    }
}


/* ===== v68 force hamburger on tablet/iPad up to 1366px ===== */
/* Desktop ใหญ่จริงเท่านั้นที่แสดงเมนูแคปซูล */
@media (min-width: 1367px) {
    .tmap-menu-toggle,
    .tmap-mobile-backdrop {
        display: none !important;
    }

    .future-top-menu-inline.grouped-menu {
        position: static !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
}

/* Tablet / iPad / Mobile รวมถึง iPad แนวนอน 1366px ให้ใช้ปุ่ม 3 ขีด */
@media (max-width: 1366px) {
    .public-navbar.future-navbar.with-top-menu {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        min-height: 58px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1300 !important;
    }

    .public-brand.future-brand {
        min-width: 0 !important;
        width: 100% !important;
    }

    .public-brand-text {
        max-width: calc(100vw - 116px) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .tmap-menu-toggle {
        position: relative !important;
        display: inline-grid !important;
        place-items: center !important;
        width: 48px !important;
        height: 42px !important;
        padding: 0 !important;
        border: 1px solid rgba(152, 220, 255, .28) !important;
        border-radius: 999px !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.03)),
            linear-gradient(135deg, rgba(18, 38, 84, .98), rgba(7, 19, 46, .98)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.10),
            inset 0 -10px 16px rgba(0, 0, 0, .16),
            0 10px 24px rgba(0, 0, 0, .22),
            0 0 22px rgba(32, 130, 255, .14) !important;
        cursor: pointer !important;
        overflow: hidden !important;
        z-index: 1320 !important;
    }

    .tmap-menu-toggle::before {
        content: "" !important;
        position: absolute !important;
        inset: 1px 1px auto 1px !important;
        height: 50% !important;
        border-radius: inherit !important;
        background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.04)) !important;
        pointer-events: none !important;
    }

    .tmap-menu-toggle span {
        position: relative !important;
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: #eaf8ff !important;
        box-shadow: 0 0 10px rgba(94, 234, 255, .42) !important;
        transition: transform .20s ease, opacity .20s ease !important;
    }

    .tmap-menu-toggle span:nth-child(1) { transform: translateY(-6px) !important; }
    .tmap-menu-toggle span:nth-child(2) { transform: translateY(0) !important; }
    .tmap-menu-toggle span:nth-child(3) { transform: translateY(6px) !important; }

    .tmap-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(2px) rotate(45deg) !important;
    }

    .tmap-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .tmap-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-2px) rotate(-45deg) !important;
    }

    .future-top-menu-inline.grouped-menu {
        position: fixed !important;
        top: calc(env(safe-area-inset-top, 0px) + 66px) !important;
        left: 12px !important;
        right: 12px !important;
        z-index: 1310 !important;
        width: auto !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-content: stretch !important;
        gap: 9px !important;
        padding: 12px !important;
        border-radius: 24px !important;
        background:
            radial-gradient(circle at 18% 0%, rgba(56, 189, 248, .18), transparent 18rem),
            linear-gradient(180deg, rgba(5, 17, 41, .96), rgba(3, 11, 28, .94)) !important;
        border: 1px solid rgba(134, 218, 255, .18) !important;
        box-shadow:
            0 24px 64px rgba(0, 0, 0, .42),
            inset 0 1px 0 rgba(255,255,255,.08),
            0 0 0 1px rgba(8, 24, 54, .20) !important;
        backdrop-filter: blur(18px) saturate(1.08) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-height: calc(100vh - 86px) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(-12px) scale(.98) !important;
        transition: opacity .20s ease, transform .20s ease, visibility .20s ease !important;
    }

    .future-top-menu-inline.grouped-menu.is-open {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }

    .future-top-menu-inline.grouped-menu a {
        width: 100% !important;
        min-height: 50px !important;
        padding: 12px 15px !important;
        border-radius: 18px !important;
        justify-content: flex-start !important;
        font-size: 15px !important;
    }

    .future-top-menu-inline.grouped-menu a.menu-login-cta {
        justify-content: center !important;
        min-height: 52px !important;
    }

    .tmap-mobile-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 1290 !important;
        display: block !important;
        background: rgba(1, 7, 18, .42) !important;
        backdrop-filter: blur(2px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity .20s ease, visibility .20s ease !important;
    }

    body.tmap-menu-open .tmap-mobile-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.tmap-menu-open {
        overflow: hidden !important;
    }
}


/* ===== v69 replace hub icon visual with T-MAP Map Intelligence board ===== */
body.login-style-d .login-datahub-stage,
body.login-style-d .clean-datahub-stage {
    display: none !important;
}

body.login-style-d .login-map-intelligence-stage {
    position: relative;
    z-index: 2;
    margin-top: 26px;
    width: min(520px, 100%);
    height: 300px;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid rgba(191, 245, 255, .18);
    background:
        radial-gradient(circle at 30% 38%, rgba(77, 222, 255, .20), transparent 18rem),
        radial-gradient(circle at 78% 78%, rgba(99, 102, 241, .18), transparent 17rem),
        linear-gradient(145deg, rgba(5, 24, 58, .60), rgba(7, 85, 122, .36));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 0 36px rgba(255,255,255,.045),
        0 24px 58px rgba(2, 8, 23, .28);
}

body.login-style-d .intel-world-grid {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,.040) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.040) 1px, transparent 1px),
        radial-gradient(circle at 70% 45%, rgba(125, 247, 255, .13), transparent 18rem);
    background-size: 26px 26px, 26px 26px, auto;
    opacity: .90;
}

body.login-style-d .intel-world-grid::before {
    content: "";
    position: absolute;
    inset: -52% -16% auto auto;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle at center, rgba(178, 249, 255, .12) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(90deg, rgba(178, 249, 255, .08) 0 1px, transparent 1px 32px);
    box-shadow: inset 0 0 72px rgba(119, 246, 255, .10);
    mask-image: radial-gradient(circle at center, rgba(0,0,0,.75), transparent 72%);
    animation: intelWorldRotate 30s linear infinite;
}

body.login-style-d .intel-map-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(135, 242, 255, .12);
    pointer-events: none;
}

body.login-style-d .intel-map-orbit.orbit-one {
    width: 270px;
    height: 270px;
    left: 36px;
    top: 16px;
    box-shadow: 0 0 0 34px rgba(125, 247, 255, .025);
}

body.login-style-d .intel-map-orbit.orbit-two {
    width: 210px;
    height: 210px;
    right: -38px;
    bottom: -44px;
    border-style: dashed;
    opacity: .75;
    animation: intelWorldRotate 22s linear infinite;
}

body.login-style-d .province-hologram {
    position: absolute;
    left: 34px;
    top: 28px;
    width: 172px;
    height: 230px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.025)),
        linear-gradient(135deg, rgba(7, 26, 54, .36), rgba(5, 90, 128, .26));
    border: 1px solid rgba(181, 245, 255, .14);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 0 30px rgba(114, 241, 255, .06),
        0 18px 36px rgba(0,0,0,.16);
    display: grid;
    place-items: center;
}

body.login-style-d .province-map-line {
    width: 125px;
    height: 190px;
    overflow: visible;
    filter: drop-shadow(0 0 18px rgba(103, 232, 249, .35));
}

body.login-style-d .province-main,
body.login-style-d .province-glow {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.login-style-d .province-glow {
    stroke: rgba(103, 232, 249, .22);
    stroke-width: 17;
}

body.login-style-d .province-main {
    stroke: url(#provinceGradient);
    stroke: #75f4ff;
    stroke-width: 7;
    stroke-dasharray: 14 9;
    animation: provinceFlow 4.8s linear infinite;
}

body.login-style-d .province-node {
    fill: #ffffff;
    stroke: #48eaff;
    stroke-width: 4;
    filter: drop-shadow(0 0 9px rgba(72, 234, 255, .75));
    animation: provinceNodePulse 2.4s ease-in-out infinite;
}

body.login-style-d .province-node.n2 { animation-delay: .15s; }
body.login-style-d .province-node.n3 { animation-delay: .30s; }
body.login-style-d .province-node.n4 { animation-delay: .45s; }
body.login-style-d .province-node.n5 { animation-delay: .60s; }
body.login-style-d .province-node.n6 { animation-delay: .75s; }
body.login-style-d .province-node.n7 { animation-delay: .90s; }
body.login-style-d .province-node.n8 { animation-delay: 1.05s; }

body.login-style-d .intel-core-card {
    position: absolute;
    right: 28px;
    top: 42px;
    width: 250px;
    min-height: 132px;
    padding: 20px 22px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
        linear-gradient(135deg, rgba(10, 31, 70, .72), rgba(13, 103, 141, .42));
    border: 1px solid rgba(190, 246, 255, .20);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 18px 38px rgba(0,0,0,.20),
        0 0 28px rgba(70, 220, 255, .12);
    backdrop-filter: blur(16px);
}

body.login-style-d .intel-eyebrow {
    display: block;
    color: rgba(202, 250, 255, .78);
    font-size: 11px;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 10px;
}

body.login-style-d .intel-core-card strong {
    display: block;
    color: #ffffff;
    font-size: 50px;
    line-height: .92;
    font-weight: 900;
    letter-spacing: -.05em;
    text-shadow: 0 0 28px rgba(91, 239, 255, .32);
}

body.login-style-d .intel-core-card small {
    display: block;
    margin-top: 10px;
    color: rgba(233, 251, 255, .80);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}

body.login-style-d .intel-category-strip {
    position: absolute;
    right: 26px;
    bottom: 82px;
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 8px;
}

body.login-style-d .intel-category-strip span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 999px;
    color: #effbff;
    background: rgba(6, 22, 48, .62);
    border: 1px solid rgba(157, 235, 255, .18);
    box-shadow: 0 10px 22px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.07);
    font-size: 12px;
    font-weight: 800;
}

body.login-style-d .intel-category-strip i {
    color: #7df7ff;
}

body.login-style-d .intel-bottom-chip {
    position: absolute;
    left: 32px;
    right: 28px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 9px 14px;
    border-radius: 999px;
    color: #f1fbff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
        rgba(3, 18, 42, .60);
    border: 1px solid rgba(159, 235, 255, .18);
    box-shadow: 0 14px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
    font-size: 12px;
    font-weight: 800;
}

body.login-style-d .intel-bottom-chip i {
    color: #7df7ff;
}

@keyframes intelWorldRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes provinceFlow {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -46; }
}

@keyframes provinceNodePulse {
    0%, 100% { opacity: .76; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.18); }
}

/* Tablet/mobile responsive */
@media (max-width: 991.98px) {
    body.login-style-d .login-map-intelligence-stage {
        width: 100%;
        height: 300px;
    }
}

@media (max-width: 575.98px) {
    body.login-style-d .login-map-intelligence-stage {
        height: 365px;
        border-radius: 26px;
    }

    body.login-style-d .province-hologram {
        left: 18px;
        top: 88px;
        width: 134px;
        height: 208px;
        border-radius: 22px;
    }

    body.login-style-d .province-map-line {
        width: 104px;
        height: 168px;
    }

    body.login-style-d .intel-core-card {
        left: 18px;
        right: 18px;
        top: 18px;
        width: auto;
        min-height: 0;
        padding: 14px 16px;
        border-radius: 22px;
    }

    body.login-style-d .intel-core-card strong {
        font-size: 38px;
    }

    body.login-style-d .intel-category-strip {
        right: 18px;
        left: 164px;
        bottom: 88px;
        grid-template-columns: 1fr;
        gap: 7px;
    }

    body.login-style-d .intel-category-strip span {
        width: 100%;
        justify-content: flex-start;
        font-size: 11px;
        min-height: 32px;
    }

    body.login-style-d .intel-bottom-chip {
        left: 18px;
        right: 18px;
        bottom: 20px;
        font-size: 10.5px;
        line-height: 1.3;
        text-align: center;
    }
}


/* ===== v70 shorten login CTA text ===== */
.future-top-menu-inline.grouped-menu a.menu-login-cta {
    padding-inline: 16px !important;
}
@media (max-width: 1366px) {
    .future-top-menu-inline.grouped-menu a.menu-login-cta {
        justify-content: flex-start !important;
    }
}


/* ===== v71 add Thailand dotted silhouette in login visual ===== */
body.login-style-d .login-map-intelligence-stage .thailand-dotmap-visual{
    position:absolute;
    right:22px;
    top:18px;
    width:170px;
    height:250px;
    opacity:.22;
    pointer-events:none;
    z-index:0;
    filter: drop-shadow(0 0 10px rgba(130,233,255,.18));
}
body.login-style-d .login-map-intelligence-stage .thailand-dotmap-visual::before{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(230,250,255,.95);
    -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 420'>\
<path d='M118 12l28 18 28 5 18 24-9 28 11 28-10 25 22 30-3 27-19 16-22 8-6 22 7 24 22 18 7 29-13 26-29 8-18 16-8 27 9 33-10 31-22 11-6 29 7 16-8 18-15-7 4-22-15-16-7-30 2-23-10-23-18-25-5-27-15-18-22-11-6-25 8-21-11-30 13-22-6-34 22-20 8-28 19-12 19-16 15-27 26-14z' fill='black'/>\
</svg>");
    mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 420'>\
<path d='M118 12l28 18 28 5 18 24-9 28 11 28-10 25 22 30-3 27-19 16-22 8-6 22 7 24 22 18 7 29-13 26-29 8-18 16-8 27 9 33-10 31-22 11-6 29 7 16-8 18-15-7 4-22-15-16-7-30 2-23-10-23-18-25-5-27-15-18-22-11-6-25 8-21-11-30 13-22-6-34 22-20 8-28 19-12 19-16 15-27 26-14z' fill='black'/>\
</svg>");
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;

    /* dotted appearance */
    background-image:
        radial-gradient(circle, rgba(235,250,255,.95) 1.4px, transparent 1.8px);
    background-size: 7px 7px;
    background-position: 0 0;
}
body.login-style-d .login-map-intelligence-stage .thailand-dotmap-visual::after{
    content:"";
    position:absolute;
    inset:12% 14% 10% 22%;
    border-radius:50%;
    background: radial-gradient(circle, rgba(118,241,255,.18), transparent 68%);
    filter: blur(16px);
}

/* move content layers above dotted Thailand bg */
body.login-style-d .login-map-intelligence-stage > *:not(.thailand-dotmap-visual):not(.intel-world-grid){
    position: relative;
    z-index: 1;
}

@media (max-width: 575.98px){
    body.login-style-d .login-map-intelligence-stage .thailand-dotmap-visual{
        right:8px;
        top:82px;
        width:115px;
        height:175px;
        opacity:.18;
    }
}


/* ===== v72 login visual image-ready mode ===== */
/*
    วิธีใช้:
    1) เตรียมรูปชื่อ login-tmap-visual.png
    2) วางที่ pktmap/assets/images/login-tmap-visual.png
    3) หน้า login จะใช้รูปนี้อัตโนมัติ
    ถ้ายังไม่มีรูป ระบบจะ fallback กลับไปใช้ visual เดิม
*/
body.login-style-d .login-map-intelligence-stage.image-mode {
    display: grid !important;
    place-items: center !important;
    height: 300px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 30% 38%, rgba(77, 222, 255, .16), transparent 18rem),
        radial-gradient(circle at 78% 78%, rgba(99, 102, 241, .12), transparent 17rem),
        linear-gradient(145deg, rgba(5, 24, 58, .58), rgba(7, 85, 122, .34)) !important;
    border: 1px solid rgba(191, 245, 255, .18) !important;
    border-radius: 32px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 0 36px rgba(255,255,255,.045),
        0 24px 58px rgba(2, 8, 23, .28) !important;
}

body.login-style-d .login-tmap-visual-image {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 12px !important;
    filter:
        drop-shadow(0 18px 35px rgba(0,0,0,.22))
        saturate(1.06)
        contrast(1.02) !important;
}

@media (max-width: 575.98px) {
    body.login-style-d .login-map-intelligence-stage.image-mode {
        height: 320px !important;
        border-radius: 26px !important;
    }

    body.login-style-d .login-tmap-visual-image {
        padding: 10px !important;
    }
}


/* ===== v73 premium split login style from reference ===== */
body.login-style-e.future-login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px;
    font-family: 'Sarabun', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #ecf8ff;
    background: #061322 !important;
    overflow-x: hidden;
}

body.login-style-e .tmap-login-bg-slideshow,
body.login-style-e .tmap-page-bg,
body.login-style-e .tmap-bg-slideshow {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    opacity: .84 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

body.login-style-e .tmap-login-bg-slideshow span,
body.login-style-e .tmap-page-bg span,
body.login-style-e .tmap-bg-slideshow span {
    position: absolute !important;
    inset: 0 !important;
    background-image: var(--bg) !important;
    background-size: cover !important;
    background-position: center center !important;
    filter: saturate(1.08) contrast(1.04) brightness(.92) !important;
}

body.login-style-e .tmap-login-bg-slideshow::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(2,8,22,.52), rgba(4,24,58,.16)),
        radial-gradient(circle at 58% 50%, rgba(0, 235, 255, .12), transparent 34rem);
}

.login-e-bg-grid {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(rgba(125, 247, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 247, 255, .055) 1px, transparent 1px),
        radial-gradient(circle at 48% 62%, rgba(86, 244, 255, .12), transparent 30rem);
    background-size: 44px 44px, 44px 44px, auto;
    mask-image: radial-gradient(circle at center, rgba(0,0,0,.90), transparent 86%);
}

.login-e-shell {
    position: relative;
    z-index: 3;
    width: min(1180px, 100%);
    min-height: 680px;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
    border-radius: 44px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(4, 20, 44, .70), rgba(3, 62, 82, .44));
    border: 1px solid rgba(191, 245, 255, .22);
    box-shadow:
        0 38px 120px rgba(0,0,0,.56),
        inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(18px) saturate(1.08);
}

.login-e-showcase {
    position: relative;
    min-height: 680px;
    padding: 44px 46px 34px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.login-e-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 46% 54%, rgba(0, 255, 214, .16), transparent 21rem),
        radial-gradient(circle at 20% 22%, rgba(35, 148, 255, .16), transparent 22rem),
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: auto, auto, 42px 42px, 42px 42px;
    pointer-events: none;
}

.login-e-badge {
    position: relative;
    z-index: 2;
    width: min(430px, 100%);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 7px 14px;
    border-radius: 999px;
    color: #dffbff;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(195, 246, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
    font-size: 12px;
    font-weight: 800;
}

.login-e-copy {
    position: relative;
    z-index: 2;
    margin-top: 46px;
    max-width: 560px;
}

.login-e-copy h1 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: clamp(54px, 6.8vw, 88px);
    line-height: .88;
    font-weight: 900;
    letter-spacing: -.055em;
    text-shadow:
        0 16px 42px rgba(0,0,0,.35),
        0 0 30px rgba(119, 246, 255, .20);
}

.login-e-copy h1 span {
    display: inline-block;
    padding-bottom: 6px;
    background: linear-gradient(180deg, #f7ffff 0%, #d9fbff 36%, #6df4ff 72%, #8fb4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 22px rgba(91, 239, 255, .28));
}

.login-e-copy h2 {
    margin: 0;
    color: rgba(250, 253, 255, .94);
    font-size: clamp(22px, 2.1vw, 30px);
    line-height: 1.28;
    font-weight: 900;
    letter-spacing: -.025em;
}

.login-e-copy p {
    margin: 14px 0 0;
    max-width: 560px;
    color: rgba(225, 245, 255, .82);
    font-size: 15px;
    line-height: 1.65;
    font-weight: 600;
}

.login-e-map-stage {
    position: absolute;
    z-index: 1;
    left: 92px;
    right: 70px;
    bottom: 72px;
    height: 330px;
    pointer-events: none;
}

.map-net-grid {
    position: absolute;
    inset: -34px -50px;
    opacity: .74;
    background:
        radial-gradient(circle at 42% 46%, rgba(125, 247, 255, .18), transparent 16rem),
        linear-gradient(35deg, transparent 48%, rgba(125, 247, 255, .32) 49%, transparent 50%),
        linear-gradient(155deg, transparent 48%, rgba(125, 247, 255, .18) 49%, transparent 50%),
        radial-gradient(circle, rgba(125, 247, 255, .46) 1.2px, transparent 1.8px);
    background-size: auto, 170px 120px, 160px 130px, 48px 48px;
}

.login-e-province {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 20px rgba(119, 246, 255, .42));
}

.province-base {
    fill: rgba(16, 173, 159, .24);
    stroke: rgba(145, 249, 255, .35);
    stroke-width: 5;
    filter: url(#loginMapShadow);
}

.province-top {
    fill: rgba(92, 255, 216, .12);
    stroke: url(#loginMapGlow);
    stroke-width: 4;
    stroke-linejoin: round;
}

.province-inner {
    fill: rgba(24, 99, 135, .26);
    stroke: rgba(190, 255, 255, .28);
    stroke-width: 2;
    stroke-dasharray: 12 10;
    animation: loginProvinceFlow 8s linear infinite;
}

.map-node {
    fill: #ffffff;
    stroke: #65f6ff;
    stroke-width: 4;
    filter: drop-shadow(0 0 10px rgba(103, 246, 255, .80));
    animation: loginNodePulse 2.6s ease-in-out infinite;
}

.map-node.n2 { animation-delay: .2s; }
.map-node.n3 { animation-delay: .4s; }
.map-node.n4 { animation-delay: .6s; }
.map-node.n5 { animation-delay: .8s; }

.login-map-pin {
    position: absolute;
    width: 74px;
    height: 90px;
    display: grid;
    place-items: center;
    color: #eaffff;
    font-size: 24px;
    background:
        radial-gradient(circle at 50% 35%, rgba(96, 255, 218, .96), rgba(31, 185, 215, .88) 42%, rgba(24, 95, 213, .78) 72%),
        linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.02));
    clip-path: path('M37 0 C57 0 74 16 74 37 C74 61 49 76 37 90 C25 76 0 61 0 37 C0 16 17 0 37 0 Z');
    border-radius: 50% 50% 50% 50%;
    box-shadow:
        0 0 0 10px rgba(111, 246, 255, .09),
        0 0 30px rgba(111, 246, 255, .46),
        0 18px 34px rgba(0,0,0,.30);
    animation: loginPinFloat 4.2s ease-in-out infinite;
}

.login-map-pin::before {
    content: "";
    position: absolute;
    inset: 13px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.38);
}

.login-map-pin i {
    position: relative;
    transform: translateY(-10px);
}

.login-map-pin.pin-a { left: 250px; top: 8px; }
.login-map-pin.pin-b { left: 330px; top: 126px; animation-delay: .25s; }
.login-map-pin.pin-c { right: 92px; top: 18px; animation-delay: .5s; }
.login-map-pin.pin-d { left: 128px; top: 178px; animation-delay: .75s; }

.login-e-chips {
    position: absolute;
    z-index: 3;
    left: 42px;
    bottom: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.login-e-chips span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 7px 12px;
    border-radius: 999px;
    color: #f1fbff;
    background: rgba(5, 18, 42, .66);
    border: 1px solid rgba(159, 235, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    font-size: 11px;
    font-weight: 800;
}

.login-e-chips i {
    color: #9df9ff;
}

.login-e-panel {
    position: relative;
    min-height: 680px;
    margin: 18px 18px 18px 0;
    padding: 74px 36px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)),
        rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.24);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 24px 70px rgba(0,0,0,.24);
    backdrop-filter: blur(20px) saturate(1.08);
}

.login-e-back {
    position: absolute;
    top: 20px;
    left: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    color: rgba(236, 252, 255, .86);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    font-size: 12px;
    font-weight: 800;
}

.login-e-form-head {
    position: relative;
    z-index: 1;
    margin-bottom: 22px;
}

.login-e-panel-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 7px 12px;
    border-radius: 999px;
    color: #2f67ff;
    background: linear-gradient(180deg, rgba(223, 248, 255, .88), rgba(215, 233, 255, .70));
    border: 1px solid rgba(180, 235, 255, .50);
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 18px;
}

.login-e-form-head h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(34px, 3.4vw, 46px);
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -.04em;
    text-shadow: 0 12px 28px rgba(0,0,0,.24);
}

.login-e-form-head p {
    margin: 12px 0 0;
    color: rgba(234, 249, 255, .82);
    font-size: 13px;
    line-height: 1.72;
    font-weight: 600;
}

.login-e-form {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 16px;
}

.login-e-field label {
    display: block;
    margin-bottom: 7px;
    color: rgba(245, 253, 255, .92);
    font-size: 13px;
    font-weight: 900;
}

.login-e-input-wrap {
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
    min-height: 58px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow:
        0 14px 30px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.80);
}

.login-e-input-wrap.has-action {
    grid-template-columns: 50px 1fr 54px;
}

.login-e-input-icon,
.login-e-password-toggle {
    height: 58px;
    display: grid;
    place-items: center;
    color: #0f172a;
    background: rgba(240, 249, 255, .85);
}

.login-e-input {
    width: 100%;
    height: 58px;
    border: 0;
    outline: 0;
    color: #0f172a;
    background: transparent;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 700;
}

.login-e-input::placeholder {
    color: #94a3b8;
    font-weight: 600;
}

.login-e-password-toggle {
    width: 54px;
    border: 0;
    cursor: pointer;
    font-size: 15px;
}

.login-e-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 60px;
    margin-top: 5px;
    border: 0;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #2d7dff, #24d7ea);
    box-shadow:
        0 18px 34px rgba(37, 99, 235, .30),
        inset 0 1px 0 rgba(255,255,255,.24);
    font-size: 17px;
    font-weight: 900;
}

.login-e-footer {
    margin-top: 22px !important;
    color: rgba(241, 251, 255, .72) !important;
}

@keyframes loginProvinceFlow {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -44; }
}

@keyframes loginNodePulse {
    0%, 100% { opacity: .78; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.16); }
}

@keyframes loginPinFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@media (max-width: 991.98px) {
    body.login-style-e.future-login-page {
        padding: 16px;
        place-items: start center;
    }

    .login-e-shell {
        grid-template-columns: 1fr;
        border-radius: 32px;
    }

    .login-e-showcase {
        min-height: 590px;
        padding: 32px 28px 28px;
    }

    .login-e-panel {
        min-height: auto;
        margin: 0 16px 16px;
        padding: 72px 26px 28px;
    }

    .login-e-map-stage {
        left: 62px;
        right: 50px;
        bottom: 76px;
    }
}

@media (max-width: 575.98px) {
    body.login-style-e.future-login-page {
        padding: 10px;
    }

    .login-e-shell {
        border-radius: 26px;
    }

    .login-e-showcase {
        min-height: 560px;
        padding: 22px 18px 22px;
    }

    .login-e-badge {
        width: 100%;
        font-size: 11px;
    }

    .login-e-copy {
        margin-top: 28px;
    }

    .login-e-copy h1 {
        font-size: 48px;
    }

    .login-e-copy h2 {
        font-size: 18px;
    }

    .login-e-copy p {
        font-size: 13px;
    }

    .login-e-map-stage {
        left: 14px;
        right: 14px;
        bottom: 72px;
        height: 265px;
    }

    .login-map-pin {
        width: 50px;
        height: 62px;
        font-size: 17px;
    }

    .login-map-pin.pin-a { left: 36%; top: 8px; }
    .login-map-pin.pin-b { left: 54%; top: 104px; }
    .login-map-pin.pin-c { right: 10%; top: 26px; }
    .login-map-pin.pin-d { left: 14%; top: 150px; }

    .login-e-chips {
        left: 18px;
        right: 18px;
        bottom: 22px;
        gap: 7px;
    }

    .login-e-chips span {
        font-size: 10px;
        padding: 6px 9px;
    }

    .login-e-panel {
        margin: 0 10px 10px;
        padding: 68px 18px 22px;
        border-radius: 24px;
    }

    .login-e-back {
        left: 18px;
        top: 18px;
        font-size: 11px;
    }
}


/* ===== v74 use uploaded reference visual for left login showcase ===== */
.login-e-showcase.reference-image-mode {
    position: relative !important;
    min-height: 680px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 48% 48%, rgba(0, 255, 214, .12), transparent 22rem),
        linear-gradient(135deg, rgba(4, 20, 44, .56), rgba(3, 62, 82, .36)) !important;
}

.login-e-showcase.reference-image-mode::before,
.login-e-showcase.reference-image-mode::after {
    display: none !important;
}

.login-e-reference-showcase-img {
    width: 100% !important;
    height: 100% !important;
    min-height: inherit !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter:
        saturate(1.05)
        contrast(1.02)
        brightness(1.02)
        drop-shadow(0 24px 54px rgba(0,0,0,.18)) !important;
}

/* ขยับ panel ขวาให้เข้ากับภาพต้นแบบมากขึ้น */
body.login-style-e .login-e-panel {
    margin: 18px 18px 18px 0 !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.075)),
        rgba(255,255,255,.105) !important;
    border-color: rgba(255,255,255,.22) !important;
}

/* mobile/tablet: use real image but crop naturally */
@media (max-width: 991.98px) {
    .login-e-showcase.reference-image-mode {
        min-height: 520px !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }

    .login-e-reference-showcase-img {
        object-position: center center !important;
    }
}

@media (max-width: 575.98px) {
    .login-e-showcase.reference-image-mode {
        min-height: 430px !important;
    }

    .login-e-reference-showcase-img {
        object-position: 46% center !important;
    }
}

/* ===== v75 login showcase: restore original text + transparent map background ===== */
.login-e-showcase.reference-image-mode {
    position: relative !important;
    min-height: 680px !important;
    padding: 34px 34px 28px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background:
        linear-gradient(135deg, rgba(3, 15, 40, .34), rgba(4, 57, 82, .12)),
        radial-gradient(circle at 20% 20%, rgba(76, 225, 255, .10), transparent 20rem) !important;
}

.login-e-showcase.reference-image-mode::before {
    display: block !important;
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        radial-gradient(circle at 68% 62%, rgba(72, 235, 255, .14), transparent 24rem);
    background-size: 34px 34px, 34px 34px, auto;
    pointer-events: none;
}

.login-e-showcase.reference-image-mode::after {
    display: block !important;
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(1,10,25,.10), rgba(1,10,25,.22));
    pointer-events: none;
}

.login-e-showcase-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    flex: 1;
}

.login-e-copy {
    margin-top: 28px !important;
    max-width: 520px;
}

.login-e-copy h1 {
    margin: 0 0 10px;
    font-size: clamp(56px, 6vw, 84px);
    line-height: .90;
}

.login-e-copy h2 {
    max-width: 560px;
    font-size: clamp(24px, 2.15vw, 31px);
    line-height: 1.18;
}

.login-e-copy p {
    margin-top: 18px;
    max-width: 540px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(236, 249, 255, .88);
}

.login-e-visual-card {
    position: relative;
    margin-top: auto;
    min-height: 300px;
    border-radius: 34px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)),
        rgba(255,255,255,.08);
    border: 1px solid rgba(201, 246, 255, .18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 24px 60px rgba(0,0,0,.24);
    backdrop-filter: blur(14px) saturate(1.05);
}

.login-e-visual-bg,
.login-e-visual-rings,
.login-e-visual-lines,
.login-e-map-ghost-wrap,
.login-e-visual-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.login-e-visual-bg {
    background:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
        radial-gradient(circle at 64% 52%, rgba(116, 248, 255, .10), transparent 18rem);
    background-size: 26px 26px, 26px 26px, auto;
    opacity: .95;
}

.login-e-visual-rings {
    background:
        radial-gradient(circle at 38% 52%, transparent 0 8rem, rgba(125,247,255,.13) 8rem 8.14rem, transparent 8.14rem 100%),
        radial-gradient(circle at 70% 32%, transparent 0 5.8rem, rgba(125,247,255,.10) 5.8rem 5.92rem, transparent 5.92rem 100%),
        radial-gradient(circle at 76% 66%, transparent 0 4.4rem, rgba(125,247,255,.10) 4.4rem 4.52rem, transparent 4.52rem 100%);
    animation: loginOrbitPulse 8s ease-in-out infinite;
}

.login-e-visual-lines {
    background:
        linear-gradient(25deg, transparent 48%, rgba(116,248,255,.20) 49%, transparent 50%),
        linear-gradient(148deg, transparent 48%, rgba(116,248,255,.14) 49%, transparent 50%),
        linear-gradient(86deg, transparent 48%, rgba(116,248,255,.08) 49%, transparent 50%);
    background-size: 210px 130px, 260px 170px, 240px 180px;
    opacity: .65;
    animation: loginLinesMove 12s linear infinite;
}

.login-e-visual-glow {
    border-radius: 999px;
    filter: blur(18px);
    opacity: .55;
}

.login-e-visual-glow.glow-a {
    inset: auto auto 42px 34px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(70, 238, 255, .35), transparent 72%);
    animation: loginGlowFloat 7s ease-in-out infinite;
}

.login-e-visual-glow.glow-b {
    inset: 20px 80px auto auto;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(98, 255, 224, .28), transparent 72%);
    animation: loginGlowFloat 9s ease-in-out infinite reverse;
}

.login-e-map-ghost-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
}

.login-e-map-ghost {
    width: min(96%, 640px);
    max-height: 250px;
    object-fit: contain;
    opacity: .34;
    mix-blend-mode: screen;
    filter:
        saturate(1.08)
        contrast(1.05)
        brightness(1.08)
        drop-shadow(0 0 24px rgba(81, 247, 255, .26));
    animation: loginGhostDrift 12s ease-in-out infinite;
}

.login-e-chips {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    margin-top: 18px;
}

.login-e-chips span {
    background: rgba(4, 19, 44, .74);
}

@keyframes loginOrbitPulse {
    0%, 100% { transform: scale(1); opacity: .86; }
    50% { transform: scale(1.035); opacity: 1; }
}

@keyframes loginLinesMove {
    from { background-position: 0 0, 0 0, 0 0; }
    to { background-position: 110px 0, -140px 0, 0 90px; }
}

@keyframes loginGhostDrift {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.015); }
}

@keyframes loginGlowFloat {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(8px,-6px,0) scale(1.06); }
}

/* restore right panel while keeping premium glass */
body.login-style-e .login-e-panel {
    margin: 18px 18px 18px 0 !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.075)),
        rgba(255,255,255,.105) !important;
    border-color: rgba(255,255,255,.22) !important;
}

@media (max-width: 991.98px) {
    .login-e-showcase.reference-image-mode {
        min-height: 560px !important;
        padding: 28px 24px 24px !important;
    }

    .login-e-copy h1 {
        font-size: clamp(48px, 8vw, 72px);
    }

    .login-e-visual-card {
        min-height: 260px;
    }

    .login-e-map-ghost {
        max-height: 210px;
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .login-e-showcase.reference-image-mode {
        min-height: 500px !important;
        padding: 20px 18px 18px !important;
    }

    .login-e-badge {
        min-height: 32px;
        padding: 6px 12px;
        font-size: 10px;
    }

    .login-e-copy {
        margin-top: 20px !important;
    }

    .login-e-copy h1 {
        font-size: 42px;
        line-height: .95;
    }

    .login-e-copy h2 {
        font-size: 18px;
        line-height: 1.22;
    }

    .login-e-copy p {
        font-size: 12px;
        line-height: 1.55;
        margin-top: 12px;
    }

    .login-e-visual-card {
        min-height: 210px;
        border-radius: 24px;
    }

    .login-e-map-ghost-wrap {
        padding: 16px;
    }

    .login-e-map-ghost {
        max-height: 160px;
        opacity: .30;
    }

    .login-e-chips {
        gap: 8px;
        margin-top: 14px;
    }

    .login-e-chips span {
        font-size: 10px;
        padding: 6px 10px;
    }
}


/* ===== v76 Login: use generated T-MAP showcase exactly as selected ===== */
body.login-showcase-v76.future-login-page {
    min-height: 100vh !important;
    display: grid !important;
    place-items: center !important;
    padding: 26px !important;
    background: #061322 !important;
    overflow-x: hidden !important;
}

body.login-showcase-v76 .tmap-login-bg-slideshow,
body.login-showcase-v76 .tmap-page-bg,
body.login-showcase-v76 .tmap-bg-slideshow {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    opacity: .78 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

body.login-showcase-v76 .tmap-login-bg-slideshow span,
body.login-showcase-v76 .tmap-page-bg span,
body.login-showcase-v76 .tmap-bg-slideshow span {
    position: absolute !important;
    inset: 0 !important;
    background-image: var(--bg) !important;
    background-size: cover !important;
    background-position: center center !important;
    filter: saturate(1.08) contrast(1.04) brightness(.90) !important;
}

body.login-showcase-v76 .tmap-login-bg-slideshow::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(135deg, rgba(2,8,22,.50), rgba(4,24,58,.14)),
        radial-gradient(circle at 58% 50%, rgba(0, 235, 255, .11), transparent 34rem) !important;
}

body.login-showcase-v76 .login-e-bg-grid {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
        linear-gradient(rgba(125, 247, 255, .052) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 247, 255, .052) 1px, transparent 1px),
        radial-gradient(circle at 48% 62%, rgba(86, 244, 255, .10), transparent 30rem) !important;
    background-size: 44px 44px, 44px 44px, auto !important;
    mask-image: radial-gradient(circle at center, rgba(0,0,0,.88), transparent 86%) !important;
}

body.login-showcase-v76 .v76-shell {
    position: relative !important;
    z-index: 3 !important;
    width: min(1220px, 100%) !important;
    min-height: 700px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr) !important;
    border-radius: 42px !important;
    overflow: hidden !important;
    background:
        linear-gradient(135deg, rgba(4, 20, 44, .66), rgba(3, 62, 82, .42)) !important;
    border: 1px solid rgba(191, 245, 255, .22) !important;
    box-shadow:
        0 38px 120px rgba(0,0,0,.56),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
}

body.login-showcase-v76 .v76-showcase {
    position: relative !important;
    min-height: 700px !important;
    padding: 20px !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
    background:
        radial-gradient(circle at 45% 44%, rgba(0, 255, 214, .12), transparent 22rem),
        linear-gradient(135deg, rgba(4, 20, 44, .32), rgba(3, 62, 82, .14)) !important;
}

body.login-showcase-v76 .v76-showcase::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) !important;
    background-size: 38px 38px !important;
    pointer-events: none !important;
    opacity: .65 !important;
}

body.login-showcase-v76 .v76-showcase-image {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 660px !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 34px !important;
    filter:
        saturate(1.04)
        contrast(1.02)
        brightness(1.02)
        drop-shadow(0 24px 54px rgba(0,0,0,.20)) !important;
}

body.login-showcase-v76 .v76-showcase-shine {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
        linear-gradient(115deg, transparent 0 36%, rgba(255,255,255,.08) 45%, transparent 56%),
        radial-gradient(circle at 64% 42%, rgba(109, 246, 255, .08), transparent 18rem) !important;
    opacity: .70 !important;
    animation: v76Shine 9s linear infinite !important;
}

body.login-showcase-v76 .v76-login-panel {
    position: relative !important;
    min-height: 664px !important;
    margin: 18px 18px 18px 0 !important;
    padding: 74px 36px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    border-radius: 34px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.075)),
        rgba(255,255,255,.105) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 24px 70px rgba(0,0,0,.24) !important;
    backdrop-filter: blur(20px) saturate(1.08) !important;
}

body.login-showcase-v76 .login-e-back {
    position: absolute !important;
    top: 20px !important;
    left: 24px !important;
}

@keyframes v76Shine {
    from { transform: translateX(-18%); }
    to { transform: translateX(18%); }
}

@media (max-width: 991.98px) {
    body.login-showcase-v76.future-login-page {
        padding: 16px !important;
        place-items: start center !important;
    }

    body.login-showcase-v76 .v76-shell {
        grid-template-columns: 1fr !important;
        border-radius: 32px !important;
        min-height: auto !important;
    }

    body.login-showcase-v76 .v76-showcase {
        min-height: 520px !important;
        padding: 16px !important;
    }

    body.login-showcase-v76 .v76-showcase-image {
        max-height: 500px !important;
    }

    body.login-showcase-v76 .v76-login-panel {
        min-height: auto !important;
        margin: 0 16px 16px !important;
        padding: 72px 26px 28px !important;
    }
}

@media (max-width: 575.98px) {
    body.login-showcase-v76.future-login-page {
        padding: 10px !important;
    }

    body.login-showcase-v76 .v76-shell {
        border-radius: 26px !important;
    }

    body.login-showcase-v76 .v76-showcase {
        min-height: 360px !important;
        padding: 10px !important;
    }

    body.login-showcase-v76 .v76-showcase-image {
        max-height: 340px !important;
        border-radius: 22px !important;
    }

    body.login-showcase-v76 .v76-login-panel {
        margin: 0 10px 10px !important;
        padding: 68px 18px 22px !important;
        border-radius: 24px !important;
    }

    body.login-showcase-v76 .login-e-back {
        left: 18px !important;
        top: 18px !important;
        font-size: 11px !important;
    }
}


/* ===== v77 Final Login: one glass background + code text + map artwork inserted ===== */
body.login-showcase-v77.future-login-page {
    min-height: 100vh !important;
    display: grid !important;
    place-items: center !important;
    padding: 26px !important;
    background: #061322 !important;
    overflow-x: hidden !important;
}

body.login-showcase-v77 .tmap-login-bg-slideshow,
body.login-showcase-v77 .tmap-page-bg,
body.login-showcase-v77 .tmap-bg-slideshow {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    opacity: .78 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

body.login-showcase-v77 .tmap-login-bg-slideshow span,
body.login-showcase-v77 .tmap-page-bg span,
body.login-showcase-v77 .tmap-bg-slideshow span {
    position: absolute !important;
    inset: 0 !important;
    background-image: var(--bg) !important;
    background-size: cover !important;
    background-position: center center !important;
    filter: saturate(1.08) contrast(1.04) brightness(.90) !important;
}

body.login-showcase-v77 .tmap-login-bg-slideshow::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(135deg, rgba(2,8,22,.50), rgba(4,24,58,.14)),
        radial-gradient(circle at 58% 50%, rgba(0, 235, 255, .11), transparent 34rem) !important;
}

body.login-showcase-v77 .login-e-bg-grid {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
        linear-gradient(rgba(125, 247, 255, .052) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 247, 255, .052) 1px, transparent 1px),
        radial-gradient(circle at 48% 62%, rgba(86, 244, 255, .10), transparent 30rem) !important;
    background-size: 44px 44px, 44px 44px, auto !important;
    mask-image: radial-gradient(circle at center, rgba(0,0,0,.88), transparent 86%) !important;
}

body.login-showcase-v77 .v77-shell {
    position: relative !important;
    z-index: 3 !important;
    width: min(1220px, 100%) !important;
    min-height: 700px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.16fr) minmax(360px, .84fr) !important;
    border-radius: 42px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 35% 44%, rgba(0, 255, 214, .085), transparent 28rem),
        linear-gradient(135deg, rgba(4, 20, 44, .58), rgba(3, 62, 82, .30)) !important;
    border: 1px solid rgba(191, 245, 255, .22) !important;
    box-shadow:
        0 38px 120px rgba(0,0,0,.56),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
}

body.login-showcase-v77 .v77-showcase {
    position: relative !important;
    min-height: 700px !important;
    padding: 34px 36px 30px !important;
    overflow: hidden !important;
    display: block !important;
    background: transparent !important;
}

body.login-showcase-v77 .v77-showcase-bg,
body.login-showcase-v77 .v77-motion-lines,
body.login-showcase-v77 .v77-orbit {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
}

body.login-showcase-v77 .v77-showcase-bg {
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        radial-gradient(circle at 58% 58%, rgba(83, 235, 255, .10), transparent 22rem) !important;
    background-size: 38px 38px, 38px 38px, auto !important;
    opacity: .90 !important;
}

body.login-showcase-v77 .v77-motion-lines {
    background:
        linear-gradient(28deg, transparent 48%, rgba(116,248,255,.18) 49%, transparent 50%),
        linear-gradient(147deg, transparent 48%, rgba(116,248,255,.11) 49%, transparent 50%),
        radial-gradient(circle, rgba(125,247,255,.38) 1px, transparent 1.8px) !important;
    background-size: 240px 150px, 280px 190px, 56px 56px !important;
    opacity: .58 !important;
    animation: v77LinesMove 12s linear infinite !important;
}

body.login-showcase-v77 .v77-orbit {
    border-radius: 999px !important;
    border: 1px solid rgba(125,247,255,.11) !important;
}

body.login-showcase-v77 .v77-orbit.orbit-a {
    width: 520px !important;
    height: 520px !important;
    left: 18% !important;
    bottom: 5% !important;
    opacity: .62 !important;
    animation: v77OrbitPulse 8s ease-in-out infinite !important;
}

body.login-showcase-v77 .v77-orbit.orbit-b {
    width: 300px !important;
    height: 300px !important;
    right: 7% !important;
    top: 16% !important;
    opacity: .54 !important;
    border-style: dashed !important;
    animation: v77OrbitSpin 20s linear infinite !important;
}

body.login-showcase-v77 .v77-left-content {
    position: relative !important;
    z-index: 2 !important;
    min-height: 636px !important;
    display: flex !important;
    flex-direction: column !important;
}

body.login-showcase-v77 .v77-badge {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 34px !important;
    padding: 7px 14px !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(195, 246, 255, .18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
}

body.login-showcase-v77 .v77-copy {
    margin-top: 32px !important;
    max-width: 610px !important;
}

body.login-showcase-v77 .v77-copy h1 {
    margin: 0 0 10px !important;
    color: #ffffff !important;
    font-size: clamp(58px, 6.3vw, 92px) !important;
    line-height: .90 !important;
    font-weight: 900 !important;
    letter-spacing: -.055em !important;
    text-shadow:
        0 16px 42px rgba(0,0,0,.35),
        0 0 30px rgba(119, 246, 255, .20) !important;
}

body.login-showcase-v77 .v77-copy h1 span {
    display: inline-block !important;
    padding-bottom: 6px !important;
    background: linear-gradient(180deg, #f7ffff 0%, #d9fbff 36%, #6df4ff 72%, #8fb4ff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 22px rgba(91, 239, 255, .28)) !important;
}

body.login-showcase-v77 .v77-copy h2 {
    margin: 0 !important;
    color: rgba(250, 253, 255, .96) !important;
    font-size: clamp(24px, 2.15vw, 31px) !important;
    line-height: 1.18 !important;
    font-weight: 900 !important;
    letter-spacing: -.025em !important;
}

body.login-showcase-v77 .v77-copy p {
    margin: 16px 0 0 !important;
    max-width: 560px !important;
    color: rgba(225, 245, 255, .86) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    font-weight: 600 !important;
}

body.login-showcase-v77 .v77-map-layer {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 310px !important;
    margin-top: 16px !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
}

body.login-showcase-v77 .v77-map-layer img {
    width: min(104%, 720px) !important;
    height: auto !important;
    max-height: 338px !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: .92 !important;
    mix-blend-mode: screen !important;
    filter:
        saturate(1.14)
        contrast(1.08)
        brightness(1.14)
        drop-shadow(0 0 28px rgba(81, 247, 255, .28))
        drop-shadow(0 24px 48px rgba(0,0,0,.22)) !important;
    animation: v77MapFloat 8s ease-in-out infinite !important;
}

body.login-showcase-v77 .v77-map-glow {
    position: absolute !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    filter: blur(20px) !important;
    opacity: .60 !important;
}

body.login-showcase-v77 .v77-map-glow.glow-one {
    width: 160px !important;
    height: 160px !important;
    left: 16% !important;
    bottom: 12% !important;
    background: radial-gradient(circle, rgba(70, 238, 255, .32), transparent 72%) !important;
    animation: v77GlowFloat 7s ease-in-out infinite !important;
}

body.login-showcase-v77 .v77-map-glow.glow-two {
    width: 150px !important;
    height: 150px !important;
    right: 10% !important;
    top: 12% !important;
    background: radial-gradient(circle, rgba(98, 255, 224, .25), transparent 72%) !important;
    animation: v77GlowFloat 9s ease-in-out infinite reverse !important;
}

body.login-showcase-v77 .v77-chips {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    margin-top: 14px !important;
    z-index: 3 !important;
}

body.login-showcase-v77 .v77-chips span {
    background: rgba(4, 19, 44, .74) !important;
    border: 1px solid rgba(159, 235, 255, .18) !important;
}

body.login-showcase-v77 .v77-login-panel {
    position: relative !important;
    min-height: 664px !important;
    margin: 18px 18px 18px 0 !important;
    padding: 74px 36px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    border-radius: 34px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.075)),
        rgba(255,255,255,.105) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 24px 70px rgba(0,0,0,.24) !important;
    backdrop-filter: blur(20px) saturate(1.08) !important;
}

body.login-showcase-v77 .login-e-back {
    position: absolute !important;
    top: 20px !important;
    left: 24px !important;
}

@keyframes v77LinesMove {
    from { background-position: 0 0, 0 0, 0 0; }
    to { background-position: 120px 0, -140px 0, 56px 56px; }
}

@keyframes v77OrbitPulse {
    0%, 100% { transform: scale(1); opacity: .55; }
    50% { transform: scale(1.04); opacity: .82; }
}

@keyframes v77OrbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes v77MapFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-7px) scale(1.018); }
}

@keyframes v77GlowFloat {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(9px,-7px,0) scale(1.06); }
}

@media (max-width: 991.98px) {
    body.login-showcase-v77.future-login-page {
        padding: 16px !important;
        place-items: start center !important;
    }

    body.login-showcase-v77 .v77-shell {
        grid-template-columns: 1fr !important;
        border-radius: 32px !important;
        min-height: auto !important;
    }

    body.login-showcase-v77 .v77-showcase {
        min-height: 600px !important;
        padding: 28px 26px 24px !important;
    }

    body.login-showcase-v77 .v77-left-content {
        min-height: 548px !important;
    }

    body.login-showcase-v77 .v77-map-layer img {
        max-height: 285px !important;
        width: min(100%, 680px) !important;
    }

    body.login-showcase-v77 .v77-login-panel {
        min-height: auto !important;
        margin: 0 16px 16px !important;
        padding: 72px 26px 28px !important;
    }
}

@media (max-width: 575.98px) {
    body.login-showcase-v77.future-login-page {
        padding: 10px !important;
    }

    body.login-showcase-v77 .v77-shell {
        border-radius: 26px !important;
    }

    body.login-showcase-v77 .v77-showcase {
        min-height: 540px !important;
        padding: 20px 18px 18px !important;
    }

    body.login-showcase-v77 .v77-left-content {
        min-height: 502px !important;
    }

    body.login-showcase-v77 .v77-badge {
        min-height: 32px !important;
        padding: 6px 12px !important;
        font-size: 10px !important;
    }

    body.login-showcase-v77 .v77-copy {
        margin-top: 22px !important;
    }

    body.login-showcase-v77 .v77-copy h1 {
        font-size: 44px !important;
        line-height: .95 !important;
    }

    body.login-showcase-v77 .v77-copy h2 {
        font-size: 18px !important;
        line-height: 1.22 !important;
    }

    body.login-showcase-v77 .v77-copy p {
        font-size: 12px !important;
        line-height: 1.55 !important;
        margin-top: 12px !important;
    }

    body.login-showcase-v77 .v77-map-layer {
        min-height: 205px !important;
        margin-top: 8px !important;
    }

    body.login-showcase-v77 .v77-map-layer img {
        max-height: 190px !important;
        width: 112% !important;
    }

    body.login-showcase-v77 .v77-chips {
        gap: 8px !important;
        margin-top: 10px !important;
    }

    body.login-showcase-v77 .v77-chips span {
        font-size: 10px !important;
        padding: 6px 10px !important;
    }

    body.login-showcase-v77 .v77-login-panel {
        margin: 0 10px 10px !important;
        padding: 68px 18px 22px !important;
        border-radius: 24px !important;
    }

    body.login-showcase-v77 .login-e-back {
        left: 18px !important;
        top: 18px !important;
        font-size: 11px !important;
    }
}


/* ===== v78 Transparent map + animated pins ===== */

/* เอากรอบ/พื้นน้ำเงินเข้มของรูปออก ให้เหลือแผนที่โปร่งใสวางบน background หลัก */
body.login-showcase-v77 .v78-map-layer {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 330px !important;
    margin-top: 8px !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
    isolation: isolate !important;
}

body.login-showcase-v77 .v78-map-layer::before {
    content: "" !important;
    position: absolute !important;
    inset: 4% 2% 0 2% !important;
    z-index: -2 !important;
    background:
        radial-gradient(circle at 50% 52%, rgba(42, 227, 255, .14), transparent 19rem),
        radial-gradient(circle at 44% 56%, rgba(0, 255, 182, .10), transparent 16rem) !important;
    filter: blur(10px) !important;
    opacity: .80 !important;
}

body.login-showcase-v77 .v78-map-layer::after {
    content: "" !important;
    position: absolute !important;
    inset: 4% 2% 0 2% !important;
    z-index: -1 !important;
    background:
        linear-gradient(25deg, transparent 48%, rgba(116,248,255,.14) 49%, transparent 50%),
        linear-gradient(147deg, transparent 48%, rgba(116,248,255,.10) 49%, transparent 50%),
        radial-gradient(circle, rgba(125,247,255,.25) 1px, transparent 1.8px) !important;
    background-size: 220px 140px, 260px 170px, 54px 54px !important;
    opacity: .50 !important;
    animation: v78MapNetworkMove 13s linear infinite !important;
}

body.login-showcase-v77 .v78-map-image {
    width: min(112%, 760px) !important;
    height: auto !important;
    max-height: 358px !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: .98 !important;
    mix-blend-mode: screen !important;
    filter:
        saturate(1.24)
        contrast(1.12)
        brightness(1.24)
        drop-shadow(0 0 24px rgba(81, 247, 255, .42))
        drop-shadow(0 24px 48px rgba(0,0,0,.18)) !important;
    animation: v78MapFloat 8s ease-in-out infinite !important;
}

/* Animated HTML/CSS pins */
body.login-showcase-v77 .v78-pin {
    position: absolute !important;
    z-index: 4 !important;
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 16px !important;
    color: #ffffff !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)),
        linear-gradient(135deg, #2fc9ff 0%, #2478ff 60%, #6c5cff 100%) !important;
    border: 1px solid rgba(190, 248, 255, .35) !important;
    box-shadow:
        0 0 0 8px rgba(83, 226, 255, .08),
        0 0 24px rgba(70, 211, 255, .38),
        0 16px 30px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.18) !important;
    font-size: 16px !important;
    transform: translate(-50%, -50%) !important;
    animation: v78PinBounce 4.8s ease-in-out infinite !important;
}

body.login-showcase-v77 .v78-pin::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 100% !important;
    width: 15px !important;
    height: 15px !important;
    background: inherit !important;
    transform: translate(-50%, -54%) rotate(45deg) !important;
    border-right: 1px solid rgba(190, 248, 255, .24) !important;
    border-bottom: 1px solid rgba(190, 248, 255, .24) !important;
    border-radius: 4px !important;
    z-index: -1 !important;
}

body.login-showcase-v77 .v78-pin::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: calc(100% + 8px) !important;
    width: 34px !important;
    height: 12px !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(105, 244, 255, .42), transparent 70%) !important;
    transform: translateX(-50%) !important;
    filter: blur(2px) !important;
    animation: v78PinPulse 4.8s ease-in-out infinite !important;
}

body.login-showcase-v77 .v78-pin i {
    position: relative !important;
    z-index: 2 !important;
    text-shadow: 0 0 12px rgba(255,255,255,.35) !important;
}

body.login-showcase-v77 .v78-pin.pin-book {
    left: 52.5% !important;
    top: 21% !important;
    animation-delay: 0s !important;
}

body.login-showcase-v77 .v78-pin.pin-person {
    left: 64.5% !important;
    top: 39% !important;
    animation-delay: .55s !important;
}

body.login-showcase-v77 .v78-pin.pin-group {
    left: 74.5% !important;
    top: 15% !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)),
        linear-gradient(135deg, #37f5b8 0%, #10d98a 52%, #257dff 100%) !important;
    animation-delay: 1.1s !important;
}

body.login-showcase-v77 .v78-pin.pin-idea {
    left: 43.8% !important;
    top: 55% !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)),
        linear-gradient(135deg, #37f5b8 0%, #10d98a 52%, #257dff 100%) !important;
    animation-delay: .95s !important;
}

body.login-showcase-v77 .v78-pin.pin-school {
    left: 28.7% !important;
    top: 49% !important;
    animation-delay: .35s !important;
}

@keyframes v78MapNetworkMove {
    from { background-position: 0 0, 0 0, 0 0; }
    to { background-position: 120px 0, -140px 0, 54px 54px; }
}

@keyframes v78MapFloat {
    0%, 100% { transform: translateY(0) scale(1.015); }
    50% { transform: translateY(-7px) scale(1.035); }
}

@keyframes v78PinBounce {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) scale(1); }
    50% { transform: translate(-50%, -50%) translateY(-11px) scale(1.035); }
}

@keyframes v78PinPulse {
    0%, 100% { opacity: .55; transform: translateX(-50%) scale(1); }
    50% { opacity: .92; transform: translateX(-50%) scale(1.25); }
}

body.login-showcase-v77 .v78-map-layer .v77-map-glow {
    opacity: .55 !important;
}

/* Mobile/Tablet tuning */
@media (max-width: 991.98px) {
    body.login-showcase-v77 .v78-map-layer {
        min-height: 300px !important;
    }

    body.login-showcase-v77 .v78-map-image {
        width: min(110%, 720px) !important;
        max-height: 310px !important;
    }
}

@media (max-width: 575.98px) {
    body.login-showcase-v77 .v78-map-layer {
        min-height: 220px !important;
        margin-top: 8px !important;
    }

    body.login-showcase-v77 .v78-map-image {
        width: 122% !important;
        max-height: 210px !important;
    }

    body.login-showcase-v77 .v78-pin {
        width: 31px !important;
        height: 31px !important;
        border-radius: 11px !important;
        font-size: 12px !important;
        box-shadow:
            0 0 0 5px rgba(83, 226, 255, .07),
            0 0 17px rgba(70, 211, 255, .32),
            0 12px 20px rgba(0,0,0,.18),
            inset 0 1px 0 rgba(255,255,255,.18) !important;
    }

    body.login-showcase-v77 .v78-pin::before {
        width: 10px !important;
        height: 10px !important;
    }

    body.login-showcase-v77 .v78-pin::after {
        width: 24px !important;
        height: 9px !important;
        top: calc(100% + 5px) !important;
    }
}


/* ===== v79 refine map: no duplicate pins, clearer transparent map, subtle motion ===== */

/* ใช้รูปแผนที่ที่ตัดพื้นหลังให้โปร่งใสกว่าเดิม */
body.login-showcase-v77 .v78-map-image {
    content: url("../images/login-map-transparent-v79.png") !important;
    width: min(118%, 800px) !important;
    max-height: 380px !important;
    opacity: 1 !important;
    mix-blend-mode: screen !important;
    filter:
        saturate(1.28)
        contrast(1.16)
        brightness(1.20)
        drop-shadow(0 0 30px rgba(81, 247, 255, .44))
        drop-shadow(0 26px 50px rgba(0,0,0,.18)) !important;
    animation: v79MapBreath 9s ease-in-out infinite !important;
}

/* ซ่อนหมุด HTML แบบเดิมที่ทำให้ซ้อนกับหมุดในรูป */
body.login-showcase-v77 .v78-pin {
    display: none !important;
}

/* ปรับ layer รอบแผนที่ให้ไม่มีสี่เหลี่ยมมืด และดูเป็น visual เดียวกับ background */
body.login-showcase-v77 .v78-map-layer {
    min-height: 350px !important;
    margin-top: 2px !important;
}

body.login-showcase-v77 .v78-map-layer::before {
    inset: -2% -4% -2% -4% !important;
    background:
        radial-gradient(circle at 50% 52%, rgba(42, 227, 255, .12), transparent 20rem),
        radial-gradient(circle at 44% 56%, rgba(0, 255, 182, .08), transparent 17rem) !important;
    filter: blur(14px) !important;
    opacity: .66 !important;
}

body.login-showcase-v77 .v78-map-layer::after {
    inset: -2% -4% -2% -4% !important;
    opacity: .32 !important;
}

/* pulse dots แทนการใส่หมุดซ้ำ เพื่อให้รู้สึกว่าหมุดเคลื่อนไหวโดยไม่รก */
body.login-showcase-v77 .v79-pulse-dot {
    position: absolute !important;
    z-index: 5 !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle, rgba(255,255,255,.95) 0 16%, rgba(88,242,255,.70) 17% 38%, rgba(88,242,255,.10) 39% 70%, transparent 72%) !important;
    box-shadow:
        0 0 16px rgba(94, 234, 255, .50),
        0 0 34px rgba(94, 234, 255, .30) !important;
    animation: v79DotPulse 3.8s ease-in-out infinite !important;
}

body.login-showcase-v77 .v79-pulse-dot::after {
    content: "" !important;
    position: absolute !important;
    inset: -12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(116,248,255,.28) !important;
    animation: v79Ripple 3.8s ease-out infinite !important;
}

body.login-showcase-v77 .v79-pulse-dot.dot-book {
    left: 52.2% !important;
    top: 22.5% !important;
    animation-delay: 0s !important;
}
body.login-showcase-v77 .v79-pulse-dot.dot-person {
    left: 65.2% !important;
    top: 40.5% !important;
    animation-delay: .55s !important;
}
body.login-showcase-v77 .v79-pulse-dot.dot-group {
    left: 76.2% !important;
    top: 16.4% !important;
    background:
        radial-gradient(circle, rgba(255,255,255,.95) 0 16%, rgba(61,255,184,.70) 17% 38%, rgba(61,255,184,.10) 39% 70%, transparent 72%) !important;
    box-shadow:
        0 0 16px rgba(61,255,184,.50),
        0 0 34px rgba(61,255,184,.30) !important;
    animation-delay: 1.1s !important;
}
body.login-showcase-v77 .v79-pulse-dot.dot-idea {
    left: 43.4% !important;
    top: 56.2% !important;
    background:
        radial-gradient(circle, rgba(255,255,255,.95) 0 16%, rgba(61,255,184,.70) 17% 38%, rgba(61,255,184,.10) 39% 70%, transparent 72%) !important;
    box-shadow:
        0 0 16px rgba(61,255,184,.50),
        0 0 34px rgba(61,255,184,.30) !important;
    animation-delay: .9s !important;
}
body.login-showcase-v77 .v79-pulse-dot.dot-school {
    left: 29.8% !important;
    top: 50.2% !important;
    animation-delay: .35s !important;
}

@keyframes v79MapBreath {
    0%, 100% { transform: translateY(0) scale(1.045); opacity: .98; }
    50% { transform: translateY(-7px) scale(1.075); opacity: 1; }
}

@keyframes v79DotPulse {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) scale(.86); opacity: .56; }
    45% { transform: translate(-50%, -50%) translateY(-8px) scale(1.08); opacity: 1; }
}

@keyframes v79Ripple {
    0% { transform: scale(.58); opacity: .55; }
    70% { transform: scale(1.45); opacity: .04; }
    100% { transform: scale(1.60); opacity: 0; }
}

@media (max-width: 991.98px) {
    body.login-showcase-v77 .v78-map-layer {
        min-height: 315px !important;
    }

    body.login-showcase-v77 .v78-map-image {
        width: min(116%, 740px) !important;
        max-height: 320px !important;
    }
}

@media (max-width: 575.98px) {
    body.login-showcase-v77 .v78-map-layer {
        min-height: 220px !important;
    }

    body.login-showcase-v77 .v78-map-image {
        width: 126% !important;
        max-height: 215px !important;
    }

    body.login-showcase-v77 .v79-pulse-dot {
        width: 15px !important;
        height: 15px !important;
    }

    body.login-showcase-v77 .v79-pulse-dot::after {
        inset: -8px !important;
    }
}


/* ===== v80 Final Login Map: compact proportion + large clear bouncing pins ===== */

/* รักษาสัดส่วนรวมให้พอดีแบบภาพที่เลือก */
body.login-showcase-v77 .v77-shell {
    width: min(1120px, calc(100vw - 44px)) !important;
    min-height: 620px !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr) !important;
}

body.login-showcase-v77 .v77-showcase {
    min-height: 620px !important;
    padding: 30px 32px 26px !important;
}

body.login-showcase-v77 .v77-left-content {
    min-height: 560px !important;
}

body.login-showcase-v77 .v77-copy {
    margin-top: 28px !important;
}

body.login-showcase-v77 .v77-copy h1 {
    font-size: clamp(58px, 5.55vw, 82px) !important;
    line-height: .92 !important;
}

body.login-showcase-v77 .v77-copy h2 {
    font-size: clamp(23px, 1.9vw, 30px) !important;
}

body.login-showcase-v77 .v77-login-panel {
    min-height: 584px !important;
    margin: 18px 18px 18px 0 !important;
}

/* แผนที่ไม่มีหมุดฝังในภาพ ให้เหลือ map board ที่สะอาด */
body.login-showcase-v77 .v80-map-layer {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 285px !important;
    margin-top: 8px !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
    isolation: isolate !important;
}

/* ลบ/กด layer เดิมที่อาจทำให้ดูเป็นกรอบซ้อน */
body.login-showcase-v77 .v80-map-layer::before {
    content: "" !important;
    position: absolute !important;
    inset: -8% -7% -6% -7% !important;
    z-index: -2 !important;
    background:
        radial-gradient(circle at 50% 52%, rgba(42, 227, 255, .13), transparent 18rem),
        radial-gradient(circle at 44% 56%, rgba(0, 255, 182, .08), transparent 15rem) !important;
    filter: blur(14px) !important;
    opacity: .68 !important;
}

body.login-showcase-v77 .v80-map-layer::after {
    content: "" !important;
    position: absolute !important;
    inset: -6% -7% -6% -7% !important;
    z-index: -1 !important;
    background:
        linear-gradient(25deg, transparent 48%, rgba(116,248,255,.10) 49%, transparent 50%),
        linear-gradient(147deg, transparent 48%, rgba(116,248,255,.08) 49%, transparent 50%),
        radial-gradient(circle, rgba(125,247,255,.20) 1px, transparent 1.8px) !important;
    background-size: 220px 140px, 260px 170px, 54px 54px !important;
    opacity: .32 !important;
    animation: v80MapNetworkMove 14s linear infinite !important;
}

body.login-showcase-v77 .v80-map-image {
    position: relative !important;
    z-index: 1 !important;
    width: min(104%, 700px) !important;
    height: auto !important;
    max-height: 285px !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 0 !important;
    opacity: .98 !important;
    mix-blend-mode: screen !important;
    filter:
        saturate(1.18)
        contrast(1.10)
        brightness(1.10)
        drop-shadow(0 0 22px rgba(81, 247, 255, .34))
        drop-shadow(0 22px 42px rgba(0,0,0,.16)) !important;
    animation: v80MapFloat 8.5s ease-in-out infinite !important;
}

/* ซ่อนของเดิมทั้งหมดที่อาจซ้อน */
body.login-showcase-v77 .v78-map-image,
body.login-showcase-v77 .v79-pulse-dot,
body.login-showcase-v77 .v78-pin {
    display: none !important;
}

/* ปักหมุดใหญ่ ชัด สื่อความหมายด้วย icon */
body.login-showcase-v77 .v80-pin {
    position: absolute !important;
    z-index: 6 !important;
    width: 62px !important;
    height: 74px !important;
    display: grid !important;
    place-items: center !important;
    color: #ffffff !important;
    transform: translate(-50%, -100%) !important;
    animation: v80PinBounce 4.9s ease-in-out infinite !important;
    filter:
        drop-shadow(0 0 18px rgba(78, 224, 255, .42))
        drop-shadow(0 16px 24px rgba(0,0,0,.26)) !important;
}

body.login-showcase-v77 .v80-pin::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(circle at 45% 28%, rgba(255,255,255,.50), transparent 22%),
        linear-gradient(145deg, #42d7ff 0%, #237cff 58%, #6d5cff 100%) !important;
    clip-path: path("M31 0 C48 0 62 14 62 31 C62 51 42 63 31 74 C20 63 0 51 0 31 C0 14 14 0 31 0 Z") !important;
    border-radius: 999px 999px 999px 999px !important;
    box-shadow:
        0 0 0 8px rgba(80, 218, 255, .10),
        0 0 26px rgba(78, 224, 255, .42),
        inset 0 2px 0 rgba(255,255,255,.30) !important;
}

body.login-showcase-v77 .v80-pin::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -9px !important;
    width: 42px !important;
    height: 14px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
    background: radial-gradient(circle, rgba(99, 245, 255, .48), transparent 68%) !important;
    filter: blur(2px) !important;
    animation: v80PinShadowPulse 4.9s ease-in-out infinite !important;
}

body.login-showcase-v77 .v80-pin i {
    position: relative !important;
    z-index: 2 !important;
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    font-size: 22px !important;
    line-height: 1 !important;
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 0 14px rgba(255,255,255,.16) !important;
    transform: translateY(-7px) !important;
    text-shadow: 0 0 10px rgba(255,255,255,.36) !important;
}

body.login-showcase-v77 .v80-pin-book {
    left: 52.5% !important;
    top: 30.5% !important;
    animation-delay: 0s !important;
}

body.login-showcase-v77 .v80-pin-person {
    left: 65.4% !important;
    top: 49.5% !important;
    animation-delay: .55s !important;
}

body.login-showcase-v77 .v80-pin-group {
    left: 75.8% !important;
    top: 24.8% !important;
    animation-delay: 1.1s !important;
}

body.login-showcase-v77 .v80-pin-idea {
    left: 43.3% !important;
    top: 65.8% !important;
    animation-delay: .95s !important;
}

body.login-showcase-v77 .v80-pin-school {
    left: 29.0% !important;
    top: 59.8% !important;
    animation-delay: .35s !important;
}

body.login-showcase-v77 .v80-pin-group::before,
body.login-showcase-v77 .v80-pin-idea::before {
    background:
        radial-gradient(circle at 45% 28%, rgba(255,255,255,.52), transparent 22%),
        linear-gradient(145deg, #42ffcb 0%, #12d48b 54%, #247dff 100%) !important;
    box-shadow:
        0 0 0 8px rgba(65, 255, 192, .10),
        0 0 26px rgba(65, 255, 192, .40),
        inset 0 2px 0 rgba(255,255,255,.30) !important;
}

body.login-showcase-v77 .v80-pin-group::after,
body.login-showcase-v77 .v80-pin-idea::after {
    background: radial-gradient(circle, rgba(82, 255, 194, .48), transparent 68%) !important;
}

@keyframes v80MapNetworkMove {
    from { background-position: 0 0, 0 0, 0 0; }
    to { background-position: 120px 0, -140px 0, 54px 54px; }
}

@keyframes v80MapFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: .96; }
    50% { transform: translateY(-5px) scale(1.018); opacity: 1; }
}

@keyframes v80PinBounce {
    0%, 100% { transform: translate(-50%, -100%) translateY(0) scale(1); }
    50% { transform: translate(-50%, -100%) translateY(-12px) scale(1.045); }
}

@keyframes v80PinShadowPulse {
    0%, 100% { opacity: .45; transform: translateX(-50%) scale(1); }
    50% { opacity: .92; transform: translateX(-50%) scale(1.25); }
}

/* Tablet */
@media (max-width: 991.98px) {
    body.login-showcase-v77 .v77-shell {
        width: min(900px, calc(100vw - 32px)) !important;
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    body.login-showcase-v77 .v77-showcase {
        min-height: 560px !important;
    }

    body.login-showcase-v77 .v80-map-layer {
        min-height: 280px !important;
    }

    body.login-showcase-v77 .v80-map-image {
        width: min(100%, 680px) !important;
        max-height: 275px !important;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    body.login-showcase-v77 .v77-shell {
        width: calc(100vw - 20px) !important;
    }

    body.login-showcase-v77 .v77-showcase {
        min-height: 525px !important;
    }

    body.login-showcase-v77 .v80-map-layer {
        min-height: 210px !important;
        margin-top: 8px !important;
    }

    body.login-showcase-v77 .v80-map-image {
        width: 116% !important;
        max-height: 205px !important;
    }

    body.login-showcase-v77 .v80-pin {
        width: 42px !important;
        height: 50px !important;
    }

    body.login-showcase-v77 .v80-pin::before {
        clip-path: path("M21 0 C32.5 0 42 9.5 42 21 C42 34.5 28.5 42.5 21 50 C13.5 42.5 0 34.5 0 21 C0 9.5 9.5 0 21 0 Z") !important;
    }

    body.login-showcase-v77 .v80-pin i {
        width: 27px !important;
        height: 27px !important;
        font-size: 15px !important;
        transform: translateY(-5px) !important;
    }

    body.login-showcase-v77 .v80-pin::after {
        width: 30px !important;
        height: 10px !important;
        bottom: -7px !important;
    }
}


/* ===== v81 map proportion: larger map, balanced pins ===== */
/* ปรับสัดส่วนแผนที่ให้ใหญ่ขึ้นแบบภาพตัวอย่าง หมุดยังชัด แต่ไม่ล้นพื้นที่ */

body.login-showcase-v77 .v80-map-layer {
    min-height: 330px !important;
    margin-top: 0 !important;
    transform: translateY(-2px) !important;
}

body.login-showcase-v77 .v80-map-image {
    width: min(126%, 860px) !important;
    max-width: none !important;
    max-height: 335px !important;
    transform-origin: center center !important;
    filter:
        saturate(1.20)
        contrast(1.12)
        brightness(1.12)
        drop-shadow(0 0 26px rgba(81, 247, 255, .42))
        drop-shadow(0 24px 44px rgba(0,0,0,.18)) !important;
    animation: v81MapFloat 8.5s ease-in-out infinite !important;
}

/* ลดความรู้สึกว่าหมุดใหญ่เกินไปเล็กน้อย แต่ยังอ่าน icon ชัด */
body.login-showcase-v77 .v80-pin {
    width: 56px !important;
    height: 67px !important;
}

body.login-showcase-v77 .v80-pin::before {
    clip-path: path("M28 0 C43.5 0 56 12.5 56 28 C56 46 38 57 28 67 C18 57 0 46 0 28 C0 12.5 12.5 0 28 0 Z") !important;
}

body.login-showcase-v77 .v80-pin i {
    width: 34px !important;
    height: 34px !important;
    font-size: 20px !important;
    transform: translateY(-6px) !important;
}

body.login-showcase-v77 .v80-pin::after {
    width: 38px !important;
    height: 13px !important;
}

/* วางหมุดใหม่ให้พอดีกับแผนที่ที่ขยายแล้ว */
body.login-showcase-v77 .v80-pin-book {
    left: 52.2% !important;
    top: 27.5% !important;
}

body.login-showcase-v77 .v80-pin-person {
    left: 65.0% !important;
    top: 47.0% !important;
}

body.login-showcase-v77 .v80-pin-group {
    left: 75.0% !important;
    top: 23.0% !important;
}

body.login-showcase-v77 .v80-pin-idea {
    left: 43.2% !important;
    top: 62.2% !important;
}

body.login-showcase-v77 .v80-pin-school {
    left: 29.8% !important;
    top: 57.0% !important;
}

/* พื้นหลังกราฟิกในช่องแผนที่ให้เบาลง เพื่อให้แผนที่เด่นขึ้น */
body.login-showcase-v77 .v80-map-layer::before {
    inset: -10% -8% -8% -8% !important;
    opacity: .52 !important;
}

body.login-showcase-v77 .v80-map-layer::after {
    inset: -9% -8% -8% -8% !important;
    opacity: .24 !important;
}

@keyframes v81MapFloat {
    0%, 100% { transform: translateY(0) scale(1.075); opacity: .98; }
    50% { transform: translateY(-5px) scale(1.095); opacity: 1; }
}

/* Tablet */
@media (max-width: 991.98px) {
    body.login-showcase-v77 .v80-map-layer {
        min-height: 320px !important;
    }

    body.login-showcase-v77 .v80-map-image {
        width: min(120%, 760px) !important;
        max-height: 315px !important;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    body.login-showcase-v77 .v80-map-layer {
        min-height: 230px !important;
    }

    body.login-showcase-v77 .v80-map-image {
        width: 128% !important;
        max-height: 220px !important;
    }

    body.login-showcase-v77 .v80-pin {
        width: 38px !important;
        height: 45px !important;
    }

    body.login-showcase-v77 .v80-pin::before {
        clip-path: path("M19 0 C29.5 0 38 8.5 38 19 C38 31 25.8 38 19 45 C12.2 38 0 31 0 19 C0 8.5 8.5 0 19 0 Z") !important;
    }

    body.login-showcase-v77 .v80-pin i {
        width: 24px !important;
        height: 24px !important;
        font-size: 14px !important;
        transform: translateY(-4px) !important;
    }
}


/* ===== v82 pin colors + staggered appearing pins across the map ===== */
/* ปักหมุดหลัก 5 สี: ชมพู เหลือง แดง ส้ม ม่วง ไม่ซ้ำกัน */

/* ปรับสีของหมุดหลักแต่ละหมุดให้ไม่ซ้ำ */
body.login-showcase-v77 .v80-pin-book::before {
    background:
        radial-gradient(circle at 45% 28%, rgba(255,255,255,.54), transparent 22%),
        linear-gradient(145deg, #ff78d8 0%, #ff3fae 52%, #8b5cff 100%) !important;
    box-shadow:
        0 0 0 8px rgba(255, 91, 191, .12),
        0 0 26px rgba(255, 72, 180, .46),
        inset 0 2px 0 rgba(255,255,255,.32) !important;
}
body.login-showcase-v77 .v80-pin-book::after {
    background: radial-gradient(circle, rgba(255, 82, 190, .54), transparent 68%) !important;
}

body.login-showcase-v77 .v80-pin-person::before {
    background:
        radial-gradient(circle at 45% 28%, rgba(255,255,255,.56), transparent 22%),
        linear-gradient(145deg, #ffd84a 0%, #ffb703 52%, #ff7a00 100%) !important;
    box-shadow:
        0 0 0 8px rgba(255, 196, 31, .13),
        0 0 26px rgba(255, 189, 38, .48),
        inset 0 2px 0 rgba(255,255,255,.32) !important;
}
body.login-showcase-v77 .v80-pin-person::after {
    background: radial-gradient(circle, rgba(255, 203, 59, .54), transparent 68%) !important;
}

body.login-showcase-v77 .v80-pin-group::before {
    background:
        radial-gradient(circle at 45% 28%, rgba(255,255,255,.54), transparent 22%),
        linear-gradient(145deg, #ff6b6b 0%, #ff2f45 54%, #b5172e 100%) !important;
    box-shadow:
        0 0 0 8px rgba(255, 68, 88, .13),
        0 0 26px rgba(255, 59, 78, .48),
        inset 0 2px 0 rgba(255,255,255,.32) !important;
}
body.login-showcase-v77 .v80-pin-group::after {
    background: radial-gradient(circle, rgba(255, 73, 93, .55), transparent 68%) !important;
}

body.login-showcase-v77 .v80-pin-idea::before {
    background:
        radial-gradient(circle at 45% 28%, rgba(255,255,255,.54), transparent 22%),
        linear-gradient(145deg, #ffb45c 0%, #ff8a00 54%, #ff5d00 100%) !important;
    box-shadow:
        0 0 0 8px rgba(255, 139, 32, .13),
        0 0 26px rgba(255, 138, 28, .48),
        inset 0 2px 0 rgba(255,255,255,.32) !important;
}
body.login-showcase-v77 .v80-pin-idea::after {
    background: radial-gradient(circle, rgba(255, 143, 34, .55), transparent 68%) !important;
}

body.login-showcase-v77 .v80-pin-school::before {
    background:
        radial-gradient(circle at 45% 28%, rgba(255,255,255,.54), transparent 22%),
        linear-gradient(145deg, #b38cff 0%, #7c3cff 56%, #4b2cff 100%) !important;
    box-shadow:
        0 0 0 8px rgba(126, 72, 255, .13),
        0 0 26px rgba(124, 72, 255, .50),
        inset 0 2px 0 rgba(255,255,255,.32) !important;
}
body.login-showcase-v77 .v80-pin-school::after {
    background: radial-gradient(circle, rgba(129, 84, 255, .56), transparent 68%) !important;
}

/* filter ของหมุดไม่ต้องเป็นฟ้าอย่างเดียวแล้ว */
body.login-showcase-v77 .v80-pin {
    filter:
        drop-shadow(0 0 18px rgba(255, 255, 255, .18))
        drop-shadow(0 16px 24px rgba(0,0,0,.26)) !important;
}

/* หมุดเสริมปรากฏทีละจุดทั่วแผนที่ แล้วจางหาย ก่อนเริ่มรอบใหม่ */
body.login-showcase-v77 .v82-wave-pins {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

body.login-showcase-v77 .v82-mini-pin {
    --c1: #ff78d8;
    --c2: #ff3fae;
    position: absolute !important;
    width: 18px !important;
    height: 22px !important;
    transform: translate(-50%, -100%) scale(.68) !important;
    opacity: 0 !important;
    filter:
        drop-shadow(0 0 10px color-mix(in srgb, var(--c2) 70%, white 30%))
        drop-shadow(0 8px 12px rgba(0,0,0,.20)) !important;
    animation: v82MiniPinCycle 9.6s ease-in-out infinite !important;
}

body.login-showcase-v77 .v82-mini-pin::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(circle at 45% 28%, rgba(255,255,255,.60), transparent 26%),
        linear-gradient(145deg, var(--c1) 0%, var(--c2) 100%) !important;
    clip-path: path("M9 0 C14 0 18 4 18 9 C18 15 12 19 9 22 C6 19 0 15 0 9 C0 4 4 0 9 0 Z") !important;
}

body.login-showcase-v77 .v82-mini-pin::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -4px !important;
    width: 16px !important;
    height: 6px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
    background: radial-gradient(circle, var(--c2), transparent 70%) !important;
    filter: blur(1px) !important;
    opacity: .65 !important;
}

/* จุดกระจายทั่วแผนที่ */
body.login-showcase-v77 .v82-mini-pin.p1  { left: 24%; top: 48%; --c1:#ff78d8; --c2:#ff3fae; animation-delay: 0s !important; }
body.login-showcase-v77 .v82-mini-pin.p2  { left: 34%; top: 40%; --c1:#ffd84a; --c2:#ffb703; animation-delay: .45s !important; }
body.login-showcase-v77 .v82-mini-pin.p3  { left: 43%; top: 31%; --c1:#ff6b6b; --c2:#ff2f45; animation-delay: .90s !important; }
body.login-showcase-v77 .v82-mini-pin.p4  { left: 55%; top: 38%; --c1:#ffb45c; --c2:#ff8a00; animation-delay: 1.35s !important; }
body.login-showcase-v77 .v82-mini-pin.p5  { left: 69%; top: 31%; --c1:#b38cff; --c2:#7c3cff; animation-delay: 1.80s !important; }
body.login-showcase-v77 .v82-mini-pin.p6  { left: 76%; top: 42%; --c1:#ff78d8; --c2:#ff3fae; animation-delay: 2.25s !important; }
body.login-showcase-v77 .v82-mini-pin.p7  { left: 62%; top: 56%; --c1:#ffd84a; --c2:#ffb703; animation-delay: 2.70s !important; }
body.login-showcase-v77 .v82-mini-pin.p8  { left: 48%; top: 63%; --c1:#ff6b6b; --c2:#ff2f45; animation-delay: 3.15s !important; }
body.login-showcase-v77 .v82-mini-pin.p9  { left: 35%; top: 60%; --c1:#ffb45c; --c2:#ff8a00; animation-delay: 3.60s !important; }
body.login-showcase-v77 .v82-mini-pin.p10 { left: 28%; top: 68%; --c1:#b38cff; --c2:#7c3cff; animation-delay: 4.05s !important; }
body.login-showcase-v77 .v82-mini-pin.p11 { left: 52%; top: 48%; --c1:#ff78d8; --c2:#ff3fae; animation-delay: 4.50s !important; }
body.login-showcase-v77 .v82-mini-pin.p12 { left: 72%; top: 56%; --c1:#ffd84a; --c2:#ffb703; animation-delay: 4.95s !important; }

/* รอบการเคลื่อนไหว: ค่อย ๆ โผล่ -> เด้งเบา ๆ -> จางหาย */
@keyframes v82MiniPinCycle {
    0%   { opacity: 0; transform: translate(-50%, -100%) translateY(8px) scale(.55); }
    8%   { opacity: .95; transform: translate(-50%, -100%) translateY(-5px) scale(1); }
    18%  { opacity: .86; transform: translate(-50%, -100%) translateY(0) scale(.92); }
    36%  { opacity: .75; transform: translate(-50%, -100%) translateY(-3px) scale(.96); }
    58%  { opacity: .16; transform: translate(-50%, -100%) translateY(-12px) scale(.70); }
    72%  { opacity: 0; transform: translate(-50%, -100%) translateY(-18px) scale(.55); }
    100% { opacity: 0; transform: translate(-50%, -100%) translateY(8px) scale(.55); }
}

/* มือถือ ลดหมุดเสริมลงไม่ให้รก */
@media (max-width: 575.98px) {
    body.login-showcase-v77 .v82-mini-pin {
        width: 12px !important;
        height: 15px !important;
    }

    body.login-showcase-v77 .v82-mini-pin::before {
        clip-path: path("M6 0 C9.5 0 12 2.7 12 6 C12 10 8 13 6 15 C4 13 0 10 0 6 C0 2.7 2.7 0 6 0 Z") !important;
    }

    body.login-showcase-v77 .v82-mini-pin::after {
        width: 10px !important;
        height: 4px !important;
    }
}


/* ===== v83 Neon 3D T-Map title ===== */
/* ทำเฉพาะคำว่า T-Map ให้เป็นนีออน 3D เรืองแสงเด่นขึ้น */
body.login-showcase-v77 .v77-copy h1 {
    overflow: visible !important;
    perspective: 900px !important;
}

body.login-showcase-v77 .v77-copy h1 span {
    position: relative !important;
    display: inline-block !important;
    isolation: isolate !important;
    padding: 0 .04em .10em .02em !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #dffeff 22%, #7ff7ff 48%, #31d7ff 70%, #527cff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    transform: translateZ(0) skewX(-2deg) !important;
    letter-spacing: -.045em !important;
    filter:
        drop-shadow(0 0 6px rgba(156, 255, 255, .95))
        drop-shadow(0 0 16px rgba(58, 235, 255, .75))
        drop-shadow(0 0 34px rgba(34, 157, 255, .55))
        drop-shadow(0 14px 20px rgba(0,0,0,.25)) !important;
    animation: v83TmapNeonPulse 4.8s ease-in-out infinite !important;
}

/* เงา 3D ด้านหลัง */
body.login-showcase-v77 .v77-copy h1 span::before {
    content: attr(data-text) !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    color: #0867a5 !important;
    -webkit-text-fill-color: #0867a5 !important;
    transform: translate(6px, 7px) skewX(-7deg) !important;
    opacity: .82 !important;
    filter: blur(.15px) !important;
    text-shadow:
        0 1px 0 #074f86,
        0 2px 0 #063f72,
        0 3px 0 #04335f,
        0 4px 0 #03264d,
        0 10px 18px rgba(0,0,0,.45) !important;
}

/* ขอบไฟและแสงวิ่งด้านหน้า */
body.login-showcase-v77 .v77-copy h1 span::after {
    content: attr(data-text) !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1.4px rgba(203, 255, 255, .72) !important;
    background:
        linear-gradient(105deg,
            transparent 0%,
            transparent 34%,
            rgba(255,255,255,.95) 43%,
            rgba(121,255,255,.88) 49%,
            transparent 58%,
            transparent 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    opacity: .94 !important;
    text-shadow:
        0 0 8px rgba(218,255,255,.86),
        0 0 18px rgba(103,247,255,.75),
        0 0 38px rgba(53,170,255,.58),
        0 0 62px rgba(46,102,255,.38) !important;
    animation: v83TmapShine 3.6s linear infinite !important;
}

/* แสงสะท้อนใต้ตัวอักษรแบบนีออน */
body.login-showcase-v77 .v77-copy h1 span + * {
    position: relative !important;
}

body.login-showcase-v77 .v77-copy h1::after {
    content: "" !important;
    position: absolute !important;
    left: 38% !important;
    top: 74% !important;
    width: min(320px, 48%) !important;
    height: 24px !important;
    border-radius: 999px !important;
    background: radial-gradient(ellipse at center, rgba(91, 239, 255, .35), rgba(65, 130, 255, .14) 45%, transparent 72%) !important;
    filter: blur(10px) !important;
    opacity: .78 !important;
    pointer-events: none !important;
    animation: v83TmapReflection 4.8s ease-in-out infinite !important;
}

@keyframes v83TmapNeonPulse {
    0%, 100% {
        filter:
            drop-shadow(0 0 6px rgba(156, 255, 255, .88))
            drop-shadow(0 0 16px rgba(58, 235, 255, .66))
            drop-shadow(0 0 34px rgba(34, 157, 255, .50))
            drop-shadow(0 14px 20px rgba(0,0,0,.25));
        transform: translateZ(0) skewX(-2deg) scale(1);
    }
    50% {
        filter:
            drop-shadow(0 0 9px rgba(255, 255, 255, .98))
            drop-shadow(0 0 24px rgba(94, 248, 255, .92))
            drop-shadow(0 0 52px rgba(49, 184, 255, .72))
            drop-shadow(0 16px 24px rgba(0,0,0,.28));
        transform: translateZ(0) skewX(-2deg) scale(1.012);
    }
}

@keyframes v83TmapShine {
    0% { background-position: -260px 0; opacity: .68; }
    35% { opacity: 1; }
    100% { background-position: 360px 0; opacity: .84; }
}

@keyframes v83TmapReflection {
    0%, 100% { opacity: .52; transform: scaleX(.92); }
    50% { opacity: .92; transform: scaleX(1.05); }
}

/* จอเล็ก ลดแสงนิดหน่อยไม่ให้แตก */
@media (max-width: 575.98px) {
    body.login-showcase-v77 .v77-copy h1 span::before {
        transform: translate(4px, 5px) skewX(-6deg) !important;
    }

    body.login-showcase-v77 .v77-copy h1 span::after {
        -webkit-text-stroke: 1px rgba(203, 255, 255, .70) !important;
    }

    body.login-showcase-v77 .v77-copy h1::after {
        left: 36% !important;
        width: 56% !important;
        height: 18px !important;
    }
}


/* ===== v84 FIX: wave pins appear across map, fade out, then loop ===== */
/* ปัญหาเดิม: หมุดเสริมเล็กเกิน/โปร่งเกิน/อาจถูกซ่อนหลัง layer อื่น จึงมองไม่ชัด */

body.login-showcase-v77 .v84-wave-pins {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;
    overflow: visible !important;
}

/* ปิด wave รุ่นเก่า ป้องกันชนกัน */
body.login-showcase-v77 .v82-wave-pins,
body.login-showcase-v77 .v82-mini-pin {
    display: none !important;
}

body.login-showcase-v77 .v84-mini-pin {
    --c1: #ff78d8;
    --c2: #ff2faf;
    position: absolute !important;
    left: 50%;
    top: 50%;
    width: 22px !important;
    height: 28px !important;
    opacity: 0 !important;
    transform: translate(-50%, -100%) translateY(10px) scale(.42) !important;
    transform-origin: 50% 100% !important;
    filter:
        drop-shadow(0 0 10px var(--c2))
        drop-shadow(0 8px 12px rgba(0,0,0,.28)) !important;
    animation: v84PinWave 10.5s ease-in-out infinite !important;
}

body.login-showcase-v77 .v84-mini-pin::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(circle at 45% 28%, rgba(255,255,255,.74), transparent 26%),
        linear-gradient(145deg, var(--c1) 0%, var(--c2) 100%) !important;
    clip-path: path("M11 0 C17 0 22 5 22 11 C22 18 14.8 24 11 28 C7.2 24 0 18 0 11 C0 5 5 0 11 0 Z") !important;
    box-shadow:
        0 0 0 5px color-mix(in srgb, var(--c2) 24%, transparent),
        0 0 18px color-mix(in srgb, var(--c2) 70%, white 15%) !important;
}

body.login-showcase-v77 .v84-mini-pin::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -5px !important;
    width: 22px !important;
    height: 8px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
    background: radial-gradient(circle, var(--c2), transparent 72%) !important;
    filter: blur(1.5px) !important;
    opacity: .70 !important;
}

/* กระจายทั่วพื้นที่แผนที่ */
body.login-showcase-v77 .v84-mini-pin.p1  { left: 24%; top: 53%; --c1:#ff78d8; --c2:#ff2faf; animation-delay: 0.0s !important; }
body.login-showcase-v77 .v84-mini-pin.p2  { left: 30%; top: 45%; --c1:#ffd84a; --c2:#ffb703; animation-delay: .35s !important; }
body.login-showcase-v77 .v84-mini-pin.p3  { left: 36%; top: 61%; --c1:#ff6b6b; --c2:#ff2f45; animation-delay: .70s !important; }
body.login-showcase-v77 .v84-mini-pin.p4  { left: 40%; top: 42%; --c1:#ffb45c; --c2:#ff8a00; animation-delay: 1.05s !important; }
body.login-showcase-v77 .v84-mini-pin.p5  { left: 47%; top: 55%; --c1:#b38cff; --c2:#7c3cff; animation-delay: 1.40s !important; }
body.login-showcase-v77 .v84-mini-pin.p6  { left: 52%; top: 33%; --c1:#ff78d8; --c2:#ff2faf; animation-delay: 1.75s !important; }
body.login-showcase-v77 .v84-mini-pin.p7  { left: 57%; top: 47%; --c1:#ffd84a; --c2:#ffb703; animation-delay: 2.10s !important; }
body.login-showcase-v77 .v84-mini-pin.p8  { left: 64%; top: 38%; --c1:#ff6b6b; --c2:#ff2f45; animation-delay: 2.45s !important; }
body.login-showcase-v77 .v84-mini-pin.p9  { left: 68%; top: 58%; --c1:#ffb45c; --c2:#ff8a00; animation-delay: 2.80s !important; }
body.login-showcase-v77 .v84-mini-pin.p10 { left: 74%; top: 28%; --c1:#b38cff; --c2:#7c3cff; animation-delay: 3.15s !important; }
body.login-showcase-v77 .v84-mini-pin.p11 { left: 78%; top: 44%; --c1:#ff78d8; --c2:#ff2faf; animation-delay: 3.50s !important; }
body.login-showcase-v77 .v84-mini-pin.p12 { left: 70%; top: 68%; --c1:#ffd84a; --c2:#ffb703; animation-delay: 3.85s !important; }
body.login-showcase-v77 .v84-mini-pin.p13 { left: 55%; top: 70%; --c1:#ff6b6b; --c2:#ff2f45; animation-delay: 4.20s !important; }
body.login-showcase-v77 .v84-mini-pin.p14 { left: 42%; top: 72%; --c1:#ffb45c; --c2:#ff8a00; animation-delay: 4.55s !important; }
body.login-showcase-v77 .v84-mini-pin.p15 { left: 30%; top: 70%; --c1:#b38cff; --c2:#7c3cff; animation-delay: 4.90s !important; }
body.login-showcase-v77 .v84-mini-pin.p16 { left: 35%; top: 34%; --c1:#ff78d8; --c2:#ff2faf; animation-delay: 5.25s !important; }
body.login-showcase-v77 .v84-mini-pin.p17 { left: 49%; top: 26%; --c1:#ffd84a; --c2:#ffb703; animation-delay: 5.60s !important; }
body.login-showcase-v77 .v84-mini-pin.p18 { left: 62%; top: 25%; --c1:#ff6b6b; --c2:#ff2f45; animation-delay: 5.95s !important; }

/* ลูป: ไม่เห็น -> ปรากฏ -> เด้ง/ค้างสั้น ๆ -> จางหมด -> รอรอบใหม่ */
@keyframes v84PinWave {
    0% {
        opacity: 0;
        transform: translate(-50%, -100%) translateY(12px) scale(.35);
    }
    7% {
        opacity: 1;
        transform: translate(-50%, -100%) translateY(-7px) scale(1.06);
    }
    14% {
        opacity: .94;
        transform: translate(-50%, -100%) translateY(0) scale(.96);
    }
    38% {
        opacity: .90;
        transform: translate(-50%, -100%) translateY(-4px) scale(1);
    }
    58% {
        opacity: .36;
        transform: translate(-50%, -100%) translateY(-12px) scale(.78);
    }
    70% {
        opacity: 0;
        transform: translate(-50%, -100%) translateY(-22px) scale(.48);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -100%) translateY(12px) scale(.35);
    }
}

/* ทำให้หมุดหลักยังเด่นและไม่ชนกับหมุดเสริม */
body.login-showcase-v77 .v80-pin {
    z-index: 8 !important;
}

/* มือถือ: ย่อหมุดเสริม */
@media (max-width: 575.98px) {
    body.login-showcase-v77 .v84-mini-pin {
        width: 14px !important;
        height: 18px !important;
    }

    body.login-showcase-v77 .v84-mini-pin::before {
        clip-path: path("M7 0 C11 0 14 3 14 7 C14 11.5 9.4 15.5 7 18 C4.6 15.5 0 11.5 0 7 C0 3 3 0 7 0 Z") !important;
    }

    body.login-showcase-v77 .v84-mini-pin::after {
        width: 13px !important;
        height: 5px !important;
    }
}


/* ===== v85 FIX: real wave pins + pin impact dent + softer T-Map glow ===== */

/* ลดความฟุ้งของคำว่า T-Map ให้ยังเด่น แต่ไม่บังข้อความ */
body.login-showcase-v77 .v77-copy h1 span {
    filter:
        drop-shadow(0 0 4px rgba(156, 255, 255, .72))
        drop-shadow(0 0 10px rgba(58, 235, 255, .46))
        drop-shadow(0 0 20px rgba(34, 157, 255, .34))
        drop-shadow(0 10px 16px rgba(0,0,0,.22)) !important;
    animation: v85TmapNeonPulseSoft 5.8s ease-in-out infinite !important;
}

body.login-showcase-v77 .v77-copy h1 span::after {
    opacity: .50 !important;
    text-shadow:
        0 0 5px rgba(218,255,255,.55),
        0 0 11px rgba(103,247,255,.42),
        0 0 22px rgba(53,170,255,.30) !important;
    animation-duration: 5.8s !important;
}

body.login-showcase-v77 .v77-copy h1::after {
    opacity: .35 !important;
    filter: blur(12px) !important;
}

@keyframes v85TmapNeonPulseSoft {
    0%, 100% {
        filter:
            drop-shadow(0 0 4px rgba(156, 255, 255, .66))
            drop-shadow(0 0 10px rgba(58, 235, 255, .42))
            drop-shadow(0 0 20px rgba(34, 157, 255, .30))
            drop-shadow(0 10px 16px rgba(0,0,0,.22));
        transform: translateZ(0) skewX(-2deg) scale(1);
    }
    50% {
        filter:
            drop-shadow(0 0 6px rgba(255, 255, 255, .82))
            drop-shadow(0 0 15px rgba(94, 248, 255, .58))
            drop-shadow(0 0 30px rgba(49, 184, 255, .42))
            drop-shadow(0 12px 18px rgba(0,0,0,.24));
        transform: translateZ(0) skewX(-2deg) scale(1.006);
    }
}

/* ตั้งตัวแปรสีของหมุดหลัก */
body.login-showcase-v77 .v80-pin-book   { --pin-c1:#ff78d8; --pin-c2:#ff2faf; }
body.login-showcase-v77 .v80-pin-person { --pin-c1:#ffd84a; --pin-c2:#ffb703; }
body.login-showcase-v77 .v80-pin-group  { --pin-c1:#ff6b6b; --pin-c2:#ff2f45; }
body.login-showcase-v77 .v80-pin-idea   { --pin-c1:#ffb45c; --pin-c2:#ff8a00; }
body.login-showcase-v77 .v80-pin-school { --pin-c1:#b38cff; --pin-c2:#7c3cff; }

/* สีหลักไม่ซ้ำ */
body.login-showcase-v77 .v80-pin::before {
    background:
        radial-gradient(circle at 45% 28%, rgba(255,255,255,.55), transparent 22%),
        linear-gradient(145deg, var(--pin-c1) 0%, var(--pin-c2) 100%) !important;
    box-shadow:
        0 0 0 8px color-mix(in srgb, var(--pin-c2) 18%, transparent),
        0 0 26px color-mix(in srgb, var(--pin-c2) 70%, white 14%),
        inset 0 2px 0 rgba(255,255,255,.32) !important;
}

/* effect รอยยุบ/แรงกดบนแผนที่ใต้หมุด */
body.login-showcase-v77 .v80-pin::after {
    width: 52px !important;
    height: 18px !important;
    bottom: -11px !important;
    background:
        radial-gradient(ellipse at center,
            rgba(0, 0, 0, .32) 0%,
            rgba(0, 0, 0, .18) 28%,
            color-mix(in srgb, var(--pin-c2) 52%, transparent) 44%,
            color-mix(in srgb, var(--pin-c2) 18%, transparent) 62%,
            transparent 78%) !important;
    box-shadow:
        inset 0 2px 5px rgba(0,0,0,.38),
        0 0 14px color-mix(in srgb, var(--pin-c2) 52%, transparent) !important;
    animation: v85PinDentPulse 4.9s ease-in-out infinite !important;
}

@keyframes v85PinDentPulse {
    0%, 100% {
        opacity: .60;
        transform: translateX(-50%) scale(.92);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.20);
    }
}

/* ปิด wave รุ่นเก่า ป้องกันชน/ถูก display none */
body.login-showcase-v77 .v82-wave-pins,
body.login-showcase-v77 .v82-mini-pin,
body.login-showcase-v77 .v84-wave-pins,
body.login-showcase-v77 .v84-mini-pin {
    display: none !important;
}

/* Layer หมุดเสริม ต้องอยู่เหนือแผนที่ แต่ต่ำกว่าหมุดหลัก */
body.login-showcase-v77 .v85-wave-pins {
    position: absolute !important;
    inset: 0 !important;
    z-index: 7 !important;
    pointer-events: none !important;
    overflow: visible !important;
}

/* หมุดเสริมแบบมองเห็นชัด ไม่มี clip-path path() เพื่อให้ browser รองรับแน่นอน */
body.login-showcase-v77 .v85-mini-pin {
    --c1: #ff78d8;
    --c2: #ff2faf;
    position: absolute !important;
    width: 20px !important;
    height: 20px !important;
    left: 50%;
    top: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) translateY(12px) scale(.25) rotate(-45deg);
    transform-origin: 50% 50%;
    border-radius: 50% 50% 50% 0;
    background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,.72), transparent 22%),
        linear-gradient(135deg, var(--c1), var(--c2)) !important;
    box-shadow:
        0 0 0 5px color-mix(in srgb, var(--c2) 18%, transparent),
        0 0 16px color-mix(in srgb, var(--c2) 74%, white 12%),
        0 8px 14px rgba(0,0,0,.24) !important;
    transition:
        opacity .50s ease,
        transform .64s cubic-bezier(.2, 1.2, .2, 1),
        filter .50s ease !important;
}

body.login-showcase-v77 .v85-mini-pin::before {
    content: "" !important;
    position: absolute !important;
    width: 7px !important;
    height: 7px !important;
    left: 50% !important;
    top: 50% !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.92) !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: inset 0 0 3px rgba(0,0,0,.22) !important;
}

body.login-showcase-v77 .v85-mini-pin::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: calc(100% + 6px) !important;
    width: 22px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background:
        radial-gradient(ellipse at center,
            rgba(0,0,0,.26),
            color-mix(in srgb, var(--c2) 42%, transparent) 48%,
            transparent 72%) !important;
    filter: blur(1px) !important;
    transform: translateX(-50%) rotate(45deg) !important;
    opacity: .80 !important;
}

/* state จาก JS: ปรากฏทีละจุด */
body.login-showcase-v77 .v85-mini-pin.is-visible {
    opacity: .96 !important;
    transform: translate(-50%, -50%) translateY(-3px) scale(1) rotate(-45deg) !important;
    animation: v85MiniPinFloat 1.55s ease-in-out infinite !important;
}

/* state จาก JS: จางหายพร้อมกัน */
body.login-showcase-v77 .v85-wave-pins.is-fading .v85-mini-pin {
    opacity: 0 !important;
    transform: translate(-50%, -50%) translateY(-24px) scale(.40) rotate(-45deg) !important;
    animation: none !important;
}

@keyframes v85MiniPinFloat {
    0%, 100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -5px;
    }
}

/* กระจายทั่วแผนที่ */
body.login-showcase-v77 .v85-mini-pin.p1  { left: 24%; top: 53%; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p2  { left: 30%; top: 45%; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p3  { left: 36%; top: 61%; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p4  { left: 40%; top: 42%; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p5  { left: 47%; top: 55%; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p6  { left: 52%; top: 33%; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p7  { left: 57%; top: 47%; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p8  { left: 64%; top: 38%; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p9  { left: 68%; top: 58%; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p10 { left: 74%; top: 28%; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p11 { left: 78%; top: 44%; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p12 { left: 70%; top: 68%; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p13 { left: 55%; top: 70%; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p14 { left: 42%; top: 72%; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p15 { left: 30%; top: 70%; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p16 { left: 35%; top: 34%; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p17 { left: 49%; top: 26%; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p18 { left: 62%; top: 25%; --c1:#ff6b6b; --c2:#ff2f45; }

/* หมุดหลักอยู่บนสุด */
body.login-showcase-v77 .v80-pin {
    z-index: 10 !important;
}

/* มือถือ */
@media (max-width: 575.98px) {
    body.login-showcase-v77 .v85-mini-pin {
        width: 13px !important;
        height: 13px !important;
    }

    body.login-showcase-v77 .v85-mini-pin::before {
        width: 5px !important;
        height: 5px !important;
    }

    body.login-showcase-v77 .v85-mini-pin::after {
        width: 14px !important;
        height: 5px !important;
        top: calc(100% + 4px) !important;
    }
}


/* ===== v86 small pins only + sequential disappear ===== */
/* ยกเลิกหมุดใหญ่ทั้งหมด ใช้เฉพาะหมุดเล็กแบบ wave */
body.login-showcase-v77 .v80-pin {
    display: none !important;
}

/* ปิดคลาส fade เดิมที่ทำให้หมุดหายพร้อมกัน */
body.login-showcase-v77 .v85-wave-pins.is-fading .v85-mini-pin {
    opacity: inherit;
}

/* หมุดเล็กให้ชัดขึ้นเล็กน้อย แต่ไม่รก */
body.login-showcase-v77 .v85-wave-pins {
    z-index: 11 !important;
}

body.login-showcase-v77 .v85-mini-pin {
    width: 18px !important;
    height: 18px !important;
    z-index: 9 !important;
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--c2) 18%, transparent),
        0 0 14px color-mix(in srgb, var(--c2) 74%, white 10%),
        0 7px 12px rgba(0,0,0,.22) !important;
    transition:
        opacity .46s ease,
        transform .60s cubic-bezier(.2, 1.2, .2, 1),
        filter .46s ease !important;
}

/* รอยยุบใต้หมุดเล็ก */
body.login-showcase-v77 .v85-mini-pin::after {
    top: calc(100% + 5px) !important;
    width: 21px !important;
    height: 7px !important;
    background:
        radial-gradient(ellipse at center,
            rgba(0,0,0,.28),
            color-mix(in srgb, var(--c2) 45%, transparent) 48%,
            transparent 74%) !important;
    opacity: .72 !important;
}

/* state visible: โผล่และเด้งเบา ๆ */
body.login-showcase-v77 .v85-mini-pin.is-visible {
    opacity: .96 !important;
    transform: translate(-50%, -50%) translateY(-3px) scale(1) rotate(-45deg) !important;
    animation: v86MiniPinFloat 1.55s ease-in-out infinite !important;
}

/* state leaving: หายทีละอัน */
body.login-showcase-v77 .v85-mini-pin.is-leaving {
    opacity: 0 !important;
    transform: translate(-50%, -50%) translateY(-20px) scale(.36) rotate(-45deg) !important;
    animation: none !important;
}

/* ปรับตำแหน่งหมุดเล็กใหม่ ให้อยู่บนตัวแผนที่ ไม่เลยออกนอกขอบ */
body.login-showcase-v77 .v85-mini-pin.p1  { left: 28.5% !important; top: 55.5% !important; }
body.login-showcase-v77 .v85-mini-pin.p2  { left: 32.0% !important; top: 49.0% !important; }
body.login-showcase-v77 .v85-mini-pin.p3  { left: 36.2% !important; top: 62.5% !important; }
body.login-showcase-v77 .v85-mini-pin.p4  { left: 40.6% !important; top: 45.5% !important; }
body.login-showcase-v77 .v85-mini-pin.p5  { left: 46.4% !important; top: 57.5% !important; }
body.login-showcase-v77 .v85-mini-pin.p6  { left: 50.2% !important; top: 38.2% !important; }
body.login-showcase-v77 .v85-mini-pin.p7  { left: 55.5% !important; top: 49.5% !important; }
body.login-showcase-v77 .v85-mini-pin.p8  { left: 61.0% !important; top: 41.5% !important; }
body.login-showcase-v77 .v85-mini-pin.p9  { left: 64.8% !important; top: 55.8% !important; }
body.login-showcase-v77 .v85-mini-pin.p10 { left: 69.5% !important; top: 34.5% !important; }
body.login-showcase-v77 .v85-mini-pin.p11 { left: 72.4% !important; top: 47.0% !important; }
body.login-showcase-v77 .v85-mini-pin.p12 { left: 66.2% !important; top: 63.5% !important; }
body.login-showcase-v77 .v85-mini-pin.p13 { left: 55.0% !important; top: 66.5% !important; }
body.login-showcase-v77 .v85-mini-pin.p14 { left: 45.2% !important; top: 67.8% !important; }
body.login-showcase-v77 .v85-mini-pin.p15 { left: 34.5% !important; top: 66.2% !important; }
body.login-showcase-v77 .v85-mini-pin.p16 { left: 36.8% !important; top: 40.0% !important; }
body.login-showcase-v77 .v85-mini-pin.p17 { left: 48.0% !important; top: 32.8% !important; }
body.login-showcase-v77 .v85-mini-pin.p18 { left: 59.0% !important; top: 31.0% !important; }

@keyframes v86MiniPinFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -5px; }
}

/* mobile */
@media (max-width: 575.98px) {
    body.login-showcase-v77 .v85-mini-pin {
        width: 12px !important;
        height: 12px !important;
    }

    body.login-showcase-v77 .v85-mini-pin::before {
        width: 5px !important;
        height: 5px !important;
    }

    body.login-showcase-v77 .v85-mini-pin::after {
        width: 14px !important;
        height: 5px !important;
        top: calc(100% + 4px) !important;
    }
}


/* ===== v87 T-Map Metallic Hero: เด่นมาก แต่ไม่ฟุ้งเลอะ ===== */
/* แนวคิด: Chrome/Cyan Metal + Warm Gold Backlight + 3D bevel */

body.login-showcase-v77 .v77-copy h1 {
    position: relative !important;
    overflow: visible !important;
    perspective: 900px !important;
}

/* คำว่า T-Map: วัสดุโลหะ / Chrome cyan metal */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
    position: relative !important;
    display: inline-block !important;
    isolation: isolate !important;
    padding: 0 .045em .105em .02em !important;
    letter-spacing: -.052em !important;
    transform: translateZ(0) skewX(-2deg) !important;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #e9ffff 12%,
            #a8f7ff 27%,
            #54d8f3 43%,
            #dfffff 52%,
            #2db8e8 64%,
            #3169bd 78%,
            #123b82 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,.38),
        0 2px 0 rgba(26,111,160,.52),
        0 5px 0 rgba(5,36,82,.58),
        0 10px 18px rgba(0,0,0,.34) !important;

    filter:
        drop-shadow(0 0 4px rgba(210, 255, 255, .68))
        drop-shadow(0 0 10px rgba(88, 226, 255, .44))
        drop-shadow(0 0 18px rgba(255, 193, 79, .36))
        drop-shadow(0 13px 18px rgba(0,0,0,.28)) !important;

    animation: v87MetalBreath 6.4s ease-in-out infinite !important;
}

/* ชั้น 3D ด้านหลัง: ทำให้ตัวหนา มีน้ำหนัก ไม่เป็นแค่ glow */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::before {
    content: attr(data-text) !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;

    background:
        linear-gradient(180deg,
            #2c6c9e 0%,
            #174a82 36%,
            #092e67 70%,
            #041a40 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    transform: translate(7px, 8px) skewX(-7deg) !important;
    opacity: .88 !important;
    text-shadow:
        0 1px 0 #0b3b72,
        0 2px 0 #082f62,
        0 3px 0 #062551,
        0 4px 0 #041d45,
        0 11px 18px rgba(0,0,0,.46) !important;
    filter: blur(.1px) !important;
}

/* ขอบโลหะ + highlight วิ่งบนตัวอักษรแบบ controlled ไม่ฟุ้งเกิน */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::after {
    content: attr(data-text) !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;

    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1.35px rgba(232, 255, 255, .72) !important;

    background:
        linear-gradient(104deg,
            transparent 0%,
            transparent 30%,
            rgba(255,255,255,.95) 39%,
            rgba(255, 221, 139, .86) 44%,
            rgba(127, 246, 255, .70) 50%,
            transparent 60%,
            transparent 100%) !important;
    background-size: 240% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;

    opacity: .84 !important;
    text-shadow:
        0 0 5px rgba(255,255,255,.55),
        0 0 10px rgba(106,244,255,.44),
        0 0 16px rgba(255,197,84,.34) !important;
    animation: v87MetalShine 4.6s linear infinite !important;
}

/* ไฟ warm gold อยู่ด้านหลัง T-Map เหมือน backlight ไม่ใช่ glow ฟุ้งทั้งคำ */
body.login-showcase-v77 .v77-copy h1::after {
    content: "" !important;
    position: absolute !important;
    left: 41% !important;
    top: 58% !important;
    width: min(350px, 47%) !important;
    height: 86px !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    z-index: -1 !important;

    background:
        radial-gradient(ellipse at center,
            rgba(255, 205, 93, .42) 0%,
            rgba(255, 173, 60, .24) 34%,
            rgba(75, 222, 255, .10) 56%,
            transparent 74%) !important;
    filter: blur(18px) !important;
    opacity: .86 !important;
    animation: v87WarmBacklight 5.6s ease-in-out infinite !important;
}

/* เพิ่มเส้นแสงเล็ก ๆ ใต้ T-Map ให้ดูเหมือนติดไฟด้านหลัง */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] + * {
    position: relative !important;
}

@keyframes v87MetalBreath {
    0%, 100% {
        filter:
            drop-shadow(0 0 4px rgba(210, 255, 255, .62))
            drop-shadow(0 0 10px rgba(88, 226, 255, .38))
            drop-shadow(0 0 18px rgba(255, 193, 79, .30))
            drop-shadow(0 13px 18px rgba(0,0,0,.28));
        transform: translateZ(0) skewX(-2deg) scale(1);
    }
    50% {
        filter:
            drop-shadow(0 0 5px rgba(255, 255, 255, .75))
            drop-shadow(0 0 13px rgba(108, 241, 255, .50))
            drop-shadow(0 0 25px rgba(255, 198, 85, .44))
            drop-shadow(0 14px 20px rgba(0,0,0,.30));
        transform: translateZ(0) skewX(-2deg) scale(1.008);
    }
}

@keyframes v87MetalShine {
    0%   { background-position: 155% 0; opacity: .58; }
    36%  { opacity: .95; }
    100% { background-position: -125% 0; opacity: .70; }
}

@keyframes v87WarmBacklight {
    0%, 100% {
        opacity: .58;
        transform: translateX(-2px) scaleX(.92);
    }
    50% {
        opacity: .96;
        transform: translateX(4px) scaleX(1.08);
    }
}

/* จอเล็ก: ให้เด่นแต่ไม่เบลอ */
@media (max-width: 575.98px) {
    body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::before {
        transform: translate(4px, 5px) skewX(-6deg) !important;
    }

    body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::after {
        -webkit-text-stroke: 1px rgba(232, 255, 255, .70) !important;
    }

    body.login-showcase-v77 .v77-copy h1::after {
        left: 36% !important;
        top: 62% !important;
        width: 58% !important;
        height: 52px !important;
        filter: blur(14px) !important;
    }
}


/* ===== v88 FIX: pin positions inside map + top distribution + blue chrome metal T-Map ===== */

/* 1) T-Map: เปลี่ยนเป็นโลหะเงาแบบ chrome/cyan metal + แสงฟ้า ไม่มีเหลือง */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"],
body.login-showcase-v77 .v77-copy h1 span {
    position: relative !important;
    display: inline-block !important;
    isolation: isolate !important;
    padding: 0 .045em .105em .02em !important;
    letter-spacing: -.052em !important;
    transform: translateZ(0) skewX(-2deg) !important;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f3ffff 9%,
            #b9faff 20%,
            #e8ffff 31%,
            #7fdff2 42%,
            #2fb7e6 54%,
            #f7ffff 61%,
            #5fb7d8 70%,
            #246ea5 82%,
            #0d356e 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,.55),
        0 2px 0 rgba(93, 177, 205, .52),
        0 4px 0 rgba(14, 73, 118, .62),
        0 7px 0 rgba(4, 34, 77, .70),
        0 12px 18px rgba(0,0,0,.34) !important;

    filter:
        drop-shadow(0 0 5px rgba(218, 255, 255, .72))
        drop-shadow(0 0 13px rgba(84, 235, 255, .58))
        drop-shadow(0 0 26px rgba(18, 151, 255, .44))
        drop-shadow(0 15px 18px rgba(0,0,0,.30)) !important;

    animation: v88BlueChromeBreath 6s ease-in-out infinite !important;
}

/* ชั้น 3D ด้านหลังตัวอักษร ให้เหมือนเหล็กหนา */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::before,
body.login-showcase-v77 .v77-copy h1 span::before {
    content: attr(data-text) !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;

    background:
        linear-gradient(180deg,
            #2e7ead 0%,
            #155487 34%,
            #0a376b 68%,
            #041b43 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    transform: translate(7px, 8px) skewX(-7deg) !important;
    opacity: .86 !important;
    text-shadow:
        0 1px 0 #14517f,
        0 2px 0 #0d436f,
        0 3px 0 #0a355f,
        0 4px 0 #062b50,
        0 12px 18px rgba(0,0,0,.48) !important;
    filter: blur(.1px) !important;
}

/* ขอบเงาและแสงวิ่งแบบโลหะ ไม่ใช่เหลือง */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::after,
body.login-showcase-v77 .v77-copy h1 span::after {
    content: attr(data-text) !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1.25px rgba(232, 255, 255, .76) !important;

    background:
        linear-gradient(104deg,
            transparent 0%,
            transparent 30%,
            rgba(255,255,255,.95) 39%,
            rgba(154,250,255,.88) 45%,
            rgba(70,206,255,.72) 50%,
            transparent 60%,
            transparent 100%) !important;
    background-size: 240% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;

    opacity: .90 !important;
    text-shadow:
        0 0 5px rgba(255,255,255,.62),
        0 0 11px rgba(106,244,255,.50),
        0 0 20px rgba(34,147,255,.36) !important;
    animation: v88BlueChromeShine 4.4s linear infinite !important;
}

/* backlight สีฟ้า/น้ำเงินหลังคำว่า T-Map ไม่มีสีเหลือง */
body.login-showcase-v77 .v77-copy h1::after {
    content: "" !important;
    position: absolute !important;
    left: 40% !important;
    top: 56% !important;
    width: min(360px, 48%) !important;
    height: 82px !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    z-index: -1 !important;
    background:
        radial-gradient(ellipse at center,
            rgba(116, 245, 255, .38) 0%,
            rgba(55, 177, 255, .26) 35%,
            rgba(36, 99, 255, .14) 56%,
            transparent 74%) !important;
    filter: blur(18px) !important;
    opacity: .82 !important;
    animation: v88BlueBacklight 5.8s ease-in-out infinite !important;
}

@keyframes v88BlueChromeBreath {
    0%, 100% {
        filter:
            drop-shadow(0 0 5px rgba(218, 255, 255, .68))
            drop-shadow(0 0 13px rgba(84, 235, 255, .52))
            drop-shadow(0 0 25px rgba(18, 151, 255, .38))
            drop-shadow(0 15px 18px rgba(0,0,0,.30));
        transform: translateZ(0) skewX(-2deg) scale(1);
    }
    50% {
        filter:
            drop-shadow(0 0 7px rgba(255, 255, 255, .82))
            drop-shadow(0 0 17px rgba(110, 248, 255, .66))
            drop-shadow(0 0 34px rgba(35, 169, 255, .52))
            drop-shadow(0 15px 20px rgba(0,0,0,.32));
        transform: translateZ(0) skewX(-2deg) scale(1.008);
    }
}

@keyframes v88BlueChromeShine {
    0%   { background-position: 155% 0; opacity: .62; }
    40%  { opacity: .96; }
    100% { background-position: -125% 0; opacity: .78; }
}

@keyframes v88BlueBacklight {
    0%, 100% { opacity: .58; transform: translateX(-2px) scaleX(.92); }
    50% { opacity: .92; transform: translateX(4px) scaleX(1.06); }
}

/* 2) หมุดเล็ก: ยกเลิกหมุดที่ล้นขวา แล้วย้ายขึ้น/กระจายด้านบนแผนที่ */
/* หมุดใหญ่ยังถูกปิดจาก v86 */
body.login-showcase-v77 .v80-pin {
    display: none !important;
}

/* ตำแหน่งใหม่ 18 จุด: คุมให้อยู่บนตัวแผนที่ ไม่ออกนอกขอบ และเพิ่มด้านบน 5 จุด */
body.login-showcase-v77 .v85-mini-pin.p1  { left: 28.2% !important; top: 55.0% !important; }
body.login-showcase-v77 .v85-mini-pin.p2  { left: 32.6% !important; top: 48.4% !important; }
body.login-showcase-v77 .v85-mini-pin.p3  { left: 37.6% !important; top: 60.2% !important; }
body.login-showcase-v77 .v85-mini-pin.p4  { left: 41.4% !important; top: 44.8% !important; }
body.login-showcase-v77 .v85-mini-pin.p5  { left: 46.8% !important; top: 56.4% !important; }

/* ด้านบนของแผนที่เพิ่ม/กระจายชัด ๆ */
body.login-showcase-v77 .v85-mini-pin.p6  { left: 43.0% !important; top: 35.6% !important; }
body.login-showcase-v77 .v85-mini-pin.p7  { left: 49.3% !important; top: 31.6% !important; }
body.login-showcase-v77 .v85-mini-pin.p8  { left: 55.4% !important; top: 34.2% !important; }
body.login-showcase-v77 .v85-mini-pin.p9  { left: 61.0% !important; top: 36.2% !important; }
body.login-showcase-v77 .v85-mini-pin.p10 { left: 66.7% !important; top: 32.8% !important; }

/* กลาง/ขวา ย้ายให้อยู่บนแผนที่ ไม่ให้ล้นขวา */
body.login-showcase-v77 .v85-mini-pin.p11 { left: 61.8% !important; top: 47.4% !important; }
body.login-showcase-v77 .v85-mini-pin.p12 { left: 66.2% !important; top: 56.8% !important; }
body.login-showcase-v77 .v85-mini-pin.p13 { left: 58.0% !important; top: 64.0% !important; }
body.login-showcase-v77 .v85-mini-pin.p14 { left: 50.0% !important; top: 66.2% !important; }
body.login-showcase-v77 .v85-mini-pin.p15 { left: 41.4% !important; top: 67.0% !important; }
body.login-showcase-v77 .v85-mini-pin.p16 { left: 35.0% !important; top: 64.0% !important; }
body.login-showcase-v77 .v85-mini-pin.p17 { left: 54.6% !important; top: 49.6% !important; }
body.login-showcase-v77 .v85-mini-pin.p18 { left: 70.0% !important; top: 44.4% !important; }

/* ปรับขนาดให้ยังเห็น แต่ไม่กินพื้นที่ */
body.login-showcase-v77 .v85-mini-pin {
    width: 17px !important;
    height: 17px !important;
}

/* effect รอยยุบใต้หมุดเล็กให้ชัดขึ้นนิด */
body.login-showcase-v77 .v85-mini-pin::after {
    top: calc(100% + 5px) !important;
    width: 20px !important;
    height: 7px !important;
    background:
        radial-gradient(ellipse at center,
            rgba(0,0,0,.30),
            color-mix(in srgb, var(--c2) 44%, transparent) 48%,
            transparent 74%) !important;
    opacity: .76 !important;
}

/* มือถือ */
@media (max-width: 575.98px) {
    body.login-showcase-v77 .v77-copy h1::after {
        left: 36% !important;
        top: 62% !important;
        width: 58% !important;
        height: 52px !important;
        filter: blur(14px) !important;
    }
}


/* ===== v89 FINAL POLISH: pin layout corrected + deep chrome blue T-Map ===== */

/* 1) FINAL T-Map: Deep Chrome / Cobalt Metal / Electric Cyan Rim */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
    position: relative !important;
    display: inline-block !important;
    isolation: isolate !important;
    padding: 0 .045em .105em .02em !important;
    letter-spacing: -.052em !important;
    transform: translateZ(0) skewX(-2deg) !important;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #d9fcff 8%,
            #6ee6ff 18%,
            #116aa5 31%,
            #082452 42%,
            #f3ffff 50%,
            #28c9f5 59%,
            #0b6db5 69%,
            #06336f 83%,
            #02112e 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    -webkit-text-stroke: .35px rgba(220, 255, 255, .55) !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,.62),
        0 2px 0 rgba(83, 172, 207, .52),
        0 4px 0 rgba(8, 67, 116, .70),
        0 7px 0 rgba(2, 25, 62, .82),
        0 12px 17px rgba(0,0,0,.36) !important;

    filter:
        drop-shadow(0 0 4px rgba(223, 255, 255, .75))
        drop-shadow(0 0 12px rgba(73, 231, 255, .58))
        drop-shadow(0 0 26px rgba(20, 141, 255, .46))
        drop-shadow(0 16px 20px rgba(0,0,0,.32)) !important;

    animation: v89BlueChromeMetalPulse 6.4s ease-in-out infinite !important;
}

/* metal thickness / 3D underside */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::before {
    content: attr(data-text) !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;
    background:
        linear-gradient(180deg,
            #166396 0%,
            #0d477d 34%,
            #06285c 68%,
            #020e2d 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    transform: translate(7px, 8px) skewX(-7deg) !important;
    opacity: .90 !important;
    text-shadow:
        0 1px 0 #15527f,
        0 2px 0 #0c416c,
        0 3px 0 #07315a,
        0 4px 0 #05264d,
        0 12px 18px rgba(0,0,0,.50) !important;
    filter: blur(.1px) !important;
}

/* crisp cyan highlight sweep */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::after {
    content: attr(data-text) !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1.15px rgba(232, 255, 255, .78) !important;
    background:
        linear-gradient(104deg,
            transparent 0%,
            transparent 30%,
            rgba(255,255,255,.96) 39%,
            rgba(154,250,255,.92) 45%,
            rgba(41,195,255,.76) 50%,
            transparent 60%,
            transparent 100%) !important;
    background-size: 240% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    opacity: .88 !important;
    text-shadow:
        0 0 5px rgba(255,255,255,.64),
        0 0 12px rgba(106,244,255,.52),
        0 0 23px rgba(34,147,255,.40) !important;
    animation: v89BlueChromeShine 4.8s linear infinite !important;
}

/* blue backlight only, no yellow */
body.login-showcase-v77 .v77-copy h1::after {
    content: "" !important;
    position: absolute !important;
    left: 40% !important;
    top: 56% !important;
    width: min(360px, 48%) !important;
    height: 78px !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    z-index: -1 !important;
    background:
        radial-gradient(ellipse at center,
            rgba(104, 244, 255, .36) 0%,
            rgba(45, 174, 255, .25) 34%,
            rgba(21, 84, 255, .13) 56%,
            transparent 74%) !important;
    filter: blur(16px) !important;
    opacity: .78 !important;
    animation: v89BlueBacklight 6s ease-in-out infinite !important;
}

@keyframes v89BlueChromeMetalPulse {
    0%, 100% {
        filter:
            drop-shadow(0 0 4px rgba(223, 255, 255, .70))
            drop-shadow(0 0 12px rgba(73, 231, 255, .52))
            drop-shadow(0 0 26px rgba(20, 141, 255, .40))
            drop-shadow(0 16px 20px rgba(0,0,0,.32));
        transform: translateZ(0) skewX(-2deg) scale(1);
    }
    50% {
        filter:
            drop-shadow(0 0 6px rgba(255, 255, 255, .86))
            drop-shadow(0 0 17px rgba(115, 250, 255, .66))
            drop-shadow(0 0 35px rgba(31, 165, 255, .54))
            drop-shadow(0 16px 21px rgba(0,0,0,.34));
        transform: translateZ(0) skewX(-2deg) scale(1.006);
    }
}

@keyframes v89BlueChromeShine {
    0%   { background-position: 155% 0; opacity: .62; }
    42%  { opacity: .98; }
    100% { background-position: -125% 0; opacity: .76; }
}

@keyframes v89BlueBacklight {
    0%, 100% { opacity: .52; transform: translateX(-2px) scaleX(.94); }
    50% { opacity: .88; transform: translateX(4px) scaleX(1.06); }
}

/* 2) FINAL pins: only small pins, fully inside map, with upper-area distribution */
body.login-showcase-v77 .v80-pin,
body.login-showcase-v77 .v82-wave-pins,
body.login-showcase-v77 .v82-mini-pin,
body.login-showcase-v77 .v84-wave-pins,
body.login-showcase-v77 .v84-mini-pin {
    display: none !important;
}

body.login-showcase-v77 .v85-wave-pins {
    position: absolute !important;
    inset: 0 !important;
    z-index: 11 !important;
    pointer-events: none !important;
    overflow: visible !important;
}

/* browser-safe small pin */
body.login-showcase-v77 .v85-mini-pin {
    --c1: #ff78d8;
    --c2: #ff2faf;
    position: absolute !important;
    width: 17px !important;
    height: 17px !important;
    opacity: 0;
    transform: translate(-50%, -50%) translateY(12px) scale(.25) rotate(-45deg);
    transform-origin: 50% 50%;
    border-radius: 50% 50% 50% 0;
    background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,.72), transparent 22%),
        linear-gradient(135deg, var(--c1), var(--c2)) !important;
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--c2) 18%, transparent),
        0 0 14px color-mix(in srgb, var(--c2) 72%, white 10%),
        0 7px 12px rgba(0,0,0,.22) !important;
    transition:
        opacity .46s ease,
        transform .60s cubic-bezier(.2, 1.2, .2, 1),
        filter .46s ease !important;
}

body.login-showcase-v77 .v85-mini-pin::before {
    content: "" !important;
    position: absolute !important;
    width: 6px !important;
    height: 6px !important;
    left: 50% !important;
    top: 50% !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.92) !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: inset 0 0 3px rgba(0,0,0,.22) !important;
}

/* impact / dent under each pin */
body.login-showcase-v77 .v85-mini-pin::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: calc(100% + 5px) !important;
    width: 20px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background:
        radial-gradient(ellipse at center,
            rgba(0,0,0,.30),
            color-mix(in srgb, var(--c2) 44%, transparent) 48%,
            transparent 74%) !important;
    filter: blur(1px) !important;
    transform: translateX(-50%) rotate(45deg) !important;
    opacity: .76 !important;
}

body.login-showcase-v77 .v85-mini-pin.is-visible {
    opacity: .96 !important;
    transform: translate(-50%, -50%) translateY(-3px) scale(1) rotate(-45deg) !important;
    animation: v89MiniPinFloat 1.55s ease-in-out infinite !important;
}

body.login-showcase-v77 .v85-mini-pin.is-leaving {
    opacity: 0 !important;
    transform: translate(-50%, -50%) translateY(-20px) scale(.36) rotate(-45deg) !important;
    animation: none !important;
}

/* FINAL positions: no right/bottom overflow; + top distribution */
body.login-showcase-v77 .v85-mini-pin.p1  { left: 29.2% !important; top: 55.5% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p2  { left: 33.2% !important; top: 48.4% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p3  { left: 37.8% !important; top: 59.6% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p4  { left: 42.0% !important; top: 45.4% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p5  { left: 47.0% !important; top: 56.0% !important; --c1:#b38cff; --c2:#7c3cff; }

/* upper map band */
body.login-showcase-v77 .v85-mini-pin.p6  { left: 39.2% !important; top: 39.4% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p7  { left: 45.6% !important; top: 35.0% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p8  { left: 51.8% !important; top: 33.2% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p9  { left: 58.0% !important; top: 35.8% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p10 { left: 63.8% !important; top: 33.8% !important; --c1:#b38cff; --c2:#7c3cff; }

body.login-showcase-v77 .v85-mini-pin.p11 { left: 60.8% !important; top: 47.8% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p12 { left: 64.2% !important; top: 56.8% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p13 { left: 56.2% !important; top: 63.0% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p14 { left: 49.2% !important; top: 64.8% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p15 { left: 41.4% !important; top: 65.0% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p16 { left: 35.6% !important; top: 63.0% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p17 { left: 54.0% !important; top: 49.8% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p18 { left: 68.0% !important; top: 44.6% !important; --c1:#ff6b6b; --c2:#ff2f45; }

@keyframes v89MiniPinFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -5px; }
}

/* mobile */
@media (max-width: 575.98px) {
    body.login-showcase-v77 .v77-copy h1::after {
        left: 36% !important;
        top: 62% !important;
        width: 58% !important;
        height: 52px !important;
        filter: blur(14px) !important;
    }

    body.login-showcase-v77 .v85-mini-pin {
        width: 12px !important;
        height: 12px !important;
    }

    body.login-showcase-v77 .v85-mini-pin::before {
        width: 5px !important;
        height: 5px !important;
    }

    body.login-showcase-v77 .v85-mini-pin::after {
        width: 14px !important;
        height: 5px !important;
        top: calc(100% + 4px) !important;
    }
}


/* ===== v90 FINAL: aggressive map pin spread + stronger blue chrome T-Map ===== */

/* 1) T-Map ให้เด่นขึ้นชัดเจนกว่า v89: chrome เข้ม + cyan rim + blue backlight */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
    position: relative !important;
    display: inline-block !important;
    isolation: isolate !important;
    padding: 0 .055em .12em .025em !important;
    letter-spacing: -.052em !important;
    transform: translateZ(0) skewX(-2deg) scale(1.035) !important;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #ecffff 6%,
            #86f6ff 14%,
            #18c8ff 24%,
            #055892 34%,
            #011d4a 44%,
            #f7ffff 51%,
            #55e7ff 58%,
            #1297e8 66%,
            #034f9e 78%,
            #001b55 90%,
            #000b28 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: .65px rgba(222, 255, 255, .86) !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,.78),
        0 2px 0 rgba(110,230,255,.58),
        0 4px 0 rgba(8,85,155,.78),
        0 7px 0 rgba(2,33,92,.92),
        0 13px 18px rgba(0,0,0,.42) !important;

    filter:
        drop-shadow(0 0 7px rgba(232, 255, 255, .88))
        drop-shadow(0 0 18px rgba(68, 235, 255, .76))
        drop-shadow(0 0 42px rgba(17, 136, 255, .62))
        drop-shadow(0 18px 22px rgba(0,0,0,.40)) !important;

    animation: v90TmapStrongChrome 5.8s ease-in-out infinite !important;
}

/* 3D metal depth ชัดกว่าเดิม */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::before {
    content: attr(data-text) !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;

    background:
        linear-gradient(180deg,
            #1568a8 0%,
            #08447f 34%,
            #031d55 68%,
            #00071f 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    transform: translate(9px, 10px) skewX(-7deg) !important;
    opacity: .98 !important;
    text-shadow:
        0 1px 0 #176797,
        0 2px 0 #0b4b7c,
        0 3px 0 #063461,
        0 4px 0 #032552,
        0 5px 0 #001842,
        0 14px 20px rgba(0,0,0,.56) !important;
    filter: blur(.08px) !important;
}

/* cyan rim light / specular sweep */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::after {
    content: attr(data-text) !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;

    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1.55px rgba(230, 255, 255, .92) !important;

    background:
        linear-gradient(104deg,
            transparent 0%,
            transparent 26%,
            rgba(255,255,255,1) 36%,
            rgba(162,252,255,.95) 43%,
            rgba(30,205,255,.90) 51%,
            transparent 63%,
            transparent 100%) !important;
    background-size: 260% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;

    opacity: .98 !important;
    text-shadow:
        0 0 7px rgba(255,255,255,.82),
        0 0 16px rgba(105,247,255,.74),
        0 0 34px rgba(20,143,255,.58) !important;
    animation: v90TmapChromeSweep 3.8s linear infinite !important;
}

/* blue backlight 80% เด่นขึ้น แต่ยังเป็นสีฟ้า ไม่เหลือง */
body.login-showcase-v77 .v77-copy h1::after {
    content: "" !important;
    position: absolute !important;
    left: 39% !important;
    top: 54% !important;
    width: min(430px, 56%) !important;
    height: 104px !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    z-index: -1 !important;
    background:
        radial-gradient(ellipse at center,
            rgba(163, 255, 255, .50) 0%,
            rgba(43, 205, 255, .42) 28%,
            rgba(0, 109, 255, .27) 52%,
            rgba(0, 50, 180, .12) 67%,
            transparent 78%) !important;
    filter: blur(18px) !important;
    opacity: .98 !important;
    animation: v90TmapBlueBacklight 5.4s ease-in-out infinite !important;
}

/* เพิ่มเส้นขีดแสงใต้เฉพาะ T-Map ให้จับสายตา */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
    box-shadow:
        0 22px 30px -24px rgba(54, 222, 255, .86),
        0 34px 44px -34px rgba(0, 93, 255, .58) !important;
}

@keyframes v90TmapStrongChrome {
    0%, 100% {
        filter:
            drop-shadow(0 0 7px rgba(232, 255, 255, .82))
            drop-shadow(0 0 18px rgba(68, 235, 255, .70))
            drop-shadow(0 0 42px rgba(17, 136, 255, .56))
            drop-shadow(0 18px 22px rgba(0,0,0,.40));
        transform: translateZ(0) skewX(-2deg) scale(1.035);
    }
    50% {
        filter:
            drop-shadow(0 0 10px rgba(255,255,255,.96))
            drop-shadow(0 0 26px rgba(108,249,255,.88))
            drop-shadow(0 0 62px rgba(17,146,255,.74))
            drop-shadow(0 20px 24px rgba(0,0,0,.44));
        transform: translateZ(0) skewX(-2deg) scale(1.055);
    }
}

@keyframes v90TmapChromeSweep {
    0%   { background-position: 165% 0; opacity: .78; }
    38%  { opacity: 1; }
    100% { background-position: -135% 0; opacity: .90; }
}

@keyframes v90TmapBlueBacklight {
    0%, 100% { opacity: .72; transform: translateX(-4px) scaleX(.92); }
    50% { opacity: 1; transform: translateX(5px) scaleX(1.10); }
}

/* 2) หมุด: กระจายกว้างจริง ไม่กระจุกกลาง ไม่ล้นขอบแผนที่ */
/* ยังคงหมุดเล็กเท่านั้น */
body.login-showcase-v77 .v80-pin,
body.login-showcase-v77 .v82-wave-pins,
body.login-showcase-v77 .v82-mini-pin,
body.login-showcase-v77 .v84-wave-pins,
body.login-showcase-v77 .v84-mini-pin {
    display: none !important;
}

body.login-showcase-v77 .v85-wave-pins {
    position: absolute !important;
    inset: 0 !important;
    z-index: 11 !important;
    pointer-events: none !important;
    overflow: visible !important;
}

body.login-showcase-v77 .v85-mini-pin {
    width: 17px !important;
    height: 17px !important;
}

/* ลำดับวางแบบกระจายทั่วตัวแผนที่: ซ้ายสุด-ขวาสุด-ด้านบน-ด้านล่าง */
body.login-showcase-v77 .v85-mini-pin.p1  { left: 23.5% !important; top: 61.5% !important; --c1:#ff78d8; --c2:#ff2faf; } /* far west */
body.login-showcase-v77 .v85-mini-pin.p2  { left: 28.8% !important; top: 54.8% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p3  { left: 31.8% !important; top: 44.8% !important; --c1:#ff6b6b; --c2:#ff2f45; } /* upper-left */
body.login-showcase-v77 .v85-mini-pin.p4  { left: 36.5% !important; top: 37.6% !important; --c1:#ffb45c; --c2:#ff8a00; } /* top west */
body.login-showcase-v77 .v85-mini-pin.p5  { left: 43.0% !important; top: 32.4% !important; --c1:#b38cff; --c2:#7c3cff; } /* top */
body.login-showcase-v77 .v85-mini-pin.p6  { left: 50.4% !important; top: 29.8% !important; --c1:#ff78d8; --c2:#ff2faf; } /* top center */
body.login-showcase-v77 .v85-mini-pin.p7  { left: 57.8% !important; top: 31.8% !important; --c1:#ffd84a; --c2:#ffb703; } /* top-right */
body.login-showcase-v77 .v85-mini-pin.p8  { left: 65.5% !important; top: 34.8% !important; --c1:#ff6b6b; --c2:#ff2f45; } /* upper east */
body.login-showcase-v77 .v85-mini-pin.p9  { left: 73.0% !important; top: 39.8% !important; --c1:#ffb45c; --c2:#ff8a00; } /* far east inside */
body.login-showcase-v77 .v85-mini-pin.p10 { left: 68.5% !important; top: 50.6% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p11 { left: 63.0% !important; top: 60.5% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p12 { left: 55.0% !important; top: 68.0% !important; --c1:#ffd84a; --c2:#ffb703; } /* lower center */
body.login-showcase-v77 .v85-mini-pin.p13 { left: 47.0% !important; top: 70.0% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p14 { left: 39.0% !important; top: 68.2% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p15 { left: 31.0% !important; top: 66.0% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p16 { left: 38.8% !important; top: 53.8% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p17 { left: 48.8% !important; top: 51.0% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p18 { left: 58.5% !important; top: 48.0% !important; --c1:#ff6b6b; --c2:#ff2f45; }

/* ทำให้ effect รอยยุบชัดขึ้นโดยไม่รก */
body.login-showcase-v77 .v85-mini-pin::after {
    top: calc(100% + 5px) !important;
    width: 22px !important;
    height: 8px !important;
    background:
        radial-gradient(ellipse at center,
            rgba(0,0,0,.32),
            color-mix(in srgb, var(--c2) 48%, transparent) 46%,
            transparent 74%) !important;
    opacity: .78 !important;
}

/* mobile */
@media (max-width: 575.98px) {
    body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
        transform: translateZ(0) skewX(-2deg) scale(1.02) !important;
    }

    body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::before {
        transform: translate(5px, 6px) skewX(-6deg) !important;
    }

    body.login-showcase-v77 .v77-copy h1::after {
        left: 35% !important;
        top: 62% !important;
        width: 62% !important;
        height: 58px !important;
        filter: blur(14px) !important;
    }

    body.login-showcase-v77 .v85-mini-pin {
        width: 12px !important;
        height: 12px !important;
    }
}


/* ===== v91 FINAL: random-looking safe pins + stronger real-metal T-Map ===== */

/* -------------------------------------------------------
   T-Map: เพิ่มความเด่นแบบชัดเจน
   - Chrome metal เข้มขึ้น
   - มี dark outline รอบตัวอักษร
   - มี electric cyan rim light
   - blue backlight ด้านหลังแรงขึ้น แต่ไม่ฟุ้งเละ
------------------------------------------------------- */
body.login-showcase-v77 .v77-copy h1 {
    overflow: visible !important;
}

body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
    position: relative !important;
    display: inline-block !important;
    isolation: isolate !important;
    padding: 0 .06em .13em .025em !important;
    letter-spacing: -.052em !important;
    transform: translateZ(0) skewX(-2deg) scale(1.09) !important;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #eaffff 5%,
            #69efff 12%,
            #008fd4 23%,
            #001b4d 35%,
            #00071d 43%,
            #ffffff 50%,
            #7ff7ff 56%,
            #00c8ff 63%,
            #0060c9 73%,
            #00205e 86%,
            #000615 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    -webkit-text-stroke: .95px rgba(225, 255, 255, .92) !important;

    text-shadow:
        /* dark outline */
        -1px -1px 0 rgba(0, 15, 45, .88),
         1px -1px 0 rgba(0, 15, 45, .88),
        -1px  1px 0 rgba(0, 15, 45, .88),
         1px  1px 0 rgba(0, 15, 45, .88),
        /* metal bevel */
        0 1px 0 rgba(255,255,255,.84),
        0 2px 0 rgba(110,230,255,.62),
        0 5px 0 rgba(5,79,151,.84),
        0 9px 0 rgba(0,20,75,.96),
        0 16px 22px rgba(0,0,0,.50) !important;

    filter:
        drop-shadow(0 0 8px rgba(236, 255, 255, .92))
        drop-shadow(0 0 22px rgba(52, 231, 255, .88))
        drop-shadow(0 0 54px rgba(0, 127, 255, .74))
        drop-shadow(0 20px 24px rgba(0,0,0,.46)) !important;

    animation: v91TmapChromeMetal 5.2s ease-in-out infinite !important;
}

/* 3D metal depth */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::before {
    content: attr(data-text) !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;

    background:
        linear-gradient(180deg,
            #0e75bd 0%,
            #084986 28%,
            #021a55 64%,
            #000417 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    transform: translate(11px, 12px) skewX(-8deg) !important;
    opacity: 1 !important;
    text-shadow:
        0 1px 0 #1075a8,
        0 2px 0 #0b527f,
        0 3px 0 #06365f,
        0 4px 0 #032449,
        0 5px 0 #011333,
        0 16px 22px rgba(0,0,0,.62) !important;
    filter: blur(.05px) !important;
}

/* crisp front rim and moving metallic highlight */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::after {
    content: attr(data-text) !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;

    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1.75px rgba(236, 255, 255, .98) !important;

    background:
        linear-gradient(104deg,
            transparent 0%,
            transparent 23%,
            rgba(255,255,255,1) 34%,
            rgba(179,255,255,1) 42%,
            rgba(0,220,255,.95) 50%,
            rgba(255,255,255,.86) 55%,
            transparent 66%,
            transparent 100%) !important;
    background-size: 280% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;

    opacity: 1 !important;
    text-shadow:
        0 0 8px rgba(255,255,255,.92),
        0 0 18px rgba(100,247,255,.86),
        0 0 40px rgba(0,145,255,.68) !important;
    animation: v91TmapMetalSweep 3.2s linear infinite !important;
}

/* focused blue backlight behind T-Map */
body.login-showcase-v77 .v77-copy h1::after {
    content: "" !important;
    position: absolute !important;
    left: 37% !important;
    top: 52% !important;
    width: min(500px, 62%) !important;
    height: 118px !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    z-index: -1 !important;
    background:
        radial-gradient(ellipse at center,
            rgba(198,255,255,.54) 0%,
            rgba(31,225,255,.52) 25%,
            rgba(0,112,255,.36) 49%,
            rgba(0,48,190,.18) 66%,
            transparent 80%) !important;
    filter: blur(16px) !important;
    opacity: 1 !important;
    animation: v91TmapBacklight 4.8s ease-in-out infinite !important;
}

@keyframes v91TmapChromeMetal {
    0%, 100% {
        filter:
            drop-shadow(0 0 8px rgba(236, 255, 255, .86))
            drop-shadow(0 0 22px rgba(52, 231, 255, .80))
            drop-shadow(0 0 54px rgba(0, 127, 255, .66))
            drop-shadow(0 20px 24px rgba(0,0,0,.46));
        transform: translateZ(0) skewX(-2deg) scale(1.09);
    }
    50% {
        filter:
            drop-shadow(0 0 12px rgba(255,255,255,1))
            drop-shadow(0 0 34px rgba(115,250,255,1))
            drop-shadow(0 0 76px rgba(0,145,255,.88))
            drop-shadow(0 22px 26px rgba(0,0,0,.52));
        transform: translateZ(0) skewX(-2deg) scale(1.12);
    }
}

@keyframes v91TmapMetalSweep {
    0%   { background-position: 170% 0; opacity: .80; }
    36%  { opacity: 1; }
    100% { background-position: -140% 0; opacity: .94; }
}

@keyframes v91TmapBacklight {
    0%, 100% { opacity: .76; transform: translateX(-4px) scaleX(.90); }
    50% { opacity: 1; transform: translateX(5px) scaleX(1.12); }
}

/* -------------------------------------------------------
   หมุด: random-looking controlled spread
   - ไม่เรียงเป็น pattern
   - มีแนวบนชัด
   - กระจายยาวทั้งซ้าย/ขวา/บน/ล่าง
   - ยังอยู่ใน safe zone ของแผนที่
------------------------------------------------------- */

/* ปิดหมุดใหญ่และ wave รุ่นเก่า */
body.login-showcase-v77 .v80-pin,
body.login-showcase-v77 .v82-wave-pins,
body.login-showcase-v77 .v82-mini-pin,
body.login-showcase-v77 .v84-wave-pins,
body.login-showcase-v77 .v84-mini-pin {
    display: none !important;
}

body.login-showcase-v77 .v85-wave-pins {
    position: absolute !important;
    inset: 0 !important;
    z-index: 11 !important;
    pointer-events: none !important;
    overflow: visible !important;
}

/* ใช้หมุดเล็กเหมือนเดิม แต่ให้เห็นชัด */
body.login-showcase-v77 .v85-mini-pin {
    width: 17px !important;
    height: 17px !important;
    opacity: 0;
}

/* ตำแหน่งใหม่แบบสุ่มแต่คุมพื้นที่: กระจายกล้า ๆ บนทรงแผนที่ */
body.login-showcase-v77 .v85-mini-pin.p1  { left: 22.5% !important; top: 58.5% !important; --c1:#ff78d8; --c2:#ff2faf; } /* ซ้ายสุด */
body.login-showcase-v77 .v85-mini-pin.p2  { left: 27.8% !important; top: 50.0% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p3  { left: 31.2% !important; top: 68.2% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p4  { left: 34.8% !important; top: 41.5% !important; --c1:#ffb45c; --c2:#ff8a00; }

/* แนวบนชัดเจน */
body.login-showcase-v77 .v85-mini-pin.p5  { left: 39.0% !important; top: 33.2% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p6  { left: 45.0% !important; top: 28.8% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p7  { left: 51.8% !important; top: 30.5% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p8  { left: 59.2% !important; top: 28.6% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p9  { left: 66.5% !important; top: 34.0% !important; --c1:#ffb45c; --c2:#ff8a00; }

/* กลาง-ขวา กระจาย ไม่กองกลาง */
body.login-showcase-v77 .v85-mini-pin.p10 { left: 73.5% !important; top: 42.6% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p11 { left: 68.0% !important; top: 55.5% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p12 { left: 60.5% !important; top: 65.8% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p13 { left: 52.2% !important; top: 71.0% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p14 { left: 43.4% !important; top: 66.6% !important; --c1:#ffb45c; --c2:#ff8a00; }

/* เติมช่องว่างแบบไม่เป็นแถว */
body.login-showcase-v77 .v85-mini-pin.p15 { left: 37.0% !important; top: 55.0% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p16 { left: 47.8% !important; top: 48.0% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p17 { left: 56.0% !important; top: 41.8% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p18 { left: 64.2% !important; top: 48.8% !important; --c1:#ff6b6b; --c2:#ff2f45; }

/* ให้รอยยุบอ่านชัดขึ้นเล็กน้อย */
body.login-showcase-v77 .v85-mini-pin::after {
    top: calc(100% + 5px) !important;
    width: 22px !important;
    height: 8px !important;
    background:
        radial-gradient(ellipse at center,
            rgba(0,0,0,.33),
            color-mix(in srgb, var(--c2) 50%, transparent) 46%,
            transparent 74%) !important;
    opacity: .82 !important;
}

/* mobile safety */
@media (max-width: 575.98px) {
    body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
        transform: translateZ(0) skewX(-2deg) scale(1.035) !important;
    }

    body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::before {
        transform: translate(5px, 6px) skewX(-6deg) !important;
    }

    body.login-showcase-v77 .v77-copy h1::after {
        left: 33% !important;
        top: 60% !important;
        width: 66% !important;
        height: 60px !important;
        filter: blur(14px) !important;
    }

    body.login-showcase-v77 .v85-mini-pin {
        width: 12px !important;
        height: 12px !important;
    }
}


/* ===== v92 FINAL FIX: random wide pin distribution + T-Map contrast without covering subtitle ===== */

/* ปิด backlight ขนาดใหญ่หลัง h1 ที่เคยทับข้อความ "จังหวัดประจวบคีรีขันธ์" */
body.login-showcase-v77 .v77-copy h1::after {
    display: none !important;
    content: none !important;
}

/* T-Map: เด่นด้วย contrast/ขอบเข้ม/metal highlight ไม่ใช้ glow ก้อนใหญ่ทับ subtitle */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
    position: relative !important;
    display: inline-block !important;
    isolation: isolate !important;
    padding: 0 .05em .10em .025em !important;
    letter-spacing: -.052em !important;
    transform: translateZ(0) skewX(-2deg) scale(1.075) !important;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #9ffcff 9%,
            #00d8ff 18%,
            #0073c8 29%,
            #001a4d 40%,
            #00091f 47%,
            #f8ffff 52%,
            #35e7ff 59%,
            #009fff 68%,
            #00469d 80%,
            #00123e 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    -webkit-text-stroke: .75px rgba(220,255,255,.95) !important;

    text-shadow:
        -1.6px -1.6px 0 rgba(0, 12, 38, .95),
         1.6px -1.6px 0 rgba(0, 12, 38, .95),
        -1.6px  1.6px 0 rgba(0, 12, 38, .95),
         1.6px  1.6px 0 rgba(0, 12, 38, .95),
         0 1px 0 rgba(255,255,255,.88),
         0 3px 0 rgba(0,117,180,.70),
         0 7px 0 rgba(0,23,78,.90),
         0 14px 20px rgba(0,0,0,.46),
         0 0 10px rgba(74,238,255,.70),
         0 0 24px rgba(0,126,255,.48) !important;

    filter:
        drop-shadow(0 0 6px rgba(218,255,255,.74))
        drop-shadow(0 0 14px rgba(44,226,255,.58))
        drop-shadow(0 16px 20px rgba(0,0,0,.42)) !important;

    animation: v92TmapCrispMetal 5.2s ease-in-out infinite !important;
}

/* เงาโลหะหนาด้านหลัง */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::before {
    content: attr(data-text) !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;
    background:
        linear-gradient(180deg,
            #0b67ac 0%,
            #053d80 36%,
            #011b53 72%,
            #00061d 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    transform: translate(9px, 10px) skewX(-8deg) !important;
    opacity: .98 !important;
    text-shadow:
        0 1px 0 #0a5f98,
        0 2px 0 #073f70,
        0 3px 0 #032b5a,
        0 4px 0 #011c43,
        0 13px 18px rgba(0,0,0,.60) !important;
    filter: blur(.04px) !important;
}

/* ขอบและแสงวิ่งบนโลหะ */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::after {
    content: attr(data-text) !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;

    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1.45px rgba(236,255,255,.96) !important;

    background:
        linear-gradient(104deg,
            transparent 0%,
            transparent 25%,
            rgba(255,255,255,1) 35%,
            rgba(166,255,255,.98) 42%,
            rgba(0,226,255,.92) 50%,
            transparent 63%,
            transparent 100%) !important;
    background-size: 270% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;

    opacity: .96 !important;
    text-shadow:
        0 0 5px rgba(255,255,255,.80),
        0 0 13px rgba(90,244,255,.68),
        0 0 26px rgba(0,135,255,.48) !important;
    animation: v92TmapMetalSweep 3.4s linear infinite !important;
}

@keyframes v92TmapCrispMetal {
    0%, 100% {
        transform: translateZ(0) skewX(-2deg) scale(1.075);
        filter:
            drop-shadow(0 0 6px rgba(218,255,255,.72))
            drop-shadow(0 0 14px rgba(44,226,255,.54))
            drop-shadow(0 16px 20px rgba(0,0,0,.42));
    }
    50% {
        transform: translateZ(0) skewX(-2deg) scale(1.095);
        filter:
            drop-shadow(0 0 8px rgba(255,255,255,.88))
            drop-shadow(0 0 19px rgba(86,248,255,.72))
            drop-shadow(0 17px 21px rgba(0,0,0,.46));
    }
}

@keyframes v92TmapMetalSweep {
    0%   { background-position: 165% 0; opacity: .78; }
    40%  { opacity: 1; }
    100% { background-position: -135% 0; opacity: .90; }
}

/* หมุด: 24 จุด, สุ่มตำแหน่งแบบคุมพื้นที่, มีแนวบนจริง, ไม่เป็นก้นหอย */
body.login-showcase-v77 .v80-pin,
body.login-showcase-v77 .v82-wave-pins,
body.login-showcase-v77 .v82-mini-pin,
body.login-showcase-v77 .v84-wave-pins,
body.login-showcase-v77 .v84-mini-pin {
    display: none !important;
}

body.login-showcase-v77 .v85-wave-pins {
    position: absolute !important;
    inset: 0 !important;
    z-index: 11 !important;
    pointer-events: none !important;
    overflow: visible !important;
}

body.login-showcase-v77 .v85-mini-pin {
    width: 17px !important;
    height: 17px !important;
    opacity: 0;
}

/* ตำแหน่งกระจายทั้งแผนที่: บน/กลาง/ล่าง/ซ้าย/ขวา แบบไม่เรียงลำดับ */
body.login-showcase-v77 .v85-mini-pin.p1  { left: 21.8% !important; top: 58.8% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p2  { left: 30.4% !important; top: 43.6% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p3  { left: 39.8% !important; top: 24.8% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p4  { left: 56.8% !important; top: 18.8% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p5  { left: 70.8% !important; top: 31.2% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p6  { left: 76.2% !important; top: 45.0% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p7  { left: 64.8% !important; top: 58.8% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p8  { left: 49.0% !important; top: 71.2% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p9  { left: 31.6% !important; top: 68.2% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p10 { left: 25.2% !important; top: 51.0% !important; --c1:#b38cff; --c2:#7c3cff; }

body.login-showcase-v77 .v85-mini-pin.p11 { left: 35.5% !important; top: 33.0% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p12 { left: 45.4% !important; top: 19.8% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p13 { left: 63.2% !important; top: 24.0% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p14 { left: 72.8% !important; top: 38.8% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p15 { left: 69.2% !important; top: 52.2% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p16 { left: 58.0% !important; top: 66.8% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p17 { left: 40.8% !important; top: 65.0% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p18 { left: 27.2% !important; top: 63.2% !important; --c1:#ff6b6b; --c2:#ff2f45; }

body.login-showcase-v77 .v85-mini-pin.p19 { left: 43.0% !important; top: 40.5% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p20 { left: 52.2% !important; top: 34.5% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p21 { left: 59.0% !important; top: 47.2% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p22 { left: 50.0% !important; top: 55.2% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p23 { left: 36.0% !important; top: 53.0% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p24 { left: 46.2% !important; top: 61.2% !important; --c1:#ffb45c; --c2:#ff8a00; }

body.login-showcase-v77 .v85-mini-pin::after {
    top: calc(100% + 5px) !important;
    width: 22px !important;
    height: 8px !important;
    background:
        radial-gradient(ellipse at center,
            rgba(0,0,0,.32),
            color-mix(in srgb, var(--c2) 48%, transparent) 46%,
            transparent 74%) !important;
    opacity: .78 !important;
}

@media (max-width: 575.98px) {
    body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
        transform: translateZ(0) skewX(-2deg) scale(1.03) !important;
    }

    body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::before {
        transform: translate(5px, 6px) skewX(-6deg) !important;
    }

    body.login-showcase-v77 .v85-mini-pin {
        width: 12px !important;
        height: 12px !important;
    }
}


/* ===== v93: remove red-circle pins + add yellow-circle pins + reduce T-Map glow 70% ===== */

/* 1) ลบหมุดในวงสีแดง: p7, p16 */
body.login-showcase-v77 .v85-mini-pin.p7,
body.login-showcase-v77 .v85-mini-pin.p16 {
    display: none !important;
}

/* 2) เพิ่มหมุดในพื้นที่วงสีเหลืองด้านหัวแผนที่ขวาบน */
body.login-showcase-v77 .v85-mini-pin.p25 { left: 71.6% !important; top: 26.4% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p26 { left: 78.4% !important; top: 30.8% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p27 { left: 82.0% !important; top: 38.2% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p28 { left: 75.4% !important; top: 44.4% !important; --c1:#b38cff; --c2:#7c3cff; }

/* 3) T-Map: ลดฟุ้งลงประมาณ 70% แต่คงความเป็น metal และความเด่นด้วยขอบ/คอนทราสต์ */
body.login-showcase-v77 .v77-copy h1::after {
    display: none !important;
    content: none !important;
}

body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
    transform: translateZ(0) skewX(-2deg) scale(1.06) !important;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #b7fbff 8%,
            #17d6ff 18%,
            #006cb8 30%,
            #001744 42%,
            #00091e 48%,
            #f6ffff 53%,
            #38e6ff 60%,
            #0094ed 70%,
            #003f91 82%,
            #000d35 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: .72px rgba(222,255,255,.92) !important;

    text-shadow:
        -1.5px -1.5px 0 rgba(0, 12, 38, .96),
         1.5px -1.5px 0 rgba(0, 12, 38, .96),
        -1.5px  1.5px 0 rgba(0, 12, 38, .96),
         1.5px  1.5px 0 rgba(0, 12, 38, .96),
         0 1px 0 rgba(255,255,255,.78),
         0 3px 0 rgba(0,101,165,.65),
         0 7px 0 rgba(0,22,74,.86),
         0 13px 18px rgba(0,0,0,.42),
         0 0 4px rgba(80,235,255,.32),
         0 0 8px rgba(0,126,255,.22) !important;

    filter:
        drop-shadow(0 0 2px rgba(218,255,255,.38))
        drop-shadow(0 0 5px rgba(44,226,255,.28))
        drop-shadow(0 14px 18px rgba(0,0,0,.40)) !important;

    animation: v93TmapCrispMetalLessGlow 5.6s ease-in-out infinite !important;
}

body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::before {
    transform: translate(8px, 9px) skewX(-8deg) !important;
    opacity: .96 !important;
    text-shadow:
        0 1px 0 #0a5f98,
        0 2px 0 #073f70,
        0 3px 0 #032b5a,
        0 4px 0 #011c43,
        0 12px 16px rgba(0,0,0,.56) !important;
}

body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::after {
    -webkit-text-stroke: 1.18px rgba(236,255,255,.82) !important;
    opacity: .74 !important;
    text-shadow:
        0 0 2px rgba(255,255,255,.45),
        0 0 5px rgba(90,244,255,.32),
        0 0 9px rgba(0,135,255,.22) !important;
    animation: v93TmapMetalSweepLessGlow 4.2s linear infinite !important;
}

@keyframes v93TmapCrispMetalLessGlow {
    0%, 100% {
        transform: translateZ(0) skewX(-2deg) scale(1.06);
        filter:
            drop-shadow(0 0 2px rgba(218,255,255,.34))
            drop-shadow(0 0 5px rgba(44,226,255,.24))
            drop-shadow(0 14px 18px rgba(0,0,0,.40));
    }
    50% {
        transform: translateZ(0) skewX(-2deg) scale(1.072);
        filter:
            drop-shadow(0 0 3px rgba(255,255,255,.44))
            drop-shadow(0 0 7px rgba(86,248,255,.34))
            drop-shadow(0 15px 19px rgba(0,0,0,.42));
    }
}

@keyframes v93TmapMetalSweepLessGlow {
    0%   { background-position: 165% 0; opacity: .58; }
    40%  { opacity: .78; }
    100% { background-position: -135% 0; opacity: .64; }
}

/* มือถือ */
@media (max-width: 575.98px) {
    body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
        transform: translateZ(0) skewX(-2deg) scale(1.025) !important;
    }
}


/* ===== v94: add more safe pins in yellow zone + make T-Map glow behind text only ===== */
/* Extra pins in the upper-right map area */
body.login-showcase-v77 .v85-mini-pin.p29 { left: 78.8% !important; top: 27.2% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p30 { left: 83.6% !important; top: 33.6% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p31 { left: 80.6% !important; top: 42.6% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p32 { left: 73.4% !important; top: 24.6% !important; --c1:#b38cff; --c2:#7c3cff; }

/* T-Map: keep metal look, but move the glow behind the word and stop it from covering the Thai line below */
body.login-showcase-v77 .v77-copy h1 {
    position: relative !important;
    overflow: visible !important;
}

body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
    position: relative !important;
    z-index: 2 !important;
    letter-spacing: -.048em !important;
    transform: translateZ(0) skewX(-1.5deg) scale(1.065) !important;
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #eefcff 9%,
            #d0f9ff 18%,
            #82ddff 31%,
            #f6ffff 44%,
            #53c5ff 58%,
            #0c73c8 73%,
            #083f87 86%,
            #031e4e 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: .75px rgba(230, 248, 255, .95) !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,.55),
        0 2px 0 rgba(36,110,172,.45),
        0 4px 0 rgba(9,43,91,.54),
        0 9px 15px rgba(0,0,0,.28) !important;
    filter:
        drop-shadow(0 0 1.5px rgba(220,255,255,.30))
        drop-shadow(0 0 5px rgba(66,220,255,.20))
        drop-shadow(0 9px 15px rgba(0,0,0,.24)) !important;
    animation: v94TmapMetalCalm 4.8s ease-in-out infinite !important;
}

/* Back depth */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::before {
    transform: translate(6px, 7px) skewX(-7deg) !important;
    opacity: .94 !important;
    background:
        linear-gradient(180deg,
            #2d7fc2 0%,
            #175eaa 30%,
            #0c4387 63%,
            #042558 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow:
        0 1px 0 #0c4f86,
        0 2px 0 #083d6e,
        0 3px 0 #062c56,
        0 8px 12px rgba(0,0,0,.34) !important;
    filter: none !important;
}

/* Metallic edge + soft blue neon sweep, but controlled */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::after {
    content: attr(data-text) !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1.08px rgba(235,250,255,.78) !important;
    background:
        linear-gradient(104deg,
            transparent 0%,
            transparent 30%,
            rgba(255,255,255,.88) 39%,
            rgba(186,243,255,.78) 46%,
            rgba(84,202,255,.52) 52%,
            transparent 62%,
            transparent 100%) !important;
    background-size: 235% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    opacity: .70 !important;
    text-shadow:
        0 0 3px rgba(255,255,255,.34),
        0 0 6px rgba(67,224,255,.22) !important;
    animation: v94TmapSweep 4.4s linear infinite !important;
}

/* Halo sits BEHIND the T-Map only */
body.login-showcase-v77 .v77-copy h1::after {
    content: "" !important;
    position: absolute !important;
    left: 53.8% !important;
    top: 32% !important;
    width: 255px !important;
    height: 108px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
        radial-gradient(ellipse at center,
            rgba(215,252,255,.36) 0%,
            rgba(89,224,255,.26) 28%,
            rgba(23,145,255,.16) 48%,
            rgba(6,69,164,.08) 62%,
            transparent 76%) !important;
    filter: blur(11px) !important;
    opacity: .68 !important;
    animation: v94TmapHalo 5.2s ease-in-out infinite !important;
}

@keyframes v94TmapMetalCalm {
    0%,100% {
        transform: translateZ(0) skewX(-1.5deg) scale(1.065);
        filter:
            drop-shadow(0 0 1.5px rgba(220,255,255,.28))
            drop-shadow(0 0 5px rgba(66,220,255,.18))
            drop-shadow(0 9px 15px rgba(0,0,0,.24));
    }
    50% {
        transform: translateZ(0) skewX(-1.5deg) scale(1.075);
        filter:
            drop-shadow(0 0 2px rgba(255,255,255,.36))
            drop-shadow(0 0 6px rgba(74,228,255,.24))
            drop-shadow(0 10px 16px rgba(0,0,0,.26));
    }
}

@keyframes v94TmapSweep {
    0% { background-position: 155% 0; opacity: .55; }
    42% { opacity: .78; }
    100% { background-position: -120% 0; opacity: .62; }
}

@keyframes v94TmapHalo {
    0%,100% { opacity: .58; transform: translate(-50%, -50%) scale(.96); }
    50% { opacity: .72; transform: translate(-50%, -50%) scale(1.02); }
}

/* ===== v95 PROFESSIONAL FINAL: full-map pin coverage + clean T-Map title ===== */

body.login-showcase-v77 .v77-copy h1 {
    position: relative !important;
    z-index: 2 !important;
    margin-bottom: 18px !important;
    overflow: visible !important;
}

body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
    position: relative !important;
    z-index: 3 !important;
    isolation: isolate !important;
    padding: 0 .035em .035em .018em !important;
    letter-spacing: -.047em !important;
    transform: translateZ(0) skewX(-1.5deg) scale(1.035) !important;
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #eaffff 10%,
            #bff5ff 22%,
            #61d6ff 36%,
            #f7ffff 49%,
            #46c2ff 61%,
            #0873c9 76%,
            #073c82 88%,
            #021943 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: .62px rgba(235,250,255,.90) !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,.50),
        0 2px 0 rgba(27,95,160,.34),
        0 3px 0 rgba(7,38,86,.34),
        0 4px 8px rgba(0,0,0,.24) !important;
    filter:
        drop-shadow(0 0 1px rgba(220,255,255,.26))
        drop-shadow(0 0 3px rgba(66,220,255,.18))
        drop-shadow(0 5px 9px rgba(0,0,0,.20)) !important;
    animation: v95TmapMetalCalm 5.4s ease-in-out infinite !important;
}

body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::before {
    content: attr(data-text) !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    transform: translate(4px, 3px) skewX(-6deg) !important;
    opacity: .56 !important;
    background:
        linear-gradient(180deg,
            #2a75b7 0%,
            #14518f 42%,
            #082c61 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow:
        0 1px 0 rgba(9,63,105,.58),
        0 2px 4px rgba(0,0,0,.28) !important;
    filter: none !important;
}

body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::after {
    content: attr(data-text) !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: .88px rgba(240,252,255,.68) !important;
    background:
        linear-gradient(104deg,
            transparent 0%,
            transparent 32%,
            rgba(255,255,255,.72) 41%,
            rgba(177,243,255,.60) 48%,
            rgba(65,202,255,.42) 54%,
            transparent 65%,
            transparent 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    opacity: .56 !important;
    text-shadow: none !important;
    animation: v95TmapSweep 5.2s linear infinite !important;
}

body.login-showcase-v77 .v77-copy h1::after {
    content: "" !important;
    position: absolute !important;
    left: 60.5% !important;
    top: 31% !important;
    width: 230px !important;
    height: 68px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background:
        radial-gradient(ellipse at center,
            rgba(205,250,255,.24) 0%,
            rgba(71,218,255,.16) 35%,
            rgba(16,116,240,.08) 57%,
            transparent 75%) !important;
    filter: blur(7px) !important;
    opacity: .48 !important;
    animation: none !important;
}

body.login-showcase-v77 .v77-copy h2 {
    position: relative !important;
    z-index: 5 !important;
    margin-top: 0 !important;
    text-shadow:
        0 2px 6px rgba(0,0,0,.38),
        0 0 6px rgba(76,220,255,.10) !important;
}

@keyframes v95TmapMetalCalm {
    0%, 100% {
        transform: translateZ(0) skewX(-1.5deg) scale(1.035);
        filter:
            drop-shadow(0 0 1px rgba(220,255,255,.24))
            drop-shadow(0 0 3px rgba(66,220,255,.16))
            drop-shadow(0 5px 9px rgba(0,0,0,.20));
    }
    50% {
        transform: translateZ(0) skewX(-1.5deg) scale(1.045);
        filter:
            drop-shadow(0 0 1.5px rgba(255,255,255,.30))
            drop-shadow(0 0 4px rgba(74,228,255,.20))
            drop-shadow(0 5px 10px rgba(0,0,0,.22));
    }
}

@keyframes v95TmapSweep {
    0% { background-position: 150% 0; opacity: .44; }
    45% { opacity: .62; }
    100% { background-position: -115% 0; opacity: .50; }
}

body.login-showcase-v77 .v85-wave-pins {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(106%, 710px) !important;
    height: min(42vw, 292px) !important;
    z-index: 12 !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    overflow: visible !important;
}

body.login-showcase-v77 .v85-mini-pin,
body.login-showcase-v77 .v85-mini-pin.p7,
body.login-showcase-v77 .v85-mini-pin.p16 {
    display: block !important;
}

body.login-showcase-v77 .v85-mini-pin {
    width: 14px !important;
    height: 14px !important;
    opacity: 0 !important;
    transform: translate(-50%, -50%) translateY(10px) scale(.42) rotate(-45deg) !important;
    transition:
        opacity .54s ease,
        transform .68s cubic-bezier(.2, 1.12, .2, 1),
        filter .54s ease !important;
    will-change: opacity, transform, filter;
}

body.login-showcase-v77 .v85-mini-pin.is-visible {
    opacity: .96 !important;
    transform: translate(-50%, -50%) translateY(-2px) scale(1) rotate(-45deg) !important;
    filter: saturate(1.08) brightness(1.06) !important;
    animation: v95MiniPinFloat 2.35s ease-in-out infinite !important;
}

body.login-showcase-v77 .v85-mini-pin.is-leaving,
body.login-showcase-v77 .v85-wave-pins.is-fading .v85-mini-pin {
    opacity: 0 !important;
    transform: translate(-50%, -50%) translateY(-20px) scale(.54) rotate(-45deg) !important;
    filter: blur(.6px) saturate(.88) !important;
    animation: none !important;
}

body.login-showcase-v77 .v85-mini-pin::before {
    width: 5px !important;
    height: 5px !important;
}

body.login-showcase-v77 .v85-mini-pin::after {
    top: calc(100% + 4px) !important;
    width: 18px !important;
    height: 6px !important;
    opacity: .68 !important;
}

@keyframes v95MiniPinFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -3px; }
}

body.login-showcase-v77 .v85-mini-pin.p1  { left: 46.0% !important; top: 13.8% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p2  { left: 54.5% !important; top: 12.2% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p3  { left: 63.0% !important; top: 15.8% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p4  { left: 70.4% !important; top: 21.2% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p5  { left: 77.3% !important; top: 29.4% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p6  { left: 82.2% !important; top: 38.0% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p7  { left: 74.8% !important; top: 43.6% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p8  { left: 67.0% !important; top: 34.4% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p9  { left: 58.6% !important; top: 28.2% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p10 { left: 50.5% !important; top: 24.4% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p11 { left: 41.8% !important; top: 25.8% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p12 { left: 35.2% !important; top: 33.8% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p13 { left: 30.0% !important; top: 43.4% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p14 { left: 24.0% !important; top: 54.4% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p15 { left: 21.2% !important; top: 65.8% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p16 { left: 29.4% !important; top: 69.6% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p17 { left: 39.0% !important; top: 72.8% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p18 { left: 49.0% !important; top: 75.4% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p19 { left: 58.2% !important; top: 72.0% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p20 { left: 66.2% !important; top: 65.0% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p21 { left: 72.4% !important; top: 55.2% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p22 { left: 63.0% !important; top: 51.0% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p23 { left: 54.0% !important; top: 56.8% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p24 { left: 45.0% !important; top: 61.0% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p25 { left: 36.4% !important; top: 56.8% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p26 { left: 43.2% !important; top: 47.2% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p27 { left: 52.0% !important; top: 44.6% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p28 { left: 60.0% !important; top: 42.6% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p29 { left: 69.4% !important; top: 48.4% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p30 { left: 78.6% !important; top: 35.6% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p31 { left: 75.4% !important; top: 24.2% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p32 { left: 66.4% !important; top: 22.2% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p33 { left: 56.6% !important; top: 19.8% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p34 { left: 47.8% !important; top: 19.0% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p35 { left: 37.8% !important; top: 38.4% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p36 { left: 32.2% !important; top: 50.4% !important; --c1:#ffd84a; --c2:#ffb703; }

@media (max-width: 991.98px) {
    body.login-showcase-v77 .v85-wave-pins {
        width: min(120%, 760px) !important;
        height: min(48vw, 315px) !important;
    }
}

@media (max-width: 575.98px) {
    body.login-showcase-v77 .v77-copy h1 {
        margin-bottom: 14px !important;
    }

    body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
        transform: translateZ(0) skewX(-1.5deg) scale(1.01) !important;
    }

    body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::before {
        transform: translate(3px, 2px) skewX(-5deg) !important;
    }

    body.login-showcase-v77 .v77-copy h1::after {
        left: 60% !important;
        top: 30% !important;
        width: 160px !important;
        height: 48px !important;
        filter: blur(6px) !important;
        opacity: .34 !important;
    }

    body.login-showcase-v77 .v85-wave-pins {
        width: 128% !important;
        height: 220px !important;
    }

    body.login-showcase-v77 .v85-mini-pin {
        width: 10.5px !important;
        height: 10.5px !important;
    }

    body.login-showcase-v77 .v85-mini-pin::before {
        width: 4px !important;
        height: 4px !important;
    }

    body.login-showcase-v77 .v85-mini-pin::after {
        width: 14px !important;
        height: 5px !important;
    }
}

/* ===== v96 TRUE PROFESSIONAL FIX: no overflow pins + clean non-overlapping T-Map ===== */

body.login-showcase-v77 .v77-copy h1 {
    position: relative !important;
    z-index: 3 !important;
    margin: 0 0 18px !important;
    line-height: .92 !important;
    overflow: visible !important;
}

body.login-showcase-v77 .v77-copy h1::after,
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::before,
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
    position: relative !important;
    z-index: 4 !important;
    display: inline-block !important;
    isolation: auto !important;
    padding: 0 .018em .015em .01em !important;
    margin-left: .035em !important;
    letter-spacing: -.04em !important;
    transform: translateZ(0) skewX(-1deg) scale(1.015) !important;
    vertical-align: baseline !important;
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #eefbff 16%,
            #aeefff 31%,
            #54cfff 47%,
            #f8ffff 54%,
            #45b8f4 68%,
            #126db9 83%,
            #073a7a 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: .45px rgba(236, 250, 255, .72) !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,.38),
        0 2px 0 rgba(9,57,116,.22),
        0 3px 5px rgba(0,0,0,.18) !important;
    filter: none !important;
    animation: none !important;
}

body.login-showcase-v77 .v77-copy h2 {
    position: relative !important;
    z-index: 6 !important;
    margin-top: 0 !important;
    line-height: 1.18 !important;
    text-shadow:
        0 2px 7px rgba(0,0,0,.42),
        0 0 4px rgba(79,224,255,.10) !important;
}

body.login-showcase-v77 .v85-wave-pins {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(98%, 670px) !important;
    height: min(39.5vw, 278px) !important;
    z-index: 12 !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    overflow: visible !important;
}

body.login-showcase-v77 .v85-mini-pin,
body.login-showcase-v77 .v85-mini-pin.p7,
body.login-showcase-v77 .v85-mini-pin.p16 {
    display: block !important;
}

body.login-showcase-v77 .v85-mini-pin {
    width: 13px !important;
    height: 13px !important;
    opacity: 0 !important;
    transform: translate(-50%, -50%) translateY(10px) scale(.42) rotate(-45deg) !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--c2) 14%, transparent),
        0 0 10px color-mix(in srgb, var(--c2) 58%, white 10%),
        0 6px 10px rgba(0,0,0,.20) !important;
    transition:
        opacity .54s ease,
        transform .68s cubic-bezier(.2, 1.12, .2, 1),
        filter .54s ease !important;
}

body.login-showcase-v77 .v85-mini-pin.is-visible {
    opacity: .96 !important;
    transform: translate(-50%, -50%) translateY(-2px) scale(1) rotate(-45deg) !important;
    filter: saturate(1.08) brightness(1.05) !important;
    animation: v96MiniPinFloat 2.4s ease-in-out infinite !important;
}

body.login-showcase-v77 .v85-mini-pin.is-leaving,
body.login-showcase-v77 .v85-wave-pins.is-fading .v85-mini-pin {
    opacity: 0 !important;
    transform: translate(-50%, -50%) translateY(-18px) scale(.54) rotate(-45deg) !important;
    filter: blur(.5px) saturate(.88) !important;
    animation: none !important;
}

body.login-showcase-v77 .v85-mini-pin::before {
    width: 4.8px !important;
    height: 4.8px !important;
}

body.login-showcase-v77 .v85-mini-pin::after {
    top: calc(100% + 4px) !important;
    width: 16px !important;
    height: 5px !important;
    opacity: .62 !important;
}

@keyframes v96MiniPinFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -3px; }
}

body.login-showcase-v77 .v85-mini-pin.p1  { left: 45.8% !important; top: 23.4% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p2  { left: 52.8% !important; top: 22.2% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p3  { left: 59.8% !important; top: 24.4% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p4  { left: 66.4% !important; top: 27.8% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p5  { left: 72.4% !important; top: 32.6% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p6  { left: 76.2% !important; top: 39.8% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p7  { left: 71.0% !important; top: 45.8% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p8  { left: 63.8% !important; top: 38.0% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p9  { left: 56.8% !important; top: 34.0% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p10 { left: 49.6% !important; top: 31.2% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p11 { left: 42.4% !important; top: 32.4% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p12 { left: 36.5% !important; top: 39.2% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p13 { left: 31.8% !important; top: 48.0% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p14 { left: 27.4% !important; top: 58.4% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p15 { left: 25.0% !important; top: 66.6% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p16 { left: 32.4% !important; top: 69.0% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p17 { left: 41.0% !important; top: 71.2% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p18 { left: 50.0% !important; top: 72.4% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p19 { left: 58.0% !important; top: 69.8% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p20 { left: 64.6% !important; top: 63.2% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p21 { left: 69.6% !important; top: 55.0% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p22 { left: 60.8% !important; top: 51.8% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p23 { left: 53.0% !important; top: 56.4% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p24 { left: 45.6% !important; top: 59.8% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p25 { left: 38.2% !important; top: 56.2% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p26 { left: 43.8% !important; top: 48.0% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p27 { left: 51.2% !important; top: 45.6% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p28 { left: 58.6% !important; top: 44.0% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p29 { left: 66.0% !important; top: 48.2% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p30 { left: 73.0% !important; top: 39.0% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p31 { left: 68.8% !important; top: 30.8% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p32 { left: 61.5% !important; top: 28.8% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p33 { left: 54.0% !important; top: 26.8% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p34 { left: 46.8% !important; top: 27.4% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p35 { left: 39.0% !important; top: 42.8% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p36 { left: 34.0% !important; top: 52.0% !important; --c1:#ffd84a; --c2:#ffb703; }

@media (max-width: 991.98px) {
    body.login-showcase-v77 .v85-wave-pins {
        width: min(112%, 720px) !important;
        height: min(46vw, 305px) !important;
    }
}

@media (max-width: 575.98px) {
    body.login-showcase-v77 .v77-copy h1 {
        margin-bottom: 14px !important;
    }

    body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
        transform: translateZ(0) skewX(-1deg) scale(1) !important;
    }

    body.login-showcase-v77 .v85-wave-pins {
        width: 120% !important;
        height: 212px !important;
    }

    body.login-showcase-v77 .v85-mini-pin {
        width: 10px !important;
        height: 10px !important;
    }

    body.login-showcase-v77 .v85-mini-pin::before {
        width: 3.8px !important;
        height: 3.8px !important;
    }

    body.login-showcase-v77 .v85-mini-pin::after {
        width: 13px !important;
        height: 4px !important;
    }
}

/* ===== v97 DISTRIBUTED MAP PINS: wider safe coverage, not center-clustered ===== */

body.login-showcase-v77 .v85-wave-pins {
    width: min(103%, 700px) !important;
    height: min(41.5vw, 288px) !important;
}

body.login-showcase-v77 .v85-mini-pin {
    width: 12.5px !important;
    height: 12.5px !important;
}

body.login-showcase-v77 .v85-mini-pin.p1  { left: 40.0% !important; top: 22.0% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p2  { left: 48.0% !important; top: 19.6% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p3  { left: 56.0% !important; top: 20.4% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p4  { left: 64.2% !important; top: 23.4% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p5  { left: 72.0% !important; top: 29.0% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p6  { left: 80.0% !important; top: 38.4% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p7  { left: 75.8% !important; top: 48.4% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p8  { left: 68.8% !important; top: 39.8% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p9  { left: 60.8% !important; top: 35.0% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p10 { left: 52.0% !important; top: 31.8% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p11 { left: 42.8% !important; top: 31.8% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p12 { left: 33.6% !important; top: 38.2% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p13 { left: 25.2% !important; top: 48.0% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p14 { left: 18.2% !important; top: 58.6% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p15 { left: 16.2% !important; top: 67.8% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p16 { left: 25.2% !important; top: 72.0% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p17 { left: 36.2% !important; top: 74.8% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p18 { left: 48.0% !important; top: 76.2% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p19 { left: 59.2% !important; top: 73.2% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p20 { left: 68.4% !important; top: 65.8% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p21 { left: 74.6% !important; top: 56.0% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p22 { left: 64.2% !important; top: 52.4% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p23 { left: 54.2% !important; top: 57.4% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p24 { left: 44.0% !important; top: 61.4% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p25 { left: 33.8% !important; top: 57.6% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p26 { left: 41.2% !important; top: 49.0% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p27 { left: 50.2% !important; top: 46.2% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p28 { left: 59.6% !important; top: 45.0% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p29 { left: 68.8% !important; top: 49.2% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p30 { left: 77.8% !important; top: 36.8% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p31 { left: 73.4% !important; top: 25.2% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p32 { left: 63.6% !important; top: 26.8% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p33 { left: 54.0% !important; top: 25.0% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p34 { left: 44.6% !important; top: 26.4% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p35 { left: 35.4% !important; top: 43.6% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p36 { left: 27.8% !important; top: 53.0% !important; --c1:#ffd84a; --c2:#ffb703; }


/* ===== v100 EMERGENCY PROFESSIONAL FIX: restore map + clean T-Map + safe pins ===== */
/* ใช้โครง HTML เดิม ไม่ครอบรูปแผนที่ใหม่ เพื่อไม่ให้รูปแผนที่หายอีก */

/* ---------- Restore original map rendering ---------- */
body.login-showcase-v77 .v99-map-pin-stage {
    display: contents !important;
}

body.login-showcase-v77 .v77-map-layer,
body.login-showcase-v77 .v80-map-layer {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    min-height: 330px !important;
    margin-top: 18px !important;
    overflow: visible !important;
    isolation: isolate !important;
}

body.login-showcase-v77 .v80-map-image {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: min(104%, 650px) !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    opacity: .98 !important;
    mix-blend-mode: screen !important;
    filter:
        saturate(1.18)
        contrast(1.10)
        brightness(1.08)
        drop-shadow(0 0 22px rgba(80, 245, 255, .30))
        drop-shadow(0 22px 38px rgba(0,0,0,.20)) !important;
    animation: v81MapFloat 8.5s ease-in-out infinite !important;
}

/* ---------- Pin layer follows the visible map area ---------- */
body.login-showcase-v77 .v85-wave-pins {
    position: absolute !important;
    z-index: 6 !important;
    pointer-events: none !important;

    /* กรอบนี้ครอบเฉพาะตัวแผนที่ ไม่ครอบหัวข้อด้านบน */
    left: 50% !important;
    top: 50% !important;
    width: min(104%, 650px) !important;
    height: 100% !important;
    transform: translate(-50%, -50%) !important;

    overflow: visible !important;
}

/* ปิดหมุดใหญ่ทั้งหมด */
body.login-showcase-v77 .v80-pin,
body.login-showcase-v77 .v82-wave-pins,
body.login-showcase-v77 .v82-mini-pin,
body.login-showcase-v77 .v84-wave-pins,
body.login-showcase-v77 .v84-mini-pin {
    display: none !important;
}

/* หมุดเล็กให้พอดี ไม่ใหญ่จนดูเกินขอบ */
body.login-showcase-v77 .v85-mini-pin,
body.login-showcase-v77 .v85-mini-pin.p7,
body.login-showcase-v77 .v85-mini-pin.p16 {
    display: block !important;
}

body.login-showcase-v77 .v85-mini-pin {
    position: absolute !important;
    width: 13px !important;
    height: 13px !important;
    opacity: 0 !important;
    transform: translate(-50%, -50%) translateY(8px) scale(.42) rotate(-45deg) !important;
    border-radius: 50% 50% 50% 0 !important;
    background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,.78), transparent 24%),
        linear-gradient(135deg, var(--c1), var(--c2)) !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--c2) 15%, transparent),
        0 0 9px color-mix(in srgb, var(--c2) 60%, white 10%),
        0 6px 10px rgba(0,0,0,.20) !important;
    transition:
        opacity .52s ease,
        transform .66s cubic-bezier(.2, 1.12, .2, 1),
        filter .52s ease !important;
}

body.login-showcase-v77 .v85-mini-pin::before {
    content: "" !important;
    position: absolute !important;
    width: 4.8px !important;
    height: 4.8px !important;
    left: 50% !important;
    top: 50% !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.94) !important;
    transform: translate(-50%, -50%) !important;
}

body.login-showcase-v77 .v85-mini-pin::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: calc(100% + 4px) !important;
    width: 16px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background:
        radial-gradient(ellipse at center,
            rgba(0,0,0,.28),
            color-mix(in srgb, var(--c2) 38%, transparent) 48%,
            transparent 74%) !important;
    filter: blur(.8px) !important;
    transform: translateX(-50%) rotate(45deg) !important;
    opacity: .55 !important;
}

body.login-showcase-v77 .v85-mini-pin.is-visible {
    opacity: .96 !important;
    transform: translate(-50%, -50%) translateY(-2px) scale(1) rotate(-45deg) !important;
    animation: v100MiniPinFloat 2.4s ease-in-out infinite !important;
}

body.login-showcase-v77 .v85-mini-pin.is-leaving,
body.login-showcase-v77 .v85-wave-pins.is-fading .v85-mini-pin {
    opacity: 0 !important;
    transform: translate(-50%, -50%) translateY(-16px) scale(.55) rotate(-45deg) !important;
    animation: none !important;
}

@keyframes v100MiniPinFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -3px; }
}

/* พิกัดใหม่อิงกรอบแผนที่ ไม่ใช่กรอบหัวข้อ */
body.login-showcase-v77 .v85-mini-pin.p1  { left: 40.5% !important; top: 18.5% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p2  { left: 49.0% !important; top: 17.0% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p3  { left: 57.5% !important; top: 19.0% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p4  { left: 66.0% !important; top: 23.5% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p5  { left: 73.0% !important; top: 31.0% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p6  { left: 77.5% !important; top: 42.0% !important; --c1:#ffd84a; --c2:#ffb703; }

body.login-showcase-v77 .v85-mini-pin.p7  { left: 71.5% !important; top: 49.5% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p8  { left: 63.5% !important; top: 43.5% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p9  { left: 55.0% !important; top: 38.0% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p10 { left: 46.5% !important; top: 36.0% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p11 { left: 38.0% !important; top: 38.8% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p12 { left: 30.0% !important; top: 45.0% !important; --c1:#ff78d8; --c2:#ff2faf; }

body.login-showcase-v77 .v85-mini-pin.p13 { left: 23.5% !important; top: 54.0% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p14 { left: 21.0% !important; top: 63.0% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p15 { left: 27.5% !important; top: 69.0% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p16 { left: 37.5% !important; top: 72.5% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p17 { left: 48.0% !important; top: 73.0% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p18 { left: 58.5% !important; top: 69.5% !important; --c1:#ff6b6b; --c2:#ff2f45; }

body.login-showcase-v77 .v85-mini-pin.p19 { left: 66.0% !important; top: 62.0% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p20 { left: 69.5% !important; top: 55.0% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p21 { left: 61.0% !important; top: 54.5% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p22 { left: 52.5% !important; top: 57.5% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p23 { left: 43.5% !important; top: 61.0% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p24 { left: 34.5% !important; top: 57.5% !important; --c1:#ffb45c; --c2:#ff8a00; }

body.login-showcase-v77 .v85-mini-pin.p25 { left: 41.5% !important; top: 49.0% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p26 { left: 50.0% !important; top: 47.0% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p27 { left: 58.5% !important; top: 47.5% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p28 { left: 67.0% !important; top: 47.0% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p29 { left: 75.0% !important; top: 38.5% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p30 { left: 70.5% !important; top: 27.0% !important; --c1:#b38cff; --c2:#7c3cff; }

body.login-showcase-v77 .v85-mini-pin.p31 { left: 61.5% !important; top: 25.5% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p32 { left: 52.0% !important; top: 24.5% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p33 { left: 43.0% !important; top: 25.8% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p34 { left: 34.5% !important; top: 33.5% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p35 { left: 29.2% !important; top: 52.0% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p36 { left: 36.0% !important; top: 65.5% !important; --c1:#ffd84a; --c2:#ffb703; }

/* ---------- T-Map: clean professional metal, no ugly duplicated shadow ---------- */
body.login-showcase-v77 .v77-copy h1 {
    position: relative !important;
    z-index: 5 !important;
    overflow: visible !important;
}

body.login-showcase-v77 .v77-copy h1::after {
    display: none !important;
    content: none !important;
}

body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
    position: relative !important;
    z-index: 6 !important;
    display: inline-block !important;
    isolation: isolate !important;
    padding: 0 .018em .016em .01em !important;
    margin-left: .035em !important;
    letter-spacing: -.040em !important;
    transform: translateZ(0) skewX(-.8deg) scale(1.008) !important;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #edf9ff 16%,
            #b8efff 31%,
            #72d8ff 45%,
            #ffffff 54%,
            #5ac2f3 67%,
            #247dbe 82%,
            #0b447f 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: .36px rgba(236,250,255,.62) !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,.28),
        0 2px 3px rgba(3,26,61,.14) !important;
    filter:
        drop-shadow(0 0 1px rgba(220,255,255,.16))
        drop-shadow(0 0 3px rgba(66,220,255,.10)) !important;
    animation: v100TmapSubtle 5.4s ease-in-out infinite !important;
}

/* Remove fake duplicated text shadow; use only a small halo behind T-Map */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 45% !important;
    width: 98% !important;
    height: 58% !important;
    transform: translate(-50%, -50%) !important;
    z-index: -1 !important;
    border-radius: 999px !important;
    background:
        radial-gradient(ellipse at center,
            rgba(225,252,255,.20) 0%,
            rgba(68,210,255,.10) 34%,
            rgba(14,119,240,.05) 58%,
            transparent 76%) !important;
    filter: blur(4.5px) !important;
    opacity: .38 !important;
    text-shadow: none !important;
    pointer-events: none !important;
    animation: v100TmapHalo 6s ease-in-out infinite !important;
}

/* Fine metallic rim only */
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::after {
    content: attr(data-text) !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 7 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: .54px rgba(240,252,255,.38) !important;
    background:
        linear-gradient(104deg,
            transparent 0%,
            transparent 37%,
            rgba(255,255,255,.46) 45%,
            rgba(167,236,255,.24) 50%,
            transparent 62%,
            transparent 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    opacity: .30 !important;
    text-shadow: none !important;
    animation: v100TmapSweep 5.8s linear infinite !important;
}

body.login-showcase-v77 .v77-copy h2 {
    position: relative !important;
    z-index: 8 !important;
}

@keyframes v100TmapSubtle {
    0%,100% {
        transform: translateZ(0) skewX(-.8deg) scale(1.008);
        filter:
            drop-shadow(0 0 1px rgba(220,255,255,.16))
            drop-shadow(0 0 3px rgba(66,220,255,.10));
    }
    50% {
        transform: translateZ(0) skewX(-.8deg) scale(1.014);
        filter:
            drop-shadow(0 0 1.2px rgba(255,255,255,.20))
            drop-shadow(0 0 3.5px rgba(74,228,255,.12));
    }
}

@keyframes v100TmapHalo {
    0%,100% { opacity: .31; transform: translate(-50%, -50%) scale(.96); }
    50% { opacity: .43; transform: translate(-50%, -50%) scale(1.03); }
}

@keyframes v100TmapSweep {
    0% { background-position: 145% 0; opacity: .22; }
    45% { opacity: .34; }
    100% { background-position: -110% 0; opacity: .25; }
}

/* Responsive */
@media (max-width: 991.98px) {
    body.login-showcase-v77 .v80-map-layer {
        min-height: 300px !important;
    }

    body.login-showcase-v77 .v80-map-image,
    body.login-showcase-v77 .v85-wave-pins {
        width: min(104%, 640px) !important;
    }
}

@media (max-width: 575.98px) {
    body.login-showcase-v77 .v80-map-layer {
        min-height: 220px !important;
    }

    body.login-showcase-v77 .v80-map-image,
    body.login-showcase-v77 .v85-wave-pins {
        width: 112% !important;
    }

    body.login-showcase-v77 .v85-mini-pin {
        width: 9.5px !important;
        height: 9.5px !important;
    }

    body.login-showcase-v77 .v85-mini-pin::before {
        width: 3.5px !important;
        height: 3.5px !important;
    }

    body.login-showcase-v77 .v85-mini-pin::after {
        width: 11px !important;
        height: 4px !important;
    }
}

/* ===== v101 FINAL CLEANUP: clipped safe map pins + no T-Map block shadow ===== */

body.login-showcase-v77 .v77-copy h1 {
    position: relative !important;
    z-index: 5 !important;
    overflow: visible !important;
}

body.login-showcase-v77 .v77-copy h1::after,
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::before,
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
    position: relative !important;
    display: inline-block !important;
    padding: 0 .014em .012em .008em !important;
    margin-left: .035em !important;
    letter-spacing: -.038em !important;
    transform: none !important;
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #eaf8ff 18%,
            #aee9ff 35%,
            #5cc7f3 51%,
            #eefcff 58%,
            #3d9ddd 75%,
            #145c98 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: .28px rgba(238,250,255,.48) !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,.24),
        0 2px 2px rgba(3,26,61,.12) !important;
    filter: none !important;
    animation: none !important;
}

body.login-showcase-v77 .v77-copy h2 {
    position: relative !important;
    z-index: 6 !important;
}

body.login-showcase-v77 .v80-map-layer {
    position: relative !important;
    overflow: visible !important;
}

body.login-showcase-v77 .v85-wave-pins {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(100%, 635px) !important;
    height: min(42vw, 306px) !important;
    transform: translate(-50%, -50%) !important;
    z-index: 8 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    clip-path: polygon(
        43% 10%,
        56% 10%,
        69% 14%,
        82% 24%,
        91% 34%,
        88% 47%,
        78% 56%,
        69% 66%,
        58% 74%,
        47% 76%,
        38% 73%,
        30% 79%,
        20% 76%,
        12% 69%,
        15% 58%,
        23% 49%,
        30% 39%,
        36% 29%
    ) !important;
}

body.login-showcase-v77 .v85-mini-pin {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    opacity: 0 !important;
    transform: translate(-50%, -50%) translateY(7px) scale(.42) rotate(-45deg) !important;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--c2) 14%, transparent),
        0 0 8px color-mix(in srgb, var(--c2) 55%, white 8%),
        0 5px 8px rgba(0,0,0,.18) !important;
}

body.login-showcase-v77 .v85-mini-pin.is-visible {
    opacity: .96 !important;
    transform: translate(-50%, -50%) translateY(-2px) scale(1) rotate(-45deg) !important;
    animation: v101MiniPinFloat 2.4s ease-in-out infinite !important;
}

body.login-showcase-v77 .v85-mini-pin.is-leaving,
body.login-showcase-v77 .v85-wave-pins.is-fading .v85-mini-pin {
    opacity: 0 !important;
    transform: translate(-50%, -50%) translateY(-14px) scale(.55) rotate(-45deg) !important;
    animation: none !important;
}

body.login-showcase-v77 .v85-mini-pin::before {
    width: 4.4px !important;
    height: 4.4px !important;
}

body.login-showcase-v77 .v85-mini-pin::after {
    top: calc(100% + 4px) !important;
    width: 14px !important;
    height: 4px !important;
    opacity: .50 !important;
}

@keyframes v101MiniPinFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -3px; }
}

body.login-showcase-v77 .v85-mini-pin.p1  { left: 46.0% !important; top: 14.5% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p2  { left: 54.0% !important; top: 14.0% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p3  { left: 62.0% !important; top: 16.8% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p4  { left: 70.0% !important; top: 22.0% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p5  { left: 78.0% !important; top: 31.5% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p6  { left: 84.0% !important; top: 39.5% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p7  { left: 77.0% !important; top: 48.0% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p8  { left: 68.5% !important; top: 42.5% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p9  { left: 59.5% !important; top: 37.5% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p10 { left: 50.0% !important; top: 35.5% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p11 { left: 40.5% !important; top: 36.8% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p12 { left: 32.0% !important; top: 44.0% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p13 { left: 24.5% !important; top: 53.0% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p14 { left: 20.5% !important; top: 62.0% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p15 { left: 27.0% !important; top: 69.0% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p16 { left: 37.0% !important; top: 72.0% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p17 { left: 47.5% !important; top: 73.0% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p18 { left: 58.0% !important; top: 69.5% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p19 { left: 66.0% !important; top: 62.0% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p20 { left: 70.0% !important; top: 55.0% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p21 { left: 61.0% !important; top: 54.5% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p22 { left: 52.0% !important; top: 57.5% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p23 { left: 43.0% !important; top: 60.5% !important; --c1:#ff6b6b; --c2:#ff2f45; }
body.login-showcase-v77 .v85-mini-pin.p24 { left: 34.5% !important; top: 57.0% !important; --c1:#ffb45c; --c2:#ff8a00; }
body.login-showcase-v77 .v85-mini-pin.p25 { left: 42.0% !important; top: 49.0% !important; --c1:#b38cff; --c2:#7c3cff; }
body.login-showcase-v77 .v85-mini-pin.p26 { left: 51.0% !important; top: 47.0% !important; --c1:#ffd84a; --c2:#ffb703; }
body.login-showcase-v77 .v85-mini-pin.p27 { left: 60.0% !important; top: 47.5% !important; --c1:#ff78d8; --c2:#ff2faf; }
body.login-showcase-v77 .v85-mini-pin.p28 { left: 69.0% !important; top: 48.5% !important; --c1:#ff6b6b; --c2:#ff2f45; }

body.login-showcase-v77 .v85-mini-pin.p29,
body.login-showcase-v77 .v85-mini-pin.p30,
body.login-showcase-v77 .v85-mini-pin.p31,
body.login-showcase-v77 .v85-mini-pin.p32,
body.login-showcase-v77 .v85-mini-pin.p33,
body.login-showcase-v77 .v85-mini-pin.p34,
body.login-showcase-v77 .v85-mini-pin.p35,
body.login-showcase-v77 .v85-mini-pin.p36 {
    display: none !important;
}

@media (max-width: 991.98px) {
    body.login-showcase-v77 .v85-wave-pins {
        width: min(103%, 640px) !important;
        height: min(46vw, 300px) !important;
    }
}

@media (max-width: 575.98px) {
    body.login-showcase-v77 .v85-wave-pins {
        width: 108% !important;
        height: 212px !important;
    }

    body.login-showcase-v77 .v85-mini-pin {
        width: 9px !important;
        height: 9px !important;
    }
}

/* ===== v102: learning keyword reveal, replacing old bottom chips ===== */
body.login-showcase-v77 .v77-chips.v102-keywords {
    width: min(100%, 640px) !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin-top: 14px !important;
}

body.login-showcase-v77 .v77-chips.v102-keywords span {
    min-width: 0 !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(148, 235, 255, .30) !important;
    background:
        linear-gradient(180deg, rgba(8, 31, 62, .88), rgba(5, 23, 49, .78)) !important;
    color: rgba(246, 253, 255, .96) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 10px 22px rgba(0,0,0,.18),
        0 0 16px rgba(42, 220, 255, .10) !important;
    font-size: clamp(14px, 1.22vw, 18px) !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    opacity: 0;
    transform: translateY(12px) scale(.94);
    animation: v102KeywordReveal .82s cubic-bezier(.18, 1, .24, 1) var(--delay, 0s) forwards,
               v102KeywordBreath 5.2s ease-in-out calc(var(--delay, 0s) + .9s) infinite !important;
}

body.login-showcase-v77 .v77-chips.v102-keywords span::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 auto !important;
    margin-right: 7px !important;
    border-radius: 999px !important;
    background: #62f4ff !important;
    box-shadow: 0 0 10px rgba(98,244,255,.72) !important;
}

body.login-showcase-v77 .v77-chips.v102-keywords i {
    display: none !important;
}

@keyframes v102KeywordReveal {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(.94);
        filter: blur(3px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes v102KeywordBreath {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.12),
            0 10px 22px rgba(0,0,0,.18),
            0 0 16px rgba(42, 220, 255, .10);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.16),
            0 12px 24px rgba(0,0,0,.20),
            0 0 22px rgba(42, 220, 255, .16);
    }
}

@media (max-width: 991.98px) {
    body.login-showcase-v77 .v77-chips.v102-keywords {
        width: min(100%, 620px) !important;
        gap: 8px !important;
    }

    body.login-showcase-v77 .v77-chips.v102-keywords span {
        min-height: 42px !important;
        font-size: clamp(13px, 1.65vw, 16px) !important;
        padding: 8px !important;
    }
}

@media (max-width: 575.98px) {
    body.login-showcase-v77 .v77-chips.v102-keywords {
        grid-template-columns: 1fr !important;
        width: min(100%, 360px) !important;
        margin-inline: auto !important;
    }

    body.login-showcase-v77 .v77-chips.v102-keywords span {
        min-height: 38px !important;
        font-size: 14px !important;
    }
}

/* ===== v103: keep keyword chips on one line after shortening third label ===== */
body.login-showcase-v77 .v77-chips.v102-keywords span {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

@media (max-width: 575.98px) {
    body.login-showcase-v77 .v77-chips.v102-keywords span {
        white-space: normal !important;
    }
}

/* ===== v104: plain keyword text, no pills or dots ===== */
body.login-showcase-v77 .v77-chips.v102-keywords {
    width: min(100%, 620px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
    margin-top: 14px !important;
}

body.login-showcase-v77 .v77-chips.v102-keywords span {
    min-width: 0 !important;
    min-height: 0 !important;
    display: inline-block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(246, 253, 255, .96) !important;
    font-size: clamp(15px, 1.35vw, 20px) !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-shadow:
        0 2px 8px rgba(0,0,0,.34),
        0 0 10px rgba(71, 232, 255, .18) !important;
    opacity: 0;
    transform: translateY(8px);
    animation: v102KeywordReveal .72s cubic-bezier(.18, 1, .24, 1) var(--delay, 0s) forwards !important;
}

body.login-showcase-v77 .v77-chips.v102-keywords span::before {
    display: none !important;
    content: none !important;
}

@media (max-width: 575.98px) {
    body.login-showcase-v77 .v77-chips.v102-keywords {
        flex-direction: column !important;
        gap: 6px !important;
    }

    body.login-showcase-v77 .v77-chips.v102-keywords span {
        font-size: 15px !important;
        white-space: normal !important;
    }
}

/* ===== v105: clean T-Map wordmark, mobile-safe and no blocky shadow ===== */
body.login-showcase-v77 .v77-copy h1 {
    position: relative !important;
    z-index: 8 !important;
    overflow: visible !important;
    margin-bottom: 12px !important;
    color: #fff !important;
    text-shadow:
        0 10px 24px rgba(0,0,0,.28),
        0 0 12px rgba(89,232,255,.10) !important;
}

body.login-showcase-v77 .v77-copy h1::before,
body.login-showcase-v77 .v77-copy h1::after,
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::before,
body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"]::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
}

body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
    position: relative !important;
    display: inline-block !important;
    isolation: auto !important;
    padding: 0 .02em .035em .01em !important;
    margin-left: .04em !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #effcff 18%,
            #bfefff 42%,
            #62bce8 66%,
            #1f6ea9 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: .18px rgba(247,253,255,.42) !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,.22),
        0 3px 7px rgba(1,23,49,.34) !important;
}

body.login-showcase-v77 .v77-copy h2 {
    position: relative !important;
    z-index: 9 !important;
}

@media (max-width: 575.98px) {
    body.login-showcase-v77 .v77-copy {
        margin-top: 20px !important;
    }

    body.login-showcase-v77 .v77-copy h1 {
        margin: 0 0 18px !important;
        font-size: clamp(42px, 13vw, 49px) !important;
        line-height: .86 !important;
        letter-spacing: -.046em !important;
        text-shadow: 0 7px 16px rgba(0,0,0,.30) !important;
    }

    body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
        display: block !important;
        width: max-content !important;
        max-width: 100% !important;
        margin: 5px 0 0 !important;
        padding: 0 0 5px !important;
        font-size: .92em !important;
        line-height: .86 !important;
        letter-spacing: -.035em !important;
        -webkit-text-stroke: 0 !important;
        text-shadow:
            0 1px 0 rgba(255,255,255,.18),
            0 3px 6px rgba(0,25,52,.36) !important;
    }

    body.login-showcase-v77 .v77-copy h2 {
        margin-top: 0 !important;
        font-size: clamp(18px, 5.4vw, 21px) !important;
        line-height: 1.16 !important;
        letter-spacing: -.018em !important;
    }
}

/* ===== v106: 25% smaller login scale + responsive category cards ===== */
@media (min-width: 992px) {
    body.login-showcase-v77.future-login-page {
        padding: 18px !important;
    }

    body.login-showcase-v77 .v77-shell {
        width: min(840px, calc(100vw - 44px)) !important;
        min-height: 465px !important;
        grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr) !important;
        border-radius: 32px !important;
    }

    body.login-showcase-v77 .v77-showcase {
        min-height: 465px !important;
        padding: 22px 24px 20px !important;
    }

    body.login-showcase-v77 .v77-left-content {
        min-height: 423px !important;
    }

    body.login-showcase-v77 .v77-badge {
        min-height: 28px !important;
        padding: 5px 10px !important;
        font-size: 9px !important;
    }

    body.login-showcase-v77 .v77-copy {
        margin-top: 18px !important;
        max-width: 460px !important;
    }

    body.login-showcase-v77 .v77-copy h1 {
        margin-bottom: 8px !important;
        font-size: clamp(43px, 4.3vw, 62px) !important;
        line-height: .92 !important;
    }

    body.login-showcase-v77 .v77-copy h2 {
        font-size: clamp(18px, 1.45vw, 23px) !important;
        line-height: 1.14 !important;
    }

    body.login-showcase-v77 .v77-copy p {
        margin-top: 10px !important;
        max-width: 430px !important;
        font-size: 11px !important;
        line-height: 1.52 !important;
    }

    body.login-showcase-v77 .v80-map-layer {
        min-height: 218px !important;
        margin-top: 6px !important;
    }

    body.login-showcase-v77 .v80-map-image {
        width: min(96%, 488px) !important;
        max-height: 218px !important;
    }

    body.login-showcase-v77 .v77-map-layer img.v80-map-image,
    body.login-showcase-v77 .v80-map-layer img.v80-map-image {
        opacity: 1 !important;
        mix-blend-mode: normal !important;
        filter:
            saturate(1.28)
            contrast(1.16)
            brightness(1.18)
            drop-shadow(0 0 24px rgba(80,245,255,.42))
            drop-shadow(0 18px 34px rgba(0,0,0,.22)) !important;
    }

    body.login-showcase-v77 .v85-wave-pins {
        width: min(96%, 488px) !important;
        height: min(30vw, 220px) !important;
    }

    body.login-showcase-v77 .v85-mini-pin {
        width: 9px !important;
        height: 9px !important;
    }

    body.login-showcase-v77 .v85-mini-pin::before {
        width: 3.4px !important;
        height: 3.4px !important;
    }

    body.login-showcase-v77 .v85-mini-pin::after {
        width: 11px !important;
        height: 4px !important;
    }

    body.login-showcase-v77 .v77-login-panel {
        min-height: 437px !important;
        margin: 13px 13px 13px 0 !important;
        padding: 55px 27px 20px !important;
        border-radius: 26px !important;
    }

    body.login-showcase-v77 .login-e-back {
        top: 14px !important;
        left: 18px !important;
        min-height: 29px !important;
        padding: 5px 10px !important;
        font-size: 9px !important;
    }

    body.login-showcase-v77 .login-e-form-head {
        margin-bottom: 14px !important;
    }

    body.login-showcase-v77 .login-e-panel-badge {
        min-height: 26px !important;
        padding: 5px 9px !important;
        margin-bottom: 10px !important;
        font-size: 8px !important;
    }

    body.login-showcase-v77 .login-e-form-head h2 {
        font-size: clamp(30px, 2.65vw, 38px) !important;
        line-height: 1.08 !important;
    }

    body.login-showcase-v77 .login-e-form-head p {
        margin-top: 7px !important;
        font-size: 10px !important;
        line-height: 1.45 !important;
    }

    body.login-showcase-v77 .login-e-form {
        gap: 11px !important;
    }

    body.login-showcase-v77 .login-e-field label {
        margin-bottom: 5px !important;
        font-size: 10px !important;
    }

    body.login-showcase-v77 .login-e-input-wrap {
        grid-template-columns: 40px 1fr !important;
        min-height: 45px !important;
        border-radius: 14px !important;
    }

    body.login-showcase-v77 .login-e-input-wrap.has-action {
        grid-template-columns: 40px 1fr 44px !important;
    }

    body.login-showcase-v77 .login-e-input-icon,
    body.login-showcase-v77 .login-e-password-toggle,
    body.login-showcase-v77 .login-e-input {
        height: 45px !important;
    }

    body.login-showcase-v77 .login-e-input-icon,
    body.login-showcase-v77 .login-e-password-toggle {
        font-size: 13px !important;
    }

    body.login-showcase-v77 .login-e-input {
        padding: 0 11px !important;
        font-size: 12px !important;
    }

    body.login-showcase-v77 .login-e-password-toggle {
        width: 44px !important;
    }

    body.login-showcase-v77 .login-e-submit {
        min-height: 46px !important;
        margin-top: 3px !important;
        border-radius: 14px !important;
        font-size: 13px !important;
    }

    body.login-showcase-v77 .login-e-footer {
        margin-top: 13px !important;
        font-size: 9px !important;
        line-height: 1.45 !important;
    }
}

body.login-showcase-v77 .v77-chips.v102-keywords {
    width: min(100%, 500px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .94fr) minmax(0, .94fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
    margin: 10px auto 0 !important;
}

body.login-showcase-v77 .v77-map-layer img.v80-map-image,
body.login-showcase-v77 .v80-map-layer img.v80-map-image {
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    filter:
        saturate(1.28)
        contrast(1.16)
        brightness(1.18)
        drop-shadow(0 0 24px rgba(80,245,255,.42))
        drop-shadow(0 18px 34px rgba(0,0,0,.22)) !important;
}

body.login-showcase-v77 .v77-chips.v102-keywords > span {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 7px 9px !important;
    border: 1px solid rgba(142, 237, 255, .24) !important;
    border-radius: 14px !important;
    background:
        linear-gradient(180deg, rgba(11, 38, 70, .82), rgba(4, 20, 42, .64)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 10px 22px rgba(0,0,0,.22),
        0 0 16px rgba(67,232,255,.11) !important;
    backdrop-filter: blur(10px) saturate(1.12) !important;
    color: rgba(246,253,255,.96) !important;
    font-size: clamp(12px, 1.06vw, 15px) !important;
    line-height: 1.18 !important;
    text-align: center !important;
    white-space: normal !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.26) !important;
}

body.login-showcase-v77 .v77-chips.v102-keywords > span i {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    color: #eaffff !important;
    background: linear-gradient(135deg, rgba(85,234,255,.28), rgba(37,99,235,.20)) !important;
    border: 1px solid rgba(161,244,255,.26) !important;
    font-size: 11px !important;
    text-shadow: none !important;
}

body.login-showcase-v77 .v77-chips.v102-keywords > span:nth-child(2) i {
    background: linear-gradient(135deg, rgba(255,199,67,.30), rgba(255,138,0,.18)) !important;
}

body.login-showcase-v77 .v77-chips.v102-keywords > span:nth-child(3) i {
    background: linear-gradient(135deg, rgba(130,244,190,.28), rgba(18,148,110,.18)) !important;
}

@media (min-width: 576px) and (max-width: 991.98px) {
    body.login-showcase-v77 .v77-chips.v102-keywords {
        width: min(100%, 560px) !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }

    body.login-showcase-v77 .v77-chips.v102-keywords > span {
        min-height: 42px !important;
        padding: 8px 10px !important;
        border-radius: 16px !important;
        font-size: clamp(13px, 1.7vw, 15px) !important;
    }
}

@media (max-width: 575.98px) {
    body.login-showcase-v77 .v77-showcase {
        min-height: 505px !important;
    }

    body.login-showcase-v77 .v77-left-content {
        min-height: 467px !important;
    }

    body.login-showcase-v77 .v80-map-layer {
        min-height: 198px !important;
        margin-top: 4px !important;
    }

    body.login-showcase-v77 .v77-chips.v102-keywords {
        width: min(100%, 306px) !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin-top: 8px !important;
    }

    body.login-showcase-v77 .v77-chips.v102-keywords > span:first-child {
        grid-column: 1 / -1 !important;
    }

    body.login-showcase-v77 .v77-chips.v102-keywords > span {
        min-height: 36px !important;
        justify-content: flex-start !important;
        padding: 7px 9px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
        line-height: 1.16 !important;
        text-align: left !important;
    }

    body.login-showcase-v77 .v77-chips.v102-keywords > span i {
        width: 22px !important;
        height: 22px !important;
        flex-basis: 22px !important;
        border-radius: 9px !important;
        font-size: 10px !important;
    }
}

/* ===== v111: single-line category chips + neon T-Map/back button ===== */
body.login-showcase-v77 .v77-chips.v102-keywords {
    width: min(100%, 520px) !important;
}

body.login-showcase-v77 .v77-chips.v102-keywords > span {
    min-height: 38px !important;
    gap: 5px !important;
    padding: 6px 7px !important;
    font-size: clamp(10.5px, .82vw, 12.5px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

body.login-showcase-v77 .v77-chips.v102-keywords > span i {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    border-radius: 8px !important;
    font-size: 9px !important;
}

body.login-showcase-v77 .login-e-back {
    color: #ecfeff !important;
    background:
        linear-gradient(135deg, rgba(20, 116, 255, .72), rgba(25, 221, 255, .50)) !important;
    border: 1px solid rgba(130, 244, 255, .74) !important;
    box-shadow:
        0 0 0 1px rgba(56, 189, 248, .22),
        0 0 18px rgba(45, 212, 255, .42),
        inset 0 1px 0 rgba(255,255,255,.24) !important;
    text-shadow: 0 0 10px rgba(224, 252, 255, .46) !important;
}

body.login-showcase-v77 .login-e-back i {
    color: #ffffff !important;
    filter: drop-shadow(0 0 6px rgba(125, 249, 255, .74)) !important;
}

body.login-showcase-v77 .v77-copy h1 span[data-text="T-Map"] {
    background:
        linear-gradient(180deg,
            #f7ffff 0%,
            #bdf7ff 18%,
            #55e6ff 42%,
            #1298ff 68%,
            #0754d8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: .65px rgba(199, 251, 255, .88) !important;
    text-shadow:
        0 0 2px rgba(255,255,255,.72),
        0 0 10px rgba(45, 212, 255, .72),
        0 0 22px rgba(37, 99, 235, .46),
        0 4px 12px rgba(0, 24, 58, .42) !important;
    filter:
        drop-shadow(0 0 8px rgba(76, 231, 255, .44))
        drop-shadow(0 0 18px rgba(37, 99, 235, .28)) !important;
}

@media (max-width: 575.98px) {
    body.login-showcase-v77 .v77-chips.v102-keywords > span {
        min-height: 34px !important;
        gap: 5px !important;
        padding: 6px 8px !important;
        font-size: 10.8px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body.login-showcase-v77 .v77-chips.v102-keywords > span i {
        width: 19px !important;
        height: 19px !important;
        flex-basis: 19px !important;
        font-size: 8.5px !important;
    }

    body.login-showcase-v77 .login-e-back {
        min-height: 36px !important;
        padding: 8px 12px !important;
        font-size: 11px !important;
    }
}

/* ===== v112: remove hero subcopy space and prevent title overlap ===== */
body.login-showcase-v77 .v77-copy p {
    display: none !important;
}

body.login-showcase-v77 .v77-copy h1 {
    margin-bottom: 16px !important;
}

body.login-showcase-v77 .v77-copy h2 {
    line-height: 1.26 !important;
}

@media (max-width: 575.98px) {
    body.login-showcase-v77 .v77-copy h1 {
        margin-bottom: 24px !important;
    }

    body.login-showcase-v77 .v77-copy h2 {
        line-height: 1.24 !important;
    }
}

/* ===== v113: cleaner login form after removing panel subcopy ===== */
body.login-showcase-v77 .login-e-form-head {
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
}

body.login-showcase-v77 .login-e-form-head h2 {
    position: relative !important;
    display: inline-block !important;
    padding-bottom: 10px !important;
    color: #f8feff !important;
    letter-spacing: 0 !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #dffaff 46%, #78ecff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow:
        0 0 14px rgba(78, 222, 255, .34),
        0 10px 26px rgba(0, 14, 32, .32) !important;
}

body.login-showcase-v77 .login-e-form-head h2::after {
    content: "" !important;
    position: absolute !important;
    left: 2px !important;
    right: 10px !important;
    bottom: 0 !important;
    height: 3px !important;
    border-radius: 999px !important;
    background:
        linear-gradient(90deg, #39d8ff, rgba(57, 216, 255, .18)) !important;
    box-shadow: 0 0 14px rgba(57, 216, 255, .46) !important;
}

body.login-showcase-v77 .login-e-form-head p {
    display: none !important;
}

body.login-showcase-v77 .login-e-form {
    gap: 14px !important;
}

body.login-showcase-v77 .login-e-field label {
    margin-bottom: 8px !important;
    color: rgba(236, 252, 255, .95) !important;
    text-shadow: 0 0 10px rgba(70, 220, 255, .18) !important;
}

body.login-showcase-v77 .login-e-input-wrap {
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(232,246,255,.92)) !important;
    border: 1px solid rgba(179, 242, 255, .72) !important;
    box-shadow:
        0 16px 32px rgba(0, 18, 40, .18),
        0 0 0 1px rgba(57, 216, 255, .12),
        inset 0 1px 0 rgba(255,255,255,.86) !important;
}

body.login-showcase-v77 .login-e-input-wrap:focus-within {
    border-color: rgba(83, 232, 255, .95) !important;
    box-shadow:
        0 18px 38px rgba(0, 18, 40, .22),
        0 0 0 4px rgba(57, 216, 255, .16),
        0 0 22px rgba(57, 216, 255, .28),
        inset 0 1px 0 rgba(255,255,255,.92) !important;
}

body.login-showcase-v77 .login-e-input-icon,
body.login-showcase-v77 .login-e-password-toggle {
    color: #06172c !important;
    background:
        linear-gradient(180deg, rgba(224, 249, 255, .96), rgba(245, 252, 255, .86)) !important;
}

body.login-showcase-v77 .login-e-submit {
    background:
        linear-gradient(135deg, #2378ff 0%, #19c7ff 54%, #45f3ff 100%) !important;
    border: 1px solid rgba(187, 251, 255, .44) !important;
    box-shadow:
        0 18px 34px rgba(35, 120, 255, .32),
        0 0 24px rgba(25, 199, 255, .24),
        inset 0 1px 0 rgba(255,255,255,.30) !important;
    text-shadow: 0 0 10px rgba(255,255,255,.36) !important;
}

@media (max-width: 575.98px) {
    body.login-showcase-v77 .login-e-form-head {
        margin-bottom: 18px !important;
    }

    body.login-showcase-v77 .login-e-form-head h2 {
        padding-bottom: 9px !important;
    }
}

/* ===== v114: clearer username/password labels ===== */
body.login-showcase-v77 .login-e-field label {
    margin-bottom: 9px !important;
    color: #f3fdff !important;
    font-size: clamp(13px, 1.05vw, 15px) !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-shadow:
        0 1px 3px rgba(0, 16, 34, .46),
        0 0 12px rgba(82, 232, 255, .36) !important;
}

@media (max-width: 575.98px) {
    body.login-showcase-v77 .login-e-field label {
        margin-bottom: 8px !important;
        font-size: 14px !important;
    }
}

/* ===== v115: public index app-like future portal ===== */
body.public-home.future-home {
    min-height: 100vh !important;
    color: #eef8ff !important;
    background:
        radial-gradient(circle at 12% 12%, rgba(45, 212, 191, .18), transparent 28rem),
        radial-gradient(circle at 82% 8%, rgba(129, 140, 248, .18), transparent 30rem),
        radial-gradient(circle at 62% 90%, rgba(251, 191, 36, .10), transparent 24rem),
        linear-gradient(135deg, #04111f 0%, #06243a 45%, #04151d 100%) !important;
    overflow-x: hidden !important;
}

body.public-home.future-home::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
        radial-gradient(circle at 50% 0%, rgba(45, 212, 255, .12), transparent 34rem) !important;
    background-size: 34px 34px, 34px 34px, auto !important;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.58) 55%, rgba(0,0,0,.88)) !important;
}

body.public-home .tmap-public-page-bg {
    opacity: .42 !important;
    filter: saturate(1.08) contrast(1.04) !important;
}

body.public-home .tmap-public-page-bg::after {
    background:
        linear-gradient(135deg, rgba(2, 8, 22, .54), rgba(3, 22, 48, .30)),
        radial-gradient(circle at 72% 35%, rgba(34, 211, 238, .18), transparent 28rem) !important;
}

body.public-home .public-navbar.future-navbar.with-top-menu,
body.public-home .public-page.future-page,
body.public-home .public-visit-footer-chip,
body.public-home .public-footer {
    position: relative !important;
    z-index: 3 !important;
}

body.public-home .public-navbar.future-navbar.with-top-menu {
    width: min(1440px, calc(100% - 28px)) !important;
    min-height: 64px !important;
    margin: 14px auto 0 !important;
    padding: 10px 14px !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.045)),
        rgba(4, 17, 38, .62) !important;
    border: 1px solid rgba(159, 232, 255, .20) !important;
    box-shadow:
        0 18px 50px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
    backdrop-filter: blur(18px) saturate(1.1) !important;
}

body.public-home .public-brand-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    color: #ecfeff !important;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.42), transparent 28%),
        linear-gradient(135deg, #13c2ff, #2563eb 58%, #7c3aed) !important;
    box-shadow:
        0 0 22px rgba(45, 212, 255, .35),
        inset 0 1px 0 rgba(255,255,255,.18) !important;
}

body.public-home .public-brand-text {
    max-width: min(58vw, 760px) !important;
    color: rgba(239, 248, 255, .94) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 0 14px rgba(45, 212, 255, .18) !important;
}

@media (min-width: 1367px) {
    body.public-home .future-top-menu-inline.grouped-menu {
        gap: 8px !important;
        padding: 5px !important;
        border-radius: 16px !important;
        background: rgba(3, 12, 30, .46) !important;
        border: 1px solid rgba(148, 221, 255, .16) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
    }

    body.public-home .future-top-menu-inline.grouped-menu a {
        min-height: 42px !important;
        padding: 9px 15px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        letter-spacing: 0 !important;
    }
}

body.public-home .public-page.future-page {
    width: min(1440px, 100%) !important;
    max-width: 1440px !important;
    padding: 14px 14px 24px !important;
}

body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
    position: relative !important;
    min-height: 410px !important;
    height: auto !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: minmax(420px, .9fr) minmax(520px, 1.1fr) !important;
    grid-template-areas: "content visual" !important;
    align-items: center !important;
    gap: clamp(26px, 3.5vw, 54px) !important;
    padding: clamp(30px, 3.8vw, 52px) !important;
    margin-top: 10px !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 22% 20%, rgba(34, 211, 238, .18), transparent 22rem),
        radial-gradient(circle at 84% 62%, rgba(16, 185, 129, .13), transparent 20rem),
        linear-gradient(135deg, rgba(6, 24, 52, .78), rgba(5, 52, 69, .52)) !important;
    border: 1px solid rgba(155, 236, 255, .22) !important;
    box-shadow:
        0 26px 80px rgba(0, 0, 0, .36),
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 0 1px rgba(45, 212, 255, .06) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
}

body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
        linear-gradient(118deg, transparent 0%, rgba(255,255,255,.08) 43%, transparent 62%),
        radial-gradient(circle at 50% 50%, rgba(45, 212, 255, .10), transparent 30rem) !important;
    opacity: .78 !important;
}

body.public-home .future-hero-content {
    grid-area: content !important;
    max-width: 620px !important;
    z-index: 2 !important;
}

body.public-home .future-system-badge {
    width: fit-content !important;
    min-height: 34px !important;
    padding: 7px 13px !important;
    border-radius: 12px !important;
    color: #dbfbff !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(174, 244, 255, .24) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 18px rgba(45, 212, 255, .12) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

body.public-home .future-title {
    margin: 16px 0 8px !important;
    color: #ffffff !important;
    font-size: clamp(48px, 5.2vw, 78px) !important;
    line-height: .92 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-shadow:
        0 12px 30px rgba(0,0,0,.32),
        0 0 20px rgba(45, 212, 255, .20) !important;
}

body.public-home .future-title span {
    background:
        linear-gradient(180deg, #f7ffff 0%, #c8fbff 30%, #4ee6ff 58%, #3178ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: .38px rgba(224, 252, 255, .56) !important;
    text-shadow:
        0 0 12px rgba(45, 212, 255, .54),
        0 0 26px rgba(37, 99, 235, .34) !important;
}

body.public-home .future-subtitle {
    margin: 0 !important;
    max-width: 650px !important;
    color: rgba(246, 253, 255, .96) !important;
    font-size: clamp(22px, 2.1vw, 32px) !important;
    line-height: 1.22 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

body.public-home .future-hero-description {
    margin: 13px 0 0 !important;
    max-width: 570px !important;
    color: rgba(218, 242, 255, .86) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
}

body.public-home .tmap-hero-pill-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 16px !important;
}

body.public-home .tmap-hero-pill-row span {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    color: rgba(247, 253, 255, .96) !important;
    background: rgba(3, 17, 38, .44) !important;
    border: 1px solid rgba(149, 236, 255, .20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 22px rgba(0,0,0,.14) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

body.public-home .tmap-hero-pill-row i {
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, rgba(45, 212, 255, .30), rgba(37, 99, 235, .18)) !important;
    color: #dffcff !important;
}

body.public-home .future-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 22px !important;
}

body.public-home .future-actions .btn {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    padding: 11px 18px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(194, 246, 255, .34) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
}

body.public-home .future-action-primary {
    background: linear-gradient(135deg, #1d77ff 0%, #16c7ff 60%, #3ee8d2 100%) !important;
    box-shadow: 0 16px 34px rgba(29, 119, 255, .26), 0 0 22px rgba(34, 211, 238, .18) !important;
}

body.public-home .future-action-secondary {
    background: linear-gradient(135deg, rgba(8, 26, 58, .90), rgba(13, 74, 91, .78)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 30px rgba(0,0,0,.20) !important;
}

body.public-home .future-hero-visual.hero-map-image-stage {
    grid-area: visual !important;
    width: 100% !important;
    max-width: 650px !important;
    height: 340px !important;
    min-height: 340px !important;
    justify-self: center !important;
    align-self: center !important;
    padding: 16px !important;
    margin: 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 54% 48%, rgba(45, 212, 255, .18), transparent 15rem),
        linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.045)) !important;
    border: 1px solid rgba(164, 244, 255, .22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.11),
        0 20px 54px rgba(0,0,0,.22) !important;
}

body.public-home .future-hero-visual.hero-map-image-stage .hero-map-image,
body.public-home .hero-map-image-stage .hero-map-image {
    position: absolute !important;
    inset: 0 !important;
    width: 96% !important;
    height: 96% !important;
    max-width: 96% !important;
    max-height: 96% !important;
    margin: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    filter:
        saturate(1.16)
        contrast(1.08)
        brightness(1.08)
        drop-shadow(0 0 24px rgba(45, 212, 255, .32))
        drop-shadow(0 18px 36px rgba(0,0,0,.28)) !important;
}

body.public-home .hero-map-pin {
    transform: translate(-50%, -50%) scale(.86) !important;
}

body.public-home .public-stat-grid.future-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 14px 0 12px !important;
}

body.public-home .public-stat-card.future-stat-card {
    position: relative !important;
    min-height: 132px !important;
    padding: 16px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045)),
        rgba(5, 20, 43, .64) !important;
    border: 1px solid rgba(176, 235, 255, .16) !important;
    box-shadow:
        0 16px 42px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
}

body.public-home .future-stat-icon {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    margin-bottom: 12px !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    font-size: 18px !important;
    box-shadow: 0 0 24px rgba(45, 212, 255, .18), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

body.public-home .future-stat-card .public-stat-label {
    color: rgba(232, 245, 255, .88) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

body.public-home .future-stat-value {
    margin-top: 7px !important;
}

body.public-home .future-stat-value strong {
    color: #ffffff !important;
    font-size: 32px !important;
    line-height: 1 !important;
    text-shadow: 0 0 16px rgba(45, 212, 255, .22) !important;
}

body.public-home .future-stat-value span {
    color: rgba(211, 235, 255, .74) !important;
    font-size: 13px !important;
}

body.public-home .public-tab-nav.future-tab-nav {
    width: fit-content !important;
    max-width: 100% !important;
    display: inline-flex !important;
    gap: 8px !important;
    margin: 4px 0 14px !important;
    padding: 6px !important;
    border-radius: 16px !important;
    background: rgba(3, 12, 30, .54) !important;
    border: 1px solid rgba(149, 220, 255, .16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 32px rgba(0,0,0,.20) !important;
}

body.public-home .public-tab-nav.future-tab-nav a {
    min-height: 42px !important;
    padding: 9px 15px !important;
    border-radius: 12px !important;
    color: rgba(234, 247, 255, .86) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

body.public-home .public-tab-nav.future-tab-nav a.active {
    color: #06172c !important;
    background: linear-gradient(135deg, #e9fbff, #a7f3ff 58%, #c7d2fe) !important;
    border-color: rgba(226, 252, 255, .72) !important;
    box-shadow: 0 8px 20px rgba(45, 212, 255, .18), inset 0 1px 0 rgba(255,255,255,.80) !important;
}

body.public-home .public-chart-grid.future-chart-grid {
    display: grid !important;
    grid-template-columns: minmax(340px, .92fr) minmax(440px, 1.08fr) !important;
    gap: 14px !important;
}

body.public-home .public-panel.future-panel,
body.public-home .future-panel {
    border-radius: 18px !important;
    padding: 18px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
        rgba(5, 20, 43, .64) !important;
    border: 1px solid rgba(176, 235, 255, .16) !important;
    box-shadow:
        0 16px 44px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.11) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
}

body.public-home .future-section-head h2,
body.public-home .public-section-head h2,
body.public-home .future-result-head h2 {
    color: #f8fdff !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

body.public-home .future-section-head p,
body.public-home .public-section-head p,
body.public-home .future-result-head p {
    color: rgba(210, 232, 255, .72) !important;
    font-size: 13px !important;
}

body.public-home .public-donut-wrap.future-donut-wrap {
    height: 300px !important;
    min-height: 300px !important;
}

body.public-home #publicSchoolChart {
    height: 300px !important;
    max-height: 300px !important;
}

body.public-home .public-filter-form {
    grid-template-columns: repeat(4, minmax(160px, 1fr)) auto !important;
    gap: 12px !important;
}

body.public-home .public-filter-form label {
    color: rgba(237, 249, 255, .92) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body.public-home .public-filter-form .form-select,
body.public-home .public-filter-form .form-control {
    min-height: 42px !important;
    border-radius: 12px !important;
    color: #06172c !important;
    background-color: rgba(248, 253, 255, .94) !important;
    border: 1px solid rgba(181, 235, 255, .62) !important;
    font-weight: 700 !important;
}

body.public-home .public-filter-actions .btn {
    min-height: 42px !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
}

body.public-home .public-resource-grid.future-resource-grid {
    gap: 14px !important;
}

body.public-home .public-resource-card.future-resource-card {
    overflow: hidden !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
        rgba(5, 20, 43, .66) !important;
    border: 1px solid rgba(176, 235, 255, .16) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

body.public-home .public-card-cover {
    height: 176px !important;
}

body.public-home .public-card-body h3 {
    color: #f8fdff !important;
    font-size: 17px !important;
    line-height: 1.28 !important;
    letter-spacing: 0 !important;
}

body.public-home .public-card-body p,
body.public-home .public-card-meta {
    color: rgba(217, 235, 255, .74) !important;
}

body.public-home .public-visit-footer-chip {
    margin: 16px auto 8px !important;
    min-height: 36px !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(37, 99, 235, .95), rgba(20, 184, 166, .88)) !important;
    border: 1px solid rgba(194, 246, 255, .28) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.22), 0 0 18px rgba(45, 212, 255, .14) !important;
    font-size: 12px !important;
}

body.public-home .public-footer {
    margin: 0 auto 18px !important;
}

body.public-home .public-footer::before,
body.public-home .public-footer::after {
    color: rgba(226, 241, 255, .78) !important;
}

@media (max-width: 1366px) {
    body.public-home .public-navbar.future-navbar.with-top-menu {
        width: calc(100% - 22px) !important;
        margin-top: 10px !important;
        position: sticky !important;
        top: 8px !important;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    body.public-home .public-page.future-page {
        padding-inline: 12px !important;
    }

    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "content"
            "visual" !important;
        min-height: 0 !important;
        padding: 28px !important;
        gap: 22px !important;
    }

    body.public-home .future-hero-content {
        max-width: 760px !important;
    }

    body.public-home .future-hero-visual.hero-map-image-stage {
        max-width: 720px !important;
        height: 330px !important;
        min-height: 330px !important;
    }

    body.public-home .public-stat-grid.future-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.public-home .public-chart-grid.future-chart-grid {
        grid-template-columns: 1fr !important;
    }

    body.public-home .public-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    body.public-home .public-navbar.future-navbar.with-top-menu {
        width: calc(100% - 18px) !important;
        min-height: 56px !important;
        border-radius: 16px !important;
        padding: 9px 10px !important;
    }

    body.public-home .public-brand-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
    }

    body.public-home .public-brand-text {
        max-width: calc(100vw - 112px) !important;
        font-size: 11.5px !important;
        line-height: 1.2 !important;
    }

    body.public-home .public-page.future-page {
        padding: 10px 9px 18px !important;
    }

    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "content"
            "visual" !important;
        min-height: 0 !important;
        padding: 22px 16px !important;
        gap: 18px !important;
        border-radius: 20px !important;
    }

    body.public-home .future-system-badge {
        min-height: 30px !important;
        padding: 6px 10px !important;
        font-size: 10.5px !important;
        border-radius: 10px !important;
    }

    body.public-home .future-title {
        margin-top: 14px !important;
        font-size: 38px !important;
        line-height: .96 !important;
    }

    body.public-home .future-subtitle {
        font-size: 20px !important;
        line-height: 1.18 !important;
    }

    body.public-home .future-hero-description {
        font-size: 13px !important;
        line-height: 1.48 !important;
    }

    body.public-home .tmap-hero-pill-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        margin-top: 13px !important;
    }

    body.public-home .tmap-hero-pill-row span {
        width: 100% !important;
        min-height: 34px !important;
        padding: 7px 10px !important;
        font-size: 12px !important;
    }

    body.public-home .future-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 16px !important;
    }

    body.public-home .future-actions .btn {
        width: 100% !important;
        min-height: 46px !important;
    }

    body.public-home .future-hero-visual.hero-map-image-stage {
        height: 235px !important;
        min-height: 235px !important;
        border-radius: 18px !important;
        padding: 10px !important;
    }

    body.public-home .hero-map-pin {
        transform: translate(-50%, -50%) scale(.64) !important;
    }

    body.public-home .public-stat-grid.future-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        margin-top: 10px !important;
    }

    body.public-home .public-stat-card.future-stat-card {
        min-height: 112px !important;
        padding: 12px 10px !important;
        border-radius: 16px !important;
    }

    body.public-home .future-stat-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 11px !important;
        font-size: 15px !important;
        margin-bottom: 8px !important;
    }

    body.public-home .future-stat-card .public-stat-label {
        font-size: 11.5px !important;
    }

    body.public-home .future-stat-value strong {
        font-size: 26px !important;
    }

    body.public-home .public-tab-nav.future-tab-nav {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        border-radius: 16px !important;
    }

    body.public-home .public-tab-nav.future-tab-nav a {
        width: 100% !important;
        justify-content: center !important;
    }

    body.public-home .public-chart-grid.future-chart-grid,
    body.public-home .future-chart-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.public-home .public-panel.future-panel,
    body.public-home .future-panel {
        padding: 14px 12px !important;
        border-radius: 16px !important;
    }

    body.public-home .future-section-head h2,
    body.public-home .public-section-head h2,
    body.public-home .future-result-head h2 {
        font-size: 15px !important;
    }

    body.public-home .public-donut-wrap.future-donut-wrap {
        height: 245px !important;
        min-height: 245px !important;
    }

    body.public-home #publicSchoolChart {
        height: 300px !important;
        max-height: 300px !important;
    }

    body.public-home .public-filter-form {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.public-home .public-filter-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    body.public-home .public-resource-grid.future-resource-grid,
    body.public-home .public-resource-grid {
        grid-template-columns: 1fr !important;
    }

    body.public-home .public-card-cover {
        height: 170px !important;
    }

    body.public-home .public-visit-footer-chip {
        max-width: calc(100% - 20px) !important;
        min-height: 32px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 390px) {
    body.public-home .future-title {
        font-size: 34px !important;
    }

    body.public-home .future-subtitle {
        font-size: 18px !important;
    }

    body.public-home .future-hero-visual.hero-map-image-stage {
        height: 212px !important;
        min-height: 212px !important;
    }

    body.public-home .public-stat-card.future-stat-card {
        min-height: 106px !important;
    }
}

/* ===== v116: larger public map visual and front-layer mobile menu button ===== */
@media (min-width: 1200px) {
    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
        grid-template-columns: minmax(380px, .78fr) minmax(650px, 1.22fr) !important;
        align-items: stretch !important;
    }
}

body.public-home .future-hero-visual.hero-map-image-stage {
    max-width: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 360px !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    padding: 8px !important;
}

body.public-home .future-hero-visual.hero-map-image-stage::before,
body.public-home .hero-map-image-stage::before {
    inset: 4px !important;
}

body.public-home .future-hero-visual.hero-map-image-stage .hero-map-image,
body.public-home .hero-map-image-stage .hero-map-image {
    width: 112% !important;
    height: 112% !important;
    max-width: 112% !important;
    max-height: 112% !important;
    transform: scale(1.04) translateY(-1%) !important;
}

body.public-home .hero-map-pin {
    transform: translate(-50%, -50%) scale(.96) !important;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    body.public-home .future-hero-visual.hero-map-image-stage {
        min-height: 360px !important;
        height: 360px !important;
        padding: 7px !important;
    }

    body.public-home .future-hero-visual.hero-map-image-stage .hero-map-image,
    body.public-home .hero-map-image-stage .hero-map-image {
        width: 114% !important;
        height: 114% !important;
        max-width: 114% !important;
        max-height: 114% !important;
    }

    body.public-home .hero-map-pin {
        transform: translate(-50%, -50%) scale(.84) !important;
    }
}

@media (max-width: 767.98px) {
    body.public-home .public-navbar.future-navbar.with-top-menu {
        position: sticky !important;
        z-index: 2200 !important;
        isolation: isolate !important;
    }

    body.public-home .future-top-menu-inline.grouped-menu {
        z-index: 2240 !important;
    }

    body.public-home .tmap-mobile-backdrop {
        z-index: 2180 !important;
    }

    body.public-home .tmap-menu-toggle {
        position: relative !important;
        z-index: 2300 !important;
        transform: translateZ(0) !important;
        background:
            radial-gradient(circle at 28% 18%, rgba(255,255,255,.36), transparent 28%),
            linear-gradient(135deg, rgba(13, 43, 92, .98), rgba(3, 12, 32, .98)) !important;
        border-color: rgba(183, 242, 255, .42) !important;
        box-shadow:
            0 0 0 1px rgba(119, 229, 255, .18),
            0 0 28px rgba(45, 212, 255, .34),
            0 16px 36px rgba(0, 0, 0, .36),
            inset 0 1px 0 rgba(255,255,255,.18) !important;
    }

    body.public-home.tmap-menu-open .tmap-menu-toggle {
        position: fixed !important;
        top: calc(env(safe-area-inset-top, 0px) + 20px) !important;
        right: 22px !important;
        z-index: 2300 !important;
    }

    body.public-home .tmap-menu-toggle span {
        z-index: 2 !important;
        background: #ffffff !important;
        box-shadow: 0 0 12px rgba(125, 249, 255, .78) !important;
    }

    body.public-home .future-hero-visual.hero-map-image-stage {
        height: 260px !important;
        min-height: 260px !important;
        padding: 6px !important;
    }

    body.public-home .future-hero-visual.hero-map-image-stage .hero-map-image,
    body.public-home .hero-map-image-stage .hero-map-image {
        width: 118% !important;
        height: 118% !important;
        max-width: 118% !important;
        max-height: 118% !important;
        transform: scale(1.06) translateY(-1%) !important;
    }

    body.public-home .hero-map-pin {
        transform: translate(-50%, -50%) scale(.72) !important;
    }
}

@media (max-width: 390px) {
    body.public-home .future-hero-visual.hero-map-image-stage {
        height: 246px !important;
        min-height: 246px !important;
    }
}

/* ===== v117: beat older #hero-map-zone map locks ===== */
@media (min-width: 1200px) {
    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
        grid-template-columns: minmax(380px, .76fr) minmax(700px, 1.24fr) !important;
        min-height: 450px !important;
        align-items: stretch !important;
    }

    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
        align-self: stretch !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: clamp(360px, 28vw, 430px) !important;
        max-height: none !important;
        padding: 6px !important;
    }
}

body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
    max-width: none !important;
    overflow: hidden !important;
}

body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage .hero-map-image,
body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone img.hero-map-image {
    width: 104% !important;
    height: 104% !important;
    max-width: 104% !important;
    max-height: 104% !important;
    transform: none !important;
    object-fit: contain !important;
    object-position: center !important;
}

body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .hero-map-pin {
    transform: translate(-50%, -50%) scale(.92) !important;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
        width: 100% !important;
        max-width: none !important;
        height: 380px !important;
        min-height: 380px !important;
        max-height: none !important;
        padding: 6px !important;
    }

    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .hero-map-pin {
        transform: translate(-50%, -50%) scale(.82) !important;
    }
}

@media (max-width: 767.98px) {
    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
        width: 100% !important;
        max-width: none !important;
        height: 270px !important;
        min-height: 270px !important;
        max-height: none !important;
        padding: 5px !important;
    }

    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage .hero-map-image,
    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone img.hero-map-image {
        width: 110% !important;
        height: 110% !important;
        max-width: 110% !important;
        max-height: 110% !important;
        transform: none !important;
    }

    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .hero-map-pin {
        transform: translate(-50%, -50%) scale(.68) !important;
    }
}

@media (max-width: 390px) {
    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
        height: 258px !important;
        min-height: 258px !important;
    }
}

/* ===== v119: shrink desktop menu rail to button group ===== */
@media (min-width: 1367px) {
    body.public-home .public-navbar.future-navbar.with-top-menu {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    body.public-home .future-top-menu-inline.grouped-menu {
        width: fit-content !important;
        max-width: none !important;
        justify-self: end !important;
        justify-content: flex-end !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }
}

/* ===== v120: clearer public background like login ===== */
body.public-home.future-home {
    background: #061322 !important;
}

body.public-home .tmap-public-page-bg,
body.public-home .tmap-page-bg.tmap-public-page-bg,
body.public-home .tmap-bg-slideshow.tmap-public-page-bg {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    opacity: .78 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    filter: none !important;
}

body.public-home .tmap-public-page-bg span,
body.public-home .tmap-page-bg.tmap-public-page-bg span,
body.public-home .tmap-bg-slideshow.tmap-public-page-bg span {
    inset: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    filter: saturate(1.10) contrast(1.05) brightness(1.02) !important;
}

body.public-home .tmap-public-page-bg::after,
body.public-home .tmap-page-bg.tmap-public-page-bg::after,
body.public-home .tmap-bg-slideshow.tmap-public-page-bg::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background:
        linear-gradient(135deg, rgba(2, 8, 22, .28), rgba(4, 24, 58, .10)),
        radial-gradient(circle at 70% 38%, rgba(0, 229, 255, .13), transparent 32rem) !important;
}

body.public-home.future-home::before {
    background:
        linear-gradient(rgba(125, 247, 255, .030) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 247, 255, .026) 1px, transparent 1px),
        radial-gradient(circle at 50% 0%, rgba(45, 212, 255, .07), transparent 34rem) !important;
    background-size: 34px 34px, 34px 34px, auto !important;
    opacity: .70 !important;
}

/* ===== v121: cleaner mobile hamburger button ===== */
@media (max-width: 1366px) {
    body.public-home .tmap-menu-toggle {
        width: 46px !important;
        height: 46px !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 0 !important;
        border-radius: 15px !important;
        overflow: hidden !important;
        border: 1px solid rgba(172, 239, 255, .38) !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.045)),
            linear-gradient(135deg, rgba(20, 64, 120, .98), rgba(6, 21, 52, .98)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.18),
            inset 0 -12px 18px rgba(0,0,0,.18),
            0 10px 22px rgba(0,0,0,.28),
            0 0 18px rgba(45,212,255,.18) !important;
    }

    body.public-home .tmap-menu-toggle::before {
        inset: 0 !important;
        height: 100% !important;
        background:
            radial-gradient(circle at 30% 18%, rgba(255,255,255,.32), transparent 28%),
            linear-gradient(180deg, rgba(255,255,255,.10), transparent 55%) !important;
        opacity: 1 !important;
    }

    body.public-home .tmap-menu-toggle span {
        position: relative !important;
        z-index: 2 !important;
        display: block !important;
        width: 21px !important;
        height: 2.5px !important;
        flex: 0 0 2.5px !important;
        border-radius: 999px !important;
        margin: 0 !important;
        background: #f4fdff !important;
        box-shadow: 0 0 8px rgba(125,249,255,.62) !important;
        opacity: 1 !important;
        transform: none !important;
        transition: transform .18s ease, opacity .18s ease, width .18s ease !important;
    }

    body.public-home .tmap-menu-toggle span:nth-child(2) {
        width: 16px !important;
        align-self: center !important;
    }

    body.public-home .tmap-menu-toggle.is-open {
        gap: 0 !important;
        border-color: rgba(255, 211, 126, .70) !important;
        background:
            radial-gradient(circle at 34% 20%, rgba(255,255,255,.26), transparent 30%),
            linear-gradient(135deg, rgba(24, 72, 135, .98), rgba(11, 30, 69, .98)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.20),
            0 0 0 1px rgba(255, 211, 126, .20),
            0 0 22px rgba(255, 211, 126, .35),
            0 12px 28px rgba(0,0,0,.34) !important;
    }

    body.public-home .tmap-menu-toggle.is-open span {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 22px !important;
        background: #ffffff !important;
    }

    body.public-home .tmap-menu-toggle.is-open span:nth-child(1) {
        transform: translate(-50%, -50%) rotate(45deg) !important;
    }

    body.public-home .tmap-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
        transform: translate(-50%, -50%) scaleX(.2) !important;
    }

    body.public-home .tmap-menu-toggle.is-open span:nth-child(3) {
        transform: translate(-50%, -50%) rotate(-45deg) !important;
    }

    body.public-home.tmap-menu-open .tmap-menu-toggle {
        top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
        right: 22px !important;
    }
}

/* ===== v122: keep mobile hero/map inside phone edges ===== */
@media (max-width: 767.98px) {
    body.public-home,
    body.public-home.future-home {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.public-home .public-navbar.future-navbar.with-top-menu,
    body.public-home .public-page.future-page {
        width: calc(100% - 18px) !important;
        max-width: calc(100% - 18px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    body.public-home .public-page.future-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone,
    body.public-home .public-stat-grid.future-stat-grid,
    body.public-home .public-tab-nav.future-tab-nav,
    body.public-home .public-panel.future-panel,
    body.public-home .future-panel,
    body.public-home .public-resource-grid.future-resource-grid {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-content,
    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-meta,
    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .public-hero-actions.future-actions {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
        width: 100% !important;
        max-width: 100% !important;
        height: 250px !important;
        min-height: 250px !important;
        padding: 10px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage .hero-map-image,
    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone img.hero-map-image {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: auto !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform: none !important;
    }

    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .hero-map-pin {
        transform: translate(-50%, -50%) scale(.62) !important;
    }

    body.public-home .public-stat-grid.future-stat-grid {
        gap: 8px !important;
    }

    body.public-home .public-stat-card.future-stat-card {
        min-width: 0 !important;
        padding-left: 9px !important;
        padding-right: 9px !important;
    }
}

@media (max-width: 390px) {
    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
        height: 238px !important;
        min-height: 238px !important;
    }
}

/* ===== v123: tighten space below public hero map ===== */
@media (min-width: 1200px) {
    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
        min-height: 0 !important;
        padding: clamp(22px, 2.4vw, 34px) !important;
        align-items: center !important;
    }

    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
        align-self: center !important;
        min-height: clamp(360px, 28vw, 405px) !important;
        height: clamp(360px, 28vw, 405px) !important;
        max-height: 405px !important;
    }

    body.public-home .public-stat-grid.future-stat-grid {
        margin-top: 6px !important;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
        padding: 20px !important;
        gap: 14px !important;
    }

    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
        height: 330px !important;
        min-height: 330px !important;
    }

    body.public-home .public-stat-grid.future-stat-grid {
        margin-top: 6px !important;
    }
}

@media (max-width: 767.98px) {
    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
        gap: 12px !important;
        padding-top: 18px !important;
        padding-bottom: 14px !important;
    }

    body.public-home .public-stat-grid.future-stat-grid {
        margin-top: 6px !important;
    }
}

/* ===== v124: pull map lower and close hero bottom gap ===== */
@media (min-width: 1200px) {
    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
        padding-top: clamp(22px, 2.3vw, 34px) !important;
        padding-bottom: clamp(14px, 1.5vw, 22px) !important;
    }

    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
        align-self: end !important;
    }

    body.public-home .public-stat-grid.future-stat-grid {
        margin-top: 4px !important;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
        padding-bottom: 14px !important;
    }

    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .future-hero-visual.hero-map-image-stage {
        align-self: end !important;
    }
}

/* ===== v125: compact desktop hero total height ===== */
@media (min-width: 1200px) {
    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone {
        box-sizing: border-box !important;
        height: clamp(448px, 32vw, 464px) !important;
        min-height: 0 !important;
        max-height: 464px !important;
    }

    body.public-home main.public-page.future-page > .public-stat-grid.future-stat-grid {
        margin-top: 4px !important;
    }
}

/* ===== v126: clickable public cards, grouped search results, and public detail view ===== */
body.public-home a.public-resource-card.future-resource-card,
body.public-home a.public-resource-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer !important;
    outline: none !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

body.public-home a.public-resource-card.future-resource-card:hover,
body.public-home a.public-resource-card.future-resource-card:focus-visible {
    transform: translateY(-5px) !important;
    border-color: rgba(125, 249, 255, .42) !important;
    box-shadow:
        0 22px 52px rgba(0, 0, 0, .28),
        0 0 0 1px rgba(125, 249, 255, .16),
        0 0 30px rgba(45, 212, 255, .18),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
}

body.public-home a.public-resource-card.future-resource-card:focus-visible {
    box-shadow:
        0 0 0 3px rgba(190, 242, 255, .72),
        0 22px 52px rgba(0, 0, 0, .28),
        0 0 30px rgba(45, 212, 255, .18) !important;
}

body.public-home .public-resource-card.future-resource-card .public-card-body {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
}

body.public-home .public-resource-card.future-resource-card .public-card-body p {
    flex: 1 1 auto !important;
}

body.public-home .public-card-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-top: 10px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    color: #dcfbff !important;
    background: rgba(14, 45, 86, .78) !important;
    border: 1px solid rgba(125, 249, 255, .22) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

body.public-home a.public-resource-card.future-resource-card:hover .public-card-cta,
body.public-home a.public-resource-card.future-resource-card:focus-visible .public-card-cta {
    color: #06172c !important;
    background: linear-gradient(135deg, #e9fbff, #8df5ff) !important;
    border-color: rgba(226, 252, 255, .75) !important;
}

body.public-home .public-category-group-list {
    display: grid !important;
    gap: 24px !important;
    margin-top: 12px !important;
}

body.public-home .public-category-group {
    padding: 2px 0 20px !important;
    color: inherit !important;
    background: transparent !important;
    border-top: 1px solid rgba(176, 235, 255, .18) !important;
}

body.public-home .public-category-group:first-child {
    border-top: 0 !important;
}

body.public-home .public-category-group-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

body.public-home .public-category-group-title {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 12px !important;
}

body.public-home .public-category-group-icon {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #24c6ff, #4f46e5) !important;
    box-shadow: 0 0 24px rgba(45, 212, 255, .22), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

body.public-home .public-category-group.public-group-person .public-category-group-icon {
    background: linear-gradient(135deg, #22c55e, #0891b2) !important;
}

body.public-home .public-category-group.public-group-innovation .public-category-group-icon {
    background: linear-gradient(135deg, #facc15, #f97316) !important;
}

body.public-home .public-category-group.public-group-place .public-category-group-icon {
    background: linear-gradient(135deg, #fb7185, #8b5cf6) !important;
}

body.public-home .public-category-group-title h3 {
    margin: 0 !important;
    color: #f8fdff !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

body.public-home .public-category-group-title p {
    margin: 2px 0 0 !important;
    color: rgba(210, 232, 255, .72) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

body.public-home .public-category-group-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    color: #dffbff !important;
    text-decoration: none !important;
    background: rgba(3, 12, 30, .48) !important;
    border: 1px solid rgba(125, 249, 255, .22) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body.public-home .public-category-group-link:hover,
body.public-home .public-category-group-link:focus-visible {
    color: #06172c !important;
    background: linear-gradient(135deg, #e9fbff, #8df5ff) !important;
    border-color: rgba(226, 252, 255, .72) !important;
}

body.public-home .public-category-resource-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.public-home .public-category-empty {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 76px !important;
    padding: 16px !important;
    border-radius: 16px !important;
    color: rgba(219, 239, 255, .76) !important;
    background: rgba(3, 12, 30, .36) !important;
    border: 1px dashed rgba(176, 235, 255, .22) !important;
    font-weight: 800 !important;
}

body.public-home .public-detail-shell {
    scroll-margin-top: 110px !important;
    padding: 22px !important;
    overflow: hidden !important;
}

body.public-home .public-detail-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

body.public-home .public-back-link,
body.public-home .public-detail-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: #e5fbff !important;
    text-decoration: none !important;
    font-weight: 900 !important;
}

body.public-home .public-back-link {
    min-height: 38px !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    background: rgba(3, 12, 30, .42) !important;
    border: 1px solid rgba(176, 235, 255, .18) !important;
}

body.public-home .public-back-link:hover,
body.public-home .public-back-link:focus-visible {
    color: #06172c !important;
    background: linear-gradient(135deg, #e9fbff, #8df5ff) !important;
}

body.public-home .public-detail-layout {
    display: grid !important;
    grid-template-columns: minmax(320px, .92fr) minmax(0, 1.08fr) !important;
    gap: 20px !important;
    align-items: stretch !important;
}

body.public-home .public-detail-media {
    min-height: 320px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: rgba(3, 12, 30, .45) !important;
    border: 1px solid rgba(176, 235, 255, .18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
}

body.public-home .public-detail-media img {
    width: 100% !important;
    height: 100% !important;
    min-height: 320px !important;
    object-fit: cover !important;
}

body.public-home .public-detail-content {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

body.public-home .public-detail-kicker {
    width: fit-content !important;
    max-width: 100% !important;
    margin-bottom: 10px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    color: #7df9ff !important;
    background: rgba(125, 249, 255, .12) !important;
    border: 1px solid rgba(125, 249, 255, .22) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

body.public-home .public-detail-content h2 {
    margin: 0 0 10px !important;
    color: #ffffff !important;
    font-size: clamp(24px, 3vw, 38px) !important;
    line-height: 1.16 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

body.public-home .public-detail-summary {
    margin: 0 0 16px !important;
    color: rgba(221, 240, 255, .82) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

body.public-home .public-detail-meta-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.public-home .public-detail-meta-grid > div {
    min-width: 0 !important;
    padding: 12px !important;
    border-radius: 14px !important;
    background: rgba(3, 12, 30, .40) !important;
    border: 1px solid rgba(176, 235, 255, .16) !important;
}

body.public-home .public-detail-meta-grid i {
    color: #7df9ff !important;
    margin-bottom: 8px !important;
}

body.public-home .public-detail-meta-grid span {
    display: block !important;
    color: rgba(210, 232, 255, .62) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

body.public-home .public-detail-meta-grid strong {
    display: block !important;
    margin-top: 2px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}

body.public-home .public-detail-action-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 16px !important;
}

body.public-home .public-detail-action {
    min-height: 42px !important;
    padding: 9px 14px !important;
    border-radius: 999px !important;
    background: rgba(3, 12, 30, .46) !important;
    border: 1px solid rgba(176, 235, 255, .20) !important;
}

body.public-home .public-detail-action.primary {
    color: #06172c !important;
    background: linear-gradient(135deg, #e9fbff, #8df5ff 56%, #67e8f9) !important;
    border-color: rgba(226, 252, 255, .75) !important;
}

body.public-home .public-detail-info-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr) !important;
    gap: 14px !important;
    margin-top: 18px !important;
}

body.public-home .public-detail-info,
body.public-home .public-detail-gallery {
    padding-top: 16px !important;
    border-top: 1px solid rgba(176, 235, 255, .16) !important;
}

body.public-home .public-detail-info h3,
body.public-home .public-detail-gallery h3 {
    margin: 0 0 8px !important;
    color: #f8fdff !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
}

body.public-home .public-detail-info h3 i,
body.public-home .public-detail-gallery h3 i {
    color: #7df9ff !important;
    margin-right: 6px !important;
}

body.public-home .public-detail-info p {
    margin: 0 !important;
    color: rgba(221, 240, 255, .78) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

body.public-home .public-detail-gallery {
    margin-top: 18px !important;
}

body.public-home .public-detail-gallery > div {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.public-home .public-detail-gallery a {
    display: block !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    border: 1px solid rgba(176, 235, 255, .18) !important;
    background: rgba(3, 12, 30, .38) !important;
}

body.public-home .public-detail-gallery img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

@media (max-width: 991.98px) {
    body.public-home .public-category-resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.public-home .public-detail-layout,
    body.public-home .public-detail-info-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767.98px) {
    body.public-home .public-category-group-list {
        gap: 18px !important;
    }

    body.public-home .public-category-group-head,
    body.public-home .public-detail-toolbar {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    body.public-home .public-category-group-link,
    body.public-home .public-back-link {
        width: 100% !important;
    }

    body.public-home .public-category-resource-grid {
        grid-template-columns: 1fr !important;
    }

    body.public-home .public-category-group-title h3 {
        font-size: 17px !important;
    }

    body.public-home .public-detail-shell {
        scroll-margin-top: 92px !important;
        padding: 14px 12px !important;
    }

    body.public-home .public-detail-media,
    body.public-home .public-detail-media img {
        min-height: 220px !important;
    }

    body.public-home .public-detail-content h2 {
        font-size: 23px !important;
    }

    body.public-home .public-detail-summary {
        font-size: 14px !important;
    }

    body.public-home .public-detail-meta-grid,
    body.public-home .public-detail-gallery > div {
        grid-template-columns: 1fr !important;
    }

    body.public-home .public-detail-action {
        width: 100% !important;
    }
}

/* ===== v128: compact grouped search result cards ===== */
body.public-home .public-category-resource-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 292px)) !important;
    justify-content: start !important;
    align-items: start !important;
    gap: 12px !important;
}

body.public-home .public-category-resource-grid .public-resource-card.future-resource-card {
    width: 100% !important;
    max-width: 292px !important;
    min-height: 0 !important;
}

body.public-home .public-category-resource-grid .public-card-cover {
    height: 124px !important;
}

body.public-home .public-category-resource-grid .public-card-body {
    padding: 10px 12px 12px !important;
}

body.public-home .public-category-resource-grid .category-badge {
    min-height: 22px !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
}

body.public-home .public-category-resource-grid .public-view-count {
    min-height: 22px !important;
    padding: 3px 7px !important;
    font-size: 11px !important;
}

body.public-home .public-category-resource-grid .public-card-body h3 {
    margin-bottom: 4px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
}

body.public-home .public-category-resource-grid .public-card-body p {
    min-height: 0 !important;
    margin-bottom: 7px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

body.public-home .public-category-resource-grid .public-card-meta {
    gap: 3px !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
}

body.public-home .public-category-resource-grid .public-card-cta {
    margin-top: 8px !important;
    padding: 6px 9px !important;
    font-size: 11.5px !important;
}

@media (max-width: 767.98px) {
    body.public-home .public-category-resource-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.public-home .public-category-resource-grid .public-resource-card.future-resource-card {
        max-width: 100% !important;
    }

    body.public-home .public-category-resource-grid .public-card-cover {
        height: 132px !important;
    }
}

/* ===== v129: four compact cards per row on desktop ===== */
@media (min-width: 1200px) {
    body.public-home .public-category-resource-grid {
        grid-template-columns: repeat(4, minmax(0, 278px)) !important;
        justify-content: start !important;
        gap: 12px !important;
    }

    body.public-home .public-category-resource-grid .public-resource-card.future-resource-card {
        width: 100% !important;
        max-width: none !important;
    }

    body.public-home .public-category-resource-grid .public-card-cover {
        height: 116px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    body.public-home .public-category-resource-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    body.public-home .public-category-resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ===== v130: richer hover effects for public resource cards ===== */
body.public-home a.public-resource-card.future-resource-card {
    isolation: isolate !important;
    overflow: hidden !important;
    will-change: transform, box-shadow !important;
    transition:
        transform .22s cubic-bezier(.2, .8, .2, 1),
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease !important;
}

body.public-home a.public-resource-card.future-resource-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateX(-135%) skewX(-14deg) !important;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 38%,
        rgba(255, 255, 255, .34) 48%,
        rgba(125, 249, 255, .22) 53%,
        transparent 64%,
        transparent 100%
    ) !important;
    transition: transform .58s ease, opacity .22s ease !important;
}

body.public-home a.public-resource-card.future-resource-card::after {
    content: "" !important;
    position: absolute !important;
    inset: -1px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    border-radius: inherit !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(125, 249, 255, .22), transparent 34%),
        radial-gradient(circle at 100% 22%, rgba(96, 165, 250, .20), transparent 36%) !important;
    transition: opacity .22s ease !important;
}

body.public-home a.public-resource-card.future-resource-card > * {
    position: relative !important;
    z-index: 1 !important;
}

body.public-home a.public-resource-card.future-resource-card .public-card-cover img {
    transition: transform .42s ease, filter .42s ease !important;
}

body.public-home a.public-resource-card.future-resource-card .public-card-cta i {
    transition: transform .2s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    body.public-home a.public-resource-card.future-resource-card:hover {
        transform: translateY(-7px) scale(1.018) !important;
        border-color: rgba(125, 249, 255, .62) !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.055)),
            rgba(5, 20, 43, .76) !important;
        box-shadow:
            0 24px 58px rgba(0, 0, 0, .34),
            0 0 0 1px rgba(125, 249, 255, .22),
            0 0 34px rgba(45, 212, 255, .28),
            inset 0 1px 0 rgba(255,255,255,.16) !important;
    }

    body.public-home a.public-resource-card.future-resource-card:hover::before {
        opacity: 1 !important;
        transform: translateX(135%) skewX(-14deg) !important;
    }

    body.public-home a.public-resource-card.future-resource-card:hover::after {
        opacity: 1 !important;
    }

    body.public-home a.public-resource-card.future-resource-card:hover .public-card-cover img {
        transform: scale(1.075) !important;
        filter: saturate(1.12) contrast(1.06) brightness(1.04) !important;
    }

    body.public-home a.public-resource-card.future-resource-card:hover .public-card-cta i {
        transform: translateX(3px) !important;
    }
}

body.public-home a.public-resource-card.future-resource-card:focus-visible {
    transform: translateY(-5px) !important;
}

/* ===== v131: clearer empty state and stronger card wow hover ===== */
body.public-home .public-empty.future-panel,
body.public-home .public-empty {
    position: relative !important;
    overflow: hidden !important;
    padding: 42px 18px !important;
    color: rgba(230, 246, 255, .90) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(125, 249, 255, .14), transparent 36%),
        linear-gradient(180deg, rgba(8, 25, 52, .86), rgba(3, 12, 30, .78)) !important;
    border: 1px solid rgba(176, 235, 255, .28) !important;
    box-shadow:
        0 20px 48px rgba(0,0,0,.24),
        0 0 0 1px rgba(125, 249, 255, .08),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
}

body.public-home .public-empty::before {
    content: "" !important;
    position: absolute !important;
    inset: 12px !important;
    pointer-events: none !important;
    border-radius: 14px !important;
    border: 1px solid rgba(125, 249, 255, .12) !important;
}

body.public-home .public-empty i {
    color: #bff7ff !important;
    opacity: 1 !important;
    text-shadow: 0 0 22px rgba(125, 249, 255, .48) !important;
}

body.public-home .public-empty h3 {
    position: relative !important;
    color: #ffffff !important;
    font-size: clamp(20px, 2vw, 28px) !important;
    line-height: 1.25 !important;
    text-shadow: 0 2px 18px rgba(0,0,0,.42), 0 0 20px rgba(125, 249, 255, .16) !important;
}

body.public-home .public-empty p {
    position: relative !important;
    color: rgba(221, 240, 255, .84) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 12px rgba(0,0,0,.34) !important;
}

body.public-home a.public-resource-card.future-resource-card .public-card-cover {
    position: relative !important;
    overflow: hidden !important;
}

body.public-home a.public-resource-card.future-resource-card .public-card-cover::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 0 0 0 !important;
    height: 46% !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background:
        linear-gradient(180deg, transparent, rgba(7, 16, 33, .34)),
        radial-gradient(circle at 50% 100%, rgba(125, 249, 255, .32), transparent 58%) !important;
    transition: opacity .26s ease !important;
}

body.public-home a.public-resource-card.future-resource-card .category-badge,
body.public-home a.public-resource-card.future-resource-card .public-view-count,
body.public-home a.public-resource-card.future-resource-card .public-card-body h3,
body.public-home a.public-resource-card.future-resource-card .public-card-cta {
    transition:
        transform .22s ease,
        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        text-shadow .22s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    body.public-home a.public-resource-card.future-resource-card:hover {
        transform: translateY(-12px) scale(1.035) !important;
        border-color: rgba(157, 249, 255, .86) !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.075)),
            rgba(6, 24, 50, .88) !important;
        box-shadow:
            0 30px 70px rgba(0, 0, 0, .42),
            0 0 0 1px rgba(198, 250, 255, .26),
            0 0 34px rgba(45, 212, 255, .38),
            0 0 74px rgba(59, 130, 246, .18),
            inset 0 1px 0 rgba(255,255,255,.20) !important;
    }

    body.public-home a.public-resource-card.future-resource-card:hover::before {
        transition-duration: .72s !important;
        background: linear-gradient(
            105deg,
            transparent 0%,
            transparent 34%,
            rgba(255, 255, 255, .52) 48%,
            rgba(125, 249, 255, .36) 54%,
            transparent 68%,
            transparent 100%
        ) !important;
    }

    body.public-home a.public-resource-card.future-resource-card:hover .public-card-cover::after {
        opacity: 1 !important;
    }

    body.public-home a.public-resource-card.future-resource-card:hover .public-card-cover img {
        transform: scale(1.12) !important;
        filter: saturate(1.22) contrast(1.10) brightness(1.08) !important;
    }

    body.public-home a.public-resource-card.future-resource-card:hover .category-badge {
        transform: translateY(-2px) !important;
        box-shadow: 0 0 18px rgba(125, 249, 255, .18) !important;
    }

    body.public-home a.public-resource-card.future-resource-card:hover .public-view-count {
        transform: translateY(-2px) scale(1.04) !important;
        box-shadow: 0 0 16px rgba(251, 191, 36, .28) !important;
    }

    body.public-home a.public-resource-card.future-resource-card:hover .public-card-body h3 {
        color: #ffffff !important;
        text-shadow: 0 0 18px rgba(125, 249, 255, .32) !important;
        transform: translateX(2px) !important;
    }

    body.public-home a.public-resource-card.future-resource-card:hover .public-card-cta {
        transform: translateY(-1px) !important;
        color: #041527 !important;
        background: linear-gradient(135deg, #ffffff, #8df5ff 56%, #60a5fa) !important;
        border-color: rgba(226, 252, 255, .86) !important;
        box-shadow: 0 10px 22px rgba(45, 212, 255, .22), 0 0 18px rgba(125, 249, 255, .28) !important;
    }

    body.public-home a.public-resource-card.future-resource-card:hover .public-card-cta i {
        transform: translateX(5px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.public-home a.public-resource-card.future-resource-card,
    body.public-home a.public-resource-card.future-resource-card *,
    body.public-home a.public-resource-card.future-resource-card::before,
    body.public-home a.public-resource-card.future-resource-card::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ===== v132: category-specific resource fields and documents ===== */
.resource-extra-panel {
    display: grid;
    gap: 14px;
}

.resource-extra-panel[hidden] {
    display: none !important;
}

.resource-extra-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(37, 99, 235, .12);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(239, 246, 255, .96), rgba(236, 254, 255, .82));
}

.resource-extra-title i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    box-shadow: 0 12px 24px rgba(37, 99, 235, .18);
}

.resource-extra-title h4 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
}

.resource-extra-title p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.resource-extra-block {
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
}

.resource-extra-block h5 {
    margin: 0 0 12px;
    color: #1e293b;
    font-size: 16px;
    font-weight: 900;
}

.document-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.document-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    background: #fff;
    border: 1px solid rgba(239, 68, 68, .18);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

.document-chip i {
    color: #dc2626;
}

.document-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-chip:hover {
    color: #991b1b;
    border-color: rgba(239, 68, 68, .34);
    box-shadow: 0 12px 26px rgba(239, 68, 68, .12);
}

body.public-home .public-detail-extra,
body.public-home .public-detail-documents {
    margin-top: 18px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(176, 235, 255, .16) !important;
}

body.public-home .public-detail-extra h3,
body.public-home .public-detail-documents h3 {
    margin: 0 0 10px !important;
    color: #f8fdff !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
}

body.public-home .public-detail-extra h3 i,
body.public-home .public-detail-documents h3 i {
    color: #7df9ff !important;
    margin-right: 6px !important;
}

body.public-home .public-detail-extra-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.public-home .public-detail-extra-grid > div {
    min-width: 0 !important;
    padding: 12px !important;
    border-radius: 14px !important;
    background: rgba(3, 12, 30, .40) !important;
    border: 1px solid rgba(176, 235, 255, .16) !important;
}

body.public-home .public-detail-extra-grid > div.wide {
    grid-column: 1 / -1 !important;
}

body.public-home .public-detail-extra-grid strong {
    display: block !important;
    margin-bottom: 5px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body.public-home .public-detail-extra-grid p {
    margin: 0 !important;
    color: rgba(221, 240, 255, .78) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
}

body.public-home .document-chip {
    color: #eaffff !important;
    background: rgba(3, 12, 30, .44) !important;
    border-color: rgba(176, 235, 255, .20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.public-home .document-chip i {
    color: #ff8a8a !important;
}

body.public-home .document-chip:hover {
    color: #06172c !important;
    background: linear-gradient(135deg, #ffffff, #8df5ff) !important;
}

@media (max-width: 767.98px) {
    .resource-extra-title {
        align-items: flex-start;
        padding: 12px;
    }

    .resource-extra-block {
        padding: 12px;
    }

    body.public-home .public-detail-extra-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===== v133: public source detail layout inspired by learning source portals ===== */
body.public-home .public-source-detail {
    width: min(100%, 1220px) !important;
    margin: 0 auto 24px !important;
    color: #111827 !important;
}

body.public-home .public-source-hero {
    position: relative !important;
    min-height: 245px !important;
    overflow: hidden !important;
    border-radius: 0 0 22px 22px !important;
    background:
        linear-gradient(90deg, rgba(47, 16, 112, .94), rgba(88, 28, 135, .78) 48%, rgba(47, 16, 112, .92)),
        var(--detail-cover) center / cover no-repeat !important;
    border-bottom: 4px solid #facc15 !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.28) !important;
}

body.public-home .public-source-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(circle at 14% 16%, rgba(250, 204, 21, .24), transparent 24%),
        linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.28)) !important;
}

body.public-home .public-source-hero-inner {
    position: relative !important;
    z-index: 1 !important;
    min-height: 245px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 18px !important;
    padding: 28px clamp(18px, 4vw, 52px) !important;
}

body.public-home .public-source-back {
    width: fit-content !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 36px !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    color: #fffbe8 !important;
    text-decoration: none !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body.public-home .public-source-back:hover {
    color: #3b0764 !important;
    background: #facc15 !important;
}

body.public-home .public-source-hero-copy {
    max-width: 760px !important;
}

body.public-home .public-source-hero-copy .category-badge {
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(255,255,255,.74) !important;
}

body.public-home .public-source-hero h1 {
    margin: 12px 0 8px !important;
    color: #ffffff !important;
    font-size: clamp(30px, 4.2vw, 54px) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 5px 24px rgba(0,0,0,.38) !important;
}

body.public-home .public-source-hero p {
    margin: 0 !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

body.public-home .public-source-hero p i {
    color: #facc15 !important;
    margin-right: 6px !important;
}

body.public-home .public-source-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 14px !important;
}

body.public-home .public-source-pills span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 30px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: rgba(0,0,0,.34) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

body.public-home .public-source-pills i {
    color: #facc15 !important;
}

body.public-home .public-source-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 330px !important;
    gap: 20px !important;
    align-items: start !important;
    margin-top: 20px !important;
}

body.public-home .public-source-main,
body.public-home .public-source-sidebar {
    display: grid !important;
    gap: 16px !important;
    min-width: 0 !important;
}

body.public-home .public-source-sidebar {
    position: sticky !important;
    top: 92px !important;
}

body.public-home .public-source-card,
body.public-home .public-source-side-card {
    overflow: hidden !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(226,232,240,.92) !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.08) !important;
}

body.public-home .public-source-media-card {
    padding: 12px !important;
}

body.public-home .public-source-main-image {
    display: block !important;
    width: 100% !important;
    max-height: 520px !important;
    object-fit: cover !important;
    border-radius: 11px !important;
}

body.public-home .public-source-thumbs {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

body.public-home .public-source-thumbs a {
    display: block !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
    border-radius: 9px !important;
    border: 2px solid rgba(88,28,135,.16) !important;
}

body.public-home .public-source-thumbs img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body.public-home .public-source-general {
    padding: 18px !important;
}

body.public-home .public-source-general h2,
body.public-home .public-source-side-card h3 {
    margin: 0 0 14px !important;
    color: #1f2937 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
}

body.public-home .public-source-general h2 i,
body.public-home .public-source-side-card h3 i {
    color: #5b21b6 !important;
    margin-right: 7px !important;
}

body.public-home .public-source-info-list {
    display: grid !important;
    gap: 0 !important;
}

body.public-home .public-source-info-list > div,
body.public-home .public-source-contact-list > div {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 12px 0 !important;
    border-top: 1px solid #edf2f7 !important;
}

body.public-home .public-source-info-list > div:first-child,
body.public-home .public-source-contact-list > div:first-child {
    border-top: 0 !important;
    padding-top: 0 !important;
}

body.public-home .public-source-info-list span,
body.public-home .public-source-contact-list span {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    color: #5b21b6 !important;
    background: #ede9fe !important;
}

body.public-home .public-source-info-list small,
body.public-home .public-source-contact-list small {
    display: block !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

body.public-home .public-source-info-list strong,
body.public-home .public-source-contact-list strong {
    display: block !important;
    color: #111827 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 900 !important;
}

body.public-home .public-source-section-stack {
    display: grid !important;
    gap: 16px !important;
}

body.public-home .public-source-number-card {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 20px !important;
    border-radius: 14px !important;
    background: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    border-left: 4px solid #3b82f6 !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.05) !important;
}

body.public-home .public-source-number-card:nth-child(2) {
    background: #faf5ff !important;
    border-color: #eadcff !important;
    border-left-color: #a855f7 !important;
}

body.public-home .public-source-number-card:nth-child(3) {
    background: #f0fdf4 !important;
    border-color: #dcfce7 !important;
    border-left-color: #22c55e !important;
}

body.public-home .public-source-number-card:nth-child(4n) {
    background: #fffbeb !important;
    border-color: #fef3c7 !important;
    border-left-color: #f59e0b !important;
}

body.public-home .public-source-number {
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    color: #1d4ed8 !important;
    background: #bfdbfe !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body.public-home .public-source-number-card h3 {
    margin: 2px 0 12px !important;
    color: #1f2937 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
}

body.public-home .public-source-number-card p {
    margin: 0 !important;
    color: #1f2937 !important;
    font-size: 15px !important;
    line-height: 1.85 !important;
    white-space: pre-line !important;
}

body.public-home .public-source-side-card {
    padding: 16px !important;
}

body.public-home .public-source-map-card {
    padding: 10px !important;
}

body.public-home .public-source-map-card iframe,
body.public-home .public-source-map-placeholder {
    width: 100% !important;
    height: 220px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #e0f2fe !important;
}

body.public-home .public-source-map-placeholder {
    display: grid !important;
    place-items: center !important;
    color: #475569 !important;
    font-weight: 900 !important;
}

body.public-home .public-source-map-placeholder i {
    display: block !important;
    color: #5b21b6 !important;
    font-size: 30px !important;
    margin-bottom: 8px !important;
}

body.public-home .public-source-primary-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    margin-top: 10px !important;
    border-radius: 10px !important;
    color: #fff !important;
    text-decoration: none !important;
    background: #5b21b6 !important;
    font-weight: 900 !important;
}

body.public-home .public-source-primary-btn:hover {
    background: #4c1d95 !important;
}

body.public-home .public-source-detail .document-chip {
    width: 100% !important;
    justify-content: flex-start !important;
    color: #334155 !important;
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    box-shadow: none !important;
    border-radius: 12px !important;
}

body.public-home .public-source-detail .document-chip:hover {
    color: #5b21b6 !important;
    background: #ede9fe !important;
}

body.public-home .public-source-media-links {
    margin: 12px 0 0 !important;
    padding: 12px !important;
    color: #334155 !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

@media (max-width: 991.98px) {
    body.public-home .public-source-layout {
        grid-template-columns: 1fr !important;
    }

    body.public-home .public-source-sidebar {
        position: static !important;
    }
}

@media (max-width: 767.98px) {
    body.public-home .public-source-detail {
        width: calc(100% - 10px) !important;
    }

    body.public-home .public-source-hero,
    body.public-home .public-source-hero-inner {
        min-height: 220px !important;
    }

    body.public-home .public-source-hero-inner {
        padding: 18px !important;
    }

    body.public-home .public-source-layout {
        gap: 12px !important;
        margin-top: 12px !important;
    }

    body.public-home .public-source-main,
    body.public-home .public-source-sidebar {
        gap: 12px !important;
    }

    body.public-home .public-source-main-image {
        max-height: 300px !important;
    }

    body.public-home .public-source-thumbs {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.public-home .public-source-number-card {
        grid-template-columns: 1fr !important;
        padding: 16px !important;
    }
}

/* ===== v134: locked public detail portal layout ===== */
body.public-home.public-detail-page {
    min-height: 100vh !important;
    color: #0f172a !important;
    background:
        linear-gradient(180deg, #f8fafc 0%, #eef6ff 44%, #ffffff 100%) !important;
    overflow-x: hidden !important;
}

body.public-home.public-detail-page::before {
    opacity: 0 !important;
}

body.public-home.public-detail-page .tmap-public-page-bg {
    opacity: .12 !important;
    filter: saturate(1.05) contrast(1.05) !important;
}

body.public-home.public-detail-page .tmap-public-page-bg::after {
    background:
        linear-gradient(180deg, rgba(248,250,252,.92), rgba(248,250,252,.82) 36%, rgba(255,255,255,.98)) !important;
}

body.public-home.public-detail-page .public-navbar.future-navbar.with-top-menu {
    width: min(100% - 32px, 1180px) !important;
    max-width: 1180px !important;
    margin: 12px auto 0 !important;
    background: rgba(15, 23, 42, .82) !important;
    border: 1px solid rgba(148, 163, 184, .32) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .18) !important;
}

body.public-home.public-detail-page .public-page.future-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 42px !important;
}

body.public-home.public-detail-page .public-source-detail {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 34px !important;
    scroll-margin-top: 96px !important;
    color: #111827 !important;
}

body.public-home.public-detail-page .public-source-hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 292px !important;
    margin: -4px 0 28px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 5px solid #facc15 !important;
    background:
        linear-gradient(92deg, rgba(76, 29, 149, .96), rgba(91, 33, 182, .84) 52%, rgba(49, 46, 129, .96)),
        var(--detail-cover) center / cover no-repeat !important;
    box-shadow: 0 24px 58px rgba(15, 23, 42, .16) !important;
}

body.public-home.public-detail-page .public-source-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(circle at 15% 10%, rgba(250, 204, 21, .34), transparent 24%),
        linear-gradient(180deg, rgba(15, 23, 42, .02), rgba(15, 23, 42, .38)) !important;
}

body.public-home.public-detail-page .public-source-hero-inner {
    position: relative !important;
    z-index: 1 !important;
    width: min(100% - 32px, 1180px) !important;
    max-width: 1180px !important;
    min-height: 292px !important;
    margin: 0 auto !important;
    padding: 30px 0 34px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 18px !important;
}

body.public-home.public-detail-page .public-source-back {
    width: fit-content !important;
    min-height: 38px !important;
    padding: 8px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #fff7d6 !important;
    background: rgba(255, 255, 255, .13) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .16) !important;
}

body.public-home.public-detail-page .public-source-back:hover,
body.public-home.public-detail-page .public-source-back:focus-visible {
    color: #3b0764 !important;
    background: #facc15 !important;
    outline: none !important;
}

body.public-home.public-detail-page .public-source-hero-copy {
    width: min(760px, 100%) !important;
    max-width: 760px !important;
}

body.public-home.public-detail-page .public-source-hero-copy .category-badge {
    min-height: 30px !important;
    color: #4c1d95 !important;
    background: #fff7d6 !important;
    border: 1px solid rgba(255, 255, 255, .78) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .14) !important;
}

body.public-home.public-detail-page .public-source-hero h1 {
    margin: 12px 0 8px !important;
    color: #ffffff !important;
    font-size: clamp(32px, 4.2vw, 58px) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 5px 24px rgba(0, 0, 0, .36) !important;
}

body.public-home.public-detail-page .public-source-hero p {
    margin: 0 !important;
    color: rgba(255, 255, 255, .94) !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    font-weight: 800 !important;
}

body.public-home.public-detail-page .public-source-hero p i,
body.public-home.public-detail-page .public-source-pills i {
    color: #facc15 !important;
}

body.public-home.public-detail-page .public-source-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    margin-top: 14px !important;
}

body.public-home.public-detail-page .public-source-pills span {
    min-height: 31px !important;
    padding: 6px 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #fff !important;
    background: rgba(15, 23, 42, .38) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

body.public-home.public-detail-page .public-source-layout {
    width: min(100% - 32px, 1180px) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 330px !important;
    gap: 20px !important;
    align-items: start !important;
}

body.public-home.public-detail-page .public-source-main,
body.public-home.public-detail-page .public-source-sidebar {
    display: grid !important;
    gap: 16px !important;
    min-width: 0 !important;
}

body.public-home.public-detail-page .public-source-sidebar {
    position: sticky !important;
    top: 92px !important;
}

body.public-home.public-detail-page .public-source-card,
body.public-home.public-detail-page .public-source-side-card {
    display: block !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    color: #111827 !important;
    background: rgba(255, 255, 255, .98) !important;
    border: 1px solid rgba(226, 232, 240, .96) !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .10) !important;
}

body.public-home.public-detail-page .public-source-media-card {
    padding: 12px !important;
}

body.public-home.public-detail-page .public-source-main-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 520px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
}

body.public-home.public-detail-page .public-source-thumbs {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

body.public-home.public-detail-page .public-source-thumbs a {
    display: block !important;
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    border: 2px solid rgba(91, 33, 182, .16) !important;
}

body.public-home.public-detail-page .public-source-thumbs img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body.public-home.public-detail-page .public-source-general,
body.public-home.public-detail-page .public-source-side-card {
    padding: 18px !important;
}

body.public-home.public-detail-page .public-source-map-card {
    padding: 10px !important;
}

body.public-home.public-detail-page .public-source-general h2,
body.public-home.public-detail-page .public-source-side-card h3 {
    margin: 0 0 14px !important;
    color: #1f2937 !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
}

body.public-home.public-detail-page .public-source-general h2 i,
body.public-home.public-detail-page .public-source-side-card h3 i {
    color: #5b21b6 !important;
    margin-right: 7px !important;
}

body.public-home.public-detail-page .public-source-info-list,
body.public-home.public-detail-page .public-source-contact-list {
    display: grid !important;
    gap: 0 !important;
}

body.public-home.public-detail-page .public-source-info-list > div,
body.public-home.public-detail-page .public-source-contact-list > div {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 12px 0 !important;
    border-top: 1px solid #edf2f7 !important;
}

body.public-home.public-detail-page .public-source-info-list > div:first-child,
body.public-home.public-detail-page .public-source-contact-list > div:first-child {
    border-top: 0 !important;
    padding-top: 0 !important;
}

body.public-home.public-detail-page .public-source-info-list span,
body.public-home.public-detail-page .public-source-contact-list span {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    color: #5b21b6 !important;
    background: #ede9fe !important;
    border-radius: 10px !important;
}

body.public-home.public-detail-page .public-source-info-list small,
body.public-home.public-detail-page .public-source-contact-list small {
    display: block !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

body.public-home.public-detail-page .public-source-info-list strong,
body.public-home.public-detail-page .public-source-contact-list strong {
    display: block !important;
    color: #111827 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    font-weight: 900 !important;
}

body.public-home.public-detail-page .public-source-section-stack {
    display: grid !important;
    gap: 16px !important;
}

body.public-home.public-detail-page .public-source-number-card {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 20px !important;
    border-radius: 16px !important;
    background: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    border-left: 5px solid #3b82f6 !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06) !important;
}

body.public-home.public-detail-page .public-source-number-card:nth-child(2) {
    background: #faf5ff !important;
    border-color: #eadcff !important;
    border-left-color: #a855f7 !important;
}

body.public-home.public-detail-page .public-source-number-card:nth-child(3) {
    background: #f0fdf4 !important;
    border-color: #dcfce7 !important;
    border-left-color: #22c55e !important;
}

body.public-home.public-detail-page .public-source-number-card:nth-child(4n) {
    background: #fffbeb !important;
    border-color: #fef3c7 !important;
    border-left-color: #f59e0b !important;
}

body.public-home.public-detail-page .public-source-number {
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    color: #1d4ed8 !important;
    background: #bfdbfe !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body.public-home.public-detail-page .public-source-number-card h3 {
    margin: 2px 0 12px !important;
    color: #1f2937 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
}

body.public-home.public-detail-page .public-source-number-card p {
    margin: 0 !important;
    color: #1f2937 !important;
    font-size: 15px !important;
    line-height: 1.85 !important;
    white-space: pre-line !important;
}

body.public-home.public-detail-page .public-source-map-card iframe,
body.public-home.public-detail-page .public-source-map-placeholder {
    width: 100% !important;
    height: 224px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: #e0f2fe !important;
}

body.public-home.public-detail-page .public-source-map-placeholder {
    display: grid !important;
    place-items: center !important;
    color: #475569 !important;
    font-weight: 900 !important;
}

body.public-home.public-detail-page .public-source-map-placeholder i {
    display: block !important;
    color: #5b21b6 !important;
    font-size: 30px !important;
    margin-bottom: 8px !important;
}

body.public-home.public-detail-page .public-source-primary-btn {
    min-height: 42px !important;
    margin-top: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: #fff !important;
    background: #5b21b6 !important;
    border-radius: 10px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

body.public-home.public-detail-page .public-source-primary-btn:hover,
body.public-home.public-detail-page .public-source-primary-btn:focus-visible {
    color: #fff !important;
    background: #4c1d95 !important;
    outline: none !important;
}

body.public-home.public-detail-page .public-source-detail .document-chip {
    width: 100% !important;
    justify-content: flex-start !important;
    color: #334155 !important;
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    box-shadow: none !important;
    border-radius: 12px !important;
}

body.public-home.public-detail-page .public-source-detail .document-chip:hover {
    color: #5b21b6 !important;
    background: #ede9fe !important;
}

body.public-home.public-detail-page .public-source-media-links {
    margin: 12px 0 0 !important;
    padding: 12px !important;
    color: #334155 !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

body.public-home.public-detail-page .public-visit-footer-chip {
    background: #5b21b6 !important;
    border-color: rgba(91, 33, 182, .18) !important;
    box-shadow: 0 12px 28px rgba(91, 33, 182, .20) !important;
}

@media (max-width: 991.98px) {
    body.public-home.public-detail-page .public-source-layout {
        grid-template-columns: 1fr !important;
    }

    body.public-home.public-detail-page .public-source-sidebar {
        position: static !important;
    }
}

@media (max-width: 767.98px) {
    body.public-home.public-detail-page .public-navbar.future-navbar.with-top-menu {
        width: min(100% - 16px, 430px) !important;
        margin-top: 8px !important;
    }

    body.public-home.public-detail-page .public-source-hero {
        min-height: 250px !important;
        margin-top: -2px !important;
        margin-bottom: 16px !important;
    }

    body.public-home.public-detail-page .public-source-hero-inner {
        width: calc(100% - 22px) !important;
        min-height: 250px !important;
        padding: 20px 0 24px !important;
    }

    body.public-home.public-detail-page .public-source-hero h1 {
        font-size: 34px !important;
    }

    body.public-home.public-detail-page .public-source-layout {
        width: calc(100% - 18px) !important;
        gap: 12px !important;
    }

    body.public-home.public-detail-page .public-source-main,
    body.public-home.public-detail-page .public-source-sidebar {
        gap: 12px !important;
    }

    body.public-home.public-detail-page .public-source-card,
    body.public-home.public-detail-page .public-source-side-card {
        border-radius: 14px !important;
    }

    body.public-home.public-detail-page .public-source-media-card {
        padding: 9px !important;
    }

    body.public-home.public-detail-page .public-source-main-image {
        max-height: 310px !important;
    }

    body.public-home.public-detail-page .public-source-thumbs {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.public-home.public-detail-page .public-source-general,
    body.public-home.public-detail-page .public-source-side-card {
        padding: 15px !important;
    }

    body.public-home.public-detail-page .public-source-map-card {
        padding: 9px !important;
    }

    body.public-home.public-detail-page .public-source-number-card {
        grid-template-columns: 1fr !important;
        padding: 16px !important;
    }
}

/* ===== v136: T-MAP native detail palette, aligned with public index ===== */
body.public-home.public-detail-page {
    color: #e8f7ff !important;
    background:
        radial-gradient(circle at 18% 4%, rgba(0, 210, 255, .18), transparent 28rem),
        radial-gradient(circle at 88% 8%, rgba(46, 118, 255, .18), transparent 30rem),
        linear-gradient(135deg, #031124 0%, #04243c 48%, #062b34 100%) !important;
}

body.public-home.public-detail-page .tmap-public-page-bg {
    opacity: .54 !important;
    filter: saturate(1.16) contrast(1.08) !important;
}

body.public-home.public-detail-page .tmap-public-page-bg::after {
    background:
        linear-gradient(180deg, rgba(3, 13, 30, .74), rgba(3, 22, 40, .86) 46%, rgba(4, 27, 45, .94)) !important;
}

body.public-home.public-detail-page .public-navbar.future-navbar.with-top-menu {
    background:
        linear-gradient(135deg, rgba(8, 31, 58, .92), rgba(9, 55, 78, .82)) !important;
    border-color: rgba(88, 218, 255, .24) !important;
    box-shadow:
        0 18px 46px rgba(0, 12, 30, .32),
        inset 0 0 0 1px rgba(255, 255, 255, .05) !important;
}

body.public-home.public-detail-page .public-source-hero {
    border-bottom: 3px solid rgba(56, 231, 255, .82) !important;
    background:
        linear-gradient(92deg, rgba(3, 14, 34, .96), rgba(5, 53, 80, .84) 52%, rgba(4, 19, 45, .96)),
        var(--detail-cover) center / cover no-repeat !important;
    box-shadow:
        0 24px 58px rgba(0, 15, 34, .34),
        0 0 0 1px rgba(62, 220, 255, .10) !important;
}

body.public-home.public-detail-page .public-source-hero::before {
    background:
        radial-gradient(circle at 15% 12%, rgba(33, 214, 255, .32), transparent 24%),
        radial-gradient(circle at 80% 18%, rgba(46, 118, 255, .22), transparent 28%),
        linear-gradient(180deg, rgba(4, 18, 39, .05), rgba(2, 10, 24, .46)) !important;
}

body.public-home.public-detail-page .public-source-back {
    color: #dffaff !important;
    background: rgba(13, 52, 77, .56) !important;
    border-color: rgba(101, 224, 255, .30) !important;
    box-shadow: 0 12px 30px rgba(0, 14, 36, .22) !important;
}

body.public-home.public-detail-page .public-source-back:hover,
body.public-home.public-detail-page .public-source-back:focus-visible {
    color: #031124 !important;
    background: linear-gradient(135deg, #d9fbff, #48e3ff) !important;
    box-shadow: 0 16px 36px rgba(38, 214, 255, .30) !important;
}

body.public-home.public-detail-page .public-source-hero-copy .category-badge,
body.public-home.public-detail-page .public-source-detail .category-badge {
    color: #dffaff !important;
    background: rgba(10, 60, 88, .72) !important;
    border-color: rgba(83, 223, 255, .40) !important;
    box-shadow:
        0 0 0 1px rgba(33, 214, 255, .10),
        0 12px 28px rgba(0, 15, 35, .20) !important;
}

body.public-home.public-detail-page .public-source-hero p i,
body.public-home.public-detail-page .public-source-pills i {
    color: #56e7ff !important;
}

body.public-home.public-detail-page .public-source-pills span {
    color: #effcff !important;
    background: rgba(4, 21, 44, .62) !important;
    border-color: rgba(96, 218, 255, .24) !important;
    box-shadow: inset 0 0 16px rgba(33, 214, 255, .08) !important;
}

body.public-home.public-detail-page .public-source-card,
body.public-home.public-detail-page .public-source-side-card {
    color: #eaf8ff !important;
    background:
        linear-gradient(180deg, rgba(9, 37, 62, .92), rgba(7, 26, 48, .94)) !important;
    border-color: rgba(101, 224, 255, .22) !important;
    box-shadow:
        0 18px 44px rgba(0, 13, 31, .32),
        inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

body.public-home.public-detail-page .public-source-media-card {
    background:
        linear-gradient(180deg, rgba(14, 53, 78, .92), rgba(7, 28, 50, .94)) !important;
}

body.public-home.public-detail-page .public-source-main-image {
    box-shadow: 0 0 0 1px rgba(92, 226, 255, .20) !important;
}

body.public-home.public-detail-page .public-source-thumbs a {
    border-color: rgba(83, 223, 255, .26) !important;
    box-shadow: inset 0 0 18px rgba(33, 214, 255, .08) !important;
}

body.public-home.public-detail-page .public-source-general h2,
body.public-home.public-detail-page .public-source-side-card h3,
body.public-home.public-detail-page .public-source-number-card h3 {
    color: #f4fbff !important;
}

body.public-home.public-detail-page .public-source-general h2 i,
body.public-home.public-detail-page .public-source-side-card h3 i,
body.public-home.public-detail-page .public-source-map-placeholder i {
    color: #49dcff !important;
}

body.public-home.public-detail-page .public-source-info-list > div,
body.public-home.public-detail-page .public-source-contact-list > div {
    border-top-color: rgba(128, 212, 240, .14) !important;
}

body.public-home.public-detail-page .public-source-info-list span,
body.public-home.public-detail-page .public-source-contact-list span {
    color: #67e8ff !important;
    background: rgba(33, 214, 255, .13) !important;
    border: 1px solid rgba(99, 220, 255, .18) !important;
}

body.public-home.public-detail-page .public-source-info-list small,
body.public-home.public-detail-page .public-source-contact-list small {
    color: rgba(191, 232, 246, .68) !important;
}

body.public-home.public-detail-page .public-source-info-list strong,
body.public-home.public-detail-page .public-source-contact-list strong,
body.public-home.public-detail-page .public-source-number-card p {
    color: #e7f7ff !important;
}

body.public-home.public-detail-page .public-source-number-card {
    background:
        linear-gradient(135deg, rgba(10, 43, 72, .95), rgba(9, 65, 91, .86)) !important;
    border-color: rgba(101, 224, 255, .20) !important;
    border-left-color: #38dfff !important;
    box-shadow:
        0 14px 34px rgba(0, 12, 30, .24),
        inset 0 0 0 1px rgba(255, 255, 255, .03) !important;
}

body.public-home.public-detail-page .public-source-number-card:nth-child(2) {
    background:
        linear-gradient(135deg, rgba(8, 38, 70, .96), rgba(18, 87, 111, .84)) !important;
    border-color: rgba(80, 205, 255, .20) !important;
    border-left-color: #2f86ff !important;
}

body.public-home.public-detail-page .public-source-number-card:nth-child(3) {
    background:
        linear-gradient(135deg, rgba(6, 44, 63, .96), rgba(16, 98, 88, .82)) !important;
    border-color: rgba(70, 220, 204, .20) !important;
    border-left-color: #34e5c2 !important;
}

body.public-home.public-detail-page .public-source-number-card:nth-child(4n) {
    background:
        linear-gradient(135deg, rgba(8, 33, 64, .96), rgba(14, 78, 122, .82)) !important;
    border-color: rgba(92, 186, 255, .20) !important;
    border-left-color: #5aa7ff !important;
}

body.public-home.public-detail-page .public-source-number {
    color: #022033 !important;
    background: linear-gradient(135deg, #e4fbff, #42dcff) !important;
    box-shadow: 0 8px 18px rgba(41, 213, 255, .26) !important;
}

body.public-home.public-detail-page .public-source-map-card iframe,
body.public-home.public-detail-page .public-source-map-placeholder {
    background: rgba(9, 50, 75, .80) !important;
    border: 1px solid rgba(92, 226, 255, .18) !important;
}

body.public-home.public-detail-page .public-source-map-placeholder {
    color: #bfe9f7 !important;
}

body.public-home.public-detail-page .public-source-primary-btn,
body.public-home.public-detail-page .public-visit-footer-chip {
    color: #031124 !important;
    background: linear-gradient(135deg, #e5fbff 0%, #42dcff 46%, #2d8cff 100%) !important;
    border-color: rgba(106, 232, 255, .44) !important;
    box-shadow:
        0 14px 30px rgba(42, 190, 255, .26),
        inset 0 1px 0 rgba(255, 255, 255, .42) !important;
}

body.public-home.public-detail-page .public-source-primary-btn:hover,
body.public-home.public-detail-page .public-source-primary-btn:focus-visible {
    color: #031124 !important;
    background: linear-gradient(135deg, #ffffff 0%, #73edff 52%, #51a5ff 100%) !important;
}

body.public-home.public-detail-page .public-source-detail .document-chip,
body.public-home.public-detail-page .public-source-media-links {
    color: #dff7ff !important;
    background: rgba(4, 24, 45, .72) !important;
    border-color: rgba(99, 220, 255, .18) !important;
}

body.public-home.public-detail-page .public-source-detail .document-chip i {
    color: #4bddff !important;
}

body.public-home.public-detail-page .public-source-detail .document-chip:hover {
    color: #ffffff !important;
    background: rgba(18, 87, 111, .78) !important;
}

body.public-home.public-detail-page .public-footer {
    color: rgba(219, 246, 255, .74) !important;
}

/* ===== v137: detail page uses the same scenic background language as index ===== */
body.public-home.public-detail-page {
    background: #061322 !important;
}

body.public-home.public-detail-page::before {
    opacity: .72 !important;
    background:
        linear-gradient(rgba(125, 247, 255, .030) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 247, 255, .026) 1px, transparent 1px),
        radial-gradient(circle at 50% 0%, rgba(45, 212, 255, .07), transparent 34rem) !important;
    background-size: 34px 34px, 34px 34px, auto !important;
}

body.public-home.public-detail-page .tmap-public-page-bg,
body.public-home.public-detail-page .tmap-page-bg.tmap-public-page-bg,
body.public-home.public-detail-page .tmap-bg-slideshow.tmap-public-page-bg {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    opacity: .78 !important;
    filter: none !important;
}

body.public-home.public-detail-page .tmap-public-page-bg span,
body.public-home.public-detail-page .tmap-page-bg.tmap-public-page-bg span,
body.public-home.public-detail-page .tmap-bg-slideshow.tmap-public-page-bg span {
    inset: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    filter: saturate(1.12) contrast(1.06) brightness(1.02) !important;
}

body.public-home.public-detail-page .tmap-public-page-bg::after,
body.public-home.public-detail-page .tmap-page-bg.tmap-public-page-bg::after,
body.public-home.public-detail-page .tmap-bg-slideshow.tmap-public-page-bg::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background:
        linear-gradient(135deg, rgba(2, 8, 22, .34), rgba(4, 24, 58, .16)),
        radial-gradient(circle at 70% 38%, rgba(0, 229, 255, .13), transparent 32rem) !important;
}

body.public-home.public-detail-page .public-navbar.future-navbar.with-top-menu,
body.public-home.public-detail-page .public-page.future-page,
body.public-home.public-detail-page .public-visit-footer-chip,
body.public-home.public-detail-page .public-footer {
    position: relative !important;
    z-index: 3 !important;
}

body.public-home.public-detail-page .public-source-hero {
    width: min(100% - 32px, 1180px) !important;
    margin: 12px auto 24px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(101, 224, 255, .22) !important;
    border-bottom: 3px solid rgba(56, 231, 255, .78) !important;
    background:
        linear-gradient(92deg, rgba(3, 14, 34, .78), rgba(5, 53, 80, .54) 52%, rgba(4, 19, 45, .78)),
        var(--detail-cover) center / cover no-repeat !important;
    backdrop-filter: blur(12px) saturate(1.1) !important;
    box-shadow:
        0 20px 52px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

body.public-home.public-detail-page .public-source-hero::before {
    background:
        radial-gradient(circle at 16% 14%, rgba(33, 214, 255, .22), transparent 24%),
        linear-gradient(180deg, rgba(3, 13, 30, .08), rgba(2, 10, 24, .42)) !important;
}

body.public-home.public-detail-page .public-source-card,
body.public-home.public-detail-page .public-source-side-card,
body.public-home.public-detail-page .public-source-number-card {
    backdrop-filter: blur(16px) saturate(1.08) !important;
}

body.public-home.public-detail-page .public-source-card,
body.public-home.public-detail-page .public-source-side-card {
    background:
        linear-gradient(180deg, rgba(12, 43, 66, .76), rgba(5, 22, 43, .82)) !important;
    border-color: rgba(143, 232, 255, .22) !important;
    box-shadow:
        0 18px 44px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

body.public-home.public-detail-page .public-source-media-card {
    background:
        linear-gradient(180deg, rgba(13, 54, 78, .76), rgba(5, 23, 43, .80)) !important;
}

body.public-home.public-detail-page .public-source-number-card {
    background:
        linear-gradient(135deg, rgba(10, 43, 72, .72), rgba(9, 65, 91, .62)) !important;
}

body.public-home.public-detail-page .public-source-number-card:nth-child(2) {
    background:
        linear-gradient(135deg, rgba(8, 38, 70, .72), rgba(18, 87, 111, .60)) !important;
}

body.public-home.public-detail-page .public-source-number-card:nth-child(3) {
    background:
        linear-gradient(135deg, rgba(6, 44, 63, .74), rgba(16, 98, 88, .58)) !important;
}

body.public-home.public-detail-page .public-source-number-card:nth-child(4n) {
    background:
        linear-gradient(135deg, rgba(8, 33, 64, .74), rgba(14, 78, 122, .58)) !important;
}

body.public-home.public-detail-page .public-source-map-placeholder,
body.public-home.public-detail-page .public-source-detail .document-chip,
body.public-home.public-detail-page .public-source-media-links {
    background: rgba(4, 24, 45, .58) !important;
}

@media (max-width: 767.98px) {
    body.public-home.public-detail-page .public-source-hero {
        width: calc(100% - 20px) !important;
        margin: 0 auto 16px !important;
        border-radius: 18px !important;
    }
}

/* ===== v138: admin resource form media/time/map controls ===== */
.resource-time-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.resource-time-range span {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.resource-media-builder {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(37, 99, 235, .14);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(248, 250, 252, .98), rgba(239, 246, 255, .72));
}

.resource-media-link-list,
.resource-media-file-list {
    display: grid;
    gap: 12px;
}

.resource-media-link-row,
.resource-media-file-row {
    display: grid;
    gap: 10px;
}

.resource-media-file-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.resource-media-link-row .input-group-text {
    color: #ef4444;
    background: #fff;
    border-color: #dbeafe;
}

.resource-media-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.youtube-preview {
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(14, 165, 233, .20);
    background: #061322;
}

.youtube-preview[hidden] {
    display: none !important;
}

.youtube-preview iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.media-link-preview-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 10px;
    padding: 8px 12px;
    color: #075985;
    background: #e0f2fe;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.map-url-preview {
    overflow: hidden;
    min-height: 260px;
    border: 1px solid rgba(14, 165, 233, .22);
    border-radius: 18px;
    background: #e0f2fe;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
}

.map-url-preview[hidden] {
    display: none !important;
}

.map-url-preview iframe {
    display: block;
    width: 100%;
    min-height: 260px;
    border: 0;
}

@media (max-width: 575.98px) {
    .resource-time-range,
    .resource-media-file-row {
        grid-template-columns: 1fr;
    }
}

/* ===== v139: exact public detail map + four-slot image carousel ===== */
body.public-home.public-detail-page .public-source-gallery-main {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 13px !important;
    background: rgba(4, 24, 45, .68) !important;
    box-shadow:
        inset 0 0 0 1px rgba(92, 226, 255, .18),
        0 18px 36px rgba(0, 12, 30, .24) !important;
}

body.public-home.public-detail-page .public-source-gallery-main::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    box-shadow: inset 0 0 34px rgba(33, 214, 255, .10) !important;
}

body.public-home.public-detail-page .public-source-main-image {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: inherit !important;
    transform: scale(1.001) !important;
    transition: opacity .24s ease, transform .48s ease, filter .48s ease !important;
}

body.public-home.public-detail-page .public-source-main-image.is-changing {
    opacity: .38 !important;
    filter: blur(2px) saturate(1.12) !important;
    transform: scale(1.018) !important;
}

body.public-home.public-detail-page .public-source-thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 12px !important;
}

body.public-home.public-detail-page .public-source-thumbs .public-source-thumb {
    position: relative !important;
    display: block !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    aspect-ratio: 16 / 9 !important;
    cursor: pointer !important;
    border-radius: 11px !important;
    border: 2px solid rgba(83, 223, 255, .28) !important;
    background: rgba(4, 24, 45, .64) !important;
    box-shadow:
        0 12px 24px rgba(0, 12, 30, .22),
        inset 0 0 18px rgba(33, 214, 255, .08) !important;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, opacity .22s ease !important;
}

body.public-home.public-detail-page .public-source-thumbs.hide-current .public-source-thumb.is-current {
    display: none !important;
}

body.public-home.public-detail-page .public-source-thumbs:not(.hide-current) .public-source-thumb.is-current {
    border-color: rgba(207, 250, 254, .88) !important;
    box-shadow:
        0 0 0 1px rgba(103, 232, 249, .26),
        0 14px 30px rgba(24, 190, 255, .22),
        inset 0 0 22px rgba(33, 214, 255, .18) !important;
}

body.public-home.public-detail-page .public-source-thumbs .public-source-thumb:hover,
body.public-home.public-detail-page .public-source-thumbs .public-source-thumb:focus-visible {
    transform: translateY(-3px) scale(1.015) !important;
    border-color: rgba(170, 245, 255, .72) !important;
    box-shadow:
        0 16px 30px rgba(24, 190, 255, .24),
        inset 0 0 20px rgba(33, 214, 255, .16) !important;
    outline: none !important;
}

body.public-home.public-detail-page .public-source-thumbs .public-source-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform .28s ease !important;
}

body.public-home.public-detail-page .public-source-thumbs .public-source-thumb:hover img,
body.public-home.public-detail-page .public-source-thumbs .public-source-thumb:focus-visible img {
    transform: scale(1.06) !important;
}

body.public-home.public-detail-page .public-source-map-card iframe {
    display: block !important;
}

@media (max-width: 767.98px) {
    body.public-home.public-detail-page .public-source-gallery-main {
        aspect-ratio: 4 / 3 !important;
    }

    body.public-home.public-detail-page .public-source-thumbs {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}

/* ===== v142: public detail facilities + compact media previews ===== */
.resource-check-option {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border: 1px solid rgba(14, 165, 233, .18);
    border-radius: 14px;
    background: rgba(240, 249, 255, .78);
}

body.public-home.public-detail-page .public-source-facilities {
    padding: 18px !important;
}

body.public-home.public-detail-page .public-source-facilities h2 {
    margin: 0 0 14px !important;
    color: #f4fbff !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
}

body.public-home.public-detail-page .public-source-facilities h2 i {
    color: #49dcff !important;
    margin-right: 7px !important;
}

body.public-home.public-detail-page .public-facility-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

body.public-home.public-detail-page .public-facility-card,
body.public-home.public-detail-page .public-facility-empty {
    min-height: 118px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 7px !important;
    padding: 14px 10px !important;
    border-radius: 16px !important;
    text-align: center !important;
    color: #eaffff !important;
    background:
        radial-gradient(circle at 72% 18%, rgba(255, 255, 255, .12), transparent 34%),
        linear-gradient(145deg, rgba(9, 55, 78, .90), rgba(5, 28, 52, .86)) !important;
    border: 1px solid rgba(102, 232, 255, .20) !important;
    box-shadow:
        0 14px 28px rgba(0, 14, 32, .20),
        inset 0 0 18px rgba(33, 214, 255, .08) !important;
}

body.public-home.public-detail-page .public-facility-card span,
body.public-home.public-detail-page .public-facility-empty i {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    color: #042033 !important;
    background: linear-gradient(135deg, #e5fbff, #45dcff) !important;
    box-shadow: 0 10px 22px rgba(42, 190, 255, .22) !important;
}

body.public-home.public-detail-page .public-facility-card strong {
    color: #dffaff !important;
    font-size: 27px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
}

body.public-home.public-detail-page .public-facility-card small,
body.public-home.public-detail-page .public-facility-empty span {
    color: rgba(217, 250, 255, .78) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
}

body.public-home.public-detail-page .public-facility-card.parking span {
    background: linear-gradient(135deg, #dbeafe, #60a5fa) !important;
}

body.public-home.public-detail-page .public-facility-card.restroom span {
    background: linear-gradient(135deg, #ccfbf1, #2dd4bf) !important;
}

body.public-home.public-detail-page .public-facility-card.table span {
    background: linear-gradient(135deg, #fef3c7, #fbbf24) !important;
}

body.public-home.public-detail-page .public-facility-card.chair span {
    background: linear-gradient(135deg, #fce7f3, #f472b6) !important;
}

body.public-home.public-detail-page .public-source-media-list {
    display: grid !important;
    gap: 10px !important;
    margin-top: 12px !important;
}

body.public-home.public-detail-page .public-source-youtube-preview {
    overflow: hidden !important;
    border-radius: 14px !important;
    border: 1px solid rgba(102, 232, 255, .20) !important;
    background: rgba(3, 14, 34, .72) !important;
    box-shadow: inset 0 0 18px rgba(33, 214, 255, .08) !important;
}

body.public-home.public-detail-page .public-source-youtube-preview iframe {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    max-height: 170px !important;
    border: 0 !important;
}

body.public-home.public-detail-page .public-source-youtube-preview a,
body.public-home.public-detail-page .public-source-media-link-chip {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    color: #dffaff !important;
    text-decoration: none !important;
    background: rgba(5, 35, 61, .86) !important;
    border-top: 1px solid rgba(102, 232, 255, .14) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body.public-home.public-detail-page .public-source-youtube-preview a i {
    color: #ff5a7a !important;
}

body.public-home.public-detail-page .public-source-media-link-chip {
    justify-content: flex-start !important;
    border: 1px solid rgba(102, 232, 255, .18) !important;
    border-radius: 12px !important;
}

@media (max-width: 991.98px) {
    body.public-home.public-detail-page .public-facility-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    body.public-home.public-detail-page .public-facility-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.public-home.public-detail-page .public-facility-card,
    body.public-home.public-detail-page .public-facility-empty {
        min-height: 105px !important;
    }
}

/* ===== v144: complete facilities, document cards, no numbered content ===== */
body.public-home.public-detail-page .public-facility-note {
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 0 12px !important;
    padding: 9px 12px !important;
    color: rgba(217, 250, 255, .78) !important;
    background: rgba(4, 24, 45, .52) !important;
    border: 1px solid rgba(102, 232, 255, .16) !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body.public-home.public-detail-page .public-facility-note i {
    color: #67e8f9 !important;
}

body.public-home.public-detail-page .public-facility-card.is-empty {
    opacity: .82 !important;
    background:
        linear-gradient(145deg, rgba(8, 34, 57, .70), rgba(5, 23, 42, .62)) !important;
    border-style: dashed !important;
    border-color: rgba(148, 210, 230, .18) !important;
}

body.public-home.public-detail-page .public-facility-card.is-empty span {
    color: rgba(223, 250, 255, .76) !important;
    background: rgba(102, 232, 255, .12) !important;
    box-shadow: none !important;
}

body.public-home.public-detail-page .public-facility-card.is-empty strong {
    color: rgba(223, 250, 255, .76) !important;
    font-size: 22px !important;
}

body.public-home.public-detail-page .public-document-list {
    display: grid !important;
    gap: 10px !important;
}

body.public-home.public-detail-page .public-document-card {
    position: relative !important;
    min-height: 78px !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 28px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px !important;
    overflow: hidden !important;
    color: #e8fbff !important;
    text-decoration: none !important;
    background:
        linear-gradient(135deg, rgba(5, 35, 61, .92), rgba(3, 20, 39, .82)) !important;
    border: 1px solid rgba(102, 232, 255, .20) !important;
    border-radius: 15px !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .03),
        0 12px 26px rgba(0, 12, 30, .18) !important;
}

body.public-home.public-detail-page .public-document-card::before {
    content: "PDF" !important;
    position: absolute !important;
    right: 12px !important;
    top: 8px !important;
    color: rgba(255, 255, 255, .22) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: .5px !important;
}

body.public-home.public-detail-page .public-document-card:hover,
body.public-home.public-detail-page .public-document-card:focus-visible {
    color: #ffffff !important;
    border-color: rgba(168, 245, 255, .48) !important;
    background:
        linear-gradient(135deg, rgba(7, 54, 82, .96), rgba(4, 29, 54, .90)) !important;
    outline: none !important;
}

body.public-home.public-detail-page .public-document-icon {
    width: 48px !important;
    height: 54px !important;
    display: grid !important;
    place-items: center !important;
    color: #ffffff !important;
    background:
        linear-gradient(180deg, #ef4444, #b91c1c) !important;
    border-radius: 8px 12px 8px 8px !important;
    box-shadow: 0 12px 22px rgba(239, 68, 68, .22) !important;
}

body.public-home.public-detail-page .public-document-icon i {
    font-size: 22px !important;
}

body.public-home.public-detail-page .public-document-copy {
    display: grid !important;
    min-width: 0 !important;
    gap: 3px !important;
}

body.public-home.public-detail-page .public-document-copy small {
    color: #67e8f9 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

body.public-home.public-detail-page .public-document-copy strong {
    overflow: hidden !important;
    color: #e8fbff !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.public-home.public-detail-page .public-document-action {
    align-self: end !important;
    justify-self: end !important;
    color: rgba(223, 250, 255, .72) !important;
}

body.public-home.public-detail-page .public-source-number-card {
    grid-template-columns: 1fr !important;
    padding: 24px 26px !important;
}

body.public-home.public-detail-page .public-source-number {
    display: none !important;
}

body.public-home.public-detail-page .public-source-number-card h3 {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 16px !important;
    color: #f7fdff !important;
    font-size: clamp(22px, 2.2vw, 30px) !important;
    line-height: 1.25 !important;
    font-weight: 950 !important;
    text-shadow: 0 10px 26px rgba(0, 0, 0, .22) !important;
}

body.public-home.public-detail-page .public-source-number-card h3::before {
    content: "" !important;
    width: 9px !important;
    height: 28px !important;
    flex: 0 0 auto !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #87f7ff, #2d8cff) !important;
    box-shadow: 0 0 18px rgba(45, 220, 255, .34) !important;
}

body.public-home.public-detail-page .public-source-number-card p {
    font-size: 16px !important;
    line-height: 1.9 !important;
}

@media (max-width: 575.98px) {
    body.public-home.public-detail-page .public-document-card {
        grid-template-columns: 44px minmax(0, 1fr) !important;
    }

    body.public-home.public-detail-page .public-document-action {
        display: none !important;
    }

    body.public-home.public-detail-page .public-source-number-card {
        padding: 18px !important;
    }
}

/* ===== v145: equal-size facility tiles ===== */
body.public-home.public-detail-page .public-facility-grid {
    align-items: stretch !important;
    grid-auto-rows: 132px !important;
}

body.public-home.public-detail-page .public-facility-card {
    width: 100% !important;
    height: 132px !important;
    min-height: 132px !important;
    display: grid !important;
    grid-template-rows: 42px 32px 34px !important;
    align-items: center !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
}

body.public-home.public-detail-page .public-facility-card span {
    align-self: end !important;
}

body.public-home.public-detail-page .public-facility-card strong {
    align-self: center !important;
    min-height: 32px !important;
    display: grid !important;
    place-items: center !important;
}

body.public-home.public-detail-page .public-facility-card small {
    min-height: 34px !important;
    display: grid !important;
    place-items: start center !important;
}

@media (max-width: 575.98px) {
    body.public-home.public-detail-page .public-facility-grid {
        grid-auto-rows: 122px !important;
    }

    body.public-home.public-detail-page .public-facility-card {
        height: 122px !important;
        min-height: 122px !important;
        grid-template-rows: 40px 30px 32px !important;
    }
}

/* ===== v146: compact public detail scale to match login ===== */
body.public-home.public-detail-page {
    --public-detail-page-width: 1060px;
    font-size: 14px !important;
}

body.public-home.public-detail-page .public-navbar.future-navbar.with-top-menu,
body.public-home.public-detail-page .public-source-hero,
body.public-home.public-detail-page .public-source-layout {
    width: min(100% - 32px, var(--public-detail-page-width)) !important;
    max-width: var(--public-detail-page-width) !important;
}

body.public-home.public-detail-page .public-navbar.future-navbar.with-top-menu {
    min-height: 56px !important;
    margin-top: 10px !important;
    padding: 8px 12px !important;
    border-radius: 15px !important;
}

body.public-home.public-detail-page .public-brand {
    min-width: 0 !important;
    gap: 10px !important;
}

body.public-home.public-detail-page .public-brand-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
}

body.public-home.public-detail-page .public-brand-text {
    max-width: 520px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
}

body.public-home.public-detail-page .public-source-detail {
    padding-top: 10px !important;
    padding-bottom: 28px !important;
}

body.public-home.public-detail-page .public-source-hero {
    min-height: 230px !important;
    margin: 10px auto 18px !important;
    border-radius: 18px !important;
}

body.public-home.public-detail-page .public-source-hero-inner {
    min-height: 230px !important;
    padding: 22px 28px 26px !important;
    gap: 12px !important;
}

body.public-home.public-detail-page .public-source-back {
    min-height: 34px !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
}

body.public-home.public-detail-page .public-source-hero-copy .category-badge,
body.public-home.public-detail-page .public-source-detail .category-badge {
    min-height: 24px !important;
    padding: 4px 9px !important;
    font-size: 11px !important;
}

body.public-home.public-detail-page .public-source-hero h1 {
    margin: 6px 0 6px !important;
    font-size: clamp(34px, 4vw, 52px) !important;
    line-height: .98 !important;
}

body.public-home.public-detail-page .public-source-hero p {
    font-size: 14px !important;
}

body.public-home.public-detail-page .public-source-pills {
    gap: 7px !important;
    margin-top: 10px !important;
}

body.public-home.public-detail-page .public-source-pills span {
    min-height: 28px !important;
    padding: 5px 10px !important;
    font-size: 11.5px !important;
}

body.public-home.public-detail-page .public-source-layout {
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 16px !important;
}

body.public-home.public-detail-page .public-source-main,
body.public-home.public-detail-page .public-source-sidebar {
    gap: 12px !important;
}

body.public-home.public-detail-page .public-source-sidebar {
    top: 78px !important;
}

body.public-home.public-detail-page .public-source-card,
body.public-home.public-detail-page .public-source-side-card {
    border-radius: 14px !important;
}

body.public-home.public-detail-page .public-source-media-card {
    padding: 10px !important;
}

body.public-home.public-detail-page .public-source-gallery-main {
    aspect-ratio: 16 / 8.7 !important;
    border-radius: 12px !important;
}

body.public-home.public-detail-page .public-source-thumbs {
    gap: 8px !important;
    margin-top: 8px !important;
}

body.public-home.public-detail-page .public-source-thumbs .public-source-thumb {
    border-radius: 9px !important;
}

body.public-home.public-detail-page .public-source-general,
body.public-home.public-detail-page .public-source-facilities,
body.public-home.public-detail-page .public-source-side-card {
    padding: 14px !important;
}

body.public-home.public-detail-page .public-source-map-card {
    padding: 8px !important;
}

body.public-home.public-detail-page .public-source-general h2,
body.public-home.public-detail-page .public-source-facilities h2,
body.public-home.public-detail-page .public-source-side-card h3 {
    margin-bottom: 11px !important;
    font-size: 16px !important;
}

body.public-home.public-detail-page .public-source-info-list > div,
body.public-home.public-detail-page .public-source-contact-list > div {
    min-height: 58px !important;
    gap: 10px !important;
    padding: 9px 0 !important;
}

body.public-home.public-detail-page .public-source-info-list span,
body.public-home.public-detail-page .public-source-contact-list span {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
}

body.public-home.public-detail-page .public-source-info-list small,
body.public-home.public-detail-page .public-source-contact-list small {
    font-size: 11.5px !important;
}

body.public-home.public-detail-page .public-source-info-list strong,
body.public-home.public-detail-page .public-source-contact-list strong {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
}

body.public-home.public-detail-page .public-source-map-card iframe,
body.public-home.public-detail-page .public-source-map-placeholder {
    height: 188px !important;
    border-radius: 11px !important;
}

body.public-home.public-detail-page .public-source-primary-btn {
    min-height: 40px !important;
    margin-top: 8px !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
}

body.public-home.public-detail-page .public-facility-grid {
    gap: 9px !important;
    grid-auto-rows: 112px !important;
}

body.public-home.public-detail-page .public-facility-card {
    height: 112px !important;
    min-height: 112px !important;
    grid-template-rows: 36px 26px 30px !important;
    gap: 5px !important;
    padding: 10px 8px !important;
    border-radius: 13px !important;
}

body.public-home.public-detail-page .public-facility-card span {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
}

body.public-home.public-detail-page .public-facility-card strong {
    min-height: 26px !important;
    font-size: 22px !important;
}

body.public-home.public-detail-page .public-facility-card small {
    min-height: 30px !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
}

body.public-home.public-detail-page .public-facility-note {
    min-height: 36px !important;
    margin-bottom: 10px !important;
    padding: 8px 10px !important;
    border-radius: 11px !important;
    font-size: 12.5px !important;
}

body.public-home.public-detail-page .public-document-card {
    min-height: 66px !important;
    grid-template-columns: 42px minmax(0, 1fr) 24px !important;
    gap: 9px !important;
    padding: 10px !important;
    border-radius: 13px !important;
}

body.public-home.public-detail-page .public-document-card::before {
    top: 7px !important;
    right: 10px !important;
    font-size: 10px !important;
}

body.public-home.public-detail-page .public-document-icon {
    width: 42px !important;
    height: 46px !important;
    border-radius: 8px 11px 8px 8px !important;
}

body.public-home.public-detail-page .public-document-icon i {
    font-size: 19px !important;
}

body.public-home.public-detail-page .public-document-copy small {
    font-size: 11px !important;
}

body.public-home.public-detail-page .public-document-copy strong {
    font-size: 12.5px !important;
}

body.public-home.public-detail-page .public-source-media-list {
    gap: 8px !important;
    margin-top: 10px !important;
}

body.public-home.public-detail-page .public-source-youtube-preview {
    border-radius: 12px !important;
}

body.public-home.public-detail-page .public-source-youtube-preview iframe {
    max-height: 136px !important;
}

body.public-home.public-detail-page .public-source-youtube-preview a,
body.public-home.public-detail-page .public-source-media-link-chip {
    min-height: 34px !important;
    padding: 7px 9px !important;
    font-size: 12px !important;
}

body.public-home.public-detail-page .public-source-section-stack {
    gap: 12px !important;
}

body.public-home.public-detail-page .public-source-number-card {
    padding: 18px 20px !important;
    border-radius: 14px !important;
}

body.public-home.public-detail-page .public-source-number-card h3 {
    margin-bottom: 10px !important;
    font-size: clamp(20px, 1.7vw, 25px) !important;
}

body.public-home.public-detail-page .public-source-number-card h3::before {
    width: 7px !important;
    height: 23px !important;
}

body.public-home.public-detail-page .public-source-number-card p {
    font-size: 14px !important;
    line-height: 1.75 !important;
}

@media (max-width: 991.98px) {
    body.public-home.public-detail-page {
        --public-detail-page-width: 720px;
    }

    body.public-home.public-detail-page .public-source-layout {
        grid-template-columns: 1fr !important;
    }

    body.public-home.public-detail-page .public-source-sidebar {
        position: static !important;
    }
}

@media (max-width: 767.98px) {
    body.public-home.public-detail-page {
        --public-detail-page-width: 560px;
    }

    body.public-home.public-detail-page .public-source-hero {
        min-height: 210px !important;
    }

    body.public-home.public-detail-page .public-source-hero-inner {
        min-height: 210px !important;
        padding: 18px 18px 22px !important;
    }

    body.public-home.public-detail-page .public-source-hero h1 {
        font-size: clamp(30px, 9vw, 42px) !important;
    }

    body.public-home.public-detail-page .public-source-gallery-main {
        aspect-ratio: 4 / 3 !important;
    }
}

@media (max-width: 575.98px) {
    body.public-home.public-detail-page {
        --public-detail-page-width: 100%;
        font-size: 13.5px !important;
    }

    body.public-home.public-detail-page .public-navbar.future-navbar.with-top-menu,
    body.public-home.public-detail-page .public-source-hero,
    body.public-home.public-detail-page .public-source-layout {
        width: calc(100% - 18px) !important;
        max-width: none !important;
    }

    body.public-home.public-detail-page .public-source-detail {
        padding-top: 6px !important;
        padding-bottom: 22px !important;
    }

    body.public-home.public-detail-page .public-source-main,
    body.public-home.public-detail-page .public-source-sidebar {
        gap: 10px !important;
    }

    body.public-home.public-detail-page .public-source-gallery-main {
        aspect-ratio: 1 / .82 !important;
    }

    body.public-home.public-detail-page .public-source-thumbs {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.public-home.public-detail-page .public-facility-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: 104px !important;
    }

    body.public-home.public-detail-page .public-facility-card {
        height: 104px !important;
        min-height: 104px !important;
        grid-template-rows: 34px 24px 28px !important;
    }

    body.public-home.public-detail-page .public-source-map-card iframe,
    body.public-home.public-detail-page .public-source-map-placeholder {
        height: 176px !important;
    }
}

/* ===== v147: keep mobile hamburger menu above detail content ===== */
@media (max-width: 1366px) {
    body.public-home.tmap-menu-open .public-navbar.future-navbar.with-top-menu {
        position: relative !important;
        z-index: 5200 !important;
        overflow: visible !important;
        isolation: auto !important;
    }

    body.public-home.tmap-menu-open .future-top-menu-inline.grouped-menu,
    body.public-home.tmap-menu-open .future-top-menu-inline.grouped-menu.is-open {
        position: fixed !important;
        top: calc(env(safe-area-inset-top, 0px) + 68px) !important;
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        right: max(12px, env(safe-area-inset-right, 0px)) !important;
        z-index: 5400 !important;
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    body.public-home.tmap-menu-open .tmap-mobile-backdrop {
        position: fixed !important;
        inset: -120vh -120vw !important;
        z-index: 5300 !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        background: rgba(1, 7, 18, .50) !important;
        backdrop-filter: blur(3px) !important;
    }

    body.public-home.tmap-menu-open .tmap-menu-toggle.is-open {
        z-index: 5500 !important;
    }
}

@media (max-width: 575.98px) {
    body.public-home.tmap-menu-open .future-top-menu-inline.grouped-menu,
    body.public-home.tmap-menu-open .future-top-menu-inline.grouped-menu.is-open {
        top: calc(env(safe-area-inset-top, 0px) + 64px) !important;
        left: max(10px, env(safe-area-inset-left, 0px)) !important;
        right: max(10px, env(safe-area-inset-right, 0px)) !important;
    }
}

/* ===== v148: professional admin dashboard ===== */
.dashboard-page {
    display: grid;
    gap: 18px;
}

.dashboard-command-panel,
.dashboard-kpi-card,
.dashboard-panel {
    border: 1px solid rgba(226, 232, 240, .86);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 251, 255, .91));
    box-shadow: 0 18px 46px rgba(15, 23, 42, .08);
    backdrop-filter: blur(18px);
}

.dashboard-command-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    overflow: hidden;
    padding: 22px;
    border-radius: 24px;
    color: #0f172a;
    background:
        linear-gradient(135deg, rgba(5, 33, 64, .96), rgba(9, 73, 109, .88)),
        linear-gradient(180deg, rgba(255, 255, 255, .08), transparent);
}

.dashboard-command-panel h2 {
    margin: 7px 0 7px;
    color: #f8fdff;
    font-size: clamp(25px, 2.5vw, 36px);
    line-height: 1.08;
    font-weight: 950;
}

.dashboard-command-panel p {
    max-width: 760px;
    margin: 0;
    color: rgba(225, 246, 255, .82);
    font-weight: 700;
    line-height: 1.65;
}

.dashboard-kicker,
.dashboard-scope {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #b7f4ff;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .02em;
}

.dashboard-scope {
    min-height: 32px;
    margin-top: 14px;
    padding: 6px 11px;
    color: #eaffff;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(174, 240, 255, .18);
    border-radius: 999px;
}

.dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.dashboard-actions .btn,
.dashboard-add-btn,
.dashboard-small-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 900;
}

.dashboard-actions .btn-light {
    color: #0f3d64;
    background: #eaffff;
    border-color: rgba(226, 246, 255, .72);
}

.dashboard-actions .btn-outline-light {
    color: #eaffff;
    border-color: rgba(210, 245, 255, .46);
}

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-kpi-card {
    position: relative;
    display: grid;
    gap: 10px;
    min-height: 138px;
    padding: 18px;
    overflow: hidden;
    border-radius: 22px;
}

.dashboard-kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #22d3ee);
}

.dashboard-kpi-card.published::before { background: linear-gradient(90deg, #16a34a, #86efac); }
.dashboard-kpi-card.map::before { background: linear-gradient(90deg, #0891b2, #67e8f9); }
.dashboard-kpi-card.hidden::before { background: linear-gradient(90deg, #64748b, #cbd5e1); }
.dashboard-kpi-card.place::before { background: linear-gradient(90deg, #22c55e, #2dd4bf); }
.dashboard-kpi-card.innovation::before { background: linear-gradient(90deg, #f59e0b, #fde047); }
.dashboard-kpi-card.person::before { background: linear-gradient(90deg, #8b5cf6, #ec4899); }

.dashboard-kpi-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-kpi-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    border-radius: 15px;
    box-shadow: 0 12px 22px rgba(37, 99, 235, .20);
}

.dashboard-kpi-card.published .dashboard-kpi-icon { background: linear-gradient(135deg, #16a34a, #22c55e); }
.dashboard-kpi-card.map .dashboard-kpi-icon { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.dashboard-kpi-card.hidden .dashboard-kpi-icon { background: linear-gradient(135deg, #64748b, #94a3b8); }
.dashboard-kpi-card.place .dashboard-kpi-icon { background: linear-gradient(135deg, #16a34a, #14b8a6); }
.dashboard-kpi-card.innovation .dashboard-kpi-icon { background: linear-gradient(135deg, #f59e0b, #facc15); }
.dashboard-kpi-card.person .dashboard-kpi-icon { background: linear-gradient(135deg, #7c3aed, #ec4899); }

.dashboard-kpi-label {
    color: #475569;
    font-size: 13px;
    font-weight: 900;
}

.dashboard-kpi-card strong {
    color: #0f172a;
    font-size: 32px;
    line-height: 1;
    font-weight: 950;
}

.dashboard-kpi-card small {
    color: #64748b;
    font-size: 12.5px;
    font-weight: 800;
}

.dashboard-kpi-progress {
    height: 8px;
    overflow: hidden;
    background: rgba(148, 163, 184, .18);
    border-radius: 999px;
}

.dashboard-kpi-progress span {
    display: block;
    width: var(--kpi-progress);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #22d3ee);
}

.dashboard-kpi-card.published .dashboard-kpi-progress span { background: linear-gradient(90deg, #16a34a, #86efac); }
.dashboard-kpi-card.map .dashboard-kpi-progress span { background: linear-gradient(90deg, #0891b2, #67e8f9); }
.dashboard-kpi-card.hidden .dashboard-kpi-progress span { background: linear-gradient(90deg, #64748b, #cbd5e1); }
.dashboard-kpi-card.place .dashboard-kpi-progress span { background: linear-gradient(90deg, #22c55e, #2dd4bf); }
.dashboard-kpi-card.innovation .dashboard-kpi-progress span { background: linear-gradient(90deg, #f59e0b, #fde047); }
.dashboard-kpi-card.person .dashboard-kpi-progress span { background: linear-gradient(90deg, #8b5cf6, #ec4899); }

.dashboard-analytics-grid,
.dashboard-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 18px;
    align-items: start;
}

.dashboard-panel {
    min-width: 0;
    padding: 20px;
    border-radius: 24px;
}

.dashboard-panel-head {
    align-items: flex-start;
}

.dashboard-panel-head h2 {
    color: #0f172a;
    font-size: 20px;
    font-weight: 950;
}

.dashboard-panel-head p {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.dashboard-chart-wrap {
    position: relative;
    min-height: 0;
}

.dashboard-bar-wrap {
    height: 270px;
}

.dashboard-donut-layout {
    display: grid;
    gap: 15px;
}

.dashboard-donut-wrap {
    position: relative;
    width: min(100%, 260px);
    height: 240px;
    margin: 0 auto;
}

.dashboard-donut-center {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    line-height: 1.1;
    pointer-events: none;
}

.dashboard-donut-center strong {
    color: #0f172a;
    font-size: 28px;
    font-weight: 950;
}

.dashboard-donut-center span {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.dashboard-category-list,
.dashboard-health-list,
.dashboard-recent-list {
    display: grid;
    gap: 10px;
}

.dashboard-category-item,
.dashboard-health-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    padding: 10px;
    border: 1px solid rgba(226, 232, 240, .86);
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
}

.dashboard-category-item span,
.dashboard-health-item span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #0f5132;
    background: #dcfce7;
    border-radius: 14px;
}

.dashboard-category-item.innovation span { color: #92400e; background: #fef3c7; }
.dashboard-category-item.person span { color: #5b21b6; background: #ede9fe; }
.dashboard-category-item.default span { color: #334155; background: #e2e8f0; }

.dashboard-category-item strong,
.dashboard-health-item strong {
    display: block;
    color: #0f172a;
    font-size: 14px;
    font-weight: 950;
}

.dashboard-category-item small,
.dashboard-health-item small {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.dashboard-health-item b {
    color: #0f172a;
    font-size: 16px;
    font-weight: 950;
}

.dashboard-recent-panel {
    padding-bottom: 14px;
}

.dashboard-recent-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid rgba(226, 232, 240, .86);
    border-radius: 18px;
    background: rgba(255, 255, 255, .76);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.dashboard-recent-item:hover {
    transform: translateY(-2px);
    border-color: rgba(14, 165, 233, .28);
    box-shadow: 0 16px 32px rgba(15, 23, 42, .10);
}

.dashboard-recent-item img {
    width: 92px;
    height: 68px;
    object-fit: cover;
    border-radius: 14px;
    background: #e2e8f0;
}

.dashboard-recent-body {
    min-width: 0;
}

.dashboard-recent-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.dashboard-recent-body h3 {
    margin: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-recent-body p {
    margin: 3px 0;
    overflow: hidden;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-recent-body small {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
}

.dashboard-recent-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.dashboard-map-mini {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.dashboard-map-mini.ready {
    color: #075985;
    background: #e0f2fe;
}

.dashboard-map-mini.missing {
    color: #92400e;
    background: #fef3c7;
}

.dashboard-health-panel {
    position: sticky;
    top: 92px;
}

.dashboard-health-cta {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    color: #ffffff;
    text-decoration: none;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    border-radius: 15px;
    font-weight: 950;
    box-shadow: 0 16px 30px rgba(37, 99, 235, .20);
}

.dashboard-health-cta:hover {
    color: #ffffff;
}

.dashboard-empty-state {
    min-height: 230px;
    display: grid;
    place-items: center;
    align-content: center;
}

@media (max-width: 1199.98px) {
    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-analytics-grid,
    .dashboard-lower-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-health-panel {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .dashboard-page {
        gap: 14px;
    }

    .dashboard-command-panel {
        grid-template-columns: 1fr;
        padding: 18px;
        border-radius: 20px;
    }

    .dashboard-actions {
        justify-content: stretch;
    }

    .dashboard-actions .btn {
        flex: 1 1 100%;
    }

    .dashboard-kpi-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .dashboard-kpi-card {
        min-height: 124px;
        padding: 15px;
    }

    .dashboard-panel {
        padding: 16px;
        border-radius: 20px;
    }

    .dashboard-panel-head {
        display: grid;
        gap: 10px;
    }

    .dashboard-add-btn,
    .dashboard-small-btn {
        width: 100%;
    }

    .dashboard-bar-wrap {
        height: 240px;
    }

    .dashboard-donut-wrap {
        height: 220px;
    }

    .dashboard-recent-item {
        grid-template-columns: 76px minmax(0, 1fr);
        align-items: start;
    }

    .dashboard-recent-item img {
        width: 76px;
        height: 64px;
    }

    .dashboard-recent-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

/* ===== v149: public all-resources map ===== */
body.public-home .public-map-section {
    width: min(calc(100% - 32px), 1425px);
    margin: 16px auto 18px;
    padding: 18px;
    border: 1px solid rgba(56, 189, 248, .28);
    border-radius: 24px;
    background:
        radial-gradient(circle at 12% 18%, rgba(34, 211, 238, .18), transparent 34%),
        radial-gradient(circle at 86% 14%, rgba(59, 130, 246, .18), transparent 34%),
        linear-gradient(135deg, rgba(7, 27, 52, .90), rgba(8, 51, 68, .78));
    box-shadow: 0 24px 64px rgba(2, 8, 23, .34), inset 0 1px 0 rgba(255, 255, 255, .08);
    scroll-margin-top: 96px;
}

body.public-home .public-map-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
}

body.public-home .public-map-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 6px 12px;
    color: #a5f3fc;
    border: 1px solid rgba(125, 211, 252, .26);
    border-radius: 999px;
    background: rgba(8, 47, 73, .64);
    font-size: 12px;
    font-weight: 950;
}

body.public-home .public-map-head h2 {
    margin: 10px 0 2px;
    color: #f8fafc;
    font-size: clamp(24px, 3.1vw, 42px);
    line-height: 1.15;
    font-weight: 950;
}

body.public-home .public-map-head h1 {
    margin: 10px 0 2px;
    color: #f8fafc;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1.08;
    font-weight: 950;
}

body.public-home .public-map-head p {
    max-width: 760px;
    margin: 0;
    color: rgba(226, 245, 255, .84);
    font-size: 14px;
    line-height: 1.65;
    font-weight: 800;
}

body.public-home .public-map-count {
    min-width: 120px;
    padding: 12px 16px;
    text-align: center;
    border: 1px solid rgba(103, 232, 249, .32);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(14, 165, 233, .22), rgba(34, 211, 238, .12));
}

body.public-home .public-map-count strong {
    display: block;
    color: #67e8f9;
    font-size: 34px;
    line-height: 1;
    font-weight: 950;
}

body.public-home .public-map-count span {
    display: block;
    margin-top: 5px;
    color: rgba(226, 245, 255, .86);
    font-size: 12px;
    font-weight: 900;
}

body.public-home .public-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

body.public-home .public-map-legend span,
body.public-home .public-map-legend button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 5px 10px;
    color: rgba(241, 245, 249, .92);
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 999px;
    background: rgba(2, 8, 23, .28);
    font-size: 12px;
    font-weight: 900;
}

body.public-home .public-map-legend button {
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

body.public-home .public-map-legend button:hover,
body.public-home .public-map-legend button.active {
    color: #ffffff;
    border-color: rgba(103, 232, 249, .62);
    background: linear-gradient(135deg, rgba(37, 99, 235, .56), rgba(34, 211, 238, .34));
    box-shadow: 0 10px 24px rgba(8, 145, 178, .18);
    transform: translateY(-1px);
}

body.public-home .public-map-legend i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .08);
}

body.public-home .public-map-legend .all i { background: #67e8f9; }
body.public-home .public-map-legend .place i { background: #22c55e; }
body.public-home .public-map-legend .innovation i { background: #f59e0b; }
body.public-home .public-map-legend .person i { background: #ec4899; }

body.public-home .public-map-controls {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    align-items: end;
    gap: 12px;
    margin: 0 0 14px;
}

body.public-home .public-map-select-wrap {
    display: grid;
    gap: 7px;
    margin: 0;
}

body.public-home .public-map-select-wrap span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #dff8ff;
    font-size: 13px;
    font-weight: 950;
}

body.public-home .public-map-select-wrap select {
    width: 100%;
    min-height: 44px;
    padding: 8px 42px 8px 14px;
    color: #e0faff;
    border: 1px solid rgba(103, 232, 249, .38);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(8, 47, 73, .92), rgba(15, 23, 42, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 26px rgba(2, 8, 23, .18);
    font-size: 15px;
    font-weight: 900;
    outline: none;
}

body.public-home .public-map-select-wrap select:focus {
    border-color: rgba(103, 232, 249, .78);
    box-shadow: 0 0 0 4px rgba(34, 211, 238, .14), inset 0 1px 0 rgba(255, 255, 255, .08);
}

body.public-home .public-map-select-wrap option {
    color: #0f172a;
    background: #f8fafc;
}

body.public-home .public-map-shell {
    position: relative;
    overflow: hidden;
    min-height: clamp(420px, 62vh, 680px);
    border: 1px solid rgba(125, 211, 252, .34);
    border-radius: 20px;
    background: rgba(2, 8, 23, .36);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

body.public-home .public-learning-map {
    width: 100%;
    min-height: clamp(420px, 62vh, 680px);
    background: #0f2539;
}

body.public-home .public-learning-map .leaflet-control-zoom a {
    color: #0f172a;
    border: 0;
    font-weight: 950;
}

body.public-home .public-learning-map .leaflet-control-attribution {
    font-family: 'Sarabun', sans-serif;
    font-size: 10px;
}

body.public-home .public-map-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 24px;
    color: #dbeafe;
    text-align: center;
    background: rgba(2, 8, 23, .42);
    z-index: 450;
}

body.public-home .public-map-empty i {
    color: #67e8f9;
    font-size: 42px;
}

body.public-home .public-map-empty strong {
    font-size: 20px;
    font-weight: 950;
}

body.public-home .public-map-empty span {
    color: rgba(219, 234, 254, .78);
    font-size: 13px;
    font-weight: 800;
}

body.public-home .public-map-marker {
    width: 34px !important;
    height: 44px !important;
    border: 0;
    background: transparent;
}

body.public-home .public-map-marker span {
    position: relative;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border: 3px solid #ffffff;
    border-radius: 999px 999px 999px 6px;
    background: linear-gradient(135deg, #22c55e, #14b8a6);
    box-shadow: 0 10px 18px rgba(2, 8, 23, .30), 0 0 0 5px rgba(34, 197, 94, .18);
    transform: rotate(-45deg);
}

body.public-home .public-map-marker span i {
    font-size: 13px;
    transform: rotate(45deg);
}

body.public-home .public-map-marker.innovation span {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    box-shadow: 0 10px 18px rgba(2, 8, 23, .30), 0 0 0 5px rgba(245, 158, 11, .18);
}

body.public-home .public-map-marker.person span {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    box-shadow: 0 10px 18px rgba(2, 8, 23, .30), 0 0 0 5px rgba(236, 72, 153, .18);
}

body.public-home .public-map-marker.default span {
    background: linear-gradient(135deg, #38bdf8, #2563eb);
    box-shadow: 0 10px 18px rgba(2, 8, 23, .30), 0 0 0 5px rgba(56, 189, 248, .18);
}

body.public-home .leaflet-popup-content-wrapper {
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(14, 165, 233, .24);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 22px 48px rgba(2, 8, 23, .25);
}

body.public-home .leaflet-popup-content {
    width: 242px !important;
    margin: 0;
    font-family: 'Sarabun', sans-serif;
}

body.public-home .leaflet-popup-tip {
    background: #ffffff;
}

body.public-home .public-map-popup-card {
    margin: 0;
    background: #ffffff;
}

body.public-home .public-map-popup-card img {
    width: 100%;
    height: 132px;
    display: block;
    object-fit: cover;
    background: #e2e8f0;
}

body.public-home .public-map-popup-body {
    display: grid;
    gap: 8px;
    padding: 12px 13px 13px;
}

body.public-home .public-map-popup-badge {
    width: fit-content;
    padding: 4px 9px;
    color: #047857;
    border-radius: 999px;
    background: #dcfce7;
    font-size: 11px;
    font-weight: 950;
}

body.public-home .public-map-popup-badge.innovation {
    color: #92400e;
    background: #fef3c7;
}

body.public-home .public-map-popup-badge.person {
    color: #9d174d;
    background: #fce7f3;
}

body.public-home .public-map-popup-badge.default {
    color: #075985;
    background: #e0f2fe;
}

body.public-home .public-map-popup-body h3 {
    margin: 0;
    color: #0f172a;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 950;
}

body.public-home .public-map-popup-body p,
body.public-home .public-map-popup-body small {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 800;
}

body.public-home .public-map-popup-body p {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

body.public-home .public-map-popup-body p i {
    margin-top: 2px;
    color: #0ea5e9;
}

body.public-home .public-map-popup-body a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    margin-top: 2px;
    color: #ffffff;
    text-decoration: none;
    border-radius: 11px;
    background: linear-gradient(135deg, #2563eb, #22d3ee);
    font-size: 13px;
    font-weight: 950;
    box-shadow: 0 12px 24px rgba(37, 99, 235, .22);
}

body.public-home .leaflet-container a.leaflet-popup-close-button {
    top: 7px;
    right: 7px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    color: #0f172a;
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .16);
}

@media (max-width: 767.98px) {
    body.public-home .public-map-section {
        width: calc(100% - 18px);
        margin: 10px auto 14px;
        padding: 12px;
        border-radius: 20px;
        scroll-margin-top: 82px;
    }

    body.public-home .public-map-head {
        display: grid;
        gap: 10px;
    }

    body.public-home .public-map-head h2 {
        font-size: 22px;
    }

    body.public-home .public-map-head h1 {
        font-size: 27px;
    }

    body.public-home .public-map-head p {
        font-size: 12.5px;
    }

    body.public-home .public-map-count {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        border-radius: 16px;
    }

    body.public-home .public-map-count strong {
        font-size: 28px;
    }

    body.public-home .public-map-shell,
    body.public-home .public-learning-map {
        min-height: 430px;
        border-radius: 16px;
    }

    body.public-home .leaflet-popup-content {
        width: 218px !important;
    }

    body.public-home .public-map-popup-card img {
        height: 116px;
    }
}

/* ===== v150: dedicated public map page ===== */
body.public-home.public-map-page main.public-page.future-page {
    padding-top: 96px;
    padding-bottom: 22px;
}

body.public-home.public-map-page .public-map-page-section {
    width: min(calc(100% - 28px), 1500px);
    min-height: calc(100vh - 128px);
    margin: 0 auto 18px;
    padding: 18px;
}

body.public-home.public-map-page .public-map-page-section .public-map-head {
    align-items: center;
    margin-bottom: 14px;
}

body.public-home.public-map-page .public-map-page-section .public-map-legend {
    margin: 0;
}

body.public-home.public-map-page .public-map-page-section .public-map-legend button {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 14px;
}

body.public-home.public-map-page .public-map-page-section .public-map-legend i {
    width: 12px;
    height: 12px;
}

body.public-home.public-map-page .public-map-page-section .public-map-shell,
body.public-home.public-map-page .public-map-page-section .public-learning-map {
    min-height: clamp(560px, calc(100vh - 260px), 820px);
}

body.public-home.public-map-page .public-map-page-section .public-map-marker span {
    width: 40px;
    height: 40px;
    box-shadow: 0 14px 26px rgba(2, 8, 23, .32), 0 0 0 6px rgba(34, 197, 94, .19);
}

body.public-home.public-map-page .public-map-page-section .public-map-marker {
    width: 40px !important;
    height: 50px !important;
}

body.public-home.public-map-page .public-map-page-section .public-map-marker.innovation span {
    box-shadow: 0 14px 26px rgba(2, 8, 23, .32), 0 0 0 6px rgba(245, 158, 11, .20);
}

body.public-home.public-map-page .public-map-page-section .public-map-marker.person span {
    box-shadow: 0 14px 26px rgba(2, 8, 23, .32), 0 0 0 6px rgba(236, 72, 153, .20);
}

body.public-home.public-map-page .public-map-page-section .public-map-marker.default span {
    box-shadow: 0 14px 26px rgba(2, 8, 23, .32), 0 0 0 6px rgba(56, 189, 248, .20);
}

body.public-home.public-map-page .public-map-page-section .public-map-marker span i {
    font-size: 15px;
}

@media (max-width: 767.98px) {
    body.public-home.public-map-page main.public-page.future-page {
        padding-top: 82px;
        padding-bottom: 16px;
    }

    body.public-home.public-map-page .public-map-page-section {
        width: calc(100% - 14px);
        min-height: calc(100vh - 98px);
        padding: 12px;
    }

    body.public-home.public-map-page .public-map-page-section .public-map-legend {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.public-home .public-map-controls {
        grid-template-columns: 1fr;
    }

    body.public-home.public-map-page .public-map-page-section .public-map-legend button {
        justify-content: center;
        min-height: 40px;
        padding: 8px;
        font-size: 12.5px;
    }

    body.public-home.public-map-page .public-map-page-section .public-map-shell,
    body.public-home.public-map-page .public-map-page-section .public-learning-map {
        min-height: calc(100vh - 310px);
    }
}

/* ===== v151: admin map marker colors ===== */
.admin-map-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -6px 0 14px;
}

.admin-map-toolbar span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 6px 12px;
    color: #334155;
    border: 1px solid rgba(203, 213, 225, .88);
    border-radius: 999px;
    background: rgba(255, 255, 255, .84);
    font-size: 12px;
    font-weight: 900;
}

.admin-map-toolbar i {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(15, 23, 42, .06);
}

.admin-map-toolbar .place i { background: #22c55e; }
.admin-map-toolbar .innovation i { background: #f59e0b; }
.admin-map-toolbar .person i { background: #ec4899; }

.admin-map-marker {
    width: 36px !important;
    height: 46px !important;
    border: 0;
    background: transparent;
}

.admin-map-marker span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border: 3px solid #ffffff;
    border-radius: 999px 999px 999px 7px;
    background: linear-gradient(135deg, #22c55e, #14b8a6);
    box-shadow: 0 10px 20px rgba(15, 23, 42, .26), 0 0 0 5px rgba(34, 197, 94, .18);
    transform: rotate(-45deg);
}

.admin-map-marker span i {
    font-size: 14px;
    transform: rotate(45deg);
}

.admin-map-marker.innovation span {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    box-shadow: 0 10px 20px rgba(15, 23, 42, .26), 0 0 0 5px rgba(245, 158, 11, .18);
}

.admin-map-marker.person span {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    box-shadow: 0 10px 20px rgba(15, 23, 42, .26), 0 0 0 5px rgba(236, 72, 153, .18);
}

.admin-map-marker.default span {
    background: linear-gradient(135deg, #38bdf8, #2563eb);
    box-shadow: 0 10px 20px rgba(15, 23, 42, .26), 0 0 0 5px rgba(56, 189, 248, .18);
}

.admin-map-popup {
    display: grid;
    gap: 7px;
    min-width: 240px;
    font-family: 'Sarabun', sans-serif;
}

.admin-map-popup-cover {
    width: 100%;
    height: 128px;
    display: block;
    object-fit: cover;
    border: 1px solid rgba(14, 165, 233, .22);
    border-radius: 14px;
    background: linear-gradient(135deg, #e0f2fe, #f8fafc);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .12);
}

.admin-map-popup-badge {
    width: fit-content;
    padding: 4px 9px;
    color: #047857;
    border-radius: 999px;
    background: #dcfce7;
    font-size: 11px;
    font-weight: 950;
}

.admin-map-popup-badge.innovation {
    color: #92400e;
    background: #fef3c7;
}

.admin-map-popup-badge.person {
    color: #9d174d;
    background: #fce7f3;
}

.admin-map-popup strong {
    color: #0f172a;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 950;
}

.admin-map-popup small {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.admin-map-popup a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    color: #ffffff;
    text-decoration: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    font-size: 12px;
    font-weight: 950;
}

/* ===== v152: tighter admin cards and clearer map filter status ===== */
.resource-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.resource-card {
    position: relative;
    border-radius: 18px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.resource-card:hover {
    transform: translateY(-3px);
    border-color: rgba(37, 99, 235, .20);
    box-shadow: 0 18px 36px rgba(15, 23, 42, .11);
}

.resource-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.resource-card .resource-cover,
.resource-card .resource-body {
    position: relative;
    z-index: 0;
}

.resource-card .action-group,
.resource-card .action-group a,
.resource-card .action-group button,
.resource-card .action-group form {
    position: relative;
    z-index: 2;
}

.resource-cover {
    height: 132px;
}

.resource-body {
    padding: 13px;
}

.resource-title {
    display: -webkit-box;
    min-height: 44px;
    margin: 8px 0 5px;
    overflow: hidden;
    font-size: 15.5px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.resource-view-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    margin-bottom: 8px;
    padding: 3px 8px;
    color: #1d4ed8;
    border-radius: 999px;
    background: #dbeafe;
    font-size: 11px;
    font-weight: 900;
}

.resource-meta {
    min-height: 40px;
    font-size: 12px;
}

.resource-body > p.text-muted {
    display: -webkit-box;
    min-height: 37px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.55;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.resource-card .category-badge,
.resource-card .status-badge {
    min-height: 26px;
    padding: 4px 8px;
    font-size: 10.5px;
}

.resource-card .action-btn {
    width: 34px;
    height: 34px;
    border-radius: 12px;
}

.dashboard-recent-actions form {
    margin: 0;
}

body.public-home .public-map-status {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin: 0 0 12px;
    padding: 8px 13px;
    color: #e0faff;
    border: 1px solid rgba(103, 232, 249, .32);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(14, 165, 233, .20), rgba(15, 23, 42, .28));
    font-size: 13px;
    font-weight: 950;
}

body.public-home.public-map-page .public-map-page-section .public-map-head {
    align-items: start;
    gap: 16px;
}

body.public-home.public-map-page .public-map-page-section .public-map-head h1 {
    max-width: 860px;
    margin-bottom: 8px;
    line-height: 1.18;
}

body.public-home.public-map-page .public-map-page-section .public-map-head p {
    max-width: 820px;
    margin-top: 6px;
    line-height: 1.75;
}

@media (max-width: 1399.98px) {
    .resource-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199.98px) {
    .resource-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .resource-card-grid {
        grid-template-columns: 1fr;
    }

    body.public-home .public-map-status {
        width: 100%;
        font-size: 12.5px;
    }
}

/* ===== v155: horizontal card carousel for public and admin lists ===== */
.tmap-card-carousel {
    min-width: 0;
}

.tmap-carousel-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.tmap-carousel-btn {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    color: #dffaff;
    border: 1px solid rgba(103, 232, 249, .35);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(14, 165, 233, .28), rgba(15, 23, 42, .78));
    box-shadow: 0 12px 26px rgba(15, 23, 42, .16);
    transition: transform .18s ease, border-color .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.tmap-carousel-btn:hover:not(:disabled),
.tmap-carousel-btn:focus-visible:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(103, 232, 249, .72);
    box-shadow: 0 16px 30px rgba(14, 165, 233, .22);
}

.tmap-carousel-btn:disabled {
    cursor: not-allowed;
    opacity: .36;
    box-shadow: none;
}

.tmap-card-carousel-track {
    scroll-behavior: smooth;
    scroll-padding-inline: 4px;
    scrollbar-color: rgba(103, 232, 249, .46) rgba(15, 23, 42, .16);
    scrollbar-width: thin;
}

.tmap-card-carousel-track::-webkit-scrollbar {
    height: 8px;
}

.tmap-card-carousel-track::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, .16);
    border-radius: 999px;
}

.tmap-card-carousel-track::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #38bdf8, #22d3ee);
    border-radius: 999px;
}

body.public-home .public-category-group-actions,
body.public-home .public-selected-resource-head,
.admin-resource-carousel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.public-home .public-category-group-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

body.public-home .public-selected-resource-head {
    margin: 0 0 12px;
    color: #dffaff;
    font-size: 13px;
    font-weight: 950;
}

body.public-home .public-selected-resource-head > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid rgba(103, 232, 249, .28);
    border-radius: 14px;
    background: rgba(15, 23, 42, .32);
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track,
body.public-home .public-selected-resource-grid.tmap-card-carousel-track,
.resource-card-grid.tmap-card-carousel-track {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track,
body.public-home .public-selected-resource-grid.tmap-card-carousel-track {
    gap: 12px !important;
    padding: 3px 4px 14px !important;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card,
body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card {
    flex: 0 0 min(292px, calc((100% - 36px) / 4)) !important;
    width: auto !important;
    max-width: none !important;
    scroll-snap-align: start;
}

.admin-resource-carousel {
    padding: 18px;
    overflow: hidden;
}

.admin-resource-carousel-head {
    margin-bottom: 14px;
}

.admin-resource-carousel-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 21px;
    font-weight: 950;
}

.admin-resource-carousel-head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.admin-resource-carousel .tmap-carousel-btn {
    color: #075985;
    border-color: rgba(14, 165, 233, .24);
    background: linear-gradient(135deg, #e0faff, #dbeafe);
}

.resource-card-grid.tmap-card-carousel-track {
    gap: 14px !important;
    padding: 3px 4px 16px;
}

.resource-card-grid.tmap-card-carousel-track .resource-card {
    flex: 0 0 min(286px, calc((100% - 42px) / 4));
    scroll-snap-align: start;
}

@media (max-width: 1399.98px) {
    body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card,
    body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card {
        flex-basis: calc((100% - 24px) / 3) !important;
    }

    .resource-card-grid.tmap-card-carousel-track .resource-card {
        flex-basis: calc((100% - 28px) / 3);
    }
}

@media (max-width: 991.98px) {
    body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card,
    body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card {
        flex-basis: calc((100% - 12px) / 2) !important;
    }

    .resource-card-grid.tmap-card-carousel-track .resource-card {
        flex-basis: calc((100% - 14px) / 2);
    }
}

@media (max-width: 767.98px) {
    body.public-home .public-category-group-head {
        align-items: stretch !important;
    }

    body.public-home .public-category-group-actions,
    body.public-home .public-selected-resource-head,
    .admin-resource-carousel-head {
        align-items: stretch;
        flex-direction: column;
    }

    body.public-home .public-category-group-actions .public-category-group-link,
    body.public-home .public-category-group-actions .tmap-carousel-actions,
    body.public-home .public-selected-resource-head .tmap-carousel-actions,
    .admin-resource-carousel-head .tmap-carousel-actions {
        width: 100%;
    }

    body.public-home .public-category-group-actions .tmap-carousel-actions,
    body.public-home .public-selected-resource-head .tmap-carousel-actions,
    .admin-resource-carousel-head .tmap-carousel-actions {
        justify-content: flex-end;
    }

    body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card,
    body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card {
        flex-basis: min(86%, 320px) !important;
    }

    .resource-card-grid.tmap-card-carousel-track .resource-card {
        flex-basis: min(86%, 320px);
    }
}

/* ===== v156: balanced equal-height carousel cards ===== */
body.public-home .public-category-resource-grid.tmap-card-carousel-track,
body.public-home .public-selected-resource-grid.tmap-card-carousel-track {
    width: 100% !important;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card,
body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card {
    flex-basis: calc((100% - 36px) / 4) !important;
    min-width: 0 !important;
    min-height: 306px !important;
    height: 306px !important;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-card-cover,
body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-card-cover {
    flex: 0 0 116px !important;
    height: 116px !important;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-card-body,
body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-card-body {
    min-height: 0 !important;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-card-body h3,
body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-card-body h3 {
    display: -webkit-box !important;
    min-height: 40px !important;
    overflow: hidden !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-card-body p,
body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-card-body p {
    display: -webkit-box !important;
    flex: 0 0 auto !important;
    min-height: 49px !important;
    max-height: 49px !important;
    overflow: hidden !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-card-meta,
body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-card-meta {
    min-height: 34px !important;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-card-cta,
body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-card-cta {
    margin-top: auto !important;
}

.resource-card-grid.tmap-card-carousel-track .resource-card {
    flex-basis: calc((100% - 42px) / 4);
    min-height: 370px;
    height: 370px;
}

.resource-card-grid.tmap-card-carousel-track .resource-card .resource-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.resource-card-grid.tmap-card-carousel-track .resource-card .action-group {
    margin-top: auto;
}

@media (max-width: 1399.98px) {
    body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card,
    body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card {
        flex-basis: calc((100% - 24px) / 3) !important;
    }

    .resource-card-grid.tmap-card-carousel-track .resource-card {
        flex-basis: calc((100% - 28px) / 3);
    }
}

@media (max-width: 991.98px) {
    body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card,
    body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card {
        flex-basis: calc((100% - 12px) / 2) !important;
    }

    .resource-card-grid.tmap-card-carousel-track .resource-card {
        flex-basis: calc((100% - 14px) / 2);
    }
}

@media (max-width: 767.98px) {
    body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card,
    body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card {
        flex-basis: min(88%, 330px) !important;
        height: 318px !important;
        min-height: 318px !important;
    }

    .resource-card-grid.tmap-card-carousel-track .resource-card {
        flex-basis: min(88%, 330px);
        height: 382px;
        min-height: 382px;
    }
}

/* ===== v157: larger public images, hover arrows, and paginated all-results view ===== */
body.public-home .public-category-group,
.admin-resource-carousel {
    position: relative;
}

body.public-home .public-category-group .tmap-carousel-actions,
.admin-resource-carousel .tmap-carousel-actions {
    position: absolute;
    left: -16px;
    right: -16px;
    top: 55%;
    z-index: 30;
    justify-content: space-between;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-50%);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

body.public-home .public-category-group:hover .tmap-carousel-actions,
body.public-home .public-category-group:focus-within .tmap-carousel-actions,
.admin-resource-carousel:hover .tmap-carousel-actions,
.admin-resource-carousel:focus-within .tmap-carousel-actions {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

body.public-home .public-category-group .tmap-carousel-btn,
.admin-resource-carousel .tmap-carousel-btn {
    pointer-events: auto;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track,
.resource-card-grid.tmap-card-carousel-track {
    scrollbar-width: none;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track::-webkit-scrollbar,
.resource-card-grid.tmap-card-carousel-track::-webkit-scrollbar {
    display: none;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card {
    height: 388px !important;
    min-height: 388px !important;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-card-cover {
    flex-basis: 174px !important;
    height: 174px !important;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-card-body p {
    min-height: 38px !important;
    max-height: 38px !important;
    -webkit-line-clamp: 2 !important;
}

.public-all-resource-panel {
    min-width: 0;
}

body.public-home .public-all-resource-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 14px;
}

body.public-home .public-all-resource-head > div {
    min-width: 0;
}

body.public-home .public-all-resource-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #9defff;
    font-size: 13px;
    font-weight: 950;
}

body.public-home .public-all-resource-head h3 {
    margin: 4px 0 0;
    color: #f8fdff;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 950;
}

body.public-home .public-all-resource-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

body.public-home .public-all-resource-grid .public-resource-card.future-resource-card {
    height: 388px !important;
    min-height: 388px !important;
}

body.public-home .public-all-resource-grid .public-card-cover {
    flex: 0 0 174px !important;
    height: 174px !important;
}

body.public-home .public-all-resource-grid .public-card-body h3 {
    display: -webkit-box !important;
    min-height: 40px !important;
    overflow: hidden !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

body.public-home .public-all-resource-grid .public-card-body p {
    display: -webkit-box !important;
    flex: 0 0 auto !important;
    min-height: 38px !important;
    max-height: 38px !important;
    overflow: hidden !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

body.public-home .public-all-resource-grid .public-card-meta {
    min-height: 34px !important;
}

body.public-home .public-all-resource-grid .public-card-cta {
    margin-top: auto !important;
}

body.public-home .public-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

body.public-home .public-pagination a {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    color: #dffbff;
    text-decoration: none;
    border: 1px solid rgba(125, 249, 255, .24);
    border-radius: 14px;
    background: rgba(3, 12, 30, .50);
    font-size: 13px;
    font-weight: 950;
}

body.public-home .public-pagination a.active {
    color: #06172c;
    background: linear-gradient(135deg, #e9fbff, #8df5ff);
    border-color: rgba(226, 252, 255, .75);
}

body.public-home .public-pagination a.disabled {
    opacity: .38;
    pointer-events: none;
}

@media (max-width: 1399.98px) {
    body.public-home .public-all-resource-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    body.public-home .public-all-resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    body.public-home .public-category-group .tmap-carousel-actions,
    .admin-resource-carousel .tmap-carousel-actions {
        left: 8px;
        right: 8px;
        opacity: 1;
        visibility: visible;
    }

    body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card {
        height: 394px !important;
        min-height: 394px !important;
    }

    body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-card-cover {
        flex-basis: 178px !important;
        height: 178px !important;
    }

    body.public-home .public-all-resource-head {
        align-items: stretch;
        flex-direction: column;
    }

    body.public-home .public-all-resource-grid {
        grid-template-columns: 1fr !important;
    }

    body.public-home .public-all-resource-grid .public-resource-card.future-resource-card {
        min-height: 394px !important;
        height: auto !important;
    }
}

/* ===== v158: compact scrollable dashboard recent list ===== */
.dashboard-recent-panel {
    display: flex;
    flex-direction: column;
    max-height: min(74vh, 650px);
    overflow: hidden;
    padding: 16px;
}

.dashboard-recent-panel .dashboard-panel-head {
    flex: 0 0 auto;
    align-items: center;
    margin-bottom: 10px;
}

.dashboard-recent-panel .dashboard-panel-head h2 {
    font-size: 18px;
}

.dashboard-recent-panel .dashboard-panel-head p {
    font-size: 12px;
}

.dashboard-recent-list {
    max-height: min(56vh, 520px);
    overflow-y: auto;
    padding: 2px 4px 2px 0;
    scrollbar-color: rgba(14, 165, 233, .45) rgba(148, 163, 184, .14);
    scrollbar-width: thin;
}

.dashboard-recent-list::-webkit-scrollbar {
    width: 8px;
}

.dashboard-recent-list::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, .14);
    border-radius: 999px;
}

.dashboard-recent-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #38bdf8, #2563eb);
    border-radius: 999px;
}

.dashboard-recent-item {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 78px;
    padding: 9px 10px;
    border-radius: 15px;
}

.dashboard-recent-item img {
    width: 72px;
    height: 52px;
    border-radius: 12px;
}

.dashboard-recent-meta {
    flex-wrap: nowrap;
    gap: 5px;
    max-width: 100%;
    margin-bottom: 4px;
    overflow: hidden;
}

.dashboard-recent-meta .category-badge,
.dashboard-recent-meta .dashboard-map-mini {
    min-height: 22px;
    padding: 3px 7px;
    font-size: 10px;
}

.dashboard-recent-body h3 {
    font-size: 14px;
    line-height: 1.24;
}

.dashboard-recent-body p {
    margin: 1px 0;
    font-size: 11.5px;
}

.dashboard-recent-body small {
    font-size: 11px;
}

.dashboard-recent-actions {
    gap: 5px;
}

.dashboard-recent-actions .action-btn {
    width: 30px;
    height: 30px;
    border-radius: 11px;
}

@media (max-width: 767.98px) {
    .dashboard-recent-panel {
        max-height: none;
        padding: 14px;
    }

    .dashboard-recent-list {
        max-height: 520px;
    }

    .dashboard-recent-item {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .dashboard-recent-item img {
        width: 64px;
        height: 48px;
    }

    .dashboard-recent-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

/* ===== v160: clearer admin map popup, compact backend scale, easier entry form ===== */
.leaflet-container .admin-map-popup a,
.admin-map-popup a {
    color: #ffffff !important;
    background: linear-gradient(135deg, #1d4ed8 0%, #0284c7 48%, #06b6d4 100%) !important;
    border: 1px solid rgba(255, 255, 255, .32);
    box-shadow: 0 12px 24px rgba(2, 132, 199, .24);
    text-shadow: 0 1px 4px rgba(15, 23, 42, .36);
}

.leaflet-container .admin-map-popup a:hover,
.leaflet-container .admin-map-popup a:focus-visible {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 46%, #0891b2 100%) !important;
    box-shadow: 0 14px 28px rgba(2, 132, 199, .34);
}

@media (min-width: 1200px) {
    .app-shell .sidebar {
        width: 238px !important;
        padding: 16px !important;
    }

    .app-shell .app-main,
    .developer-credit {
        margin-left: 238px !important;
    }
}

.app-shell {
    font-size: 14px;
}

.app-shell .brand-logo {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    font-size: 18px;
}

.app-shell .brand-link {
    gap: 10px;
    padding-bottom: 16px;
}

.app-shell .brand-link strong {
    font-size: 17px;
}

.app-shell .brand-link small,
.app-shell .office-card {
    font-size: 11.5px;
}

.app-shell .side-nav {
    gap: 7px;
    margin-top: 18px;
}

.app-shell .side-link {
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13px;
}

.app-shell .topbar {
    padding: 13px 24px 9px !important;
}

.app-shell .content-wrap {
    padding: 9px clamp(16px, 2vw, 24px) 30px !important;
}

.app-shell .page-heading {
    font-size: clamp(21px, 2.1vw, 28px) !important;
    line-height: 1.14;
}

.app-shell .eyebrow {
    font-size: 10.5px;
}

.app-shell .user-chip {
    padding: 6px 11px 6px 6px;
}

.app-shell .user-avatar {
    width: 34px;
    height: 34px;
}

.app-shell :is(.filter-card, .form-card, .table-card, .chart-card, .dashboard-panel, .dashboard-hero) {
    border-radius: 18px !important;
}

.app-shell :is(.filter-card, .form-card, .table-card, .chart-card) {
    padding: 16px !important;
}

.app-shell :is(.section-title h2, .section-title h3) {
    font-size: 18px !important;
    line-height: 1.22;
}

.app-shell .section-title p {
    font-size: 12.5px;
}

.app-shell :is(.form-control, .form-select) {
    min-height: 38px;
    border-radius: 12px;
    font-size: 13.5px;
}

.app-shell textarea.form-control {
    line-height: 1.62;
}

.app-shell .btn {
    font-size: 13.5px;
}

.app-shell .stat-card {
    min-height: 108px;
    padding: 15px !important;
}

.app-shell .stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    font-size: 16px;
    margin-bottom: 10px;
}

.app-shell .stat-value {
    font-size: 27px;
}

.app-shell .resource-card-grid {
    gap: 12px;
}

.app-shell .resource-cover {
    height: 132px;
}

.app-shell .resource-body {
    padding: 13px;
}

.app-shell .resource-title {
    font-size: 15.5px;
}

.app-shell .map-box {
    height: min(650px, calc(100vh - 210px));
    min-height: 520px;
    border-radius: 22px;
}

.app-shell .professional-form {
    max-width: 1180px;
    margin-inline: auto;
}

.app-shell .professional-form .form-section {
    margin-top: 13px !important;
    padding: 16px !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 250, 252, .90)),
        radial-gradient(circle at 100% 0%, rgba(14, 165, 233, .09), transparent 18rem);
}

.app-shell .form-section-head {
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
}

.app-shell .form-section-head h3 {
    font-size: 16.5px !important;
}

.app-shell .form-section-head p {
    font-size: 12px;
}

.app-shell .step-badge {
    min-width: 34px;
    height: 34px;
    border-radius: 12px;
    font-size: 13px;
}

.app-shell .category-picker {
    gap: 10px;
}

.app-shell .category-option-card {
    min-height: 108px;
    padding: 15px;
    border-radius: 18px;
}

.app-shell .category-option-card i {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    border-radius: 13px;
    font-size: 17px;
}

.app-shell .category-option-card strong {
    font-size: 15px;
    line-height: 1.25;
}

.app-shell .resource-extra-panel {
    gap: 10px;
}

.app-shell .resource-extra-title {
    padding: 11px;
    border-radius: 15px;
}

.app-shell .resource-extra-title i {
    width: 36px;
    height: 36px;
    border-radius: 12px;
}

.app-shell .resource-extra-title h4 {
    font-size: 16px;
}

.app-shell .resource-extra-title p {
    font-size: 12px;
}

.app-shell .resource-extra-block {
    padding: 13px;
    border-radius: 15px;
}

.app-shell .resource-extra-block h5 {
    font-size: 14.5px;
    margin-bottom: 10px;
}

.app-shell .resource-field-reference {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 9px 12px;
    color: #0f766e;
    border: 1px dashed rgba(14, 165, 233, .32);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(236, 254, 255, .92), rgba(240, 253, 250, .88));
    font-size: 12.5px;
    font-weight: 800;
}

.app-shell .resource-field-reference i {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: #ffffff;
    border-radius: 8px;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    font-size: 11px;
}

.app-shell .map-url-preview iframe {
    min-height: 230px;
}

.app-shell .sticky-action-bar {
    bottom: 12px;
    padding: 10px;
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(236, 254, 255, .90));
    box-shadow: 0 16px 40px rgba(15, 23, 42, .16);
}

.app-shell .sticky-action-bar .btn-gradient {
    min-width: 210px;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .22);
}

@media (max-width: 1199.98px) {
    .app-shell .map-box {
        height: 560px;
        min-height: 480px;
    }
}

@media (max-width: 767.98px) {
    .app-shell {
        font-size: 13.5px;
    }

    .app-shell .topbar {
        padding: 10px 14px 8px !important;
    }

    .app-shell .content-wrap {
        padding: 8px 12px 96px !important;
    }

    .app-shell :is(.filter-card, .form-card, .table-card, .chart-card) {
        padding: 13px !important;
    }

    .app-shell .category-picker {
        grid-template-columns: 1fr;
    }

    .app-shell .category-option-card {
        min-height: 82px;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .app-shell .category-option-card i {
        margin: 0;
        flex: 0 0 auto;
    }

    .app-shell .map-box {
        height: 520px;
        min-height: 420px;
        border-radius: 18px;
    }

    .app-shell .sticky-action-bar {
        bottom: 74px;
        justify-content: stretch !important;
    }

    .app-shell .sticky-action-bar .btn {
        flex: 1 1 160px;
    }
}

/* ===== v162: no duplicate form hints and contained public card CTA ===== */
body.public-home .public-resource-card.future-resource-card {
    overflow: hidden !important;
}

body.public-home .public-resource-card.future-resource-card .public-card-body {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    flex-direction: column !important;
}

body.public-home .public-resource-card.future-resource-card .public-card-meta {
    display: -webkit-box !important;
    overflow: hidden !important;
    max-height: 38px !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

body.public-home .public-resource-card.future-resource-card .public-card-cta {
    position: relative !important;
    inset: auto !important;
    align-self: flex-start !important;
    max-width: 100% !important;
    margin-top: auto !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

body.public-home .public-all-resource-grid .public-resource-card.future-resource-card,
body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card,
body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card {
    height: 412px !important;
    min-height: 412px !important;
}

body.public-home .public-all-resource-grid .public-card-cover,
body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-card-cover,
body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-card-cover {
    flex: 0 0 172px !important;
    height: 172px !important;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-card-body p,
body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-card-body p,
body.public-home .public-all-resource-grid .public-card-body p {
    min-height: 34px !important;
    max-height: 34px !important;
}

.app-shell .professional-form .resource-field-reference {
    display: none !important;
}

.app-shell .professional-form .resource-extra-block:has(.resource-time-range) h5 {
    color: #075985;
}

@media (max-width: 767.98px) {
    body.public-home .public-all-resource-grid .public-resource-card.future-resource-card,
    body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card,
    body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card {
        height: 398px !important;
        min-height: 398px !important;
    }

    body.public-home .public-all-resource-grid .public-card-cover,
    body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-card-cover,
    body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-card-cover {
        flex-basis: 164px !important;
        height: 164px !important;
    }
}

/* ===== v163: tighten dashboard vertical rhythm and reorder entry form comfortably ===== */
@media (min-width: 1200px) {
    .app-shell .dashboard-analytics-grid {
        gap: 14px;
    }

    .app-shell .dashboard-donut-layout {
        grid-template-columns: minmax(132px, 160px) minmax(0, 1fr);
        align-items: center;
        gap: 12px;
    }

    .app-shell .dashboard-donut-wrap {
        width: 154px;
        height: 154px;
    }

    .app-shell .dashboard-category-list {
        gap: 8px;
    }

    .app-shell .dashboard-category-item,
    .app-shell .dashboard-health-item {
        min-height: 50px;
        padding: 8px 9px;
        border-radius: 14px;
    }

    .app-shell .dashboard-category-item span,
    .app-shell .dashboard-health-item span {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .app-shell .dashboard-lower-grid {
        margin-top: -2px;
    }
}

.app-shell .professional-form .form-section {
    scroll-margin-top: 92px;
}

.app-shell .professional-form .resource-extra-block h5 {
    font-size: 15px;
}

.app-shell .professional-form .resource-extra-block .row {
    row-gap: 12px;
}

.app-shell .professional-form .resource-field-facilities_none {
    align-self: end;
}

body.public-home .public-all-resource-grid .public-resource-card.future-resource-card {
    height: 440px !important;
    min-height: 440px !important;
}

body.public-home .public-all-resource-grid .public-card-body {
    min-height: 0 !important;
    overflow: hidden !important;
}

body.public-home .public-all-resource-grid .public-card-body h3 {
    display: -webkit-box !important;
    overflow: hidden !important;
    max-height: 48px !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

body.public-home .public-all-resource-grid .public-card-cta {
    flex: 0 0 auto !important;
    min-height: 32px !important;
    margin-bottom: 0 !important;
}

@media (max-width: 767.98px) {
    body.public-home .public-all-resource-grid .public-resource-card.future-resource-card {
        height: auto !important;
        min-height: 410px !important;
    }
}

/* ===== v164: exact category form taxonomy from document ===== */
.app-shell .category-option-card {
    position: relative;
    overflow: hidden;
    border-width: 2px;
}

.app-shell .category-option-card::after {
    content: "";
    position: absolute;
    right: -28px;
    top: -28px;
    width: 92px;
    height: 92px;
    border-radius: 999px;
    opacity: .16;
    pointer-events: none;
}

.app-shell .category-option-card.category-option-place {
    --category-accent: #ec4899;
}

.app-shell .category-option-card.category-option-innovation {
    --category-accent: #f59e0b;
}

.app-shell .category-option-card.category-option-person {
    --category-accent: #10b981;
}

.app-shell .category-option-card.category-option-place i {
    background: linear-gradient(135deg, #fb7185, #d946ef);
}

.app-shell .category-option-card.category-option-innovation i {
    background: linear-gradient(135deg, #facc15, #f97316);
}

.app-shell .category-option-card.category-option-person i {
    background: linear-gradient(135deg, #34d399, #059669);
}

.app-shell .category-option-card.category-option-place::after {
    background: #ec4899;
}

.app-shell .category-option-card.category-option-innovation::after {
    background: #f59e0b;
}

.app-shell .category-option-card.category-option-person::after {
    background: #10b981;
}

.app-shell .category-option input:checked + .category-option-card {
    border-color: var(--category-accent, #2563eb) !important;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--category-accent, #2563eb) 20%, transparent);
}

.app-shell .category-option-card strong {
    color: #0f172a;
    font-weight: 950;
}

.app-shell .category-option-card small {
    color: #475569;
    font-weight: 850;
    letter-spacing: 0;
}

.app-shell .professional-form .form-label.fw-bold,
.app-shell .professional-form .resource-extra-block h5 {
    color: #0f172a;
    font-weight: 950 !important;
}

.app-shell .professional-form .resource-extra-title h4 {
    font-size: 18px !important;
    font-weight: 950;
}

.app-shell .resource-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.app-shell .resource-choice-card {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 54px;
    padding: 11px 13px;
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 14px;
    background: rgba(255, 255, 255, .78);
    color: #1e293b;
    font-weight: 850;
    line-height: 1.32;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.app-shell .resource-choice-card:hover {
    transform: translateY(-1px);
    border-color: rgba(14, 165, 233, .45);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
}

.app-shell .resource-choice-card input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    accent-color: #0ea5e9;
}

.app-shell .resource-choice-card:has(input:checked) {
    border-color: rgba(14, 165, 233, .78);
    background: linear-gradient(135deg, rgba(224, 242, 254, .98), rgba(236, 253, 245, .92));
    box-shadow: 0 14px 28px rgba(14, 165, 233, .13);
}

/* v170 - Spread expertise choices across the full form width */
.app-shell .professional-form .resource-extra-field:has(.resource-choice-grid) {
    width: 100%;
}

.app-shell .professional-form .resource-choice-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    width: 100%;
}

.app-shell .professional-form .resource-choice-card {
    min-height: 76px;
    height: 100%;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.app-shell .professional-form .resource-choice-card span {
    display: block;
    min-width: 0;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    .app-shell .resource-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .app-shell .resource-choice-grid {
        grid-template-columns: 1fr;
    }
}

/* v165 - Cleaner resource form hierarchy */
.app-shell .professional-form .form-section-head {
    align-items: center;
    gap: 0;
    margin-bottom: 18px;
}

.app-shell .professional-form .form-section-head .step-badge {
    display: none !important;
}

.app-shell .professional-form .form-section-head h3 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 950;
    letter-spacing: 0;
}

.app-shell .professional-form .form-section-head p {
    display: none;
}

.app-shell .professional-form .resource-extra-form-section {
    display: grid;
    gap: 16px;
}

.app-shell .professional-form .resource-extra-panel {
    display: grid;
    gap: 16px;
}

.app-shell .professional-form .resource-extra-panel[hidden] {
    display: none !important;
}

.app-shell .professional-form .resource-extra-block {
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .045);
}

.app-shell .professional-form .resource-extra-block h5 {
    display: flex;
    align-items: center;
    min-height: 28px;
    margin: 0 0 16px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(15, 23, 42, .1);
    color: #0f172a !important;
    font-size: 19px !important;
    font-weight: 950 !important;
    letter-spacing: 0;
}

.app-shell .resource-fixed-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 14px 16px;
    border: 1px solid rgba(14, 165, 233, .26);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(224, 242, 254, .9), rgba(240, 253, 250, .88));
    color: #0f172a;
}

.app-shell .resource-fixed-note i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    color: #fff;
    box-shadow: 0 12px 24px rgba(37, 99, 235, .2);
}

.app-shell .resource-fixed-note strong {
    display: block;
    color: #0f172a;
    font-size: 16px;
    font-weight: 950;
    line-height: 1.35;
}

.app-shell .resource-fixed-note span {
    display: block;
    margin-top: 3px;
    color: #475569;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
}

/* v166 - clearer form cards, media picker, and balanced controls */
body.public-home .public-filter-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    min-height: 44px;
    padding: 0 16px !important;
    border-radius: 14px !important;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

body.public-home .public-filter-actions .btn-secondary {
    background: rgba(100, 116, 139, .88) !important;
    border-color: rgba(148, 163, 184, .28) !important;
    color: #fff !important;
}

.app-shell .professional-form .form-section {
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .88));
    box-shadow: 0 16px 34px rgba(15, 23, 42, .045);
}

.app-shell .professional-form .resource-extra-block {
    position: relative;
    overflow: hidden;
    padding: 20px !important;
    border: 1px solid rgba(14, 165, 233, .20) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(241, 245, 249, .78)) !important;
}

.app-shell .professional-form .resource-extra-block::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, #22d3ee, #2563eb);
    opacity: .95;
}

.app-shell .professional-form .resource-extra-block h5 {
    margin: -4px -2px 18px 0 !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, .12) !important;
}

.app-shell .professional-form .resource-extra-block .row {
    row-gap: 18px !important;
    align-items: start;
}

.app-shell .professional-form .resource-extra-field {
    min-width: 0;
}

.app-shell .professional-form .resource-extra-field .form-control,
.app-shell .professional-form .resource-extra-field .form-select,
.app-shell .professional-form .resource-time-range .form-control {
    min-height: 44px;
    border-radius: 14px;
}

.app-shell .professional-form .resource-time-range {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.app-shell .professional-form .resource-time-range > div,
.app-shell .professional-form .resource-time-range input {
    min-width: 0;
    width: 100%;
}

.app-shell .professional-form .resource-check-option {
    align-items: stretch;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.app-shell .professional-form .resource-check-option .form-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.app-shell .professional-form .resource-check-option .form-check-label {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 76px;
    padding: 14px 16px;
    border: 1px dashed rgba(14, 165, 233, .42);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(240, 249, 255, .95), rgba(236, 253, 245, .78));
    color: #0f172a;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.app-shell .professional-form .resource-check-option .form-check-label:hover {
    transform: translateY(-1px);
    border-color: rgba(14, 165, 233, .72);
    box-shadow: 0 14px 26px rgba(14, 165, 233, .12);
}

.app-shell .professional-form .resource-check-option .resource-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: rgba(14, 165, 233, .12);
    color: #0284c7;
    font-size: 20px;
}

.app-shell .professional-form .resource-check-option strong,
.app-shell .professional-form .resource-check-option small {
    display: block;
}

.app-shell .professional-form .resource-check-option strong {
    font-size: 15px;
    font-weight: 950;
}

.app-shell .professional-form .resource-check-option small {
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
}

.app-shell .professional-form .resource-check-option .form-check-input:checked + .form-check-label {
    border-style: solid;
    border-color: rgba(34, 197, 94, .65);
    background: linear-gradient(135deg, rgba(220, 252, 231, .98), rgba(236, 253, 245, .92));
    box-shadow: 0 14px 28px rgba(34, 197, 94, .14);
}

.app-shell .professional-form .resource-check-option .form-check-input:checked + .form-check-label .resource-check-icon {
    background: #22c55e;
    color: #fff;
}

.app-shell .professional-form .resource-media-builder {
    padding: 16px;
    border: 1px dashed rgba(14, 165, 233, .32);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(240, 249, 255, .9), rgba(255, 255, 255, .88));
}

.app-shell .professional-form .resource-media-link-list:empty,
.app-shell .professional-form .resource-media-file-list:empty {
    display: none;
}

.app-shell .professional-form .resource-media-actions {
    gap: 10px;
}

.app-shell .professional-form .resource-media-actions .btn {
    min-height: 38px;
    padding-inline: 14px;
    font-weight: 900;
}

@media (max-width: 575.98px) {
    body.public-home .public-filter-actions .btn {
        min-width: 0;
        width: 100%;
    }

    .app-shell .professional-form .resource-time-range {
        grid-template-columns: 1fr;
    }
}

/* v167 - aligned time/contact rows, toggles, and multi-color form accents */
.app-shell .office-card {
    align-items: center;
}

.app-shell .office-card i {
    flex: 0 0 auto;
    color: #e0f2fe;
}

.app-shell .office-card span,
.app-shell .office-card strong,
.app-shell .office-card small {
    display: block;
    min-width: 0;
}

.app-shell .office-card strong {
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell .office-card small {
    margin-top: 2px;
    color: rgba(226, 232, 240, .78);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.3;
}

.app-shell .professional-form {
    --form-accent: #0ea5e9;
    --form-accent-2: #2563eb;
}

.app-shell .professional-form > .form-section,
.app-shell .professional-form .resource-extra-block {
    --form-accent: #0ea5e9;
    --form-accent-2: #2563eb;
    position: relative;
    box-shadow:
        0 18px 38px color-mix(in srgb, var(--form-accent) 10%, transparent),
        0 10px 28px rgba(15, 23, 42, .045) !important;
}

.app-shell .professional-form > .form-section::before {
    content: "";
    position: absolute;
    inset: 18px auto 18px 0;
    width: 5px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(180deg, var(--form-accent), var(--form-accent-2));
}

.app-shell .professional-form > .form-section:nth-of-type(1) {
    --form-accent: #38bdf8;
    --form-accent-2: #2563eb;
}

.app-shell .professional-form > .form-section:nth-of-type(2) {
    --form-accent: #22c55e;
    --form-accent-2: #14b8a6;
}

.app-shell .professional-form > .form-section:nth-of-type(3) {
    --form-accent: #f59e0b;
    --form-accent-2: #f97316;
}

.app-shell .professional-form > .form-section:nth-of-type(4) {
    --form-accent: #a855f7;
    --form-accent-2: #6366f1;
}

.app-shell .professional-form > .form-section:nth-of-type(5) {
    --form-accent: #ec4899;
    --form-accent-2: #f43f5e;
}

.app-shell .professional-form > .form-section:nth-of-type(2) {
    --form-accent: #38bdf8;
    --form-accent-2: #2563eb;
}

.app-shell .professional-form > .form-section:nth-of-type(3) {
    --form-accent: #22c55e;
    --form-accent-2: #14b8a6;
}

.app-shell .professional-form > .form-section:nth-of-type(4) {
    --form-accent: #f59e0b;
    --form-accent-2: #f97316;
}

.app-shell .professional-form > .form-section:nth-of-type(5) {
    --form-accent: #a855f7;
    --form-accent-2: #6366f1;
}

.app-shell .professional-form > .form-section:nth-of-type(6) {
    --form-accent: #ec4899;
    --form-accent-2: #f43f5e;
}

.app-shell .professional-form .resource-extra-block:nth-of-type(1) {
    --form-accent: #22d3ee;
    --form-accent-2: #2563eb;
}

.app-shell .professional-form .resource-extra-block:nth-of-type(2) {
    --form-accent: #22c55e;
    --form-accent-2: #14b8a6;
}

.app-shell .professional-form .resource-extra-block:nth-of-type(3) {
    --form-accent: #f59e0b;
    --form-accent-2: #f97316;
}

.app-shell .professional-form .resource-extra-block:nth-of-type(4) {
    --form-accent: #a855f7;
    --form-accent-2: #6366f1;
}

.app-shell .professional-form .resource-extra-block::before {
    background: linear-gradient(180deg, var(--form-accent), var(--form-accent-2)) !important;
}

@media (min-width: 992px) {
    .app-shell .professional-form .resource-extra-block:has(.resource-field-service_time) .resource-field-main_phone > .form-control {
        margin-top: 26px;
    }
}

.app-shell .professional-form .resource-extra-block:has(.resource-field-service_time) .resource-field-service_time,
.app-shell .professional-form .resource-extra-block:has(.resource-field-service_time) .resource-field-main_phone {
    display: flex;
    flex-direction: column;
}

.app-shell .professional-form .resource-extra-block:has(.resource-field-service_time) .resource-field-service_time > .form-label,
.app-shell .professional-form .resource-extra-block:has(.resource-field-service_time) .resource-field-main_phone > .form-label {
    min-height: 20px;
    margin-bottom: 7px;
}

.app-shell .professional-form .resource-check-option .form-check-label {
    padding-right: 86px;
}

.app-shell .professional-form .resource-check-toggle {
    position: absolute;
    top: 50%;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 32px;
    border-radius: 999px;
    background: #cbd5e1;
    color: #334155;
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
    transform: translateY(-50%);
    transition: background .18s ease, color .18s ease;
}

.app-shell .professional-form .resource-check-toggle::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .18);
    transition: transform .18s ease;
}

.app-shell .professional-form .resource-check-toggle .toggle-on,
.app-shell .professional-form .resource-check-option .form-check-input:checked + .form-check-label .resource-check-toggle .toggle-off {
    display: none;
}

.app-shell .professional-form .resource-check-option .form-check-input:checked + .form-check-label .resource-check-toggle {
    background: #22c55e;
    color: #fff;
}

.app-shell .professional-form .resource-check-option .form-check-input:checked + .form-check-label .resource-check-toggle::before {
    transform: translateX(26px);
}

.app-shell .professional-form .resource-check-option .form-check-input:checked + .form-check-label .resource-check-toggle .toggle-on {
    display: inline;
}

@media (max-width: 575.98px) {
    .app-shell .professional-form .resource-check-option .form-check-label {
        align-items: flex-start;
        padding-right: 16px;
        padding-bottom: 56px;
    }

    .app-shell .professional-form .resource-check-toggle {
        top: auto;
        right: auto;
        bottom: 14px;
        left: 72px;
        transform: none;
    }
}

/* v168 - facility switch redesign and sidebar overflow guard */
.app-shell .sidebar,
.app-shell .sidebar-footer,
.app-shell .office-card,
.app-shell .logout-link {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.app-shell .office-card {
    width: 100%;
}

.app-shell .office-card > span {
    flex: 1 1 auto;
    min-width: 0;
}

.app-shell .office-card strong {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.app-shell .office-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell .professional-form .resource-check-option {
    display: block !important;
    width: 100%;
}

.app-shell .professional-form .resource-check-option .form-check-label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center !important;
    gap: 18px;
    width: 100%;
    min-height: 84px;
    padding: 18px 20px !important;
    border: 1px solid rgba(34, 197, 94, .28) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 8% 30%, rgba(34, 197, 94, .12), transparent 34%),
        linear-gradient(135deg, rgba(240, 253, 244, .96), rgba(255, 255, 255, .92)) !important;
    box-shadow: 0 14px 28px rgba(34, 197, 94, .08) !important;
    color: #0f172a !important;
    cursor: pointer;
}

.app-shell .professional-form .facility-status-copy {
    display: block;
    min-width: 0;
}

.app-shell .professional-form .facility-status-copy strong {
    display: block;
    color: #166534;
    font-size: 17px;
    font-weight: 950;
    line-height: 1.25;
}

.app-shell .professional-form .facility-status-copy small {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.4;
}

.app-shell .professional-form .facility-status-off {
    display: none;
}

.app-shell .professional-form .facility-switch-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 156px;
}

.app-shell .professional-form .facility-switch-choice {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
    transition: color .18s ease, opacity .18s ease;
}

.app-shell .professional-form .facility-switch-choice-on {
    color: #16a34a;
}

.app-shell .professional-form .facility-switch-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    width: 68px;
    height: 38px;
    padding: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #22c55e, #14b8a6);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 12px 24px rgba(20, 184, 166, .18);
    transition: background .18s ease, box-shadow .18s ease;
}

.app-shell .professional-form .facility-switch-knob {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 32px;
    height: 30px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .22);
    transition: transform .18s ease;
}

.app-shell .professional-form .resource-check-option .form-check-input:checked + .form-check-label {
    border-color: rgba(239, 68, 68, .32) !important;
    background:
        radial-gradient(circle at 8% 30%, rgba(239, 68, 68, .13), transparent 34%),
        linear-gradient(135deg, rgba(254, 242, 242, .98), rgba(255, 255, 255, .92)) !important;
    box-shadow: 0 14px 28px rgba(239, 68, 68, .08) !important;
}

.app-shell .professional-form .resource-check-option .form-check-input:checked + .form-check-label .facility-status-on {
    display: none;
}

.app-shell .professional-form .resource-check-option .form-check-input:checked + .form-check-label .facility-status-off {
    display: inline;
}

.app-shell .professional-form .resource-check-option .form-check-input:checked + .form-check-label .facility-status-copy strong {
    color: #b91c1c;
}

.app-shell .professional-form .resource-check-option .form-check-input:checked + .form-check-label .facility-switch-choice-on {
    color: #94a3b8;
}

.app-shell .professional-form .resource-check-option .form-check-input:checked + .form-check-label .facility-switch-choice-off {
    color: #dc2626;
}

.app-shell .professional-form .resource-check-option .form-check-input:checked + .form-check-label .facility-switch-track {
    background: linear-gradient(135deg, #ef4444, #f97316);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 12px 24px rgba(239, 68, 68, .16);
}

.app-shell .professional-form .resource-check-option .form-check-input:checked + .form-check-label .facility-switch-knob {
    transform: translateX(28px);
}

.app-shell .professional-form .resource-extra-block.facilities-disabled [data-facility-input],
.app-shell .professional-form .resource-extra-block.facilities-disabled [data-facility-input]:disabled {
    border-color: rgba(148, 163, 184, .42) !important;
    background: #e5e7eb !important;
    color: #94a3b8 !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

.app-shell .professional-form .resource-extra-block.facilities-disabled [data-facility-input]::placeholder {
    color: #94a3b8 !important;
}

@media (max-width: 575.98px) {
    .app-shell .professional-form .resource-check-option .form-check-label {
        grid-template-columns: 1fr;
        padding: 16px !important;
    }

    .app-shell .professional-form .facility-switch-wrap {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
    }

    .app-shell .professional-form .facility-switch-track {
        flex: 0 0 68px;
    }
}

/* v171 - Unified rounded lift hover for public resource cards */
body.public-home a.public-resource-card.future-resource-card {
    border-radius: 18px !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transform: translateZ(0) !important;
}

body.public-home a.public-resource-card.future-resource-card::before,
body.public-home a.public-resource-card.future-resource-card::after {
    border-radius: inherit !important;
    clip-path: inset(0 round 18px) !important;
}

body.public-home a.public-resource-card.future-resource-card::before {
    transform: none !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 38%),
        radial-gradient(circle at 78% 16%, rgba(125, 249, 255, .26), transparent 34%) !important;
    transition: opacity .22s ease !important;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track,
body.public-home .public-selected-resource-grid.tmap-card-carousel-track {
    padding: 16px 4px 18px !important;
    margin-top: -10px !important;
}

body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card,
body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card {
    z-index: 1 !important;
}

@media (hover: hover) and (pointer: fine) {
    body.public-home a.public-resource-card.future-resource-card:hover,
    body.public-home a.public-resource-card.future-resource-card:focus-visible {
        z-index: 9 !important;
        transform: translateY(-10px) scale(1.022) !important;
        border-color: rgba(157, 249, 255, .78) !important;
        box-shadow:
            0 30px 70px rgba(0, 0, 0, .42),
            0 0 0 1px rgba(198, 250, 255, .24),
            0 0 34px rgba(45, 212, 255, .32),
            inset 0 1px 0 rgba(255,255,255,.18) !important;
    }

    body.public-home a.public-resource-card.future-resource-card:hover::before,
    body.public-home a.public-resource-card.future-resource-card:focus-visible::before {
        opacity: 1 !important;
        transform: none !important;
    }

    body.public-home a.public-resource-card.future-resource-card:hover::after,
    body.public-home a.public-resource-card.future-resource-card:focus-visible::after {
        opacity: .9 !important;
    }
}

/* v172 - Printable one-page public detail report */
body.public-home .public-source-hero-actions {
    width: fit-content !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
}

body.public-home .public-source-print-btn {
    width: fit-content !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 36px !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    color: #05202f !important;
    border: 1px solid rgba(190, 242, 255, .64) !important;
    background: linear-gradient(135deg, #eaffff, #86f3ff) !important;
    box-shadow: 0 12px 28px rgba(34, 211, 238, .18) !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

body.public-home .public-source-print-btn:hover,
body.public-home .public-source-print-btn:focus-visible {
    filter: brightness(1.04) !important;
    transform: translateY(-1px) !important;
}

body.public-home .public-print-report {
    display: none;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 8mm;
    }

    html,
    body.public-home.public-detail-page {
        width: 210mm !important;
        min-height: 297mm !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        color: #111 !important;
    }

    body.public-home.public-detail-page .tmap-bg-slideshow,
    body.public-home.public-detail-page .public-navbar,
    body.public-home.public-detail-page .public-source-detail > :not(.public-print-report),
    body.public-home.public-detail-page .public-footer,
    body.public-home.public-detail-page .public-visit-footer-chip {
        display: none !important;
    }

    body.public-home.public-detail-page .public-page,
    body.public-home.public-detail-page .public-source-detail {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    body.public-home.public-detail-page .public-print-report {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body.public-home.public-detail-page .print-report-sheet {
        width: 190mm !important;
        height: 277mm !important;
        max-height: 277mm !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        padding: 6mm 8mm !important;
        border: 1.2px solid #111 !important;
        background: #fff !important;
        color: #111 !important;
        font-family: "Sarabun", "Tahoma", sans-serif !important;
        font-size: 8.7pt !important;
        line-height: 1.28 !important;
        page-break-inside: avoid !important;
    }

    body.public-home.public-detail-page .print-report-header {
        text-align: center !important;
        margin: 0 0 3mm !important;
    }

    body.public-home.public-detail-page .print-report-header h1,
    body.public-home.public-detail-page .print-report-header h2,
    body.public-home.public-detail-page .print-report-section h3,
    body.public-home.public-detail-page .print-report-summary h4,
    body.public-home.public-detail-page .print-report-caption,
    body.public-home.public-detail-page .print-report-list,
    body.public-home.public-detail-page .print-report-list li,
    body.public-home.public-detail-page .print-report-summary p {
        color: #111 !important;
        text-shadow: none !important;
    }

    body.public-home.public-detail-page .print-report-header h1 {
        margin: 0 !important;
        font-size: 11pt !important;
        font-weight: 900 !important;
        line-height: 1.18 !important;
    }

    body.public-home.public-detail-page .print-report-header h2 {
        margin: 1mm 0 0 !important;
        font-size: 9.5pt !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
    }

    body.public-home.public-detail-page .print-report-gallery {
        width: 154mm !important;
        margin: 0 auto 1.5mm !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 2mm !important;
    }

    body.public-home.public-detail-page .print-report-gallery img {
        width: 100% !important;
        height: 34mm !important;
        object-fit: cover !important;
        display: block !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.public-home.public-detail-page .print-report-caption {
        margin: 0 0 3mm !important;
        text-align: center !important;
        font-size: 7.5pt !important;
        font-weight: 500 !important;
    }

    body.public-home.public-detail-page .print-report-section {
        margin: 0 0 2.5mm !important;
        break-inside: avoid !important;
    }

    body.public-home.public-detail-page .print-report-section h3 {
        margin: 0 0 1.5mm !important;
        font-size: 9.2pt !important;
        font-weight: 900 !important;
    }

    body.public-home.public-detail-page .print-report-list {
        margin: 0 !important;
        padding-left: 5mm !important;
    }

    body.public-home.public-detail-page .print-report-list li {
        margin: 0 0 .7mm !important;
        padding-left: .8mm !important;
        break-inside: avoid !important;
    }

    body.public-home.public-detail-page .print-report-list span {
        font-weight: 700 !important;
    }

    body.public-home.public-detail-page .print-report-list strong {
        font-weight: 500 !important;
    }

    body.public-home.public-detail-page .print-report-summary {
        margin-top: 2mm !important;
    }

    body.public-home.public-detail-page .print-report-summary div {
        margin: 0 0 2mm !important;
        break-inside: avoid !important;
    }

    body.public-home.public-detail-page .print-report-summary h4 {
        margin: 0 0 1mm !important;
        font-size: 8.6pt !important;
        font-weight: 800 !important;
    }

    body.public-home.public-detail-page .print-report-summary p {
        max-height: 18mm !important;
        overflow: hidden !important;
        margin: 0 !important;
        font-size: 8.1pt !important;
        font-weight: 400 !important;
        line-height: 1.28 !important;
    }
}

/* v173 - Thai-safe spacing for public detail hero titles */
body.public-home.public-detail-page .public-source-hero h1 {
    line-height: 1.24 !important;
    padding-top: .1em !important;
    padding-bottom: .06em !important;
    margin: 6px 0 10px !important;
    overflow: visible !important;
    text-wrap: balance;
}

body.public-home.public-detail-page .public-source-hero p {
    margin-top: 2px !important;
    line-height: 1.5 !important;
}

@media (max-width: 575.98px) {
    body.public-home.public-detail-page .public-source-hero h1 {
        line-height: 1.28 !important;
        margin-bottom: 12px !important;
    }
}

/* v174 - Balance facility cards in public detail pages */
body.public-home.public-detail-page .public-source-facilities {
    overflow: visible !important;
}

body.public-home.public-detail-page .public-facility-grid {
    align-items: stretch !important;
    grid-auto-rows: minmax(104px, auto) !important;
}

body.public-home.public-detail-page .public-facility-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 104px !important;
    gap: 4px !important;
    padding: 14px 10px 13px !important;
}

body.public-home.public-detail-page .public-facility-card span {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 0 4px !important;
    transform: none !important;
}

body.public-home.public-detail-page .public-facility-card strong {
    display: block !important;
    min-height: auto !important;
    margin: 0 !important;
    line-height: 1.05 !important;
}

body.public-home.public-detail-page .public-facility-card small {
    display: block !important;
    min-height: auto !important;
    margin: 0 !important;
    line-height: 1.25 !important;
}

@media (max-width: 575.98px) {
    body.public-home.public-detail-page .public-facility-grid {
        grid-auto-rows: minmax(98px, auto) !important;
    }

    body.public-home.public-detail-page .public-facility-card {
        min-height: 98px !important;
        padding: 12px 8px !important;
    }
}

/* v175 - Center the facility tile stack so every card feels visually balanced */
body.public-home.public-detail-page .public-facility-card {
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    place-items: center !important;
    justify-content: center !important;
    align-content: center !important;
    text-align: center !important;
    gap: 5px !important;
    padding: 13px 10px !important;
}

body.public-home.public-detail-page .public-facility-card span {
    position: static !important;
    inset: auto !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 auto 3px !important;
    transform: none !important;
}

body.public-home.public-detail-page .public-facility-card span i {
    display: block !important;
    line-height: 1 !important;
}

body.public-home.public-detail-page .public-facility-card strong,
body.public-home.public-detail-page .public-facility-card small {
    align-self: center !important;
    justify-self: center !important;
    text-align: center !important;
}

/* v176 - Add map QR footer and prevent blank trailing print pages */
@media print {
    html,
    body.public-home.public-detail-page {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    body.public-home.public-detail-page .public-page,
    body.public-home.public-detail-page .public-source-detail,
    body.public-home.public-detail-page .public-print-report {
        height: auto !important;
        min-height: 0 !important;
        break-after: avoid !important;
        page-break-after: avoid !important;
    }

    body.public-home.public-detail-page .public-print-report::after,
    body.public-home.public-detail-page .print-report-sheet::after {
        content: none !important;
        display: none !important;
    }

    body.public-home.public-detail-page .print-report-sheet {
        position: relative !important;
        height: 276mm !important;
        max-height: 276mm !important;
        padding: 5mm 8mm 25mm !important;
        break-after: avoid !important;
        page-break-after: avoid !important;
        page-break-before: avoid !important;
    }

    body.public-home.public-detail-page .print-report-header {
        margin-bottom: 2mm !important;
    }

    body.public-home.public-detail-page .print-report-gallery {
        margin-bottom: 1mm !important;
        gap: 1.6mm !important;
    }

    body.public-home.public-detail-page .print-report-gallery img {
        height: 31mm !important;
    }

    body.public-home.public-detail-page .print-report-caption {
        margin-bottom: 2mm !important;
    }

    body.public-home.public-detail-page .print-report-section {
        margin-bottom: 1.8mm !important;
    }

    body.public-home.public-detail-page .print-report-list li {
        margin-bottom: .45mm !important;
    }

    body.public-home.public-detail-page .print-report-summary div {
        margin-bottom: 1.4mm !important;
    }

    body.public-home.public-detail-page .print-report-summary p {
        max-height: 13mm !important;
        line-height: 1.22 !important;
    }

    body.public-home.public-detail-page .print-report-map-qr {
        position: absolute !important;
        left: 8mm !important;
        right: 8mm !important;
        bottom: 5mm !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 3mm !important;
        min-height: 17mm !important;
        padding-top: 2mm !important;
        border-top: .25mm solid #d1d5db !important;
        color: #111 !important;
        text-align: right !important;
        break-inside: avoid !important;
    }

    body.public-home.public-detail-page .print-report-map-qr div {
        display: grid !important;
        gap: .8mm !important;
    }

    body.public-home.public-detail-page .print-report-map-qr strong {
        color: #111 !important;
        font-size: 8.6pt !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
    }

    body.public-home.public-detail-page .print-report-map-qr span {
        color: #374151 !important;
        font-size: 7.4pt !important;
        font-weight: 600 !important;
        line-height: 1.15 !important;
    }

    body.public-home.public-detail-page .print-report-map-qr img {
        width: 17mm !important;
        height: 17mm !important;
        object-fit: contain !important;
        display: block !important;
        border: .25mm solid #111 !important;
        padding: .8mm !important;
        background: #fff !important;
    }
}

/* v177 - Let the printed report height follow real content, removing blank trailing pages */
@media print {
    @page {
        size: A4 portrait;
        margin: 8mm;
    }

    html,
    body,
    body.public-home.public-detail-page {
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body.public-home.public-detail-page .public-page,
    body.public-home.public-detail-page .public-source-detail,
    body.public-home.public-detail-page .public-print-report {
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        break-before: auto !important;
        break-after: avoid-page !important;
        page-break-before: auto !important;
        page-break-after: avoid !important;
    }

    body.public-home.public-detail-page .print-report-sheet {
        position: relative !important;
        width: 190mm !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding: 5mm 8mm !important;
        overflow: visible !important;
        break-before: auto !important;
        break-after: avoid-page !important;
        break-inside: auto !important;
        page-break-before: auto !important;
        page-break-after: avoid !important;
        page-break-inside: auto !important;
    }

    body.public-home.public-detail-page .print-report-gallery img {
        height: 29mm !important;
    }

    body.public-home.public-detail-page .print-report-section {
        margin-bottom: 1.5mm !important;
    }

    body.public-home.public-detail-page .print-report-summary p {
        max-height: 11mm !important;
    }

    body.public-home.public-detail-page .print-report-map-qr {
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin-top: 3mm !important;
        min-height: 16mm !important;
        break-before: auto !important;
        break-after: avoid-page !important;
        page-break-before: auto !important;
        page-break-after: avoid !important;
    }

    body.public-home.public-detail-page .print-report-sheet > :last-child {
        margin-bottom: 0 !important;
    }
}

/* v178 - Paginated admin resources grid without horizontal overflow */
.app-shell .content-wrap,
.app-shell .app-main {
    min-width: 0;
}

.app-shell .admin-resource-list {
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
    padding: 18px !important;
}

.app-shell .filter-card {
    width: 100%;
    max-width: 100%;
}

.app-shell .filter-card .section-title {
    min-width: 0;
    flex-wrap: wrap;
    gap: 12px;
}

.app-shell .filter-card .section-title > div {
    min-width: min(100%, 320px);
}

.app-shell .filter-card .section-title .btn {
    flex: 0 0 auto;
}

.app-shell .admin-resource-list .admin-resource-carousel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.app-shell .admin-page-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 12px;
    color: #075985;
    border: 1px solid rgba(14, 165, 233, .22);
    border-radius: 999px;
    background: linear-gradient(135deg, #e0faff, #dbeafe);
    box-shadow: 0 10px 24px rgba(14, 165, 233, .08);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.app-shell .admin-resource-page-grid {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
}

.app-shell .admin-resource-page-grid.resource-card-grid,
.app-shell .admin-resource-page-grid.tmap-card-carousel-track {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.app-shell .admin-resource-page-grid .resource-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
    display: flex;
    flex-direction: column;
}

.app-shell .admin-resource-page-grid .resource-cover {
    flex: 0 0 136px;
    height: 136px !important;
}

.app-shell .admin-resource-page-grid .resource-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.app-shell .admin-resource-page-grid .resource-title {
    min-height: 42px;
}

.app-shell .admin-resource-page-grid .resource-body > p.text-muted {
    min-height: 38px;
}

.app-shell .admin-resource-page-grid .action-group {
    margin-top: auto;
}

.app-shell .admin-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, .18);
}

.app-shell .admin-pagination a,
.app-shell .admin-pagination .ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 38px;
    min-height: 38px;
    padding: 8px 12px;
    color: #0f172a;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 13px;
    background: rgba(255, 255, 255, .88);
    font-size: 13px;
    font-weight: 900;
}

.app-shell .admin-pagination a:hover,
.app-shell .admin-pagination a.active {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    box-shadow: 0 12px 24px rgba(37, 99, 235, .18);
}

.app-shell .admin-pagination a.disabled {
    pointer-events: none;
    color: #94a3b8;
    background: #f1f5f9;
    box-shadow: none;
}

/* v179 - Keep admin card actions above the full-card detail link */
.app-shell .admin-resource-page-grid .resource-card {
    position: relative;
}

.app-shell .admin-resource-page-grid .resource-card-link {
    z-index: 1 !important;
}

.app-shell .admin-resource-page-grid .resource-body {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.app-shell .admin-resource-page-grid [data-resource-actions],
.app-shell .admin-resource-page-grid [data-resource-actions] * {
    pointer-events: auto;
}

.app-shell .admin-resource-page-grid [data-resource-actions] {
    position: relative !important;
    z-index: 10 !important;
}

.app-shell .admin-resource-page-grid [data-resource-actions] form {
    display: inline-flex;
    margin: 0;
}

.app-shell .admin-resource-page-grid .action-btn {
    position: relative !important;
    z-index: 11 !important;
}

.app-shell .admin-pagination .ellipsis {
    min-width: 28px;
    border-color: transparent;
    background: transparent;
    color: #64748b;
}

@media (max-width: 1199.98px) {
    .app-shell .admin-resource-page-grid,
    .app-shell .admin-resource-page-grid.resource-card-grid,
    .app-shell .admin-resource-page-grid.tmap-card-carousel-track {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    .app-shell .admin-resource-list .admin-resource-carousel-head {
        flex-direction: column;
    }

    .app-shell .admin-page-chip {
        width: 100%;
    }

    .app-shell .admin-resource-page-grid,
    .app-shell .admin-resource-page-grid.resource-card-grid,
    .app-shell .admin-resource-page-grid.tmap-card-carousel-track {
        grid-template-columns: 1fr !important;
    }
}

/* v180 - TMAP login chip label and input readability */
body.login-showcase-v77 .v77-chips.v102-keywords > span:first-child i {
    background: linear-gradient(135deg, rgba(85, 234, 255, .34), rgba(37, 99, 235, .24)) !important;
}

body.login-showcase-v77 .login-e-field label {
    margin-bottom: 10px !important;
    font-size: clamp(15px, 1.12vw, 17px) !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
}

body.login-showcase-v77 .login-e-input-wrap {
    min-height: 60px !important;
}

body.login-showcase-v77 .login-e-input {
    color: #0f172a !important;
    font-size: clamp(15px, 1.08vw, 17px) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
}

body.login-showcase-v77 .login-e-input::placeholder {
    color: rgba(71, 85, 105, .68) !important;
    font-size: clamp(14px, 1vw, 16px) !important;
    font-weight: 800 !important;
}

body.login-showcase-v77 .login-e-input-icon,
body.login-showcase-v77 .login-e-password-toggle {
    font-size: 16px !important;
}

@media (max-width: 575.98px) {
    body.login-showcase-v77 .login-e-field label {
        font-size: 15px !important;
    }

    body.login-showcase-v77 .login-e-input {
        font-size: 16px !important;
    }

    body.login-showcase-v77 .login-e-input::placeholder {
        font-size: 15px !important;
    }
}

/* v181 - Four compact cards per row on admin resource list */
.app-shell .admin-resource-page-grid,
.app-shell .admin-resource-page-grid.resource-card-grid,
.app-shell .admin-resource-page-grid.tmap-card-carousel-track {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.app-shell .admin-resource-page-grid .resource-cover {
    flex-basis: 122px !important;
    height: 122px !important;
}

.app-shell .admin-resource-page-grid .resource-title {
    min-height: 38px !important;
    font-size: 15px !important;
    line-height: 1.28 !important;
}

.app-shell .admin-resource-page-grid .resource-body {
    padding: 14px !important;
}

@media (max-width: 1399.98px) {
    .app-shell .admin-resource-page-grid,
    .app-shell .admin-resource-page-grid.resource-card-grid,
    .app-shell .admin-resource-page-grid.tmap-card-carousel-track {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    .app-shell .admin-resource-page-grid,
    .app-shell .admin-resource-page-grid.resource-card-grid,
    .app-shell .admin-resource-page-grid.tmap-card-carousel-track {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    .app-shell .admin-resource-page-grid,
    .app-shell .admin-resource-page-grid.resource-card-grid,
    .app-shell .admin-resource-page-grid.tmap-card-carousel-track {
        grid-template-columns: 1fr !important;
    }
}

/* v182 - Public detail empty states */
body.public-home.public-detail-page .public-source-empty-value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    border: 1px dashed rgba(125, 211, 252, .42);
    border-radius: 14px;
    background: rgba(8, 31, 53, .45);
    color: rgba(226, 242, 255, .88);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

/* v183 - Embedded media in admin resource detail */
.app-shell .resource-view-media-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.app-shell .resource-view-youtube-preview,
.app-shell .resource-view-media-link {
    overflow: hidden;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(239, 248, 255, .92));
    box-shadow: 0 16px 34px rgba(37, 99, 235, .10);
}

.app-shell .resource-view-youtube-preview iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    background: #0f172a;
}

.app-shell .resource-view-youtube-preview a,
.app-shell .resource-view-media-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 12px;
    color: #0f4c81;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
}

.app-shell .resource-view-youtube-preview a {
    border-top: 1px solid rgba(37, 99, 235, .14);
    background: rgba(219, 244, 255, .64);
}

.app-shell .resource-view-youtube-preview a i {
    color: #ef4444;
}

.app-shell .resource-view-media-link {
    justify-content: flex-start;
}

.app-shell .resource-view-media-link i {
    color: #2563eb;
}

@media (max-width: 767.98px) {
    .app-shell .resource-view-media-list {
        grid-template-columns: 1fr;
    }
}

/* v184 - Balanced admin resource detail and printable report */
.app-shell .resource-view-layout {
    align-items: flex-start;
}

.app-shell .resource-view-side {
    display: grid;
    gap: 0;
}

.app-shell .resource-view-gallery-card,
.app-shell .resource-view-media-card,
.app-shell .resource-view-location-card,
.app-shell .resource-view-info-card {
    border: 1px solid rgba(37, 99, 235, .12);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}

.app-shell .resource-view-four-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.app-shell .resource-view-four-gallery a {
    display: block;
    overflow: hidden;
    border-radius: 18px;
    aspect-ratio: 4 / 3;
    background: #eaf6ff;
}

.app-shell .resource-view-four-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s ease, filter .2s ease;
}

.app-shell .resource-view-four-gallery a:hover img {
    transform: scale(1.04);
    filter: saturate(1.05);
}

.app-shell .resource-view-side .resource-view-media-list {
    grid-template-columns: 1fr;
}

.app-shell .resource-view-side .resource-view-youtube-preview iframe {
    max-height: none;
}

.app-shell .resource-view-location-card {
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(239, 249, 255, .96), rgba(230, 255, 250, .86));
}

.app-shell .resource-view-location-card .location-map-preview {
    min-height: 260px;
}

.app-shell .resource-view-location-card .location-map-preview iframe,
.app-shell .resource-view-location-card .location-map-empty {
    min-height: 260px;
}

.app-shell .resource-admin-print-report {
    display: none;
}

@media (max-width: 575.98px) {
    .app-shell .resource-view-four-gallery {
        gap: 8px;
    }
}

@media print {
    @page {
        size: A4 portrait;
        margin: 8mm;
    }

    html,
    body {
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #fff !important;
        color: #111 !important;
    }

    .app-shell {
        display: block !important;
        min-height: 0 !important;
        background: #fff !important;
    }

    .app-shell .sidebar,
    .app-shell .app-sidebar,
    .app-shell .topbar,
    .app-shell .content-wrap > :not(.resource-admin-print-report) {
        display: none !important;
    }

    .app-shell .app-main,
    .app-shell .content-wrap,
    .app-shell .resource-admin-print-report {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        overflow: visible !important;
        break-after: avoid-page !important;
        page-break-after: avoid !important;
    }

    .app-shell .resource-admin-print-report .print-report-sheet {
        position: relative !important;
        width: 190mm !important;
        height: 276mm !important;
        max-height: 276mm !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        padding: 5mm 8mm 25mm !important;
        border: 1.2px solid #111 !important;
        background: #fff !important;
        color: #111 !important;
        font-family: "Sarabun", "Tahoma", sans-serif !important;
        font-size: 8.7pt !important;
        line-height: 1.28 !important;
        break-after: avoid !important;
        page-break-after: avoid !important;
        page-break-before: avoid !important;
        page-break-inside: avoid !important;
    }

    .app-shell .resource-admin-print-report .print-report-header {
        text-align: center !important;
        margin: 0 0 2mm !important;
    }

    .app-shell .resource-admin-print-report .print-report-header h1,
    .app-shell .resource-admin-print-report .print-report-header h2,
    .app-shell .resource-admin-print-report .print-report-section h3,
    .app-shell .resource-admin-print-report .print-report-summary h4,
    .app-shell .resource-admin-print-report .print-report-caption,
    .app-shell .resource-admin-print-report .print-report-list,
    .app-shell .resource-admin-print-report .print-report-list li,
    .app-shell .resource-admin-print-report .print-report-summary p {
        color: #111 !important;
        text-shadow: none !important;
    }

    .app-shell .resource-admin-print-report .print-report-header h1 {
        margin: 0 !important;
        font-size: 11pt !important;
        font-weight: 900 !important;
        line-height: 1.18 !important;
    }

    .app-shell .resource-admin-print-report .print-report-header h2 {
        margin: 1mm 0 0 !important;
        font-size: 9.5pt !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
    }

    .app-shell .resource-admin-print-report .print-report-gallery {
        width: 154mm !important;
        margin: 0 auto 1mm !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.6mm !important;
    }

    .app-shell .resource-admin-print-report .print-report-gallery img {
        width: 100% !important;
        height: 31mm !important;
        object-fit: cover !important;
        display: block !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .app-shell .resource-admin-print-report .print-report-caption {
        margin: 0 0 2mm !important;
        text-align: center !important;
        font-size: 7.5pt !important;
        font-weight: 500 !important;
    }

    .app-shell .resource-admin-print-report .print-report-section {
        margin: 0 0 1.8mm !important;
        break-inside: avoid !important;
    }

    .app-shell .resource-admin-print-report .print-report-section h3 {
        margin: 0 0 1.5mm !important;
        font-size: 9.2pt !important;
        font-weight: 900 !important;
    }

    .app-shell .resource-admin-print-report .print-report-list {
        margin: 0 !important;
        padding-left: 5mm !important;
    }

    .app-shell .resource-admin-print-report .print-report-list li {
        margin: 0 0 .45mm !important;
        padding-left: .8mm !important;
        break-inside: avoid !important;
    }

    .app-shell .resource-admin-print-report .print-report-list span {
        font-weight: 700 !important;
    }

    .app-shell .resource-admin-print-report .print-report-list strong {
        font-weight: 500 !important;
    }

    .app-shell .resource-admin-print-report .print-report-summary {
        margin-top: 2mm !important;
    }

    .app-shell .resource-admin-print-report .print-report-summary div {
        margin: 0 0 1.4mm !important;
        break-inside: avoid !important;
    }

    .app-shell .resource-admin-print-report .print-report-summary h4 {
        margin: 0 0 1mm !important;
        font-size: 8.6pt !important;
        font-weight: 800 !important;
    }

    .app-shell .resource-admin-print-report .print-report-summary p {
        max-height: 13mm !important;
        overflow: hidden !important;
        margin: 0 !important;
        font-size: 8.1pt !important;
        font-weight: 400 !important;
        line-height: 1.22 !important;
    }

    .app-shell .resource-admin-print-report .print-report-map-qr {
        position: absolute !important;
        left: 8mm !important;
        right: 8mm !important;
        bottom: 5mm !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 3mm !important;
        min-height: 17mm !important;
        padding-top: 2mm !important;
        border-top: .25mm solid #d1d5db !important;
        color: #111 !important;
        text-align: right !important;
        break-inside: avoid !important;
    }

    .app-shell .resource-admin-print-report .print-report-map-qr div {
        display: grid !important;
        gap: .8mm !important;
    }

    .app-shell .resource-admin-print-report .print-report-map-qr strong {
        color: #111 !important;
        font-size: 8.6pt !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
    }

    .app-shell .resource-admin-print-report .print-report-map-qr span {
        color: #374151 !important;
        font-size: 7.4pt !important;
        font-weight: 600 !important;
        line-height: 1.15 !important;
    }

    .app-shell .resource-admin-print-report .print-report-map-qr img {
        width: 17mm !important;
        height: 17mm !important;
        object-fit: contain !important;
        display: block !important;
        border: .25mm solid #111 !important;
        padding: .8mm !important;
        background: #fff !important;
    }
}

/* v185 - Keep admin print QR fully inside the sheet */
@media print {
    .mobile-bottom-nav,
    .sidebar-backdrop,
    .system-footer,
    .sticky-action-bar {
        display: none !important;
        visibility: hidden !important;
    }

    .app-shell .resource-admin-print-report .print-report-sheet {
        padding-bottom: 32mm !important;
    }

    .app-shell .resource-admin-print-report .print-report-map-qr {
        bottom: 8mm !important;
        min-height: 21mm !important;
        align-items: center !important;
    }

    .app-shell .resource-admin-print-report .print-report-map-qr img {
        width: 18mm !important;
        height: 18mm !important;
        box-sizing: border-box !important;
        flex: 0 0 18mm !important;
    }
}

/* v186 - Clearer printed report text and QR codes for map, PDF and YouTube */
@media print {
    body.public-home.public-detail-page .print-report-list li,
    .app-shell .resource-admin-print-report .print-report-list li {
        margin-bottom: 1mm !important;
        line-height: 1.42 !important;
    }

    body.public-home.public-detail-page .print-report-list span,
    .app-shell .resource-admin-print-report .print-report-list span {
        display: block !important;
        margin-bottom: .2mm !important;
        font-size: 8.1pt !important;
        font-weight: 900 !important;
        line-height: 1.22 !important;
    }

    body.public-home.public-detail-page .print-report-list strong,
    .app-shell .resource-admin-print-report .print-report-list strong {
        display: block !important;
        padding-left: 1.5mm !important;
        font-size: 8pt !important;
        font-weight: 500 !important;
        line-height: 1.38 !important;
    }

    body.public-home.public-detail-page .print-report-summary div,
    .app-shell .resource-admin-print-report .print-report-summary div {
        margin-bottom: 2mm !important;
        padding: 1.3mm 1.6mm !important;
        border-left: .7mm solid #111 !important;
        background: #f8fafc !important;
    }

    body.public-home.public-detail-page .print-report-summary h4,
    .app-shell .resource-admin-print-report .print-report-summary h4 {
        margin-bottom: .9mm !important;
        font-size: 8.8pt !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
    }

    body.public-home.public-detail-page .print-report-summary p,
    .app-shell .resource-admin-print-report .print-report-summary p {
        max-height: 18mm !important;
        font-size: 8pt !important;
        line-height: 1.42 !important;
    }

    body.public-home.public-detail-page .print-report-qr-row,
    .app-shell .resource-admin-print-report .print-report-qr-row {
        display: flex !important;
        align-items: stretch !important;
        justify-content: flex-end !important;
        gap: 2.4mm !important;
        margin-top: 3mm !important;
        padding-top: 2mm !important;
        border-top: .25mm solid #d1d5db !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    body.public-home.public-detail-page .print-report-qr-item,
    .app-shell .resource-admin-print-report .print-report-qr-item {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 16mm !important;
        align-items: center !important;
        gap: 1.5mm !important;
        width: 51mm !important;
        min-height: 17mm !important;
        padding: 1.2mm !important;
        border: .25mm solid #d1d5db !important;
        background: #fff !important;
        color: #111 !important;
    }

    body.public-home.public-detail-page .print-report-qr-item strong,
    .app-shell .resource-admin-print-report .print-report-qr-item strong {
        display: block !important;
        color: #111 !important;
        font-size: 7.8pt !important;
        font-weight: 900 !important;
        line-height: 1.18 !important;
    }

    body.public-home.public-detail-page .print-report-qr-item span,
    .app-shell .resource-admin-print-report .print-report-qr-item span {
        display: block !important;
        max-width: 29mm !important;
        overflow: hidden !important;
        color: #374151 !important;
        font-size: 6.8pt !important;
        font-weight: 600 !important;
        line-height: 1.18 !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    body.public-home.public-detail-page .print-report-qr-item img,
    .app-shell .resource-admin-print-report .print-report-qr-item img {
        width: 16mm !important;
        height: 16mm !important;
        object-fit: contain !important;
        display: block !important;
        border: .25mm solid #111 !important;
        padding: .6mm !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    .app-shell .resource-admin-print-report .print-report-sheet {
        padding-bottom: 6mm !important;
    }
}

/* v187 - Remove leading bars from printed summary blocks */
@media print {
    body.public-home.public-detail-page .print-report-summary div,
    .app-shell .resource-admin-print-report .print-report-summary div {
        border-left: 0 !important;
        padding: 1.2mm 0 !important;
        background: transparent !important;
    }

    body.public-home.public-detail-page .print-report-summary h4,
    .app-shell .resource-admin-print-report .print-report-summary h4,
    body.public-home.public-detail-page .print-report-summary p,
    .app-shell .resource-admin-print-report .print-report-summary p {
        padding-left: 0 !important;
    }
}

/* v188 - Stack public resource cards on phones and tablets to avoid sideways overflow */
@media (max-width: 991.98px) {
    html,
    body.public-home {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.public-home .public-category-group,
    body.public-home .public-category-group-list {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    body.public-home .public-category-group .tmap-carousel-actions,
    body.public-home .public-selected-resource-head .tmap-carousel-actions {
        display: none !important;
    }

    body.public-home .public-category-resource-grid.tmap-card-carousel-track,
    body.public-home .public-selected-resource-grid.tmap-card-carousel-track {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        scroll-snap-type: none !important;
        padding: 6px 0 14px !important;
        margin-top: 0 !important;
        gap: 14px !important;
    }

    body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card,
    body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-resource-card.future-resource-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        flex-basis: auto !important;
        height: auto !important;
        min-height: 0 !important;
        scroll-snap-align: none !important;
    }
}

@media (max-width: 575.98px) {
    body.public-home .public-category-resource-grid.tmap-card-carousel-track,
    body.public-home .public-selected-resource-grid.tmap-card-carousel-track {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    body.public-home .public-category-resource-grid.tmap-card-carousel-track .public-card-cover,
    body.public-home .public-selected-resource-grid.tmap-card-carousel-track .public-card-cover {
        height: 190px !important;
        flex-basis: 190px !important;
    }
}

/* v190 - Add Waghor to the static hero province map. */
body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .hero-map-pin.pin-waghor,
.hero-map-pin.pin-waghor {
    left: 64% !important;
    top: 56% !important;
    animation-delay: .95s !important;
}

body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .hero-map-pin.pin-waghor::before,
.hero-map-pin.pin-waghor::before {
    right: auto !important;
    left: -27px !important;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .hero-map-pin.pin-waghor,
    .hero-map-pin.pin-waghor {
        left: 65% !important;
        top: 56% !important;
    }
}

@media (max-width: 767.98px) {
    body.public-home main.public-page.future-page > section.public-hero.future-hero#hero-map-zone .hero-map-pin.pin-waghor,
    .hero-map-pin.pin-waghor {
        left: 65% !important;
        top: 55% !important;
    }
}
/* v192 - App-style public bottom navigation for phones and tablets. */
@media (max-width: 1024px) {
    body.public-home {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.public-home .tmap-menu-toggle,
    body.public-home .tmap-mobile-backdrop {
        display: none !important;
    }

    body.public-home .future-top-menu-inline.grouped-menu,
    body.public-home .future-top-menu-inline.grouped-menu.is-open,
    body.public-home.tmap-menu-open .future-top-menu-inline.grouped-menu,
    body.public-home.tmap-menu-open .future-top-menu-inline.grouped-menu.is-open {
        position: fixed !important;
        z-index: 10050 !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 7px max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-left, 0px)) !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 4px !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow: visible !important;
        border: 0 !important;
        border-top: 1px solid rgba(104, 218, 255, 0.34) !important;
        border-radius: 0 !important;
        background: rgba(5, 25, 49, 0.96) !important;
        box-shadow: 0 -10px 28px rgba(0, 10, 30, 0.38) !important;
        backdrop-filter: blur(18px) saturate(135%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
    }

    body.public-home .future-top-menu-inline.grouped-menu a,
    body.public-home .future-top-menu-inline.grouped-menu a:first-child,
    body.public-home .future-top-menu-inline.grouped-menu a:last-child,
    body.public-home .future-top-menu-inline.grouped-menu a.menu-login-cta {
        position: relative !important;
        min-width: 0 !important;
        width: 100% !important;
        height: 56px !important;
        margin: 0 !important;
        padding: 6px 3px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #a9bad0 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    body.public-home .future-top-menu-inline.grouped-menu a::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        width: 28px !important;
        height: 3px !important;
        border: 0 !important;
        border-radius: 0 0 3px 3px !important;
        background: transparent !important;
        transform: translateX(-50%) !important;
        opacity: 1 !important;
    }

    body.public-home .future-top-menu-inline.grouped-menu a::after {
        display: none !important;
    }

    body.public-home .future-top-menu-inline.grouped-menu a i {
        width: 24px !important;
        height: 24px !important;
        display: grid !important;
        place-items: center !important;
        color: inherit !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }

    body.public-home .future-top-menu-inline.grouped-menu a span {
        display: block !important;
        width: 100% !important;
        color: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.public-home .future-top-menu-inline.grouped-menu a.active {
        color: #66ddff !important;
        background: rgba(23, 145, 221, 0.14) !important;
    }

    body.public-home .future-top-menu-inline.grouped-menu a.active::before {
        background: linear-gradient(90deg, #2f8cff, #35e5e2) !important;
        box-shadow: 0 0 12px rgba(53, 229, 226, 0.78) !important;
    }

    body.public-home .future-top-menu-inline.grouped-menu a.active i {
        filter: drop-shadow(0 0 7px rgba(70, 215, 255, 0.72)) !important;
    }

    body.public-home.tmap-menu-open {
        overflow: auto !important;
    }
}

@media (max-width: 390px) {
    body.public-home .future-top-menu-inline.grouped-menu a,
    body.public-home .future-top-menu-inline.grouped-menu a.menu-login-cta {
        font-size: 10px !important;
    }
}

/* v192.2 - Final precedence over legacy mobile drawer rules. */
@media (max-width: 1024px) {
    body.public-home .future-top-menu-inline.grouped-menu,
    body.public-home .future-top-menu-inline.grouped-menu.is-open,
    body.public-home.tmap-menu-open .future-top-menu-inline.grouped-menu,
    body.public-home.tmap-menu-open .future-top-menu-inline.grouped-menu.is-open {
        display: none !important;
    }
}

/* v194 - App-style bottom navigation on the public login page. */
@media (max-width: 1024px) {
    body.future-login-page {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.future-login-page .login-e-back {
        display: none !important;
    }

    body.future-login-page .login-app-bottom-nav {
        position: fixed !important;
        z-index: 10050 !important;
        inset: auto 0 0 0 !important;
        width: 100vw !important;
        min-width: 0 !important;
        height: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 7px max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-left, 0px)) !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 4px !important;
        box-sizing: border-box !important;
        border-top: 1px solid rgba(104, 218, 255, 0.34) !important;
        background: rgba(5, 25, 49, 0.96) !important;
        box-shadow: 0 -10px 28px rgba(0, 10, 30, 0.38) !important;
        backdrop-filter: blur(18px) saturate(135%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
    }

    body.future-login-page .login-app-bottom-nav a {
        position: relative !important;
        min-width: 0 !important;
        height: 56px !important;
        padding: 6px 3px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        border-radius: 8px !important;
        color: #a9bad0 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    body.future-login-page .login-app-bottom-nav a::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 28px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: transparent;
        transform: translateX(-50%);
    }

    body.future-login-page .login-app-bottom-nav a i {
        width: 24px !important;
        height: 24px !important;
        display: grid !important;
        place-items: center !important;
        color: inherit !important;
        font-size: 18px !important;
    }

    body.future-login-page .login-app-bottom-nav a span {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.future-login-page .login-app-bottom-nav a.active {
        color: #66ddff !important;
        background: rgba(23, 145, 221, 0.14) !important;
    }

    body.future-login-page .login-app-bottom-nav a.active::before {
        background: linear-gradient(90deg, #2f8cff, #35e5e2);
        box-shadow: 0 0 12px rgba(53, 229, 226, 0.78);
    }

    body.future-login-page .login-app-bottom-nav a.active i {
        filter: drop-shadow(0 0 7px rgba(70, 215, 255, 0.72));
    }
}

@media (max-width: 390px) {
    body.future-login-page .login-app-bottom-nav a {
        font-size: 10px !important;
    }
}

@media (max-width: 1024px) {
    body.login-showcase-v77.future-login-page {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.login-showcase-v77.future-login-page .v77-shell {
        margin-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    }
}