.toast-mascot-particle {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    opacity: 0.85;
    pointer-events: none;
    z-index: 7;
    filter: blur(0.5px) brightness(1.2) drop-shadow(0 0 6px #ffe066);
    animation: mascotParticleFloat 1.5s linear forwards;
}

@keyframes mascotParticleFloat {
    0% {
        opacity: 0.7;
        transform: scale(0.7) translateY(0) rotate(0deg);
    }
    60% {
        opacity: 1;
        transform: scale(1.1) translateY(-18px) rotate(18deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) translateY(-38px) rotate(36deg);
    }
}
/* =============================
         Stats Bar (Dashboard Mockup)
         ============================= */
.stats-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    margin-top: 24px;
    margin-bottom: 24px;
    background: rgba(10, 10, 10, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 16px 22px;
    width: min(1200px, calc(100% - 40px));
    align-self: stretch;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.stats-card {
    flex: 0 0 auto;
    width: clamp(160px, 14vw, 205px);
    min-width: 160px;
    max-width: 205px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(10, 10, 10, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 20px 16px;
    text-align: center;
    color: #fff;
    position: relative;
}

.stats-card .stats-title {
    margin-bottom: 0;
}

.stats-card .stats-value {
    margin-bottom: 0;
}

.stats-title {
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 0.3px;
    color: #a5b4fc;
    text-shadow: 0 1px 4px rgba(80,80,160,0.10);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    height: 1.35em;
}
.stats-value {
    font-size: 2.8rem;
    font-weight: 900;
    margin-bottom: 6px;
    color: #fff;
    text-shadow: 0 2px 12px rgba(99,102,241,0.18);
    letter-spacing: 0.5px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    min-height: 1.2em;
}
.stats-unit {
    font-size: 0.95rem;
    color: #8b9cff;
    letter-spacing: 0.2px;
    font-weight: 700;
}

/* Skeleton loading for stats (blur + gentle pulse) */
@keyframes statsSkeletonPulse {
    0% {
        opacity: 0.55;
        filter: blur(1.6px);
        transform: translateY(0);
    }
    50% {
        opacity: 0.85;
        filter: blur(1.0px);
        transform: translateY(-1px);
    }
    100% {
        opacity: 0.55;
        filter: blur(1.6px);
        transform: translateY(0);
    }
}

.stats-card.is-loading .stats-title {
    opacity: 0.85;
}

.stats-card.is-loading .stats-value {
    color: transparent;
    text-shadow: none;
    user-select: none;
    min-height: 1.2em;
    width: min(140px, 76%);
    height: clamp(34px, 3.2vw, 44px);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.10),
        0 10px 18px rgba(0, 0, 0, 0.10);
    animation: statsSkeletonPulse 1.35s ease-in-out infinite;
}

.stats-card.is-loading .stats-unit {
    opacity: 0.6;
}
.stats-chart {
    display: none;
}
.stats-chart-line::before {
    display: none;
}
.stats-chart-bar {
    display: none;
}
.stats-chart-bar span {
    display: none;
}
.stats-chart-bar span:hover {
    display: none;
}

/* =============================
     Toast Notification (Top-Right)
   ============================= */
.toast-notification {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 10000;
    width: min(600px, calc(100vw - 44px));
    min-width: 420px;
    display: block;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
}

.toast-surface {
    position: relative;
    width: 100%;
    padding: 20px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 252, 211, 0.98) 0%, rgba(255, 243, 154, 0.98) 52%, rgba(255, 236, 120, 0.98) 100%);
    color: #111827;
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.1px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    overflow: hidden;
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(250, 204, 21, 0.38),
        0 0 26px rgba(250, 204, 21, 0.32);
    border: 1px solid rgba(250, 204, 21, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.toast-text {
    position: relative;
    z-index: 2;
}

.toast-notification.toast-with-mascot .toast-surface {
    padding-left: 56px;
}

.toast-mascot {
    position: absolute;
    left: -58px;
    bottom: -20px;
    width: 120px;
    height: auto;
    z-index: 4;
    pointer-events: none;
    filter:
        drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35))
        drop-shadow(0 0 18px rgba(250, 204, 21, 0.28));
    animation: mascotBounce 1.2s cubic-bezier(.68,-0.55,.27,1.55) infinite alternate;
}

@keyframes mascotBounce {
    0%   { transform: translateY(0) scale(1) rotate(-2deg); }
    20%  { transform: translateY(-5px) scale(1.03) rotate(0deg); }
    40%  { transform: translateY(-9px) scale(1.06) rotate(2deg); }
    60%  { transform: translateY(-5px) scale(1.03) rotate(0deg); }
    100% { transform: translateY(0) scale(1) rotate(-2deg); }
}

.toast-with-mascot .toast-mascot::after {
    content: '';
    position: absolute;
    left: 60px;
    top: 18px;
    width: 18px;
    height: 18px;
    background: radial-gradient(circle, #fffbe7 0%, #ffe066 60%, rgba(255,255,255,0.0) 100%);
    opacity: 0.85;
    border-radius: 50%;
    filter: blur(2px) brightness(1.2);
    animation: mascotSparkle 1.2s linear infinite alternate;
    z-index: 6;
    pointer-events: none;
}

@keyframes mascotSparkle {
    0%   { opacity: 0.7; transform: scale(0.7) translateY(0); }
    40%  { opacity: 1;   transform: scale(1.1) translateY(-8px); }
    100% { opacity: 0.2; transform: scale(0.5) translateY(0); }
}

.toast-with-mascot .toast-text {
    animation: toastTextBounce 1.2s cubic-bezier(.68,-0.55,.27,1.55) infinite alternate;
}

@keyframes toastTextBounce {
    0%   { transform: translateY(0) scale(1); }
    30%  { transform: translateY(-4px) scale(1.04); }
    60%  { transform: translateY(-7px) scale(1.08); }
    100% { transform: translateY(0) scale(1); }
}

.toast-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(1200px 200px at 20% 0%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.0) 55%);
    opacity: 0.75;
    z-index: 1;
    pointer-events: none;
}

.toast-surface::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -60%;
    width: 55%;
    height: 160%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.62) 50%, rgba(255, 255, 255, 0.0) 100%);
    transform: rotate(18deg);
    animation: toastShine 1.6s ease-in-out 1;
    z-index: 1;
    pointer-events: none;
}

@keyframes toastShine {
    0% {
        transform: translateX(0) rotate(18deg);
        opacity: 0;
    }
    12% {
        opacity: 0.85;
    }
    100% {
        transform: translateX(220%) rotate(18deg);
        opacity: 0;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(18px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(18px);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast-notification,
    .toast-surface::after {
        animation: none !important;
    }
}

@media (max-width: 480px) {
    .toast-notification {
        top: 14px;
        right: 14px;
        width: calc(100vw - 28px);
        min-width: 0;
    }

    .toast-surface {
        padding: 16px 16px;
        min-height: 64px;
        font-size: 1.02rem;
    }

    .toast-notification.toast-with-mascot .toast-surface {
        padding-left: 46px;
    }

    .toast-mascot {
        left: -44px;
        bottom: -16px;
        width: 96px;
    }
}

/* Desktop: 5 กล่องเรียงแถวเดียว */
@media (min-width: 1000px) {
    .stats-bar {
        flex-wrap: nowrap;
        gap: 20px;
    }
    .stats-card {
        flex: 0 0 auto;
    }
}

/* Tablet: 5 กล่อง (3 + 2 centered) */
@media (max-width: 999px) and (min-width: 601px) {
    .stats-bar {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        padding: 14px 16px;
        max-width: 700px;
    }
    .stats-card {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    /* Row 2: center 2 cards */
    .stats-card:nth-child(4),
    .stats-card:nth-child(5) {
        grid-column: auto;
    }
    .stats-card:nth-child(4) {
        grid-column: 1 / 2;
    }
    .stats-card:nth-child(5) {
        grid-column: 3 / 4;
    }
}

/* Mobile: 2x2 + 1 centered */
@media (max-width: 600px) {
    .stats-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 12px 12px;
        max-width: 100%;
    }
    .stats-card {
        width: 100%;
        min-width: 0;
        max-width: none;
        padding: 16px 10px;
    }
    .stats-card:nth-child(5) {
        grid-column: 1 / -1;
        width: 50%;
        margin: 0 auto;
    }
    .stats-title {
        font-size: 0.85rem;
        margin-bottom: 8px;
        min-height: auto;
    }
    .stats-value {
        font-size: 1.8rem;
        margin-bottom: 4px;
    }
    .stats-unit {
        font-size: 0.85rem;
    }
}

/* =============================
     Home Carousel (Mockup)
     ============================= */
.home-carousel-wrap {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    align-self: stretch;
}

/* =============================
     Home News (Facebook)
     ============================= */
.home-duo-wrap {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    align-self: stretch;
}

.home-panel-equal {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.home-news-wrap {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    align-self: stretch;
}

.home-news-panel {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.14) 100%) padding-box,
        linear-gradient(135deg, rgba(45, 212, 191, 0.24) 0%, rgba(59, 130, 246, 0.20) 52%, rgba(99, 102, 241, 0.16) 100%) border-box;
    border: 1.5px solid transparent;
    box-shadow: 0 12px 45px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(6px);
    transition: transform 0.12s ease, box-shadow 0.18s ease;
}

/* In the two-column section, let panels fill the column width */
.home-duo-wrap .home-news-panel {
    max-width: 100%;
}

.home-news-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 60px rgba(15, 23, 42, 0.18);
}

.home-news-header {
    padding: 22px 18px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.home-news-title {
    font-size: 2.05rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    /* color: #0f172a; */
    color: #ffffff;
}

.home-news-tabs {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* When the panel is narrow, center the tab row for a tighter layout */
@media (max-width: 720px) {
    .home-news-panel {
        max-width: 100%;
    }
    .home-news-tabs {
        justify-content: center;
    }
}

.home-news-tab {
    border: 1.6px solid rgba(37, 99, 235, 0.55);
    background: rgba(255,255,255,0.88);
    color: #1d4ed8;
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 1.02rem;
    transition: transform 0.08s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.home-news-tab:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14);
}

.home-news-tab:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.55);
    outline-offset: 2px;
}

.home-news-tab.active,
.home-news-tab[aria-selected="true"] {
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.95) 0%, rgba(59, 130, 246, 0.95) 100%);
    border-color: transparent;
    color: #0b1324;
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.20);
}

/* Dark Mode - Home News (Facebook) surfaces */
[data-theme="dark"] .home-news-panel {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(15, 23, 42, 0.86) 100%) padding-box,
        linear-gradient(135deg, rgba(59, 130, 246, 0.24) 0%, rgba(99, 102, 241, 0.18) 52%, rgba(45, 212, 191, 0.14) 100%) border-box;
    box-shadow: 0 18px 70px rgba(0, 0, 0, 0.42);
}

[data-theme="dark"] .home-news-header {
    border-bottom-color: rgba(148, 163, 184, 0.14);
}

[data-theme="dark"] .home-news-tab {
    background: rgba(15, 23, 42, 0.72);
    color: rgba(255, 255, 255, 0.92);
    border-color: rgba(148, 163, 184, 0.30);
}

[data-theme="dark"] .home-news-tab:hover {
    background: rgba(30, 41, 59, 0.78);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .home-news-tab.active,
[data-theme="dark"] .home-news-tab[aria-selected="true"] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
    color: rgba(255, 255, 255, 0.96);
    border-color: rgba(96, 165, 250, 0.26);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] .home-news-card,
[data-theme="dark"] .home-news-state {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(148, 163, 184, 0.18);
}

[data-theme="dark"] .home-news-card-source,
[data-theme="dark"] .home-news-state-title {
    color: rgba(255, 255, 255, 0.92);
}

[data-theme="dark"] .home-news-card-date,
[data-theme="dark"] .home-news-state-subtitle {
    color: rgba(255, 255, 255, 0.62);
}

[data-theme="dark"] .home-news-card-text {
    color: rgba(255, 255, 255, 0.92);
}

[data-theme="dark"] .home-news-card-media {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .home-news-embed-wrap {
    background: rgba(15, 23, 42, 0.60);
}

[data-theme="dark"] .home-news-card-actions a {
    color: rgba(147, 197, 253, 0.95);
}

[data-theme="dark"] .home-news-carousel .carousel-control-prev-icon,
[data-theme="dark"] .home-news-carousel .carousel-control-next-icon {
    background-color: rgba(15, 23, 42, 0.88);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}

.home-news-carousel {
    position: relative;
    padding: 12px 14px 18px;
    flex: 1;
}

.home-video-panel .home-video-body {
    position: relative;
    padding: 12px 14px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.home-video-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.home-video-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-video-section-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.1px;
}

.home-video-frame-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.home-video-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* =============================
     Home FAQ (Accordion)
   ============================= */
.home-faq-wrap {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    align-self: stretch;
}

.home-faq-panel {
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.12) 100%) padding-box,
        linear-gradient(135deg, rgba(45, 212, 191, 0.16) 0%, rgba(59, 130, 246, 0.14) 52%, rgba(99, 102, 241, 0.09) 100%) border-box;
    border: 1.5px solid transparent;
    box-shadow: 0 12px 45px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(6px);
}

[data-theme="dark"] .home-faq-panel {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(15, 23, 42, 0.86) 100%) padding-box,
        linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(99, 102, 241, 0.12) 52%, rgba(45, 212, 191, 0.10) 100%) border-box;
    box-shadow: 0 18px 70px rgba(0, 0, 0, 0.42);
}

.home-faq-header {
    padding: 22px 18px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.home-faq-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.75rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.96);
    letter-spacing: 0.2px;
}

.home-faq-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.92;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 0 0 22px 22px;
}

[data-theme="dark"] .faq-accordion {
    background: rgba(15, 23, 42, 0.92);
}

.faq-item {
    border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}

[data-theme="dark"] .faq-item {
    border-bottom-color: rgba(148, 163, 184, 0.14);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 18px;
    border: 0;
    background: rgba(15, 23, 42, 0.08);
    color: rgba(15, 23, 42, 0.92);
    text-align: left;
    font-weight: 500;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 180ms ease, transform 180ms ease;
}

[data-theme="dark"] .faq-trigger {
    background: rgba(2, 6, 23, 0.64);
    color: rgba(255, 255, 255, 0.94);
}

.faq-trigger:hover {
    background: rgba(15, 23, 42, 0.12);
}

[data-theme="dark"] .faq-trigger:hover {
    background: rgba(2, 6, 23, 0.78);
}

.faq-item[data-open="true"] .faq-trigger {
    background: rgba(15, 23, 42, 0.16);
}

[data-theme="dark"] .faq-item[data-open="true"] .faq-trigger {
    background: rgba(2, 6, 23, 0.86);
}

.faq-trigger:active {
    transform: translateY(1px);
}

.faq-trigger:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.40);
    outline-offset: -3px;
    border-radius: 12px;
}

.faq-q {
    flex: 1;
}

.faq-chevron {
    width: 14px;
    height: 14px;
    display: inline-block;
    transform: rotate(0deg);
    transition: transform 220ms cubic-bezier(0.2, 0.85, 0.2, 1);
    opacity: 0.9;
}

.faq-chevron::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(15, 23, 42, 0.55);
    border-bottom: 2px solid rgba(15, 23, 42, 0.55);
    transform: rotate(45deg);
    margin-top: 0;
}

[data-theme="dark"] .faq-chevron::before {
    border-right-color: rgba(255, 255, 255, 0.82);
    border-bottom-color: rgba(255, 255, 255, 0.82);
}

.faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 260ms cubic-bezier(0.2, 0.85, 0.2, 1);
    overflow: hidden;
}

.faq-content-inner {
    overflow: hidden;
    min-height: 0;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 0;
    padding-bottom: 0;
    color: rgba(15, 23, 42, 0.92);
    line-height: 1.65;
    font-weight: 500;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.85, 0.2, 1);
}

[data-theme="dark"] .faq-content-inner {
    color: rgba(255, 255, 255, 0.92);
}

.faq-actions {
    margin-top: 12px;
}

.faq-guide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(37, 99, 235, 0.40);
    background: rgba(37, 99, 235, 0.08);
    color: rgba(15, 23, 42, 0.92);
    text-decoration: none;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 800;
    font-size: 0.98rem;
    transition: transform 0.10s ease, background-color 0.16s ease, border-color 0.16s ease;
}

[data-theme="dark"] .faq-guide-btn {
    border-color: rgba(147, 197, 253, 0.30);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.94);
}

.faq-guide-btn:hover {
    transform: translateY(-1px);
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.52);
}

[data-theme="dark"] .faq-guide-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(147, 197, 253, 0.38);
}

.faq-guide-btn:focus-visible {
    outline: 3px solid rgba(96, 165, 250, 0.55);
    outline-offset: 3px;
}

.faq-item[data-open="true"] .faq-content-inner {
    padding-top: 12px;
    padding-bottom: 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.10);
    opacity: 1;
    transform: translateY(0);
}

[data-theme="dark"] .faq-item[data-open="true"] .faq-content-inner {
    border-top-color: rgba(148, 163, 184, 0.14);
}

.faq-item[data-open="true"] .faq-content {
    grid-template-rows: 1fr;
}

.faq-item[data-open="true"] .faq-chevron {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .faq-trigger,
    .faq-content,
    .faq-chevron,
    .faq-content-inner {
        transition: none !important;
    }
}

/* =============================
     Home Map (Google Maps)
   ============================= */
.home-map-panel {
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.14) 100%) padding-box,
        linear-gradient(135deg, rgba(45, 212, 191, 0.24) 0%, rgba(59, 130, 246, 0.20) 52%, rgba(99, 102, 241, 0.16) 100%) border-box;
    border: 1.5px solid transparent;
    box-shadow: 0 12px 45px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(6px);
    transition: transform 0.12s ease, box-shadow 0.18s ease;
}

[data-theme="dark"] .home-map-panel {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(15, 23, 42, 0.86) 100%) padding-box,
        linear-gradient(135deg, rgba(59, 130, 246, 0.24) 0%, rgba(99, 102, 241, 0.18) 52%, rgba(45, 212, 191, 0.14) 100%) border-box;
    box-shadow: 0 18px 70px rgba(0, 0, 0, 0.42);
}

[data-theme="dark"] .home-map-header {
    border-bottom-color: rgba(148, 163, 184, 0.14);
}

.home-map-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 60px rgba(15, 23, 42, 0.18);
}

.home-map-header {
    padding: 22px 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.home-map-title {
    font-size: 2.05rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #ffffff;
}

.home-map-open {
    border: 1.6px solid rgba(37, 99, 235, 0.55);
    background: rgba(255,255,255,0.88);
    color: #1d4ed8;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 800;
    font-size: 0.98rem;
    text-decoration: none;
    transition: transform 0.08s ease, box-shadow 0.15s ease;
}

.home-map-open:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14);
}

.home-map-open:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.55);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .home-news-panel,
    .home-map-panel,
    .home-news-tab,
    .home-map-open {
        transition: none;
    }

    .home-news-panel:hover,
    .home-map-panel:hover,
    .home-news-tab:hover,
    .home-map-open:hover {
        transform: none;
    }
}

.home-map-body {
    padding: 12px 14px 18px;
    flex: 1;
    display: flex;
    min-height: 0;
}

.home-map-frame {
    width: 100%;
    flex: 1;
    height: 100%;
    min-height: 420px;
    border: 0;
    border-radius: 18px;
    background: rgba(255,255,255,0.92);
}

.home-news-carousel .carousel-inner {
    border-radius: 18px;
}

.home-news-card {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 18px;
    overflow: hidden;
}

/* Embed mode: keep the frame as narrow as the Facebook plugin */
.home-news-card--embed {
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.home-news-card--embed .home-news-embed-wrap {
    background: transparent;
}

.home-news-card--embed .home-news-card-meta {
    display: none;
}

.toast-with-mascot .toast-mascot::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 18px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,200,0.22) 0%, rgba(255,255,180,0.12) 60%, rgba(255,255,255,0.0) 100%);
    filter: blur(2.5px);
    z-index: 2;
    pointer-events: none;
}

.toast-with-mascot .toast-surface::after {
    /* Flare sweep effect */
    content: '';
    position: absolute;
    left: -30%;
    top: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.0) 100%);
    filter: blur(2.5px);
    opacity: 0.7;
    pointer-events: none;
    z-index: 3;
    animation: toastFlareSweep 1.8s cubic-bezier(.68,-0.55,.27,1.55) 1;
}

@keyframes toastFlareSweep {
    0%   { left: -30%; opacity: 0.0; }
    10%  { opacity: 0.2; }
    40%  { left: 20%; opacity: 0.7; }
    80%  { left: 60%; opacity: 0.2; }
    100% { left: 100%; opacity: 0.0; }
}

.home-news-card-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.home-news-card-source {
    font-weight: 800;
    color: #0f172a;
}

.home-news-card-date {
    font-weight: 600;
    color: rgba(15,23,42,0.62);
}

.home-news-card-text {
    font-size: 1.02rem;
    line-height: 1.55;
    color: #0f172a;
    white-space: pre-wrap;
}

.home-news-card-media {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(15,23,42,0.02);
}

.home-news-embed-wrap {
    padding: 0;
    background: rgba(255,255,255,0.75);
    display: flex;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
}

.home-news-embed-frame {
    width: 100%;
    height: 650px;
    border: none;
    overflow: hidden;
    display: block;
    max-width: 500px;
}

.home-news-card-media img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

.home-news-card-actions {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}

.home-news-card-actions a {
    text-decoration: none;
    font-weight: 800;
    color: #1d4ed8;
}

.home-news-state {
    background: rgba(255,255,255,0.92);
    border: 1px dashed rgba(15, 23, 42, 0.18);
    border-radius: 18px;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px;
    text-align: center;
}

.home-news-state-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #0f172a;
}

.home-news-state-subtitle {
    margin-top: 6px;
    font-size: 0.98rem;
    color: rgba(15,23,42,0.70);
}

.home-news-carousel .carousel-control-prev,
.home-news-carousel .carousel-control-next {
    width: 12%;
    opacity: 1;
}

.home-news-carousel .carousel-control-prev-icon,
.home-news-carousel .carousel-control-next-icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    background-color: rgba(255,255,255,0.92);
    background-size: 60% 60%;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
    filter: none;
}

@media (max-width: 900px) {
    .home-news-title {
        font-size: 1.75rem;
    }
    .home-news-tab {
        font-size: 0.98rem;
        padding: 9px 14px;
    }
    .home-news-card {
        min-height: 340px;
    }
    .home-news-card--embed {
        min-height: 540px;
    }
    .home-news-embed-frame {
        height: 500px;
    }
    .home-news-card-media img {
        height: 220px;
    }
}

@media (max-width: 600px) {
    .home-news-panel {
        border-radius: 16px;
    }
    .home-news-header {
        padding: 18px 14px 12px;
    }
    .home-news-title {
        font-size: 1.45rem;
    }
    .home-news-carousel {
        padding: 10px 10px 14px;
    }
    .home-news-carousel .carousel-control-prev,
    .home-news-carousel .carousel-control-next {
        width: 16%;
    }
    .home-news-card--embed {
        min-height: 520px;
    }
    .home-news-embed-frame {
        height: 460px;
    }
}

.home-carousel {
    position: relative;
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(30, 32, 60, 0.22);
    border: 1.5px solid rgba(165,180,252,0.22);
    box-shadow:
        0 10px 40px rgba(40,40,80,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.06);
    backdrop-filter: blur(6px);
}

.home-carousel::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    border: 2px solid rgba(255,255,255,0.10);
}

.home-carousel .carousel-inner {
    border-radius: inherit;
    overflow: hidden;
    padding: 0;
}

.home-carousel .carousel-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(1200px 520px at 30% 40%, rgba(99,102,241,0.20), rgba(10,10,20,0.20));
}

/* Blurred background from the same slide image (uses --slide-bg inline variable) */
.home-carousel .home-carousel-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--slide-bg);
    background-size: cover;
    background-position: center;
    filter: blur(18px) saturate(1.15);
    transform: scale(1.08);
    opacity: 0.42;
    z-index: 0;
}

/* Bottom fade for readability (dots + controls) */
.home-carousel .home-carousel-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.14) 45%, rgba(0,0,0,0.32) 100%);
    z-index: 1;
}

.home-carousel-img {
    height: 320px;
    object-fit: contain;
    object-position: center;
    border-radius: 14px;
    filter: saturate(1.02) contrast(1.02);
    position: relative;
    z-index: 2;
}

/* Slides 1-2 already have text baked into the image; hide overlay caption */
.home-carousel-item--art .home-carousel-caption {
    display: none;
}

.home-carousel-caption {
    position: absolute;
    z-index: 3;
    left: 6%;
    right: 6%;
    bottom: 46px;
    text-align: left;
}

.home-carousel-caption::before {
    content: '';
    position: absolute;
    left: -12px;
    right: -12px;
    bottom: -14px;
    top: -14px;
    background: linear-gradient(90deg, rgba(10,10,20,0.52) 0%, rgba(10,10,20,0.18) 55%, rgba(10,10,20,0.00) 100%);
    border-radius: 16px;
    z-index: -1;
}

.home-carousel-title {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

.home-carousel-subtitle {
    margin-top: 6px;
    font-size: 1.05rem;
    font-weight: 500;
    color: rgba(255,255,255,0.86);
    text-shadow: 0 2px 12px rgba(0,0,0,0.30);
}

.home-carousel .carousel-indicators {
    z-index: 4;
    margin-bottom: 14px;
}

.home-carousel .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background-color: rgba(180,190,255,0.55);
    border: 0;
    margin-left: 6px;
    margin-right: 6px;
    opacity: 1;
}

.home-carousel .carousel-indicators .active {
    background-color: #a5b4fc;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.18);
}

.home-carousel .carousel-control-prev,
.home-carousel .carousel-control-next {
    z-index: 4;
    width: 10%;
}

.home-carousel .carousel-control-prev-icon,
.home-carousel .carousel-control-next-icon {
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.35));
    opacity: 0.95;
}

@media (max-width: 900px) {
    .home-carousel-img {
        height: 260px;
    }
    .home-carousel-title {
        font-size: 1.3rem;
    }
    .home-carousel-subtitle {
        font-size: 0.98rem;
    }
}

@media (max-width: 600px) {
    .home-carousel {
        border-radius: 16px;
    }
    .home-carousel .carousel-inner {
        padding: 0;
    }
    .home-carousel-img {
        height: 200px;
        border-radius: 10px;
    }
    .home-carousel-caption {
        left: 5%;
        right: 5%;
        bottom: 40px;
    }
    .home-carousel-title {
        font-size: 1.08rem;
    }
    .home-carousel-subtitle {
        font-size: 0.92rem;
    }
    .home-carousel .carousel-control-prev,
    .home-carousel .carousel-control-next {
        width: 14%;
    }
}
/*Edit CSS Version 0.0.20 - Improved Info Tooltip Design*/

/* ========================================
   Hide Google Translate Top Bar
   ======================================== */
/* ซ่อนแถบ Google Translate ด้านบน */
.goog-te-banner-frame {
    display: none !important;
}

/* ซ่อน iframe ของ Google Translate */
iframe.goog-te-banner-frame {
    display: none !important;
}

/* ป้องกัน Google Translate เพิ่ม margin-top ให้ body */
body {
    top: 0 !important;
    position: static !important;
}

/* ซ่อน element อื่นๆ ที่เกี่ยวกับ Google Translate bar */
.skiptranslate iframe {
    display: none !important;
}

body > .skiptranslate {
    display: none !important;
}

/* ========================================
   CSS Variables for Light/Dark Mode
   ======================================== */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-card: #ffffff;
    --text-primary: #333333;
    --text-secondary: #666666;
    --border-color: #e0e0e0;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --input-bg: #ffffff;
    --input-border: #ccc;
}

[data-theme="dark"] {
    --bg-primary: #1a1a2e;
    --bg-secondary: rgba(22, 33, 62, 0.85);
    --bg-card: rgba(15, 52, 96, 0.9);
    --text-primary: #e4e4e4;
    --text-secondary: #b0b0b0;
    --border-color: #3a3a5c;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --input-bg: rgba(26, 26, 46, 0.9);
    --input-border: #3a3a5c;
}

/* Dark Mode - ตัวหนังสือหลักให้เห็นชัด */
[data-theme="dark"] .menu-list li a,
[data-theme="dark"] .dropdown-menu a,
[data-theme="dark"] .dropdown-menu li a {
    color: #e4e4e4 !important;
}

[data-theme="dark"] .menu-list li a:hover,
[data-theme="dark"] .dropdown-menu a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

/* NOTE: Avoid overriding global Dark Mode page background here.
   Page background should stay as originally designed; About modal has its own styling. */

[data-theme="dark"] .card,
[data-theme="dark"] .dropdown-menu {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="dark"] .form-control {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
    backdrop-filter: blur(5px);
}

[data-theme="dark"] .menu-list li a {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .menu-list li a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   Language Switcher Styles
   ======================================== */
.language-switcher-container {
    padding: 10px 8px !important;
    background: transparent;
    border-radius: 8px;
    margin: 2px 10px 5px 10px !important;
}

.language-switcher-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.language-label {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    transition: all 0.3s ease;
}

[data-theme="dark"] .language-label {
    color: #ecf0f1;
}

.language-flags {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.flag-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 30px;
    border: 2px solid transparent;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 2px;
}

.flag-btn:hover {
    border-color: #f39c12;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
}

.flag-btn:active {
    transform: scale(0.95);
}

.flag-btn.active {
    border-color: #f39c12;
    background: rgba(243, 156, 18, 0.1);
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.4);
}

[data-theme="dark"] .flag-btn:hover {
    border-color: #f1c40f;
    box-shadow: 0 2px 8px rgba(241, 196, 15, 0.3);
}

[data-theme="dark"] .flag-btn.active {
    border-color: #f1c40f;
    background: rgba(241, 196, 15, 0.1);
    box-shadow: 0 2px 8px rgba(241, 196, 15, 0.4);
}

.flag-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* ========================================
   Scene Toggle - Enhanced Day/Night Animation
   ======================================== */
.dark-mode-toggle-container {
    padding: 10px 8px !important;
    background: transparent;
    border-radius: 8px;
    margin: 2px 10px 5px 10px !important;
}

[data-theme="dark"] .dark-mode-toggle-container {
    background: transparent;
}

.dark-mode-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mode-label {
    font-size: 16px;
    transition: all 0.4s ease;
}

.light-label {
    color: #f39c12;
}

.dark-label {
    color: #7f8c8d;
}

[data-theme="dark"] .light-label {
    color: #7f8c8d;
}

[data-theme="dark"] .dark-label {
    color: #f1c40f;
}

/* ========================================
   Enhanced Scene Toggle Switch
   ======================================== */
.scene-toggle {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 35px;
    cursor: pointer;
    perspective: 1000px;
}

.scene-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.scene-toggle__background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 
        inset 0 2px 15px rgba(0, 0, 0, 0.4),
        0 6px 20px rgba(0, 0, 0, 0.25),
        0 0 0 2px rgba(255, 255, 255, 0.1);
    transition: box-shadow 0.5s ease;
}

.scene-toggle:hover .scene-toggle__background {
    box-shadow: 
        inset 0 2px 15px rgba(0, 0, 0, 0.4),
        0 8px 30px rgba(0, 0, 0, 0.35),
        0 0 0 3px rgba(255, 255, 255, 0.2);
}

.scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scene-svg {
    width: 100%;
    height: 100%;
}

.scene--day {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.scene--night {
    opacity: 0;
    transform: scale(1.2) rotate(10deg);
}

.scene-toggle input:checked ~ .scene-toggle__background .scene--day {
    opacity: 0;
    transform: scale(0.8) rotate(-10deg);
}

.scene-toggle input:checked ~ .scene-toggle__background .scene--night {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* ========================================
   Enhanced Toggle Ball with Sun/Moon Effect
   ======================================== */
.scene-toggle__ball {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 10;
    /* Sun appearance */
    background: linear-gradient(145deg, #FFD93D 0%, #F6D365 50%, #FDA085 100%);
    box-shadow: 
        0 0 20px rgba(255, 217, 61, 0.6),
        0 0 40px rgba(255, 217, 61, 0.3),
        0 3px 12px rgba(0, 0, 0, 0.3),
        inset 0 -2px 5px rgba(0, 0, 0, 0.15),
        inset 0 2px 5px rgba(255, 255, 255, 0.5);
}

/* Sun rays animation */
.scene-toggle__ball::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid rgba(255, 217, 61, 0.4);
    animation: sunPulse 2s ease-in-out infinite;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.scene-toggle__ball::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 217, 61, 0.2);
    animation: sunPulse 2s ease-in-out infinite 0.5s;
    opacity: 1;
    transition: opacity 0.5s ease;
}

@keyframes sunPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.2;
    }
}

/* Moon appearance when checked */
.scene-toggle input:checked ~ .scene-toggle__ball {
    left: 39px;
    /* Moon appearance */
    background: linear-gradient(145deg, #F5F5DC 0%, #E8E8C8 50%, #D4D4A0 100%);
    box-shadow: 
        0 0 40px rgba(245, 245, 220, 0.5),
        0 0 80px rgba(245, 245, 220, 0.2),
        0 5px 20px rgba(0, 0, 0, 0.4),
        inset 0 -3px 8px rgba(0, 0, 0, 0.2),
        inset 0 3px 8px rgba(255, 255, 255, 0.4),
        /* Moon craters */
        inset 8px 8px 15px rgba(180, 180, 150, 0.3),
        inset -5px -5px 10px rgba(255, 255, 255, 0.2);
}

/* Hide sun rays, show moon glow */
.scene-toggle input:checked ~ .scene-toggle__ball::before {
    border-color: rgba(245, 245, 220, 0.3);
    animation: moonGlow 3s ease-in-out infinite;
}

.scene-toggle input:checked ~ .scene-toggle__ball::after {
    border-color: rgba(245, 245, 220, 0.15);
    animation: moonGlow 3s ease-in-out infinite 1s;
}

@keyframes moonGlow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.1;
    }
}

/* Hover effects */
.scene-toggle:hover .scene-toggle__ball {
    transform: scale(1.1);
    box-shadow: 
        0 0 40px rgba(255, 217, 61, 0.8),
        0 0 80px rgba(255, 217, 61, 0.4),
        0 8px 25px rgba(0, 0, 0, 0.35),
        inset 0 -3px 8px rgba(0, 0, 0, 0.15),
        inset 0 3px 8px rgba(255, 255, 255, 0.5);
}

.scene-toggle input:checked:hover ~ .scene-toggle__ball {
    box-shadow: 
        0 0 50px rgba(245, 245, 220, 0.7),
        0 0 100px rgba(245, 245, 220, 0.3),
        0 8px 25px rgba(0, 0, 0, 0.45),
        inset 0 -3px 8px rgba(0, 0, 0, 0.2),
        inset 0 3px 8px rgba(255, 255, 255, 0.4);
}

.scene-toggle:active .scene-toggle__ball {
    transform: scale(0.95);
}

/* ========================================
   Star Twinkling Animation (for SVG stars)
   ======================================== */
@keyframes twinkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(0.5);
    }
}

@keyframes twinkle2 {
    0%, 100% {
        opacity: 0.5;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Cloud floating animation */
@keyframes cloudFloat {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}

@keyframes cloudFloat2 {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-3px);
    }
}

/* Menu Divider */
.menu-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #ccc, transparent);
    margin: 8px 15px !important;
    padding: 0 !important;
}

[data-theme="dark"] .menu-divider {
    background: linear-gradient(90deg, transparent, #4a4a6a, transparent);
}

@font-face {
    font-family: "FC Iconic"; /* The name you'll use in your CSS */
    src: url('../fonts/300_fciconic-light.woff') format('woff'); /* Path to the WOFF file */
    font-weight: normal; /* Specify the font weight if needed */
    font-style: normal; /* Specify the font style (normal, italic, etc.) */
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -60%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes popupFadeOut {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -60%) scale(0.95);
    }
}

/* Word wrap for table columns */
.word-wrap {
    word-wrap: break-word;
    white-space: normal;
}

*{
    font-family: "FC Iconic","Mitr", sans-serif;
    box-sizing: border-box;
}

html {
    height: 100%;
    overflow-x: hidden;
    /* Hide scrollbar UI (still scrollable) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}

html::-webkit-scrollbar {
    width: 0;
    height: 0;
}
        
body{
    background-image: url("../images/bg-index-bw.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center -70px;
    background-attachment: scroll;
    background-color: #0a0a0a;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    /* Hide scrollbar UI (still scrollable) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
    margin: 0;
    padding: 0;
}

body::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.name_sys{
    color: #8C62FF;
    /* leading-trim: both; */
    /* text-edge: cap; */
    font-family: "FC Iconic";
    font-size: clamp(37px, 4.5vw, 65px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: center;
}

/* Premium hero title effect (always running) */
.name_sys .csss-hero-title {
    display: inline-block;
    position: relative;
    padding: 0 6px;
    will-change: transform, background-position;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .name_sys .csss-hero-title {
        color: transparent;
        -webkit-text-fill-color: transparent;
        /* Use a repeating pattern so the shimmer loop is seamless */
        background-image: repeating-linear-gradient(
            90deg,
            rgba(140, 98, 255, 0.98) 0%,
            rgba(140, 98, 255, 0.98) 16%,
            rgba(255, 255, 255, 0.82) 24%,
            rgba(140, 98, 255, 1) 36%,
            rgba(140, 98, 255, 0.98) 52%
        );
        background-repeat: repeat;
        background-size: 200% 100%;
        background-position: 0% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: 0 0 14px rgba(140, 98, 255, 0.40);
        animation: csss-heroShimmer 6s linear infinite, csss-heroFloat 7.2s ease-in-out infinite;
    }
}

@keyframes csss-heroShimmer {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

@keyframes csss-heroFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-1px);
    }
}

/* Entrance reveal animation removed: show hero text immediately */
.desc_sys1 span {
    display: inline-block;
}

/* desc_sys2 contains 2 lines (slogan3, slogan4) */
.desc_sys2 span {
    display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
    .name_sys .csss-hero-title,
    .name_systh,
    .desc_sys1,
    .desc_sys2 {
        animation: none !important;
        transform: none !important;
    }
    .desc_sys1 span,
    .desc_sys1 div {
        animation: none !important;
        filter: none !important;
        clip-path: none !important;
    }
    .desc_sys2 span {
        animation: none !important;
        filter: none !important;
        clip-path: none !important;
    }
    @supports ((-webkit-background-clip: text) or (background-clip: text)) {
        .name_sys .csss-hero-title {
            background-position: 50% 50%;
        }
    }
}
.name_systh{
    color: #FFF;
    text-align: center;
    /* leading-trim: both; */
    /* text-edge: cap; */
    font-family: "FC Iconic";
    font-size: clamp(18px, 1.75vw, 26px);
    font-style: normal;
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: -0.2px;
}
.container-main{
    display: flex;
    /*width: 1440px;*/
    padding: 70px 30px 30px 30px;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Mobile Responsive - container-main */
@media (max-width: 768px) {
    .container-main {
        padding: 45px 15px 30px 15px;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .container-main {
        padding: 38px 10px 25px 10px;
        gap: 15px;
    }
}
.desc_sys1{
    color: #FFF;
    text-align: center;
    /* leading-trim: both; */
    /* text-edge: cap; */
    font-family: Outfit;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 76px; /* 158.333% */
    letter-spacing: -0.48px;
}

/* Cyber-style emphasis for slogan lines (static, no moving shimmer) */
.desc_sys1 span[data-i18n="slogan1"] {
    color: rgba(255, 255, 255, 0.92);
    text-shadow:
        0 0 10px rgba(140, 98, 255, 0.28),
        0 0 22px rgba(140, 98, 255, 0.18);
}

.desc_sys1 div[data-i18n="slogan2"] {
    color: rgba(235, 255, 244, 0.98);
    font-weight: 800;
    letter-spacing: 0.01em;
    text-shadow:
    0 0 6px rgba(255, 255, 255, 0.14),
    0 0 12px rgba(64, 255, 120, 0.22),
    0 0 24px rgba(64, 255, 120, 0.12);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .desc_sys1 div[data-i18n="slogan2"] {
        color: transparent;
        -webkit-text-fill-color: transparent;
        background-image: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(228, 255, 240, 0.98) 26%,
            rgba(64, 255, 120, 0.62) 52%,
            rgba(255, 255, 255, 0.98) 100%
        );
        background-size: 100% 100%;
        background-position: 50% 50%;
        -webkit-background-clip: text;
        background-clip: text;
    }
}
.desc_sys2{
    color:#FFF;
    text-align: center;
    /* leading-trim: both; */
    /* text-edge: cap; */
    font-family: "FC Iconic";
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    opacity: 1;
}

.login_sugg{
    color: rgba(255, 255, 255, 0.80);
    text-align: center;
    /* leading-trim: both; */
    /* text-edge: cap; */
    font-family: "FC Iconic";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.login_header_text{
    color: rgba(255, 255, 255, 0.80);
    font-family: "FC Iconic";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.login_content{
    color: rgba(255, 255, 255, 0.80);
    text-align: center;
    font-family: "FC Iconic";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* ========================================
   SMS Input Panel (background box behind input)
   ======================================== */
.sms-input-panel {
    position: relative;
    padding: 14px 14px 16px;
    border-radius: 18px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Background box (starts below label) */
.sms-input-panel__bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(6, 6, 10, 0.72),
        rgba(16, 8, 28, 0.62)
    );
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(6px);
    z-index: 1;
}

/* Keep label above the background box */
.sms-input-label {
    position: relative;
    z-index: 2;
    margin-bottom: 10px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* Keep input group above the background box */
.sms-input-group {
    position: relative;
    z-index: 2;
}

/* =============================
   Turnstile on "ตรวจสอบ" button
   ============================= */
.check-sms-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 0 auto;
    gap: 10px;
}

.turnstile-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.turnstile-wrap #turnstileWidget {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* "ตรวจสอบ" button hover polish */
#checkSmsBtn {
    transition: transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1),
        box-shadow 260ms ease,
        filter 260ms ease;
    will-change: transform;
}

#checkSmsBtn .check-sms-icon {
    transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1),
        opacity 260ms ease;
    will-change: transform;
}

@media (hover: hover) {
    #checkSmsBtn:hover {
        transform: translateY(-3px) scale(1.02);
        filter: saturate(1.04);
        box-shadow:
            0 22px 60px rgba(8, 15, 30, 0.20),
            0 6px 26px rgba(34, 197, 94, 0.06),
            inset 0 0 18px rgba(255, 255, 255, 0.02);
    }

    #checkSmsBtn:hover .check-sms-icon {
        transform: translateX(-3px) rotate(-6deg) scale(1.06);
        opacity: 0.995;
    }
}

#checkSmsBtn:active {
    transform: translateY(0);
}

#checkSmsBtn:focus-visible {
    outline: 3px solid rgba(45, 212, 191, 0.48);
    outline-offset: 3px;
}

/* "ตรวจสอบ" button icon (theme-aware via currentColor) */
.check-sms-icon {
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
}

/* Dark Mode - Make "ตรวจสอบ" button dark and readable */
[data-theme="dark"] #checkSmsBtn {
    background: linear-gradient(145deg, #0f172a, #1e293b) !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    color: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] #checkSmsBtn:hover {
    background: linear-gradient(145deg, #111c33, #243447) !important;
}

[data-theme="dark"] #checkSmsBtn:active {
    transform: translateY(1px);
}

[data-theme="dark"] #checkSmsBtn:focus-visible {
    outline: 3px solid rgba(96, 165, 250, 0.55);
    outline-offset: 3px;
}

/* Scroll reveal for Home panels (news/video) */
.csss-scroll-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 420ms ease, transform 520ms cubic-bezier(0.2, 0.85, 0.2, 1);
}

.csss-scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    #checkSmsBtn,
    #checkSmsBtn .check-sms-icon,
    .csss-scroll-reveal {
        transition: none !important;
        filter: none !important;
        transform: none !important;
    }

    .csss-scroll-reveal {
        opacity: 1 !important;
    }
}

/* Input Gate reason/hint (shown under the input field) */
.input-gate-message {
    position: relative;
    z-index: 2;
    margin-top: 10px;
    border-radius: 12px;
    padding: 9px 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: linear-gradient(
        135deg,
        rgba(255, 228, 107, 0.14),
        rgba(255, 214, 10, 0.10)
    );
    border: 1px solid rgba(255, 226, 110, 0.26);
    box-shadow: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.92);
    transform: translateY(-4px);
    opacity: 0;
    animation: inputGateReveal 220ms ease-out forwards;
}

.input-gate-message::before {
    display: none;
}

@keyframes inputGateShine {
    0% { transform: translateX(-130%); }
    45% { transform: translateX(130%); }
    100% { transform: translateX(130%); }
}

.input-gate-message.is-error {
    background: linear-gradient(135deg, rgba(255, 65, 86, 0.18), rgba(255, 65, 86, 0.10));
    border-color: rgba(255, 124, 135, 0.30);
}

.input-gate-message.is-warn {
    background: linear-gradient(135deg, rgba(255, 228, 107, 0.16), rgba(255, 214, 10, 0.10));
    border-color: rgba(255, 226, 110, 0.26);
}

@keyframes inputGateReveal {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.input-gate-message__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.input-gate-message__badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 14px;
    color: #0b0b10;
    background: radial-gradient(circle at 35% 35%, #fff3b0, #ffd400);
    box-shadow: none;
    flex: 0 0 auto;
    margin-top: 1px;
}

.input-gate-message.is-error .input-gate-message__badge {
    background: radial-gradient(circle at 35% 35%, #ffd5db, #ff4156);
    box-shadow: none;
}

.input-gate-message__title {
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.2px;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.96);
}

.input-gate-message__text {
    font-size: 0.88rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.86);
    word-break: break-word;
    white-space: pre-line;
}

/* Responsive tweak so label wrapping won't overlap the box */
@media (max-width: 480px) {
    .sms-input-panel {
        padding: 12px 10px 14px;
        border-radius: 16px;
    }

    .sms-input-panel__bg {
        top: 0;
        bottom: 0;
    }
}

/*welcome-section*/

.welcome-modal {
  position: fixed;
  inset: 0; /* top:0 right:0 bottom:0 left:0 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.welcome-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92); /* มืดทั้งหน้า */
}

/* กล่องรูปใหญ่เต็ม ๆ */
.welcome-modal__content {
  position: relative;
  max-width: 1000px;
  max-height: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8);
  transform: scale(0.9);
  opacity: 0;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease;
}

/* ปุ่มปิด */
.welcome-modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 1;
  border: none;
  outline: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.welcome-modal__close:hover {
  background: rgba(0, 0, 0, 0.85);
}

/* รูปภาพ */
.welcome-modal__image {
  display: block;
  width: 100%;
  height: auto;
}

/* ตอนแสดง popup */
.welcome-modal--show {
    background: rgba(10, 10, 10, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 18px;
    padding: 14px 22px;
    opacity: 1;
    pointer-events: auto;
}

.welcome-modal--show .welcome-modal__content {
  transform: scale(1);
  opacity: 1;
}

/* รองรับจอมือถือ */
@media (max-width: 768px) {
  .welcome-modal__content {
    margin: 20px 10px;
  }
}


/*Popup-section*/

/* 🔳 เบลอพื้นหลัง */
body.modal-open {
    overflow: hidden;
}

/* Lock background page scroll while custom popups are open (loading/result).
   Uses position:fixed technique for better mobile browser support. */
html.popup-scroll-lock {
    overflow: hidden;
    overscroll-behavior: none;
}

body.popup-scroll-lock {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-x: hidden;
    overscroll-behavior: none;
}

#overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    z-index: 9998;
    display: none;
}

/* ========================================
   Loading Popup - Liquid Wave Animation
   ======================================== */
@keyframes loadingPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

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

@keyframes glow {
    0%, 100% { box-shadow: 0 0 30px rgba(99, 102, 241, 0.4); }
    50% { box-shadow: 0 0 50px rgba(99, 102, 241, 0.7); }
}

.loading-popup-new {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
    padding: 45px 55px;
    border-radius: 28px;
    box-shadow: 
        0 30px 70px rgba(0, 0, 0, 0.5),
        0 0 0 2px rgba(99, 102, 241, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 9999;
    text-align: center;
    border: none;
    animation: popupFadeIn 0.5s ease-out, glow 2s ease-in-out infinite;
    min-width: 340px;
    width: min(520px, 92vw);
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loading-popup-new.loading-popup-exit {
    animation: popupFadeOut 180ms ease-in forwards;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.loading-title {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #6366f1 100%);
    background-size: 200% 100%;
    animation: shimmer 2s ease-in-out infinite;
    color: #fff;
    font-weight: bold;
    padding: 16px 40px;
    border-radius: 50px;
    font-size: 22px;
    box-shadow: 
        0 8px 25px rgba(99, 102, 241, 0.5),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.2);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    text-align: center;
    white-space: nowrap;
    width: 100%;
    word-break: keep-all;
    overflow: hidden;
}

/* Liquid Circle Container */
.liquid-circle-container {
    position: relative;
    width: 200px;
    height: 200px;
    animation: float 3s ease-in-out infinite;
}

.liquid-circle-svg {
    width: 100%;
    height: 100%;
    transform: rotate(0deg);
    filter: drop-shadow(0 10px 20px rgba(99, 102, 241, 0.3));
}

.liquid-bg-circle {
    fill: rgba(30, 27, 75, 0.8);
}

.liquid-border-circle {
    fill: none;
    stroke: url(#loadingBorderGradient);
    stroke-width: 5;
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.6));
}

/* Liquid Waves */
.loading-wave {
    transition: d 0.05s linear;
}

.loading-wave.wave-1 {
    fill: url(#loadingLiquidGradient);
    opacity: 0.95;
    filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.5));
}

.loading-wave.wave-2 {
    fill: #818cf8;
    opacity: 0.5;
}

/* Percentage Text */
.loading-percent-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    text-shadow: 
        0 0 20px rgba(99, 102, 241, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 10;
    font-family: 'Segoe UI', sans-serif;
    font-variant-numeric: tabular-nums;
}

.loading-status-text {
    color: #a5b4fc;
    font-size: 18px;
    margin: 0;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
    letter-spacing: 1px;
}

.loading-phase-text {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
    width: 100%;
    max-width: min(640px, 90vw);
    min-height: 54px;
    padding: 12px 34px 10px 34px;
    margin-inline: auto;
    border-radius: 14px;
    border: 1px solid rgba(129, 140, 248, 0.30);
    background:
        linear-gradient(130deg, rgba(99, 102, 241, 0.34) 0%, rgba(79, 70, 229, 0.20) 40%, rgba(129, 140, 248, 0.12) 100%),
        rgba(15, 23, 42, 0.50);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #c7d2fe;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.35;
    text-align: left;
    text-shadow: 0 0 12px rgba(99, 102, 241, 0.55);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.09),
        0 12px 30px rgba(79, 70, 229, 0.26),
        0 0 22px rgba(129, 140, 248, 0.30);
    overflow: hidden;
    isolation: isolate;
    animation: loadingPhaseGlow 2.2s ease-in-out infinite;
    box-sizing: border-box;
    visibility: hidden;
    justify-content: center;
    justify-items: center;
    text-align: center;
}

.loading-phase-text.is-visible {
    visibility: visible;
}

.loading-phase-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(129, 140, 248, 0.42);
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.30), rgba(67, 56, 202, 0.22));
    color: #e0e7ff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.3px;
    line-height: 1.2;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 4px 14px rgba(79, 70, 229, 0.25);
    transform-origin: left center;
}

.loading-phase-desc {
    min-width: 0;
    color: #dbe4ff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.1px;
    line-height: 1.3;
    text-wrap: balance;
    transition: color 240ms ease, text-shadow 240ms ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.loading-phase-meter {
    position: relative;
    grid-column: 1 / -1;
    width: calc(100% - 6px);
    height: 4px;
    margin-left: 3px;
    border-radius: 999px;
    background: rgba(165, 180, 252, 0.16);
    overflow: hidden;
}

.loading-phase-meter-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--phase-ratio, 20%);
    border-radius: inherit;
    background: linear-gradient(90deg, #67e8f9 0%, #8b5cf6 50%, #a5b4fc 100%);
    box-shadow: 0 0 10px rgba(103, 232, 249, 0.45);
    transition: width 760ms cubic-bezier(0.19, 1, 0.22, 1), filter 320ms ease;
    will-change: width;
}

.loading-phase-meter-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%);
    transform: translateX(-130%);
    animation: loadingPhaseMeterFlow 2.4s ease-in-out infinite;
}

.loading-phase-text::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: #67e8f9;
    box-shadow:
        0 0 0 3px rgba(103, 232, 249, 0.20),
        0 0 12px rgba(103, 232, 249, 0.75);
    animation: loadingPhaseBeacon 1.2s ease-in-out infinite;
}

.loading-phase-text::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(199, 210, 254, 0.20) 50%, rgba(255, 255, 255, 0) 80%);
    transform: translateX(-120%);
    animation: loadingPhaseSweep 3.2s ease-in-out infinite;
    pointer-events: none;
}

.loading-phase-text.phase-enter {
    animation: loadingPhaseEnter 520ms cubic-bezier(0.19, 1, 0.22, 1), loadingPhaseGlow 2.2s ease-in-out infinite;
}

.loading-phase-text.phase-enter .loading-phase-chip {
    animation: loadingPhaseChipIn 520ms cubic-bezier(0.19, 1, 0.22, 1);
}

.loading-phase-text.phase-enter .loading-phase-desc {
    animation: loadingPhaseDescIn 520ms cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes loadingPhaseGlow {
    0%, 100% {
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.05),
            0 10px 28px rgba(79, 70, 229, 0.22),
            0 0 14px rgba(129, 140, 248, 0.22);
        border-color: rgba(129, 140, 248, 0.32);
    }
    50% {
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.08),
            0 14px 34px rgba(79, 70, 229, 0.34),
            0 0 24px rgba(129, 140, 248, 0.38);
        border-color: rgba(129, 140, 248, 0.5);
    }
}

@keyframes loadingPhaseBeacon {
    0%, 100% {
        transform: translateY(-50%) scale(1);
        opacity: 0.85;
    }
    50% {
        transform: translateY(-50%) scale(1.22);
        opacity: 1;
    }
}

@keyframes loadingPhaseSweep {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(120%);
    }
}

@keyframes loadingPhaseEnter {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes loadingPhaseMeterFlow {
    0% {
        transform: translateX(-130%);
    }
    100% {
        transform: translateX(130%);
    }
}

/* Animated dots for loading text (no JS text updates => less translate flicker) */
.loading-status-text.loading-dots::after {
    content: "...";
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    width: 0ch;
    animation: loadingDots 1.2s steps(4, end) infinite;
}

@keyframes loadingDots {
    to { width: 3ch; }
}

/* Responsive */
@media (max-width: 400px) {
    .loading-popup-new {
        padding: 35px 40px;
        min-width: 290px;
    }
    
    .liquid-circle-container {
        width: 160px;
        height: 160px;
    }
    
    .loading-percent-text {
        font-size: 38px;
    }
    
    .loading-title {
        font-size: 18px;
        padding: 14px 32px;
    }

    .loading-phase-text {
        width: 100%;
        max-width: min(330px, 92vw);
        min-height: 0;
        padding: 12px 14px;
    }

    .loading-phase-chip {
        font-size: 12px;
        padding: 2px 8px;
    }

    .loading-phase-desc {
        font-size: 15px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        text-align: center;
        word-break: break-word;
    }

    .loading-phase-text::before {
        display: block;
        left: 12px;
        top: 12px;
        transform: none;
    }
}

/* Mobile/tablet (only the phase line) */
@media (max-width: 520px) {
    .loading-phase-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-align: center;
        padding: 12px 16px;
        min-height: 0;
    }

    .loading-phase-text::before {
        display: block;
        left: 14px;
        top: 14px;
        transform: none;
    }

    .loading-phase-desc {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        text-align: center;
        word-break: break-word;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading-phase-text,
    .loading-phase-text::before,
    .loading-phase-text::after,
    .loading-phase-text.phase-enter,
    .loading-phase-meter-fill::after {
        animation: none !important;
    }
}

/* ========================================
   Result Popup - แบบใหม่สวยงาม
   ======================================== */
@keyframes resultPopupSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.85) translateY(30px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) translateY(0);
    }
}

@keyframes headerGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.1); }
}

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

.popup-result {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 620px;
    max-height: 90vh;
    border-radius: 20px;
    box-shadow: 
        0 30px 90px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.1);
    z-index: 9999;
    overflow: hidden;
    animation: resultPopupSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================
   Result Popup (Visual Upgrade)
   Scoped strictly to #popupBox only
   - No JS/logic changes
   - Avoid affecting other modals/components
   ======================================== */

@keyframes resultHeaderSheen {
    0% {
        transform: translateX(-60%) rotate(14deg);
        opacity: 0;
    }
    15% { opacity: 0.85; }
    55% { opacity: 0.85; }
    100% {
        transform: translateX(140%) rotate(14deg);
        opacity: 0;
    }
}

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

@keyframes resultGlowBreath {
    0%, 100% { opacity: 0.72; filter: saturate(1) brightness(1); }
    50% { opacity: 0.98; filter: saturate(1.25) brightness(1.05); }
}

@keyframes resultScanlines {
    from { background-position: 0 0; }
    to { background-position: 0 220px; }
}

@keyframes resultAuroraShift {
    0% {
        background-position:
            0% 0%,
            100% 20%,
            20% 100%,
            80% 90%,
            0 0,
            0 0,
            0 0,
            0 0;
        opacity: 0.55;
    }
    50% {
        background-position:
            90% 12%,
            10% 30%,
            70% 70%,
            15% 95%,
            0 0,
            0 0,
            0 0,
            0 0;
        opacity: 0.85;
    }
    100% {
        background-position:
            0% 0%,
            100% 20%,
            20% 100%,
            80% 90%,
            0 0,
            0 0,
            0 0,
            0 0;
        opacity: 0.55;
    }
}

#popupBox.popup-result {
    isolation: isolate;
    -webkit-font-smoothing: antialiased;
    --popup-accent: #ef4444;
    --popup-accent-2: #f87171;
    --popup-accent-soft: rgba(239, 68, 68, 0.16);
    --popup-accent-rgb: 239 68 68;
}

#popupBox.safe {
    --popup-accent: #22c55e;
    --popup-accent-2: #4ade80;
    --popup-accent-soft: rgba(34, 197, 94, 0.16);
    --popup-accent-rgb: 34 197 94;
}

#popupBox.warning {
    --popup-accent: #f59e0b;
    --popup-accent-2: #fbbf24;
    --popup-accent-soft: rgba(245, 158, 11, 0.16);
    --popup-accent-rgb: 245 158 11;
}

#popupBox.danger {
    --popup-accent: #ef4444;
    --popup-accent-2: #f87171;
    --popup-accent-soft: rgba(239, 68, 68, 0.16);
    --popup-accent-rgb: 239 68 68;
}

#popupBox::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(900px 480px at 18% 8%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(760px 520px at 86% 16%, var(--popup-accent-soft) 0%, rgba(255, 255, 255, 0) 58%),
        radial-gradient(900px 520px at 50% 110%, rgba(15, 23, 42, 0.10) 0%, rgba(15, 23, 42, 0) 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 30%),
        linear-gradient(0deg, rgba(15, 23, 42, 0.12) 0%, rgba(15, 23, 42, 0) 38%);
    animation: resultGlowBreath 6.2s ease-in-out infinite;
}

#popupBox::after {
    content: "";
    position: absolute;
    inset: -2px;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    padding: 3px;
    background: conic-gradient(
        from 210deg,
        rgba(255, 255, 255, 0.70),
        rgba(var(--popup-accent-rgb), 0.95),
        rgba(255, 255, 255, 0.20),
        rgba(var(--popup-accent-rgb), 0.70),
        rgba(255, 255, 255, 0.70)
    );
    opacity: 0.96;
    filter:
        blur(0.18px)
        drop-shadow(0 0 14px rgba(var(--popup-accent-rgb), 0.46))
        drop-shadow(0 0 34px rgba(var(--popup-accent-rgb), 0.26));
    animation: resultNeonSpin 8.5s linear infinite;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}

#popupBox > * {
    position: relative;
    z-index: 1;
}

#popupBox .popup-result-header {
    position: relative;
    overflow: hidden;
}

#popupBox .popup-result-header::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -40%;
    width: 60%;
    height: 220%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.28) 42%,
        rgba(255, 255, 255, 0.10) 55%,
        rgba(255, 255, 255, 0) 100%
    );
    filter: blur(0.2px);
    transform-origin: center;
    animation: resultHeaderSheen 7.5s ease-in-out infinite;
    pointer-events: none;
}

#popupBox .popup-result-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 220px at 30% 0%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0) 48%);
    opacity: 0.85;
    pointer-events: none;
}

#popupBox .popup-result-icon {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 10px 22px rgba(0, 0, 0, 0.24);
}

#popupBox .popup-result-title {
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.32),
        0 0 24px rgba(255, 255, 255, 0.10);
}

#popupBox .popup-result-body {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.92) 100%),
        repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.02) 0px, rgba(15, 23, 42, 0.02) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 22px);
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.60) transparent;
    position: relative;
}

/* Keep overlays behind the content (no logic/layout changes) */
#popupBox .popup-result-body > * {
    position: relative;
    z-index: 1;
}

/* Aurora ribbons + sparkles (auto-play) */
#popupBox .popup-result-body::before {
    content: "";
    position: absolute;
    inset: -10px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(900px 320px at 18% 18%, rgba(var(--popup-accent-rgb), 0.22) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(820px 320px at 86% 24%, rgba(59, 130, 246, 0.16) 0%, rgba(255, 255, 255, 0) 62%),
        linear-gradient(120deg, rgba(var(--popup-accent-rgb), 0.14) 0%, rgba(255, 255, 255, 0) 52%),
        linear-gradient(240deg, rgba(168, 85, 247, 0.10) 0%, rgba(255, 255, 255, 0) 56%),
        radial-gradient(circle at 22% 32%, rgba(255, 255, 255, 0.48) 0 1px, rgba(255, 255, 255, 0) 2px),
        radial-gradient(circle at 62% 28%, rgba(255, 255, 255, 0.38) 0 1px, rgba(255, 255, 255, 0) 2px),
        radial-gradient(circle at 78% 66%, rgba(255, 255, 255, 0.34) 0 1px, rgba(255, 255, 255, 0) 2px),
        radial-gradient(circle at 35% 78%, rgba(255, 255, 255, 0.30) 0 1px, rgba(255, 255, 255, 0) 2px);
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    filter: blur(12px) saturate(1.25);
    opacity: 0.62;
    animation: resultAuroraShift 9.0s ease-in-out infinite;
}

[data-theme="dark"] #popupBox .popup-result-body::before {
    opacity: 0.52;
    filter: blur(14px) saturate(1.35);
}

/* Auto-play scanlines + aurora overlay (no hover required) */
#popupBox .popup-result-body::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(1000px 420px at 20% 10%, rgba(var(--popup-accent-rgb), 0.12) 0%, rgba(255, 255, 255, 0) 55%),
        radial-gradient(900px 460px at 90% 18%, rgba(var(--popup-accent-rgb), 0.10) 0%, rgba(255, 255, 255, 0) 60%),
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 6px,
            rgba(var(--popup-accent-rgb), 0.070) 7px,
            rgba(var(--popup-accent-rgb), 0.070) 8px
        );
    mix-blend-mode: overlay;
    opacity: 0.48;
    animation: resultScanlines 6.2s linear infinite;
}

[data-theme="dark"] #popupBox .popup-result-body::after {
    opacity: 0.58;
}

@media (prefers-reduced-motion: reduce) {
    #popupBox::before,
    #popupBox::after,
    #popupBox .popup-result-header::before,
    #popupBox .popup-result-body::before,
    #popupBox .popup-result-body::after {
        animation: none !important;
    }
}

[data-theme="dark"] #popupBox .popup-result-body {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(2, 6, 23, 0.92) 100%),
        repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.06) 0px, rgba(148, 163, 184, 0.06) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 22px);
}

#popupBox .popup-result-body::-webkit-scrollbar {
    width: 10px;
}

#popupBox .popup-result-body::-webkit-scrollbar-track {
    background: transparent;
}

#popupBox .popup-result-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(100, 116, 139, 0.65), rgba(51, 65, 85, 0.55));
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] #popupBox .popup-result-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.45), rgba(100, 116, 139, 0.40));
    border-color: rgba(15, 23, 42, 0.75);
}

/* Section cards: adds depth without changing content/logic */
#popupBox .popup-result-section {
    padding: 16px 16px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(248, 250, 252, 0.78) 100%);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: box-shadow 180ms ease, border-color 180ms ease;
}

[data-theme="dark"] #popupBox .popup-result-section {
    border-color: rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.04) 100%);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#popupBox .popup-result-section:hover {
    border-color: rgba(59, 130, 246, 0.22);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

[data-theme="dark"] #popupBox .popup-result-section:hover {
    border-color: rgba(59, 130, 246, 0.28);
    box-shadow:
        0 22px 56px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#popupBox .section-title-wrapper {
    margin-bottom: 14px;
}

/* SMS content: add a subtle accent rail */
#popupBox .popup-result-sms-content {
    position: relative;
    overflow: hidden;
}

#popupBox .popup-result-sms-content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--popup-accent-2) 0%, var(--popup-accent) 100%);
    opacity: 0.75;
}

#popupBox .popup-result-sms-content {
    padding-left: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 10px 22px rgba(0, 0, 0, 0.10);
}

[data-theme="dark"] #popupBox .popup-result-sms-content {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 34px rgba(0, 0, 0, 0.26);
}

/* Tabs: add a gentle glass highlight */
#popupBox .result-tab-container {
    position: relative;
    overflow: hidden;
}

#popupBox .result-tab-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(700px 220px at 30% 0%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
    opacity: 0.85;
}

[data-theme="dark"] #popupBox .result-tab-container::before {
    background: radial-gradient(700px 220px at 30% 0%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 55%);
}

/* Footer & confirm button: add polish without changing behavior */
#popupBox .popup-result-footer {
    position: relative;
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.10);
}

[data-theme="dark"] #popupBox .popup-result-footer {
    box-shadow: 0 -22px 56px rgba(0, 0, 0, 0.30);
}

#popupBox .popup-result-confirm-btn {
    position: relative;
    overflow: hidden;
    outline: none;
}

#popupBox .popup-result-confirm-btn::before {
    content: "";
    position: absolute;
    top: -30%;
    left: -40%;
    width: 60%;
    height: 180%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-20%) rotate(18deg);
    opacity: 0;
    transition: opacity 180ms ease, transform 220ms ease;
    pointer-events: none;
}

#popupBox .popup-result-confirm-btn:hover::before {
    opacity: 1;
    transform: translateX(180%) rotate(18deg);
}

/* Disable any hover-based movement inside the result popup */
#popupBox .popup-result-section:hover,
#popupBox .result-tab-btn:hover:not(.active),
#popupBox .popup-result-confirm-btn:hover,
#popupBox .popup-result-confirm-btn:active,
#popupBox .popup-result-report-btn:hover,
#popupBox .popup-result-report-btn:active,
#popupBox .popup-result-close:hover,
#popupBox .sms-detail-item:hover {
    transform: none !important;
}

#popupBox .popup-result-confirm-btn:focus-visible {
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.18),
        0 0 0 8px var(--popup-accent-soft),
        0 16px 40px rgba(0, 0, 0, 0.28);
}

@media (prefers-reduced-motion: reduce) {
    #popupBox::before,
    #popupBox::after,
    #popupBox .popup-result-header::before {
        display: none !important;
    }

    #popupBox .popup-result-body::after {
        display: none !important;
        animation: none !important;
    }
}

/* Desktop/PC: allow a wider result popup without affecting mobile/tablet */
@media (min-width: 1024px) {
    .popup-result {
        width: min(850px, calc(100vw - 96px));
        max-width: 850px;
    }
}

/* Header */
.popup-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 28px;
    color: #fff;
    animation: headerGlow 3s ease-in-out infinite;
}

.popup-result-header-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.popup-result-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.25);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    backdrop-filter: blur(5px);
}

.popup-result-icon svg {
    width: 28px;
    height: 28px;
}

.popup-result-icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
    display: block;
}

.popup-result-icon .icon-check,
.popup-result-icon .icon-warning,
.popup-result-icon .icon-danger {
    display: none;
}

.popup-result-icon-safe .icon-check { display: block; }
.popup-result-icon-warning .icon-warning { display: block; }
.popup-result-icon-danger .icon-danger { display: block; }

.popup-result-title {
    font-size: 30px;
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    letter-spacing: 1px;
}

.popup-result-close {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: none;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(5px);
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-result-close:hover {
    background: rgba(255,255,255,0.35);
    transform: rotate(90deg);
}

.popup-result-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.popup-result-report-btn {
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.92), rgba(180, 83, 9, 0.90));
    backdrop-filter: blur(5px);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: transform 150ms ease, background 180ms ease, box-shadow 180ms ease;
    white-space: nowrap;
    position: relative;
    top: 6px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 8px 22px rgba(17, 24, 39, 0.16);
}

.popup-result-report-btn:hover {
    background: linear-gradient(135deg, rgba(234, 128, 31, 0.92), rgba(217, 119, 6, 0.92));
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 14px 34px rgba(17, 24, 39, 0.22);
}

.popup-result-report-btn:active {
    transform: translateY(0);
}

.popup-result-report-btn:focus-visible {
    outline: none;
    box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.22),
    0 0 0 7px rgba(249, 115, 22, 0.22);
}

@media (max-width: 420px) {
    .popup-result-header-actions {
        gap: 10px;
    }

    .popup-result-report-btn {
        padding: 0 10px;
        font-size: 12px;
        height: 38px;
        border-radius: 9px;
        top: 4px;
    }

    .popup-result-close {
        width: 38px;
        height: 38px;
    }
}

/* Body */
.popup-result-body {
    background: #fff;
    padding: 25px;
    max-height: calc(90vh - 180px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Dark Mode - Result Popup surfaces */
[data-theme="dark"] .popup-result-body {
    background: linear-gradient(145deg, #0f172a, #1e293b);
    color: rgba(255, 255, 255, 0.92);
}

.popup-result-section {
    margin-bottom: 20px;
}

.popup-result-section:last-child {
    margin-bottom: 0;
}

.popup-result-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* Allow the SMS message box to expand naturally (no fixed-looking size) */
.popup-result-row--sms {
    flex-wrap: nowrap;
}

.popup-result-row--sms .popup-result-sms-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

/* Liquid Loader */
.liquid-loader-container {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    animation: waveFloat 3s ease-in-out infinite;
}

.liquid-loader {
    width: 100%;
    height: 100%;
    /* filter: drop-shadow(0 8px 20px rgba(0,0,0,0.15)); */
}

.liquid-bg {
    fill: rgba(240, 240, 240, 0.3);
}

.liquid-border {
    fill: none;
    stroke: currentColor;
    stroke-width: 6;
    /* filter: drop-shadow(0 0 10px currentColor); */
}

.liquid-wave {
    transition: fill 0.3s;
}

.wave1 {
    opacity: 0.9;
    /* filter: drop-shadow(0 0 8px rgba(0,0,0,0.1)); */
}

.wave2 {
    opacity: 0.6;
}

.liquid-percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    z-index: 10;
    /* text-shadow: 
        0 2px 8px rgba(0,0,0,0.3),
        0 0 20px rgba(255,255,255,0.2); */
    font-family: 'Segoe UI', sans-serif;
}

.liquid-arrow {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px;
    color: #999;
    font-weight: bold;
}

/* SMS Content */
.popup-result-sms-wrapper {
    flex: 1;
    min-width: 0;
}

.popup-result-label {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .popup-result-label {
    color: rgba(255, 255, 255, 0.72);
}

.popup-result-sms-content {
    background: linear-gradient(135deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.06) 100%);
    padding: 18px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    word-wrap: break-word;
    overflow-wrap: break-word;
    border: 1px solid rgba(0,0,0,0.08);
}

[data-theme="dark"] .popup-result-sms-content {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(148, 163, 184, 0.18);
    color: rgba(255, 255, 255, 0.92);
}

.popup-result-sms-content--wrap {
    max-width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Ensure the SMS result box never gets a fixed height from other rules */
#smsResult.popup-result-sms-content--wrap {
    display: block;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Section Title & Details */
.popup-result-section-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 3px solid;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .popup-result-section-title {
    color: rgba(255, 255, 255, 0.92);
}

/* LLM Organization tri-state (True/False/Unknow) */

.llm-org-tristate {
    display: flex;
    gap: 12px;
    margin: 10px 0 14px;
}

.llm-org-box {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    padding: 14px 12px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.2px;
    color: #fff;
    line-height: 1.25;
    user-select: none;
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    opacity: 0.22;
    filter: saturate(80%);
    transform: scale(0.98);
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease, filter 160ms ease, outline-color 160ms ease, z-index 0s;
    z-index: 1;
}

.llm-org-box.is-active {
    opacity: 1;
    filter: none;
    transform: scale(1.02);
    outline: 3px solid rgba(17, 24, 39, 0.35);
    outline-offset: 2px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.22);
    z-index: 2;
}

/* เมื่อ hover ที่กล่องใด ให้กล่องนั้นอยู่บนสุด */
.llm-org-box:hover,
.llm-org-box:focus {
    z-index: 100;
}

/* เมื่อ hover ที่ tristate container ให้กล่องอื่นจางลง
   แต่ไม่ทำให้กล่องคำตอบจริง (.is-active) จางลง */
.llm-org-tristate:has(.llm-org-box:hover) .llm-org-box:not(:hover):not(.is-active) {
    opacity: 0.15 !important;
    filter: saturate(50%) !important;
}


.llm-org-box--true {
    background: #16a34a;
}

.llm-org-box--false {
    background: #dc2626;
}

.llm-org-box--unknown {
    background: #6b7280;
}

.llm-org-box__label {
    display: block;
}

.llm-org-box__hint {
    display: none;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    opacity: 0.92;
}

/* Tooltip: only used for the Unknown box, on hover/focus */
.llm-org-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    top: auto;
    transform: translateX(-50%);
    min-width: 240px;
    max-width: 320px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(17, 24, 39, 0.98);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 99999;
}

.llm-org-tooltip::before {
    content: "";
    position: absolute;
    bottom: -8px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(17, 24, 39, 0.98);
    border-bottom: none;
}

/* ========================================
   Info Icon Tooltip (สำหรับ section titles)
   ======================================== */
.section-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 3px solid;
    position: relative;
}

.section-title-wrapper .popup-result-section-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    flex: 1;
}

/* LLM Reason section: remove underline bar & bump title size (scoped) */
#popupBox .popup-result-section--llm-reason .section-title-wrapper {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 10px;
}

#popupBox .popup-result-section--llm-reason .popup-result-section-title {
    font-size: 17px;
    letter-spacing: 0.3px;
}

/* Section Title Wrapper border colors by status */
.popup-result.safe .section-title-wrapper {
    border-color: #22c55e;
}

.popup-result.warning .section-title-wrapper {
    border-color: #f59e0b;
}

.popup-result.danger .section-title-wrapper {
    border-color: #ef4444;
}

.info-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease, z-index 0s;
    flex-shrink: 0;
    margin-left: 10px;
    z-index: 5;
}

.info-icon-btn:hover,
.info-icon-btn:focus {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.6);
    z-index: 9999;
}

.info-tooltip {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    bottom: auto;
    transform: none;
    width: 280px;
    max-width: 280px;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5;
    text-align: left;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
    border: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 99999;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.info-tooltip::before {
    content: "";
    position: absolute;
    top: -8px;
    bottom: auto;
    right: 8px;
    left: auto;
    transform: none;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(30, 41, 59, 0.98);
    border-top: none;
}

.info-icon-btn:hover .info-tooltip,
.info-icon-btn:focus .info-tooltip,
.info-icon-btn.tooltip-active .info-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.info-tooltip-title {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    color: #93c5fd;
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-tooltip-item {
    margin-bottom: 8px;
    padding: 8px 10px;
    border-left: 3px solid;
    background: rgba(255,255,255,0.05);
    border-radius: 0 6px 6px 0;
}

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

.info-tooltip-item.item-true {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.info-tooltip-item.item-false {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.info-tooltip-item.item-unknown {
    border-color: #6b7280;
    background: rgba(107, 114, 128, 0.1);
}

.info-tooltip-item.item-open {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.info-tooltip-item.item-blocked {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.info-tooltip-item strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 2px;
    color: #fff;
}

.info-tooltip-item span {
    font-size: 11px;
    opacity: 0.85;
    line-height: 1.4;
    display: block;
}

/* ========================================
   Tab Buttons สำหรับ ข้อมูลทั่วไป / ข้อมูลเชิงลึก
   ======================================== */
.result-tab-container {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.1);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 4px;
}

[data-theme="dark"] .result-tab-container {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.55);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.result-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
    color: #6b7280;
    position: relative;
    border-radius: 10px;
}

.result-tab-btn:first-child {
    border-radius: 10px;
}

.result-tab-btn:last-child {
    border-radius: 10px;
}

.result-tab-btn:hover:not(.active) {
    background: rgba(255,255,255,0.7);
    color: #374151;
}

[data-theme="dark"] .result-tab-btn {
    color: rgba(255, 255, 255, 0.62);
}

[data-theme="dark"] .result-tab-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.90);
}

.result-tab-btn.active {
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1;
}

.popup-result.safe .result-tab-btn.active {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

.popup-result.warning .result-tab-btn.active {
    background: linear-gradient(135deg, #ea580c 0%, #d97706 100%);
}

.popup-result.danger .result-tab-btn.active {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.result-tab-btn .tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

.result-tab-btn .tab-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    vertical-align: middle;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}

/* Tab Content */
.result-tab-content {
    display: none;
}

.result-tab-content.active {
    display: block;
    animation: fadeInTab 0.3s ease;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   Website Access Status (สถานะการเข้าถึงเว็บไซต์)
   ======================================== */
.access-status-tristate {
    display: flex;
    gap: 12px;
    margin: 10px 0 14px;
}

.access-status-box {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    padding: 14px 12px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.2px;
    color: #fff;
    line-height: 1.25;
    user-select: none;
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    opacity: 0.22;
    filter: saturate(80%);
    transform: scale(0.98);
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease, filter 160ms ease, outline-color 160ms ease, z-index 0s;
    z-index: 1;
}

.access-status-box.is-active {
    opacity: 1;
    filter: none;
    transform: scale(1.02);
    outline: 3px solid rgba(17, 24, 39, 0.35);
    outline-offset: 2px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.22);
    z-index: 2;
}

/* เมื่อ hover ที่กล่องใด ให้กล่องนั้นอยู่บนสุด */
.access-status-box:hover,
.access-status-box:focus {
    z-index: 100;
}

/* เมื่อ hover ที่ tristate container ให้กล่องอื่นจางลง
   แต่ไม่ทำให้กล่องคำตอบจริง (.is-active) จางลง */
.access-status-tristate:has(.access-status-box:hover) .access-status-box:not(:hover):not(.is-active) {
    opacity: 0.15 !important;
    filter: saturate(50%) !important;
}

.access-status-box--open {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.access-status-box--blocked {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.access-status-box--unknown {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

.access-status-box__label {
    display: block;
}

.access-status-box__hint {
    display: none;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    opacity: 0.92;
}

/* Tooltip สำหรับ Access Status */
.access-status-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    top: auto;
    transform: translateX(-50%);
    min-width: 240px;
    max-width: 320px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(17, 24, 39, 0.98);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 99999;
}

.access-status-tooltip::before {
    content: "";
    position: absolute;
    bottom: -8px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(17, 24, 39, 0.98);
    border-bottom: none;
}

/* ========================================
   ASN Block Details Table
   ======================================== */
.asn-block-table-wrapper {
    margin-top: 10px;
}

.asn-block-table-scroll {
    max-height: 260px;
    overflow: auto;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

.asn-block-table {
    width: 100%;
    border-collapse: collapse;
}

.asn-block-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(135deg, #ba0c0c 0%, #8f2e2e 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.2px;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Match table header color to result status (used by ASN + Redirect tables) */
.popup-result.safe .asn-block-table thead th {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.popup-result.warning .asn-block-table thead th {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.popup-result.danger .asn-block-table thead th {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.asn-block-table tbody td {
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    vertical-align: top;
}

.asn-block-table tbody tr:nth-child(even) td {
    background: rgba(17, 24, 39, 0.03);
}

[data-theme="dark"] .asn-block-table-scroll {
    background: rgba(17, 24, 39, 0.55);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .asn-block-table tbody td {
    color: rgba(255, 255, 255, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .asn-block-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.04);
}

.access-status-box--unknown.has-tooltip:hover .access-status-tooltip,
.access-status-box--unknown.has-tooltip:focus .access-status-tooltip,
.access-status-box--unknown.has-tooltip.tooltip-pinned .access-status-tooltip {
    opacity: 1;
    visibility: visible;
}

.access-status-box--unknown.has-tooltip.tooltip-force-hidden .access-status-tooltip {
    opacity: 0;
    visibility: hidden;
}

.access-status-box--unknown.has-tooltip .access-status-box__hint {
    display: block;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Tooltip visibility rules
   - Hover/focus shows tooltip
   - Click can pin tooltip open via .tooltip-pinned
   - Click can force-hide tooltip (even while hovered) via .tooltip-force-hidden
*/
.llm-org-box--unknown.has-tooltip:hover .llm-org-tooltip,
.llm-org-box--unknown.has-tooltip:focus .llm-org-tooltip,
.llm-org-box--unknown.has-tooltip.tooltip-pinned .llm-org-tooltip {
    opacity: 1;
    visibility: visible;
}

.llm-org-box--unknown.has-tooltip.tooltip-force-hidden .llm-org-tooltip {
    opacity: 0;
    visibility: hidden;
}

.llm-org-box--unknown.has-tooltip .llm-org-box__hint {
    display: block;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* (v38) No extra mobile overrides for tri-state/tooltip */

.popup-result-details {
    background: linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.04) 100%);
    padding: 18px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.9;
    border: 1px solid rgba(0,0,0,0.08);
}

[data-theme="dark"] .popup-result-details {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(148, 163, 184, 0.16);
    color: rgba(255, 255, 255, 0.90);
}

.popup-result-details ul {
    margin: 0;
    padding-left: 22px;
}

.popup-result-details li {
    margin-bottom: 8px;
}

.popup-result-details li strong {
    color: #444;
}

[data-theme="dark"] .popup-result-details li strong {
    color: rgba(255, 255, 255, 0.92);
}

/* SMS Detail Grid - New Icon-based Design */
.sms-detail-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sms-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.9) 100%);
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.2s ease;
}

[data-theme="dark"] .sms-detail-item {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(148, 163, 184, 0.14);
}

.sms-detail-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: rgba(59, 130, 246, 0.2);
}

.sms-detail-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 18px;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15);
}

.sms-icon-url {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.sms-icon-category {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.sms-icon-apk {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}

.sms-icon-qr {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
}

.sms-detail-content {
    flex: 1;
    min-width: 0;
}

.sms-detail-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

[data-theme="dark"] .sms-detail-label {
    color: rgba(255, 255, 255, 0.62);
}

.sms-detail-value {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    word-break: break-all;
    line-height: 1.5;
}

[data-theme="dark"] .sms-detail-value {
    color: rgba(255, 255, 255, 0.92);
}

.sms-detail-value--wrap {
    word-break: break-word;
    overflow-wrap: break-word;
}

.popup-result-box {
    background: linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.04) 100%);
    padding: 18px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    border: 1px solid rgba(0,0,0,0.08);
}

[data-theme="dark"] .popup-result-box {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(148, 163, 184, 0.16);
    color: rgba(255, 255, 255, 0.92);
}

/* Screenshot */
.popup-result-screenshot {
    background: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%);
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.08);
}

[data-theme="dark"] .popup-result-screenshot {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.16);
}

.popup-result-screenshot img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 10px;
    object-fit: contain;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.screenshot-label {
    margin-top: 12px;
    font-size: 13px;
    color: #777;
    font-weight: 500;
}

[data-theme="dark"] .screenshot-label {
    color: rgba(255, 255, 255, 0.66);
}

/* Footer */
.popup-result-footer {
    padding: 22px 28px;
    background: linear-gradient(180deg, #f8f8f8 0%, #fff 100%);
    border-top: 1px solid #eee;
    text-align: center;
}

[data-theme="dark"] .popup-result-footer {
    background: rgba(15, 23, 42, 0.92);
    border-top-color: rgba(148, 163, 184, 0.16);
}

.popup-result-confirm-btn {
    padding: 16px 60px;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.popup-result-confirm-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.popup-result-confirm-btn:active {
    transform: translateY(0) scale(0.98);
}

/* ========================================
   สีสำหรับแต่ละสถานะ
   ======================================== */

/* ✅ Safe - สีเขียว */
.popup-result.safe {
    border: none;
    box-shadow: 
        0 30px 90px rgba(0,0,0,0.5),
        0 0 0 4px #22c55e,
        0 0 50px rgba(34, 197, 94, 0.4);
}

.popup-result.safe .popup-result-header {
    background: linear-gradient(135deg, #15803d 0%, #22c55e 50%, #4ade80 100%);
}

.popup-result.safe .liquid-border {
    stroke: #22c55e;
}

.popup-result.safe .gradient-stop-1 {
    stop-color: #86efac;
}

.popup-result.safe .gradient-stop-2 {
    stop-color: #22c55e;
}

.popup-result.safe .liquid-wave {
    fill: url(#liquidGradient);
}

.popup-result.safe .liquid-percent {
    color: #fff;
    text-shadow: 
        0 2px 8px rgba(0,0,0,0.4),
        0 0 20px rgba(34, 197, 94, 0.6);
}

.popup-result.safe .popup-result-section-title {
    border-color: #22c55e;
    color: #15803d;
}

.popup-result.safe .popup-result-confirm-btn {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

.popup-result.safe .popup-result-confirm-btn:hover {
    background: linear-gradient(135deg, #15803d 0%, #14532d 100%);
}

/* ⚠️ Warning - สีเหลือง/ส้ม */
.popup-result.warning {
    border: none;
    box-shadow: 
        0 30px 90px rgba(0,0,0,0.5),
        0 0 0 4px #f59e0b,
        0 0 50px rgba(245, 158, 11, 0.4);
}

.popup-result.warning .popup-result-header {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
}

.popup-result.warning .liquid-border {
    stroke: #f59e0b;
}

.popup-result.warning .gradient-stop-1 {
    stop-color: #fed7aa;
}

.popup-result.warning .gradient-stop-2 {
    stop-color: #f59e0b;
}

.popup-result.warning .liquid-wave {
    fill: url(#liquidGradient);
}

.popup-result.warning .liquid-percent {
    color: #fff;
    text-shadow: 
        0 2px 8px rgba(0,0,0,0.4),
        0 0 20px rgba(245, 158, 11, 0.6);
}

.popup-result.warning .popup-result-section-title {
    border-color: #f59e0b;
    color: #d97706;
}

.popup-result.warning .popup-result-confirm-btn {
    background: linear-gradient(135deg, #ea580c 0%, #d97706 100%);
}

.popup-result.warning .popup-result-confirm-btn:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b45309 100%);
}

/* 🚨 Danger - สีแดง */
.popup-result.danger {
    border: none;
    box-shadow: 
        0 30px 90px rgba(0,0,0,0.5),
        0 0 0 4px #ef4444,
        0 0 50px rgba(239, 68, 68, 0.4);
}

.popup-result.danger .popup-result-header {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
}

.popup-result.danger .liquid-border {
    stroke: #ef4444;
}

.popup-result.danger .gradient-stop-1 {
    stop-color: #fecaca;
}

.popup-result.danger .gradient-stop-2 {
    stop-color: #ef4444;
}

.popup-result.danger .liquid-wave {
    fill: url(#liquidGradient);
}

.popup-result.danger .liquid-percent {
    color: #fff;
    text-shadow: 
        0 2px 8px rgba(0,0,0,0.4),
        0 0 20px rgba(239, 68, 68, 0.6);
}

.popup-result.danger .popup-result-section-title {
    border-color: #ef4444;
    color: #dc2626;
}

.popup-result.danger .popup-result-confirm-btn {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.popup-result.danger .popup-result-confirm-btn:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
}

/* ========================================
    Fixed section heading text color
    (Keep black regardless of result status)
   Scoped to the result popup only.
   ======================================== */
[data-theme="light"] #popupBox .popup-result-section-title {
    color: #000;
}

[data-theme="dark"] #popupBox .popup-result-section-title,
[data-theme="dark"] #popupBox .section-title-wrapper .popup-result-section-title,
[data-theme="dark"] #popupBox .popup-result-label,
[data-theme="dark"] #popupBox .sms-detail-label {
    color: rgba(255, 255, 255, 0.95);
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 600px) {
    .popup-result {
        width: 98%;
        max-width: none;
        border-radius: 12px;
    }
    
    .popup-result-header {
        padding: 15px 20px;
    }
    
    .popup-result-title {
        font-size: 22px;
    }
    
    .popup-result-body {
        padding: 20px;
    }
    
    .popup-result-row {
        flex-direction: column;
        align-items: center;
    }
    
    .liquid-loader-container {
        margin-bottom: 15px;
    }
    
    .liquid-arrow {
        display: none;
    }
    
    .popup-result-sms-wrapper {
        width: 100%;
    }
    
    .loading-popup {
        width: 90%;
        padding: 30px 25px;
    }
    
    .loading-header {
        font-size: 18px;
        padding: 10px 20px;
    }

    /* Result tabs compact design for mobile */
    .result-tab-btn {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* SMS detail grid mobile layout */
    .sms-detail-item {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
    }

    .sms-detail-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 16px;
    }

    .sms-detail-value {
        font-size: 12px;
    }

    /* AI Reason box mobile adjustments */
    #popupBox .ai-reason-box {
        padding: 14px;
        font-size: 13px;
    }
}

/* Legacy popup styles - keep for backward compatibility */
.popup {
    display: none;
}

.popup.safe {
    background-color: #ccff66;
}

.popup.danger {
    background-color: #c41411;
    color: #ffffff;
}

.popup.warning {
    background-color: #ff8c00;
}

/* ✅ Hamburger Menu Styles */
.hamburger-menu {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9997; /* ลด z-index ให้ต่ำกว่า popup */
}

/* ✅ ซ่อน hamburger menu เมื่อ popup เปิด */
body.modal-open .hamburger-menu {
  display: none;
}

.menu-toggle {
    width: 56px;
    height: 56px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.12) 100%);
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);

    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
    position: relative;
}

.menu-toggle::before{
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 18px;
    background: radial-gradient(circle at 50% 40%, rgba(37,99,235,0.18) 0%, rgba(37,99,235,0.0) 60%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.menu-toggle:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.16) 100%);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow:
        0 22px 54px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.menu-toggle:hover::before{ opacity: 1; }

.menu-toggle:active{ transform: translateY(0px) scale(0.98); }

.menu-toggle:focus-visible{
    outline: none;
    box-shadow:
        0 22px 54px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        0 0 0 4px rgba(59,130,246,0.28);
}

/* Active (menu open) state */
.menu-toggle.active{
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.44) 0%, rgba(79, 70, 229, 0.28) 100%);
    border-color: rgba(147, 197, 253, 0.60);
    box-shadow:
        0 26px 64px rgba(0, 0, 0, 0.30),
        0 0 0 1px rgba(59,130,246,0.28),
        0 0 26px rgba(37,99,235,0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.menu-toggle.active::before{ opacity: 1; }

.hamburger-icon {
  color: white;
  font-size: 24px;
    font-weight: 800;
  display: block;
    line-height: 1;
    transform: translateZ(0);
    transition: transform 0.22s cubic-bezier(.2,.9,.25,1), opacity 0.18s ease;
}

.menu-toggle:hover .hamburger-icon{ transform: scale(1.06); }
.menu-toggle.active .hamburger-icon{ transform: scale(1.04); }

@media (prefers-reduced-motion: reduce){
    .menu-toggle,
    .menu-toggle::before,
    .hamburger-icon{ transition: none !important; }
}

/* Dropdown Menu */
.dropdown-menu {
  position: absolute;
  top: 60px;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 15px 0;
  min-width: 250px;
  display: none;
  animation: slideDown 0.3s ease;
}

.dropdown-menu.show {
  display: block;
}

.menu-arrow {
  position: absolute;
  top: -8px;
  right: 20px;
  color: white;
  font-size: 20px;
  transform: rotate(-90deg);
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list li {
  padding: 0;
}

.menu-list a {
  display: block;
  padding: 12px 20px;
  color: white;
  text-decoration: none;
  font-family: "FC Iconic";
  font-size: 16px;
  transition: background-color 0.3s ease;
}

/* Menu items that are actions (button) instead of links */
.menu-list .menu-list-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 20px;
    color: white;
    background: transparent;
    border: 0;
    text-decoration: none;
    font-family: "FC Iconic";
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.menu-list a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #8c62ff;
}

.menu-list .menu-list-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #8c62ff;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ✅ About Us Popup Styles - แยกเฉพาะ */

/* ===========================================
   DESKTOP VERSION (Default)
   =========================================== */
@keyframes aboutModalIn {
    from {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.about-us-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(980px, 94vw);
    max-height: 88vh;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(2, 6, 23, 0.97) 100%);
    color: #e2e8f0;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 22px;
    overflow: hidden;
    z-index: 10001; /* สูงกว่า hamburger menu */
    animation: aboutModalIn 0.22s ease-out;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.58), 0 12px 30px rgba(0, 0, 0, 0.35);
    font-family: "Mitr", "FC Iconic", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* About backdrop (dim + blur) */
.about-us-backdrop{
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(2, 6, 23, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.about-us-backdrop.is-open{ opacity: 1; }

/* Soft inner vignette to subtly focus modal content */
.about-us-popup::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: radial-gradient(closest-side, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.18) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Ensure modal children render above the vignette */
.about-us-popup > * { position: relative; z-index: 2; }

.about-popup-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    position: relative;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.72) 0%, rgba(15, 23, 42, 0.32) 100%);
}

.about-popup-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, #2563eb 0%, #0ea5e9 50%, #4f46e5 100%);
}

.about-header {
    background: none;
    color: #f8fafc;
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-align: center;
}

.about-close-btn {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: #f8fafc;
    font-size: 22px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.about-close-btn:hover {
    background: rgba(2, 6, 23, 0.65);
    transform: translateY(-50%) translateY(-1px);
    box-shadow: 0 12px 18px rgba(0, 0, 0, 0.28);
}

.about-content {
    padding: 18px 20px 22px;
    overflow: auto;
    max-height: calc(88vh - 76px);
    background: radial-gradient(1200px 520px at 18% 0%, rgba(37, 99, 235, 0.10), rgba(255, 255, 255, 0)) , rgba(2, 6, 23, 0.10);
}

/* Scroll hint (subtle fades) */
.about-content::before,
.about-content::after{
    content: "";
    position: sticky;
    left: 0;
    right: 0;
    height: 18px;
    pointer-events: none;
    z-index: 5;
}
.about-content::before{ top: 0; background: linear-gradient(180deg, rgba(2,6,23,0.55), rgba(2,6,23,0)); }
.about-content::after{ bottom: 0; background: linear-gradient(0deg, rgba(2,6,23,0.55), rgba(2,6,23,0)); }

/* Tabs (formal segmented control with sliding indicator) */
.about-us-popup .about-tabs{
    --tab-pad: 6px;
    --tab-gap: 8px;
    width: min(620px, 100%);
    margin: 14px auto 18px;
    padding: var(--tab-pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tab-gap);
    position: relative;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 26px rgba(2,6,23,0.35);
    overflow: hidden;
}
.about-us-popup .about-tab-indicator{
    position: absolute;
    left: var(--tab-pad);
    top: var(--tab-pad);
    bottom: var(--tab-pad);
    /* Use calc() that works across browsers (avoid `*` with custom properties) */
    width: calc((100% - (var(--tab-pad) + var(--tab-pad)) - var(--tab-gap)) / 2);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(37,99,235,0.85) 0%, rgba(79,70,229,0.82) 100%);
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.20);
    transform: translateX(0);
    transition: transform 0.28s cubic-bezier(.2,.9,.25,1);
    z-index: 0;
}
.about-us-popup .about-tabs[data-active="sponsors"] .about-tab-indicator{
    /* Move exactly one segment + the gap */
    transform: translateX(calc(100% + var(--tab-gap)));
}

.about-us-popup .about-tabs .tab-btn{
    position: relative;
    z-index: 1;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: rgba(226, 232, 240, 0.88) !important;
    box-shadow: none !important;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    transition: transform 0.16s ease, color 0.16s ease, background-color 0.16s ease !important;
}
.about-us-popup .about-tabs .tab-btn.active{ color: #ffffff !important; }
.about-us-popup .about-tabs .tab-btn:hover{ transform: translateY(-1px); color: #ffffff !important; }
.about-us-popup .about-tabs .tab-btn:focus-visible{
    outline: none;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.25) !important;
}

/* Tab content enter animation */
@keyframes aboutTabIn{
    from{ opacity: 0; transform: translateY(8px); }
    to{ opacity: 1; transform: translateY(0); }
}
.about-us-popup .tab-content.tab-enter{ animation: aboutTabIn 0.22s ease-out; }

.about-us-popup .about-thanks{ text-align: center; margin-top: 16px; color: rgba(203, 213, 225, 0.92); }

/* Focus styles for key controls */
.about-close-btn:focus-visible{
    outline: none;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.25), 0 12px 18px rgba(0,0,0,0.28);
}

.about-content::-webkit-scrollbar {
    width: 10px;
}

.about-content::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.12);
    border-radius: 999px;
}

.about-content::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 999px;
}

.about-content::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.55);
}

.about-us-popup .project-info {
    text-align: center;
    margin-bottom: 16px;
    padding: 14px 14px 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 1px 0 rgba(148, 163, 184, 0.06);
}

.about-us-popup .project-info h3 {
    font-size: 20px;
    margin: 0 0 8px;
    color: #ffffff;
    font-weight: 600;
}

.about-us-popup .project-info p {
    font-size: 14px;
    margin: 6px 0;
    opacity: 0.95;
    color: #cbd5e1;
}

.about-us-popup .team-section,
.about-us-popup .advisor-section {
    margin-bottom: 18px;
}

.about-us-popup .team-section h3,
.about-us-popup .advisor-section h3 {
    font-size: 18px;
    margin: 0 0 6px;
    padding-bottom: 0;
    border-bottom: 0;
    color: #f8fafc;
    font-weight: 600;
}

.about-us-popup .team-section h5,
.about-us-popup .advisor-section h5 {
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
    font-weight: 500;
}

.about-us-popup .team-member {
    display: flex;
    align-items: stretch;
    gap: 18px;
    margin-bottom: 16px;
    padding: 14px;
    background-color: var(--card-bg, #ffffff);
    background-image: linear-gradient(180deg, var(--accent, rgba(37, 99, 235, 0.08)) 0%, rgba(255,255,255,0) 54px);
    border: 1px solid rgba(7,16,40,0.06);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
    transition: transform 0.22s cubic-bezier(.2,.9,.25,1), box-shadow 0.22s cubic-bezier(.2,.9,.25,1), border-color 0.22s ease;
}

.about-us-popup .team-member:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent, rgba(7,16,40,0.06)) 70%, rgba(7,16,40,0.06));
    box-shadow: 0 12px 36px rgba(2, 6, 23, 0.08);
}

.about-us-popup .team-member:focus-within{
    border-color: rgba(59,130,246,0.45);
    box-shadow: 0 14px 44px rgba(2, 6, 23, 0.10), 0 0 0 4px rgba(59,130,246,0.18);
}

.about-us-popup .sponsor-card{
    transition: transform 0.22s cubic-bezier(.2,.9,.25,1), box-shadow 0.22s cubic-bezier(.2,.9,.25,1), border-color 0.22s ease;
}
.about-us-popup .sponsor-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(2, 6, 23, 0.10);
    border-color: rgba(148, 163, 184, 0.22);
}

/* subtle sheen on sponsor cards (formal) */
.about-us-popup .sponsor-card{ position: relative; overflow: hidden; }
.about-us-popup .sponsor-card::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(59,130,246,0.06) 45%, rgba(255,255,255,0) 100%);
    transform: translateX(-20%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.2,.9,.25,1);
}
.about-us-popup .sponsor-card:hover::after{ opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce){
    .about-us-backdrop,
    .about-us-popup,
    .about-us-popup *{ transition: none !important; animation: none !important; }
}

.about-us-popup .member-photo {
    flex-shrink: 0;
    margin-right: 0;
}

.about-us-popup .profile-image {
    width: 150px;
    height: 220px;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.about-us-popup .member-info {
    flex: 1;
    text-align: left;
}

.about-us-popup .member-info p {
    margin: 6px 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--card-text, #071022);
}

.about-us-popup .member-info strong {
    color: var(--card-text, #071022);
    font-weight: 600;
}

/* ===========================================
   TABLET VERSION (768px and below)
   =========================================== */
@media (max-width: 768px) {
  .about-us-popup {
        width: 94vw;
        max-height: 90vh;
        border-radius: 18px;
  }

  .about-popup-header {
        padding: 14px 16px;
  }

  .about-header {
        font-size: 18px;
  }

  .about-close-btn {
        width: 38px;
        height: 38px;
        font-size: 20px;
        right: 12px;
  }

  .about-content {
        padding: 14px 14px 18px;
        max-height: calc(90vh - 70px);
  }

  .about-us-popup .project-info {
    margin-bottom: 25px;
    padding-bottom: 15px;
  }

  .about-us-popup .project-info h3 {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .about-us-popup .project-info p {
    font-size: 14px;
    margin: 4px 0;
  }

  .about-us-popup .team-section h3,
  .about-us-popup .advisor-section h3 {
    font-size: 18px;
    margin-bottom: 15px;
    padding-bottom: 8px;
  }

    .about-us-popup .team-member {
        flex-direction: column;
        text-align: center;
        padding: 12px;
        margin-bottom: 14px;
    }

  .about-us-popup .member-photo {
    margin-right: 0;
    margin-bottom: 15px;
    align-self: center;
  }

  .about-us-popup .profile-image {
        width: 132px;
        height: 190px;
  }

  .about-us-popup .member-info {
    text-align: center;
  }

  .about-us-popup .member-info p {
        margin: 6px 0;
        font-size: 13px;
        line-height: 1.35;
  }

  .about-us-popup .team-section,
  .about-us-popup .advisor-section {
    margin-bottom: 25px;
  }
}

/* ===========================================
   MOBILE VERSION (480px and below)
   =========================================== */
@media (max-width: 480px) {
  .about-us-popup {
        width: 95vw;
        max-height: 92vh;
        margin: 0;
        border-radius: 16px;
  }

  .about-popup-header {
        padding: 12px 14px;
  }

  .about-header {
        font-size: 17px;
  }

  .about-close-btn {
        width: 36px;
        height: 36px;
        font-size: 19px;
        right: 10px;
  }

  .about-content {
        padding: 12px 12px 16px;
        max-height: calc(92vh - 64px);
  }

  .about-us-popup .project-info {
    margin-bottom: 22px;
    padding-bottom: 12px;
  }

  .about-us-popup .project-info h3 {
    font-size: 17px;
    margin-bottom: 7px;
  }

  .about-us-popup .project-info p {
    font-size: 13px;
    margin: 3px 0;
  }

  .about-us-popup .team-section h3,
  .about-us-popup .advisor-section h3 {
    font-size: 17px;
    margin-bottom: 12px;
    padding-bottom: 6px;
  }

  .about-us-popup .team-member {
    padding: 12px 8px;
    margin-bottom: 18px;
  }

  .about-us-popup .profile-image {
        width: 124px;
        height: 178px;
  }

  .about-us-popup .member-info p {
    font-size: 12px;
    margin: 5px 0;
    line-height: 1.2;
  }

  .about-us-popup .team-section,
  .about-us-popup .advisor-section {
    margin-bottom: 22px;
  }
}

/* ===========================================
   SMALL MOBILE VERSION (400px and below)
   =========================================== */
@media (max-width: 400px) {
  .about-us-popup {
        width: 96vw;
        max-height: 95vh;
        border-radius: 14px;
  }

  .about-popup-header {
        padding: 11px 12px;
  }

  .about-header {
    font-size: 18px;
  }

  .about-close-btn {
        width: 34px;
        height: 34px;
        font-size: 18px;
        right: 9px;
  }

  .about-content {
        padding: 11px 10px 14px;
        max-height: calc(95vh - 62px);
  }

  .about-us-popup .project-info {
    margin-bottom: 20px;
    padding-bottom: 10px;
  }

  .about-us-popup .project-info h3 {
    font-size: 16px;
  }

  .about-us-popup .project-info p {
    font-size: 12px;
  }

  .about-us-popup .team-section h3,
  .about-us-popup .advisor-section h3 {
    font-size: 16px;
  }

  .about-us-popup .team-member {
    padding: 10px 6px;
  }

  .about-us-popup .profile-image {
        width: 116px;
        height: 170px;
  }

  .about-us-popup .member-info p {
    font-size: 11px;
    margin: 4px 0;
  }

  .about-us-popup .team-section,
  .about-us-popup .advisor-section {
    margin-bottom: 20px;
  }
}

/* ===========================================
   EXTRA SMALL MOBILE VERSION (360px and below)
   =========================================== */
@media (max-width: 360px) {
  .about-us-popup {
        width: 96vw;
        max-height: 97vh;
        border-radius: 14px;
  }

  .about-popup-header {
        padding: 10px 10px;
  }

  .about-header {
    font-size: 16px;
  }

  .about-close-btn {
        width: 32px;
        height: 32px;
        font-size: 16px;
        right: 8px;
  }

  .about-content {
        padding: 10px 10px 12px;
        max-height: calc(97vh - 58px);
  }

  .about-us-popup .project-info {
    margin-bottom: 18px;
    padding-bottom: 8px;
  }

  .about-us-popup .project-info h3 {
    font-size: 15px;
    margin-bottom: 5px;
  }

  .about-us-popup .project-info p {
    font-size: 11px;
    margin: 1px 0;
  }

  .about-us-popup .team-section h3,
  .about-us-popup .advisor-section h3 {
    font-size: 15px;
    margin-bottom: 8px;
    padding-bottom: 4px;
  }

  .about-us-popup .team-member {
    padding: 8px 5px;
    margin-bottom: 12px;
  }

  .about-us-popup .profile-image {
        width: 110px;
        height: 160px;
  }

  .about-us-popup .member-info p {
    font-size: 10px;
    margin: 3px 0;
    line-height: 1.0;
  }

  .about-us-popup .team-section,
  .about-us-popup .advisor-section {
    margin-bottom: 18px;
  }
}

/* ---------- Secret Login Page Styles ---------- */

body.secret-login-page {
    font-family: "Mitr", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;

    /* พื้นหลังหน้าหลัก */
    background-color: #000;
    background-image: url("../images/bg-index-bw.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-attachment: scroll;
    background-size: cover;

    color: #fff;
}

.container-terms {
    padding-top: 80px;
    padding-bottom: 10px;
    text-align: center;
}

.name_terms {
    color: rgba(140, 98, 255, 0.96);
    font-size: 28px;
    font-weight: 700;
}

.name_termsTH {
    color: #FFF;
    font-size: 20px;
    font-weight: 500;
}

.login-wrapper {
    min-height: calc(100vh - 200px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 60px;
    padding-bottom: 40px;
}

.login-card {
    max-width: 420px;
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    background-color: #ffffff;
    margin-bottom: 40px;
}

.login-header {
    background: linear-gradient(135deg, #1565c0 0%, #8a61f8 50%, #5600ff 100%);
    padding: 18px 24px 16px;
    text-align: center;
    color: #fff;
}

.login-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    backdrop-filter: blur(10px);
}

.login-header h1 {
    font-size: 1.4rem;
    margin-bottom: 4px;
    font-weight: 700;
}

.login-header p {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
}

.form-label-custom {
    font-weight: 500;
    font-size: 0.9rem;
    color: #333;
}

.otp-box-wrapper {
    background: #f8fdf8;
    border: 1px solid #c8e6c9;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 1rem;
}

.otp-input-group {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 0.5rem;
}

.otp-input-group input {
    width: 45px;
    height: 45px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
}

footer {
    color: #fff;
}



/* ========================================
   Theme Transition
   Version 0.0.9 - Dark Mode Styles
   ======================================== */

body.theme-transition,
body.theme-transition *,
body.theme-transition *::before,
body.theme-transition *::after {
    transition: background-color 0.5s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}

/* Dark Mode - Main Elements */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .card,
[data-theme="dark"] .modal-content {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--primary-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .btn-secondary {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .navbar {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

/* [data-theme="dark"] footer {
    background-color: var(--bg-secondary);
} */

/* Dark Mode - Popup Overlays */
[data-theme="dark"] .loading-popup-overlay,
[data-theme="dark"] .result-popup-overlay {
    background: rgba(0, 0, 0, 0.85);
}

[data-theme="dark"] .loading-popup,
[data-theme="dark"] .result-popup {
    background: var(--bg-secondary);
}

[data-theme="dark"] .loading-title,
[data-theme="dark"] .result-title {
    color: var(--text-primary);
}

[data-theme="dark"] .loading-text,
[data-theme="dark"] .result-detail {
    color: var(--text-secondary);
}

/* Dark Mode - OTP Box */
[data-theme="dark"] .otp-box-wrapper {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .otp-input-group input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

/* ========================================
   Hidden Google Translate Element
   ======================================== */
/* ✅ ซ่อนไว้แต่ยังให้ Google render widget ได้ */
#google_translate_element{
  position: fixed !important;
  left: -9999px !important;
  top: 0 !important;
}

/* Hide Google Translate toolbar that may appear */
.goog-te-banner {
    display: none !important;
}

/* ซ่อนแถบด้านบนของ Google */
.goog-te-banner-frame.skiptranslate{
  display:none !important;
}
body{
  top:0px !important; /* กัน body ถูกดันลง */
}

/* ซ่อนโลโก้/ข้อความ Powered by (ไม่ไปปิดทั้ง gadget) */
.goog-logo-link,
.goog-te-gadget span{
  display:none !important;
}
.goog-te-gadget{
  font-size: 0 !important;
}


.goog-te-tooltip {
    display: none !important;
}

/* ========================================
   Paste Text Button - ปุ่มวางข้อความ
   ======================================== */
.paste-text-btn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 0 8px 8px 0;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.paste-text-btn:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.paste-text-btn:active {
    transform: scale(0.98);
}

/* Mobile Responsive - Paste Button */
@media (max-width: 576px) {
    .paste-text-btn {
        padding: 8px 12px;
        font-size: 14px;
    }
    
    .input-group {
        flex-wrap: nowrap;
    }
    
    #smsInput {
        min-width: 0;
        flex: 1;
    }
}

/* ========================================
   Mobile Responsive - General Fixes
   ======================================== */
@media (max-width: 768px) {
    html, body {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }
    
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Black ribbon responsive */
    img[src*="black_ribbon"] {
        width: 80px !important;
    }
    
    /* Footer fixes */
    footer {
        padding: 15px 10px !important;
    }
    
    footer img {
        height: 50px !important;
        width: auto !important;
        margin: 5px;
    }
    
    footer p {
        font-size: 12px;
        line-height: 1.4;
    }
    
    /* desc_sys responsive */
    .desc_sys1 {
        font-size: 32px;
        line-height: 52px;
    }
    
    .desc_sys1 div {
        font-size: 48px !important;
    }
    
    .desc_sys2 {
        font-size: 18px;
        padding: 0 15px;
    }
    
    .name_sys {
        font-size: 32px;
    }
    
    .name_systh {
        font-size: 18px;
        line-height: 32px;
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    img[src*="black_ribbon"] {
        width: 60px !important;
    }
    
    footer img {
        height: 40px !important;
    }
    
    footer span {
        font-size: 11px;
        display: block;
        margin-top: 10px;
    }
    
    .hamburger-menu {
        top: 10px;
        right: 10px;
    }
    
    .menu-toggle {
        padding: 8px 12px;
    }
    
    .hamburger-icon {
        font-size: 20px;
    }
    
    .desc_sys1 {
        font-size: 24px;
        line-height: 40px;
    }
    
    .desc_sys1 div {
        font-size: 36px !important;
    }
    
    .desc_sys2 {
        font-size: 16px;
        padding: 0 10px;
    }
    
    .name_sys {
        font-size: 28px;
    }
    
    .name_systh {
        font-size: 16px;
        line-height: 28px;
        padding: 0 10px;
    }
    
    .btn.btn-light {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .btn.btn-light img {
        width: 35px;
    }
}

@media (max-width: 360px) {
    .container-main {
        padding: 80px 8px 50px 8px;
    }
    
    img[src*="black_ribbon"] {
        width: 50px !important;
    }
    
    footer img {
        height: 35px !important;
    }
    
    .desc_sys1 div {
        font-size: 30px !important;
    }
}

/* ========================================
   Cancel Loading Button - ปุ่มยกเลิกการโหลด
   ======================================== */
.cancel-loading-btn {
    margin-top: 20px;
    padding: 12px 35px;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1px;
    font-family: "FC Iconic", "Mitr", sans-serif;
}

.cancel-loading-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.7);
    color: #fca5a5;
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

.cancel-loading-btn:active {
    transform: scale(0.98);
}

.cancel-loading-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}

/* Mobile responsive for cancel button */
@media (max-width: 480px) {
    .cancel-loading-btn {
        padding: 10px 28px;
        font-size: 14px;
        margin-top: 15px;
    }
}

/* AI Reason Box Gemini Chat Style */

.ai-reason-box {
  position: relative;
  border-radius: 24px;
  box-shadow: 0 0 32px 0 rgba(76, 110, 255, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 24px 20px;
  color: #fff;
  font-size: 1.08rem;
  margin: 16px 0;
  overflow: hidden;
  transition: box-shadow 0.4s, background 0.8s;
  border: 4px solid transparent;
  z-index: 0;
  /* animation: ai-reason-float 4.5s ease-in-out infinite; */
}


/* Rainbow Lightning Border Effect */

/* Rainbow Lightning Border Effect: gradient moves to the right along the border */
.ai-reason-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 24px;
  pointer-events: none;
  padding: 0;
  background: linear-gradient(90deg,
    #5b8cff 0%,
    #7c3aed 20%,
    #ff61a6 40%,
    #ffb86c 60%,
    #43e97b 80%,
    #38f9d7 100%
  );
  background-size: 300% 100%;
  background-position: 0% 0%;
  filter: blur(0.5px);
  /* Border masking */
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  border: 4px solid transparent;
  box-sizing: border-box;
  animation: rainbow-border-move 3.5s linear infinite;
}

@keyframes rainbow-border-move {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}

.ai-reason-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  z-index: 1;
  pointer-events: none;
}

.ai-reason-box > * {
  position: relative;
  z-index: 3;
}

@keyframes ai-reason-float {
  0%   { box-shadow: 0 0 32px 0 rgba(76,110,255,0.25), 0 2px 8px rgba(0,0,0,0.08); transform: translateY(0px); }
  50%  { box-shadow: 0 0 48px 8px rgba(76,110,255,0.32), 0 8px 24px rgba(0,0,0,0.12); transform: translateY(-6px); }
  100% { box-shadow: 0 0 32px 0 rgba(76,110,255,0.25), 0 2px 8px rgba(0,0,0,0.08); transform: translateY(0px); }
}

.ai-reason-box hr {
  border: none;
  border-top: 1.7px solid rgba(111, 63, 243, 0.5);
  margin: 18px 0;
  position: relative;
  z-index: 3;
}

.ai-reason-box div {
  font-size: 1.08rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 3;
  color: black;
}

.ai-reason-box .ai-reason-box__summary-title,
.ai-reason-box .ai-reason-box__guidance-title {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.7;
    letter-spacing: 0.01em;
    font-weight: 800;
    color: black;
}

.ai-reason-box .ai-reason-box__summary-text {
    margin: 6px 0 0;
    white-space: pre-line;
    word-break: break-word;
    color: black;
}

.ai-reason-box .ai-reason-box__guidance-title {
    margin-top: 0;
}

.ai-reason-box .ai-reason-box__guidance-list {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    color: black;
}

.ai-reason-box .ai-reason-box__guidance-list li {
    margin: 6px 0;
    padding-left: 14px;
    position: relative;
    font-size: 1.08rem;
    line-height: 1.7;
    letter-spacing: 0.01em;
}

.ai-reason-box .ai-reason-box__guidance-list li::before {
    content: "-";
    position: absolute;
    left: 0;
    top: 0;
}

/* Dark Mode - AI reason frame should match popup theme */
[data-theme="dark"] .ai-reason-box {
    box-shadow:
        0 0 24px rgba(56, 189, 248, 0.18),
        0 12px 34px rgba(2, 6, 23, 0.45);
}

[data-theme="dark"] .ai-reason-box::before {
    background: linear-gradient(90deg,
        #22d3ee 0%,
        #3b82f6 35%,
        #6366f1 65%,
        #34d399 100%
    );
    background-size: 220% 100%;
}

[data-theme="dark"] .ai-reason-box::after {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96));
}

[data-theme="dark"] .ai-reason-box div {
    color: rgba(255, 255, 255, 0.94);
}

[data-theme="dark"] .ai-reason-box .ai-reason-box__guidance-title,
[data-theme="dark"] .ai-reason-box .ai-reason-box__summary-title,
[data-theme="dark"] .ai-reason-box .ai-reason-box__summary-text,
[data-theme="dark"] .ai-reason-box .ai-reason-box__guidance-list {
    color: rgba(255, 255, 255, 0.94);
}

[data-theme="dark"] .ai-reason-box hr {
    border-top-color: rgba(148, 163, 184, 0.34);
}

/* ========================================
     AI Reason Box - Disclaimer badge/button
     (kept here so it always loads)
     ======================================== */

.ai-reason-box.has-disclaimer {
    padding-bottom: 58px;
}

.ai-reason-box .ai-reason-box__disclaimer {
    position: absolute !important;
    right: 6px !important;
    bottom: 6px !important;
    left: auto !important;
    top: auto !important;
    z-index: 4 !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;

    max-width: min(760px, calc(100% - 16px)) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    -webkit-appearance: none;
    appearance: none;

    border: 1px solid rgba(245, 158, 11, 0.28) !important;
    background: rgba(255, 251, 235, 0.92) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(17, 24, 39, 0.92) !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 6px 18px rgba(17, 24, 39, 0.08) !important;

    pointer-events: none;
    cursor: default;
    user-select: none;
    transition: none;
}

.ai-reason-box .ai-reason-box__disclaimer-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.18);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #92400e;
}

.ai-reason-box .ai-reason-box__disclaimer-text {
    font-weight: 700;
    letter-spacing: 0.01em;
    text-shadow: none;
}

[data-theme="dark"] .ai-reason-box .ai-reason-box__disclaimer {
    background: rgba(30, 27, 75, 0.66) !important;
    border-color: rgba(251, 191, 36, 0.24) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
}

[data-theme="dark"] .ai-reason-box .ai-reason-box__disclaimer-icon {
    color: rgba(255, 255, 255, 0.92);
    background: rgba(251, 191, 36, 0.18);
    border-color: rgba(251, 191, 36, 0.26);
}

@media (max-width: 480px) {
    .ai-reason-box.has-disclaimer {
        padding-bottom: 66px;
    }
    .ai-reason-box .ai-reason-box__disclaimer {
        right: 6px !important;
        bottom: 6px !important;
        font-size: 11px !important;
        padding: 7px 11px !important;
    }
}

/* AI Reason Box - AI disclaimer badge (bottom-right) */
.ai-reason-box__ai-note,
.ai-note__icon,
.ai-note__content,
.ai-note__title,
.ai-note__text {
    display: none !important;
}

.ai-reason-box.has-ai-badge {
    padding-bottom: 58px;
}

.ai-reason-box > .ai-reason-box__ai-badge {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 4;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    max-width: calc(100% - 28px);

    border: 1px solid rgba(59, 130, 246, 0.16);
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    color: #111827;
    font-size: 12px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(17, 24, 39, 0.14);

    pointer-events: none;
    user-select: none;
}

.ai-badge__icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;
    font-weight: 900;
    font-size: 9px;
    letter-spacing: 0.04em;

    color: #92400e;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.38), rgba(59, 130, 246, 0.14));
    border: 1px solid rgba(245, 158, 11, 0.22);
}

.ai-badge__text {
    font-weight: 700;
    white-space: nowrap;
}

.ai-badge__hint {
    font-weight: 600;
    color: rgba(17, 24, 39, 0.62);
    white-space: nowrap;
}

.ai-badge__hint::before {
    content: "•";
    margin: 0 4px;
    color: rgba(17, 24, 39, 0.35);
}

@media (max-width: 360px) {
    .ai-badge__hint {
        display: none;
    }
}

@media (max-width: 480px) {
    .ai-reason-box.has-ai-badge {
        padding-bottom: 66px;
    }

    .ai-reason-box > .ai-reason-box__ai-badge {
        right: 10px;
        bottom: 10px;
        font-size: 11px;
        padding: 6px 9px;
    }
}

/* ========================================
   Paste Modal - หน้าต่างวางข้อความ
   ======================================== */
.paste-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 200ms ease;
}

.paste-modal-box {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 28px;
    max-width: 480px;
    width: 92%;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
    text-align: center;
    animation: slideUp 280ms ease;
}

[data-theme="dark"] .paste-modal-box {
    background: linear-gradient(145deg, #1e1b4b, #0f172a);
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.paste-modal-icon {
    font-size: 56px;
    margin-bottom: 16px;
}

.paste-modal-box.modern .paste-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
    margin-bottom: 8px;
}

.paste-modal-box.modern .paste-modal-icon {
    font-size: 48px;
    margin-bottom: 0;
}

.paste-modal-box.modern .paste-modal-title {
    font-size: 20px;
    margin-bottom: 0;
    text-align: left;
}

.paste-modal-box.modern .paste-modal-subtitle {
    font-size: 14px;
    color: #575767;
    margin: 12px 0 18px 0;
    text-align: center;
}

.paste-modal-box.modern .paste-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 12px;
}

.paste-modal-box.modern .paste-modal-hint {
    margin-top: 14px;
    color: #6b6b7a;
}

.paste-modal-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1a1a2e;
    font-family: "FC Iconic", "Mitr", sans-serif;
}

[data-theme="dark"] .paste-modal-title {
    color: #e4e4e4;
}

.paste-modal-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 20px;
    text-align: left;
    background: #f8f9fa;
    padding: 16px;
    border-radius: 12px;
    border-left: 4px solid #6366f1;
}

[data-theme="dark"] .paste-modal-desc {
    color: #b0b0b0;
    background: rgba(99, 102, 241, 0.1);
}

.paste-modal-textarea {
    width: 100%;
    min-height: 100px;
    padding: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 14px;
    font-size: 16px;
    resize: vertical;
    margin-bottom: 20px;
    font-family: "FC Iconic", "Mitr", sans-serif;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

[data-theme="dark"] .paste-modal-textarea {
    background: rgba(30, 27, 75, 0.8);
    border-color: rgba(99, 102, 241, 0.4);
    color: #e4e4e4;
}

.paste-modal-textarea:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}

.paste-modal-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
}

.paste-modal-btn {
    padding: 14px 32px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 180ms ease;
    font-family: "FC Iconic", "Mitr", sans-serif;
}

.paste-modal-btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.paste-modal-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(99, 102, 241, 0.5);
}

.paste-modal-btn-secondary {
    background: #f0f0f0;
    color: #333;
}

[data-theme="dark"] .paste-modal-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #e4e4e4;
}

.paste-modal-btn-secondary:hover {
    background: #e0e0e0;
    transform: translateY(-1px);
}

[data-theme="dark"] .paste-modal-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

.paste-modal-hint {
    font-size: 14px;
    color: #888;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

[data-theme="dark"] .paste-modal-hint {
    color: #a5b4fc;
    border-top-color: rgba(99, 102, 241, 0.3);
}

/* Animations for Paste Modal */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideUp {
    from { 
        transform: translateY(40px); 
        opacity: 0; 
    }
    to { 
        transform: translateY(0); 
        opacity: 1; 
    }
}

/* Mobile responsive for paste modal */
@media (max-width: 576px) {
    .paste-modal-box {
        padding: 24px 20px;
        width: 95%;
    }
    
    .paste-modal-title {
        font-size: 20px;
    }
    
    .paste-modal-desc {
        font-size: 14px;
        padding: 14px;
    }
    
    .paste-modal-buttons {
        flex-direction: column;
    }
    
    .paste-modal-btn {
        width: 100%;
        padding: 14px 20px;
    }
}

/* ========================================
   Report Modal - รายงานข้อความ
   ======================================== */
.report-modal-overlay {
    --report-accent-a: #2563eb;
    --report-accent-b: #059669;
    --report-accent-warm: #f59e0b;
    --report-text: rgba(15, 23, 42, 0.92);
    --report-muted: rgba(15, 23, 42, 0.70);
    --report-border: rgba(15, 23, 42, 0.10);
    --report-danger: rgba(220, 38, 38, 0.85);

    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 22px 14px;
    animation: fadeIn 200ms ease;
}

.report-modal-box {
    position: relative;
    isolation: isolate;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92));
    border-radius: 16px;
    padding: 18px 16px;
    max-width: 620px;
    width: 95%;
    max-height: calc(100vh - 32px);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.40);
    text-align: left;
    animation: slideUp 280ms ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--report-border);
}

.report-modal-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 6px;
    width: 100%;
    background: linear-gradient(90deg, var(--report-accent-a), var(--report-accent-b), var(--report-accent-warm));
    background-size: 160% 100%;
    animation: reportGradientShift 10s ease infinite;
    z-index: 0;
}

.report-modal-box::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(500px 220px at 20% 0%, rgba(37, 99, 235, 0.10), transparent 60%),
        radial-gradient(460px 220px at 80% 0%, rgba(5, 150, 105, 0.10), transparent 60%),
        radial-gradient(420px 240px at 50% 110%, rgba(245, 158, 11, 0.08), transparent 60%);
    opacity: 0.9;
    z-index: 0;
}

[data-theme="dark"] .report-modal-box {
    background: linear-gradient(145deg, #0f172a, #1e293b);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

[data-theme="dark"] .report-modal-box::after {
    background:
        radial-gradient(500px 220px at 20% 0%, rgba(96, 165, 250, 0.08), transparent 60%),
        radial-gradient(460px 220px at 80% 0%, rgba(52, 211, 153, 0.06), transparent 60%),
        radial-gradient(420px 240px at 50% 110%, rgba(251, 191, 36, 0.05), transparent 60%);
}

.report-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.report-modal-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--report-text);
    font-family: "Mitr", system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 0.2px;
}

.report-modal-title::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--report-accent-a), var(--report-accent-b));
    margin-right: 8px;
    transform: translateY(-1px);
}

[data-theme="dark"] .report-modal-title {
    color: #e5e7eb;
}

.report-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: rgba(17, 24, 39, 0.06);
    color: #111827;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 180ms ease, transform 180ms ease;
}

[data-theme="dark"] .report-modal-close {
    background: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
}

.report-modal-close:hover {
    background: rgba(17, 24, 39, 0.10);
    transform: rotate(90deg);
}

[data-theme="dark"] .report-modal-close:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* Description Box - Compact Design */
.report-modal-desc {
    position: relative;
    z-index: 1;
    font-size: 13px;
    line-height: 1.5;
    color: var(--report-muted);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.04), rgba(37, 99, 235, 0.02));
    border: 1px solid rgba(37, 99, 235, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.report-modal-desc::before {
    display: none;
}

.report-desc-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1;
}

.report-desc-content {
    flex: 1;
    font-size: 12px;
    line-height: 1.5;
}

.report-modal-desc strong {
    color: rgba(15, 23, 42, 0.92);
    font-weight: 700;
    font-size: 12px;
}

.report-desc-note {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: rgba(15, 23, 42, 0.55);
}

[data-theme="dark"] .report-modal-desc strong {
    color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .report-modal-desc {
    color: rgba(229, 231, 235, 0.8);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(30, 41, 59, 0.6));
    border-color: rgba(96, 165, 250, 0.2);
}

[data-theme="dark"] .report-desc-note {
    color: rgba(148, 163, 184, 0.7);
}

.report-modal-textarea {
    width: 100%;
    min-height: 160px;
    padding: 14px;
    border: 2px solid rgba(17, 24, 39, 0.12);
    border-radius: 14px;
    font-size: 14px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    margin-bottom: 16px;
}

.report-modal-section {
    margin-top: 10px;
}

.report-modal-section {
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(17, 24, 39, 0.06);
    background: rgba(15, 23, 42, 0.015);
    transition: transform 160ms ease, box-shadow 200ms ease, border-color 160ms ease, background 160ms ease;
}

/* Remove hover transform to reduce UI noise */
@media (hover: hover) {
    .report-modal-section:hover {
        border-color: rgba(37, 99, 235, 0.12);
        background: rgba(37, 99, 235, 0.02);
    }
}

.report-modal-section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: rgba(15, 23, 42, 0.88);
    margin: 0 0 8px 0;
    text-transform: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-modal-section-title::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--report-accent-a), var(--report-accent-b));
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.report-required-pill {
    margin-left: auto;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.2px;
    padding: 5px 10px;
    border-radius: 999px;
    color: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .report-required-pill {
    color: rgba(255, 255, 255, 0.90);
    border-color: rgba(245, 158, 11, 0.26);
    background: rgba(245, 158, 11, 0.14);
}

[data-theme="dark"] .report-modal-section-title {
    color: rgba(229, 231, 235, 0.9);
}

.report-summary {
    border: 1px solid rgba(17, 24, 39, 0.08);
    background: rgba(255, 255, 255, 0.70);
    border-radius: 14px;
    padding: 14px;
}

[data-theme="dark"] .report-summary {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8));
    border-color: rgba(71, 85, 105, 0.5);
}

.report-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}

@media (max-width: 576px) {
    .report-summary-grid {
        grid-template-columns: 1fr;
    }
}

.report-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.report-field-label {
    font-size: 12.5px;
    color: rgba(15, 23, 42, 0.68);
    font-weight: 700;
}

[data-theme="dark"] .report-field-label {
    color: rgba(148, 163, 184, 0.95);
}

.report-field-value {
    font-size: 14px;
    color: rgba(15, 23, 42, 0.92);
    font-weight: 800;
    word-break: break-word;
}

[data-theme="dark"] .report-field-value {
    color: #f1f5f9;
}

.report-message-box {
    margin-top: 12px;
    border: 1px solid rgba(17, 24, 39, 0.10);
    background: rgba(17, 24, 39, 0.03);
    border-radius: 12px;
    padding: 12px;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(15, 23, 42, 0.88);
    white-space: pre-wrap;
    word-break: break-word;
}

[data-theme="dark"] .report-message-box {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8));
    border-color: rgba(71, 85, 105, 0.4);
    color: #e2e8f0;
}

.report-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid rgba(17, 24, 39, 0.14);
    background: rgba(255, 255, 255, 0.96);
    font-size: 15px;
    color: rgba(15, 23, 42, 0.92);
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
    min-height: 50px;
}

.report-input:hover {
    border-color: rgba(37, 99, 235, 0.22);
}

.report-input::placeholder {
    color: rgba(15, 23, 42, 0.50);
    font-size: 14px;
}

[data-theme="dark"] .report-input {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(148, 163, 184, 0.2);
    color: rgba(229, 231, 235, 0.95);
}

[data-theme="dark"] .report-input:hover {
    border-color: rgba(96, 165, 250, 0.35);
    background: rgba(30, 41, 59, 0.8);
}

.report-input:focus {
    outline: none;
    border-color: rgba(5, 150, 105, 0.65);
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.16);
}

[data-theme="dark"] .report-input:focus {
    border-color: rgba(96, 165, 250, 0.7);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2);
    background: rgba(30, 41, 59, 0.9);
}

.report-input-error {
    border-color: var(--report-danger) !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.14) !important;
    animation: reportShake 320ms ease;
}

.report-help {
    font-size: 12px;
    color: rgba(17, 24, 39, 0.62);
    margin-top: 8px;
}

.report-help .report-pdpa-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, 0.35);
    background: rgba(37, 99, 235, 0.08);
    color: rgba(15, 23, 42, 0.92);
    font-weight: 800;
    text-decoration: none;
    line-height: 1.2;
}

.report-help .report-pdpa-more:hover {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.55);
}

[data-theme="dark"] .report-help {
    color: rgba(148, 163, 184, 0.85);
}

[data-theme="dark"] .report-help .report-pdpa-more {
    border-color: rgba(147, 197, 253, 0.30);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.94);
}

[data-theme="dark"] .report-help .report-pdpa-more:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(147, 197, 253, 0.42);
}

[data-theme="dark"] .report-modal-textarea {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(148, 163, 184, 0.22);
    color: #e5e7eb;
}

.report-modal-textarea:focus {
    outline: none;
    border-color: rgba(37, 99, 235, 0.65);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

.report-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-top: 14px;
    margin-top: 8px;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
    position: relative;
    z-index: 1;
}

[data-theme="dark"] .report-modal-actions {
    border-top-color: rgba(255, 255, 255, 0.10);
}

.report-modal-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
    position: relative;
    z-index: 1;
}

.report-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 576px) {
    .report-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Make sure textarea sections don't grow infinitely inside scroll area */
.report-modal-scroll .report-modal-textarea {
    min-height: 150px;
    max-height: 220px;
}

.report-modal-scroll #reportExtraNote.report-input {
    min-height: 120px;
    max-height: 240px;
}

/* Textarea improvements */
textarea.report-input {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

#reportMismatchReason.report-input {
    min-height: 130px;
}

#reportEvidence.report-input {
    min-height: 110px;
}

.report-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid rgba(17, 24, 39, 0.1);
    background: rgba(17, 24, 39, 0.02);
    color: rgba(17, 24, 39, 0.88);
    font-size: 13px;
    line-height: 1.55;
    cursor: pointer;
    margin-bottom: 10px;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease, transform 140ms ease;
}

.report-check:hover {
    border-color: rgba(5, 150, 105, 0.22);
    background: rgba(5, 150, 105, 0.03);
}

.report-check-error {
    border-color: var(--report-danger) !important;
    background: rgba(220, 38, 38, 0.04) !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10) !important;
    animation: reportShake 320ms ease;
}

[data-theme="dark"] .report-check {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(30, 41, 59, 0.5);
    color: rgba(229, 231, 235, 0.9);
}

[data-theme="dark"] .report-check:hover {
    border-color: rgba(52, 211, 153, 0.3);
    background: rgba(30, 41, 59, 0.7);
}

.report-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 5px;
    border: 2px solid rgba(17, 24, 39, 0.28);
    background: #ffffff;
    display: grid;
    place-items: center;
    flex: 0 0 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .report-check input[type="checkbox"] {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(148, 163, 184, 0.35);
}

.report-check input[type="checkbox"]::after {
    content: "";
    width: 9px;
    height: 5px;
    border-left: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transform: rotate(-45deg);
}

.report-check input[type="checkbox"]:checked {
    border-color: rgba(22, 101, 52, 0.85);
    background: rgba(22, 101, 52, 0.10);
}

.report-check input[type="checkbox"]:checked::after {
    border-left-color: rgba(22, 101, 52, 0.95);
    border-bottom-color: rgba(22, 101, 52, 0.95);
}

.report-check input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(22, 101, 52, 0.18);
}

.report-modal-note {
    font-size: 13px;
    line-height: 1.65;
    color: rgba(17, 24, 39, 0.78);
    background: rgba(17, 24, 39, 0.03);
    border: 1px dashed rgba(17, 24, 39, 0.16);
    border-radius: 12px;
    padding: 12px;
}

[data-theme="dark"] .report-modal-note {
    color: rgba(229, 231, 235, 0.8);
    background: rgba(30, 41, 59, 0.4);
    border-color: rgba(148, 163, 184, 0.2);
}

.report-modal-btn {
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid rgba(17, 24, 39, 0.14);
    background: #fff;
    color: rgba(17, 24, 39, 0.9);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 180ms ease, background 180ms ease;
}

[data-theme="dark"] .report-modal-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(229, 231, 235, 0.92);
}

.report-modal-btn-primary {
    border: none;
    background: linear-gradient(135deg, var(--report-accent-a), var(--report-accent-b));
    color: #fff;
    box-shadow: 0 10px 28px rgba(37, 99, 235, 0.28);
}

.report-modal-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 42px rgba(5, 150, 105, 0.28);
}

.report-modal-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.20),
        0 0 0 7px rgba(5, 150, 105, 0.22);
}

.report-modal-btn-secondary:hover {
    background: rgba(17, 24, 39, 0.04);
}

[data-theme="dark"] .report-modal-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.10);
}

@keyframes reportShake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}

@keyframes reportGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .report-modal-overlay,
    .report-modal-box,
    .report-modal-section,
    .report-input-error,
    .report-check-error {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 576px) {
    .report-modal-box {
        padding: 18px 16px;
        width: 96%;
        max-height: calc(100vh - 44px);
    }

    .report-modal-actions {
        justify-content: stretch;
    }

    .report-modal-btn {
        width: 100%;
    }
}

/* AI Reason Box add-ons (disclaimer badge)
   Loaded after fgw_style.css
*/

.ai-reason-box.has-disclaimer {
  padding-bottom: 58px;
}

.ai-reason-box > .ai-reason-box__disclaimer {
  position: absolute;
    right: 6px;
    bottom: 6px;
  z-index: 4;

  display: inline-flex;
  align-items: center;
  gap: 8px;

    max-width: min(760px, calc(100% - 16px));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    border: 1px solid rgba(245, 158, 11, 0.28);
    background: rgba(255, 251, 235, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(17, 24, 39, 0.92);
  font-size: 12px;
    line-height: 1.15;
    padding: 7px 12px;
  border-radius: 999px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 6px 18px rgba(17, 24, 39, 0.08);

    pointer-events: none;
    cursor: default;
  user-select: none;
    transition: none;
}

.ai-reason-box__disclaimer-icon {
    width: 18px;
    height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
    box-sizing: border-box;

  border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.18);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #92400e;
}

.ai-reason-box__disclaimer-text {
  font-weight: 600;
  letter-spacing: 0.01em;
    text-shadow: none;
}

[data-theme="dark"] .ai-reason-box > .ai-reason-box__disclaimer {
    background: rgba(30, 27, 75, 0.66);
    border-color: rgba(251, 191, 36, 0.24);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .ai-reason-box__disclaimer-icon {
    color: rgba(255, 255, 255, 0.92);
    background: rgba(251, 191, 36, 0.18);
    border-color: rgba(251, 191, 36, 0.26);
}

@media (max-width: 480px) {
  .ai-reason-box.has-disclaimer {
    padding-bottom: 66px;
  }

  .ai-reason-box > .ai-reason-box__disclaimer {
        right: 6px;
        bottom: 6px;
    font-size: 11px;
        padding: 7px 11px;
  }
}


/* ========================================
   Report Modal - Formal Government Style
   ======================================== */

/* Progress Steps - Compact */
.report-progress-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.03), rgba(0, 77, 153, 0.02));
    border-bottom: 1px solid rgba(0, 51, 102, 0.08);
    margin: -18px -16px 12px -16px;
    border-radius: 16px 16px 0 0;
    position: relative;
}

.report-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 70px;
    cursor: pointer;
    transition: transform 200ms ease;
    z-index: 2;
}

.report-step:hover {
    transform: translateY(-1px);
}

.report-step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 51, 102, 0.1);
    color: rgba(0, 51, 102, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.report-step.is-active .report-step-number {
    background: linear-gradient(135deg, #003366, #004d99);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.25);
    transform: scale(1.1);
}

.report-step.is-active .report-step-number::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(0, 51, 102, 0.3);
    animation: stepPulse 2s ease-in-out infinite;
}

@keyframes stepPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.5; }
}

.report-step.is-completed .report-step-number {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    animation: stepComplete 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.report-step.is-completed .step-num {
    display: none;
}

.report-step.is-completed .report-step-number::before {
    content: '✓';
    font-size: 16px;
    font-weight: 700;
}

@keyframes stepComplete {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.report-step-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(0, 51, 102, 0.5);
    transition: all 200ms ease;
}

.report-step.is-active .report-step-label {
    color: #003366;
    font-weight: 700;
}

.report-step.is-completed .report-step-label {
    color: #28a745;
}

/* Progress Line - Compact */
.report-step-line {
    width: 40px;
    height: 2px;
    background: rgba(0, 51, 102, 0.12);
    margin: 0 6px;
    margin-bottom: 18px;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.report-progress-line-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #003366, #28a745);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Step Panels */
.report-step-panel {
    display: none;
    opacity: 0;
}

.report-step-panel.is-active {
    display: block;
    opacity: 1;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Step Navigation Buttons */
.report-step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 8px 0;
    margin-top: 16px;
    border-top: 1px solid rgba(0, 51, 102, 0.08);
}

.report-nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
    border: none;
    font-family: inherit;
}

.report-nav-btn-prev {
    background: rgba(0, 51, 102, 0.06);
    color: #003366;
}

.report-nav-btn-prev:hover {
    background: rgba(0, 51, 102, 0.12);
    transform: translateX(-4px);
}

.report-nav-btn-next {
    background: linear-gradient(135deg, #003366, #004d99);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.25);
}

.report-nav-btn-next:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 20px rgba(0, 51, 102, 0.35);
}

.report-nav-btn-submit {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.report-nav-btn-submit:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

.report-nav-arrow {
    font-size: 18px;
    transition: transform 200ms ease;
}

.report-nav-btn:hover .report-nav-arrow {
    transform: translateX(3px);
}

.report-nav-btn-prev:hover .report-nav-arrow {
    transform: translateX(-3px);
}

.report-nav-icon {
    font-size: 16px;
}

/* Confirmation Summary Grid */
.report-confirm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.report-confirm-item {
    padding: 12px;
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.03), rgba(0, 77, 153, 0.02));
    border-radius: 10px;
    border-left: 3px solid #003366;
}

.report-confirm-item--full {
    grid-column: 1 / -1;
}

.report-confirm-label {
    display: block;
    font-size: 11px;
    color: rgba(0, 51, 102, 0.6);
    font-weight: 600;
    margin-bottom: 4px;
}

.report-confirm-value {
    display: block;
    font-size: 13px;
    color: #003366;
    font-weight: 600;
    word-break: break-word;
}

/* Dark Theme for Step Navigation */
[data-theme="dark"] .report-progress-steps {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.15), rgba(51, 65, 85, 0.1));
    border-bottom-color: rgba(148, 163, 184, 0.15);
}

[data-theme="dark"] .report-step-number {
    background: rgba(148, 163, 184, 0.2);
    color: rgba(148, 163, 184, 0.7);
}

[data-theme="dark"] .report-step.is-active .report-step-number {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

[data-theme="dark"] .report-step.is-completed .report-step-number {
    background: linear-gradient(135deg, #34d399, #10b981);
}

[data-theme="dark"] .report-step-label {
    color: rgba(148, 163, 184, 0.6);
}

[data-theme="dark"] .report-step.is-active .report-step-label {
    color: #60a5fa;
}

[data-theme="dark"] .report-step.is-completed .report-step-label {
    color: #34d399;
}

[data-theme="dark"] .report-step-line {
    background: rgba(148, 163, 184, 0.15);
}

[data-theme="dark"] .report-progress-line-fill {
    background: linear-gradient(90deg, #60a5fa, #34d399);
}

[data-theme="dark"] .report-step-nav {
    border-top-color: rgba(148, 163, 184, 0.1);
}

[data-theme="dark"] .report-nav-btn-prev {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
}

[data-theme="dark"] .report-nav-btn-prev:hover {
    background: rgba(148, 163, 184, 0.2);
}

[data-theme="dark"] .report-nav-btn-next {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .report-nav-btn-submit {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .report-confirm-item {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.15), rgba(51, 65, 85, 0.1));
    border-left-color: #60a5fa;
}

[data-theme="dark"] .report-confirm-label {
    color: rgba(148, 163, 184, 0.7);
}

[data-theme="dark"] .report-confirm-value {
    color: #e2e8f0;
}

/* Header Updates */
.report-modal-box--formal {
    max-width: 640px;
}

.report-modal-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.report-modal-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-modal-logo {
    width: 44px;
    height: auto;
    object-fit: contain;
}

.report-modal-subtitle {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.55);
    margin-top: 2px;
}

[data-theme="dark"] .report-modal-subtitle {
    color: rgba(229, 231, 235, 0.55);
}

.report-modal-btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: rgba(0, 51, 102, 0.06);
    color: #003366;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 180ms ease;
}

.report-modal-btn-icon:hover {
    background: rgba(0, 51, 102, 0.12);
    transform: scale(1.05);
}

[data-theme="dark"] .report-modal-btn-icon {
    background: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
}

/* Reference Bar - Compact */
.report-ref-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.04), rgba(0, 77, 153, 0.02));
    border: 1px solid rgba(0, 51, 102, 0.1);
    border-radius: 8px;
    margin-bottom: 10px;
}

.report-ref-number {
    display: flex;
    align-items: center;
    gap: 6px;
}

.report-ref-label {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.6);
}

.report-ref-value {
    font-size: 12px;
    font-weight: 700;
    color: #003366;
    font-family: ui-monospace, monospace;
}

.report-ref-copy {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(0, 51, 102, 0.08);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 150ms ease;
}

.report-ref-copy:hover {
    background: rgba(0, 51, 102, 0.15);
    transform: scale(1.1);
}

.report-status-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.report-status-pending {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.08));
    color: #b45309;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.report-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    animation: statusPulse 2s ease infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.9); }
}

[data-theme="dark"] .report-ref-bar {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.6));
    border-color: rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .report-ref-label {
    color: rgba(148, 163, 184, 0.8);
}

[data-theme="dark"] .report-ref-value {
    color: #60a5fa;
}

[data-theme="dark"] .report-ref-copy {
    background: rgba(71, 85, 105, 0.4);
    color: #94a3b8;
}

[data-theme="dark"] .report-ref-copy:hover {
    background: rgba(96, 165, 250, 0.3);
    color: #60a5fa;
}

[data-theme="dark"] .report-status-pending {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.08));
    border-color: rgba(251, 191, 36, 0.35);
    color: #fbbf24;
}

/* Description Updates */
.report-modal-desc {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.report-desc-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.report-desc-content {
    flex: 1;
    font-size: 13px;
    line-height: 1.6;
}

.report-desc-note {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: rgba(15, 23, 42, 0.55);
}

/* Stats Row */
/* Stats Row - Compact Design */
.report-stats-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.report-stat-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 51, 102, 0.08);
    border-radius: 10px;
    transition: all 200ms ease;
}

.report-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.08);
}

.report-stat-icon {
    font-size: 24px;
}

.report-stat-content {
    text-align: center;
}

.report-stat-label {
    font-size: 10px;
    color: rgba(15, 23, 42, 0.55);
    font-weight: 500;
}

.report-stat-value {
    font-size: 13px;
    font-weight: 700;
    color: #003366;
}

/* Accuracy Ring - Smaller */
.report-stat-ring {
    width: 48px;
    height: 48px;
    position: relative;
}

.report-stat-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.report-ring-bg {
    fill: none;
    stroke: rgba(0, 51, 102, 0.1);
    stroke-width: 3;
}

.report-ring-fill {
    fill: none;
    stroke: url(#reportGradient);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 1s ease;
}

.report-stat-ring svg defs {
    display: block;
}

.report-ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 700;
    color: #003366;
}

[data-theme="dark"] .report-ring-text {
    color: #60a5fa;
}

[data-theme="dark"] .report-ring-bg {
    stroke: rgba(71, 85, 105, 0.5);
}

[data-theme="dark"] .report-ring-fill {
    stroke: #60a5fa;
}

/* Summary Grid Formal - Compact */
.report-summary--formal {
    padding: 12px;
}

.report-summary-grid--formal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px;
    background: rgba(0, 51, 102, 0.02);
    border-radius: 8px;
    margin-top: 10px;
}

/* URL Section - Compact */
.report-url-section {
    margin-top: 10px;
    padding: 10px;
    background: rgba(0, 51, 102, 0.02);
    border-radius: 8px;
}

.report-url-title {
    font-size: 12px;
    font-weight: 700;
    color: #003366;
    margin-bottom: 8px;
}

.report-url-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.report-field--full {
    width: 100%;
}

.report-field-url {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    word-break: break-all;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    border: 1px solid rgba(0, 51, 102, 0.08);
}

/* Technical Section */
/* Tech Section - Compact */
.report-tech-section {
    margin-top: 10px;
    padding: 10px;
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.03), rgba(0, 77, 153, 0.02));
    border-radius: 8px;
    border: 1px solid rgba(0, 51, 102, 0.06);
}

.report-tech-title {
    font-size: 12px;
    font-weight: 700;
    color: #003366;
    margin-bottom: 10px;
}

.report-tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.report-tech-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    border: 1px solid rgba(0, 51, 102, 0.05);
}

.report-tech-label {
    font-size: 9px;
    color: rgba(15, 23, 42, 0.55);
    font-weight: 500;
}

.report-tech-value {
    font-size: 11px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.85);
}

/* Message Section */
.report-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.report-message-copy {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(0, 51, 102, 0.06);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 150ms ease;
}

.report-message-copy:hover {
    background: rgba(0, 51, 102, 0.12);
}

/* AI Section */
.report-ai-section {
    margin-top: 16px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.04), rgba(37, 99, 235, 0.02));
    border-radius: 10px;
    border: 1px solid rgba(37, 99, 235, 0.1);
}

.report-ai-title {
    font-size: 13px;
    font-weight: 700;
    color: #2563eb;
    margin-bottom: 10px;
}

.report-ai-content {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(15, 23, 42, 0.85);
}

.report-ai-item {
    margin-bottom: 8px;
}

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

.report-ai-disclaimer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(245, 158, 11, 0.08);
    border-radius: 8px;
    font-size: 11px;
    color: rgba(15, 23, 42, 0.7);
}

.report-ai-disclaimer-icon {
    font-size: 14px;
}

/* Section Icons */
.report-section-icon {
    margin-right: 6px;
}

/* Input Label */
.report-input-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.7);
    margin-bottom: 6px;
}

/* Help with icon */
.report-help {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.report-help-icon {
    flex-shrink: 0;
}

/* Check boxes improved */
.report-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.report-check input[type="checkbox"] {
    display: none;
}

.report-check-box {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 51, 102, 0.25);
    border-radius: 5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms ease;
    margin-top: 2px;
}

.report-check-box::after {
    content: "✓";
    font-size: 12px;
    color: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all 150ms ease;
}

.report-check input[type="checkbox"]:checked + .report-check-box {
    background: linear-gradient(135deg, #003366, #004d99);
    border-color: #003366;
}

.report-check input[type="checkbox"]:checked + .report-check-box::after {
    opacity: 1;
    transform: scale(1);
}

.report-check-text {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(15, 23, 42, 0.8);
}

.report-check-error .report-check-box {
    border-color: #dc3545 !important;
    animation: reportShake 320ms ease;
}

/* Privacy Note */
.report-privacy-note {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: rgba(0, 51, 102, 0.03);
    border-radius: 10px;
    margin-top: 14px;
    border: 1px solid rgba(0, 51, 102, 0.06);
}

.report-privacy-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.report-privacy-content {
    font-size: 12px;
    line-height: 1.6;
    color: rgba(15, 23, 42, 0.7);
}

/* Note Box */
.report-modal-note-box {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.04));
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 10px;
    margin-top: 14px;
}

.report-note-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.report-note-content {
    font-size: 12px;
    line-height: 1.6;
    color: rgba(15, 23, 42, 0.8);
}

/* Footer */
.report-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    margin-top: 8px;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
    position: relative;
    z-index: 1;
}

.report-modal-footer-left {
    flex: 1;
}

.report-modal-timestamp {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.5);
}

.report-modal-actions {
    display: flex;
    gap: 10px;
}

/* Buttons */
.report-modal-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms ease;
    border: none;
}

.report-btn-icon {
    font-size: 14px;
}

.report-modal-btn-secondary {
    background: rgba(17, 24, 39, 0.06);
    color: rgba(15, 23, 42, 0.75);
}

.report-modal-btn-secondary:hover {
    background: rgba(17, 24, 39, 0.10);
}

.report-modal-btn-primary {
    background: linear-gradient(135deg, #003366, #004d99);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.25);
}

.report-modal-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 51, 102, 0.35);
}

.report-modal-btn-primary:active {
    transform: translateY(0);
}

[data-theme="dark"] .report-modal-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(229, 231, 235, 0.85);
}

/* Responsive */
@media (max-width: 576px) {
    .report-progress-steps {
        padding: 12px 10px;
    }

    .report-step {
        min-width: 60px;
    }

    .report-step-number {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .report-step-label {
        font-size: 10px;
    }

    .report-step-line {
        width: 20px;
    }

    /* Compact stats on mobile */
    .report-stats-row {
        flex-direction: row;
        gap: 6px;
    }
    
    .report-stat-card {
        padding: 8px 6px;
    }
    
    .report-stat-icon {
        font-size: 20px;
    }
    
    .report-stat-label {
        font-size: 9px;
    }
    
    .report-stat-value {
        font-size: 11px;
    }
    
    .report-stat-ring {
        width: 40px;
        height: 40px;
    }
    
    /* Summary grid - 2 columns on mobile */
    .report-summary-grid--formal {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 8px;
    }

    .report-tech-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .report-tech-item {
        padding: 6px;
    }

    .report-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .report-modal-actions {
        justify-content: stretch;
    }

    .report-modal-btn {
        flex: 1;
        justify-content: center;
    }

    .report-step-nav {
        flex-direction: column;
        gap: 10px;
    }

    .report-nav-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }

    .report-nav-btn-prev {
        order: 2;
    }

    .report-nav-btn-next,
    .report-nav-btn-submit {
        order: 1;
    }

    .report-confirm-grid {
        grid-template-columns: 1fr;
    }

    .report-confirm-item--full {
        grid-column: 1;
    }

    /* Mobile-friendly input improvements */
    .report-input {
        padding: 14px 16px;
        font-size: 16px; /* Prevents zoom on iOS */
        border-radius: 14px;
        min-height: 52px;
    }

    .report-input::placeholder {
        font-size: 14px;
    }

    textarea.report-input {
        min-height: 130px;
        line-height: 1.6;
    }

    .report-modal-section {
        padding: 16px;
    }

    .report-modal-section-title {
        font-size: 15px;
        margin-bottom: 14px;
    }

    .report-grid {
        gap: 14px;
    }

    .report-modal-box {
        padding: 16px 14px;
        width: 98%;
        border-radius: 16px;
    }

    .report-modal-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .report-modal-title {
        font-size: 16px;
    }

    .report-summary--formal {
        padding: 14px 12px;
    }

    .report-tech-item {
        padding: 12px;
    }

    .report-tech-label {
        font-size: 11px;
    }

    .report-tech-value {
        font-size: 13px;
    }

    .report-message-box {
        max-height: 140px;
        padding: 14px;
        font-size: 14px;
    }

    .report-check {
        padding: 14px;
    }

    .report-check-text {
        font-size: 14px;
    }

    .report-check-box {
        width: 24px;
        height: 24px;
    }
}

/* Extra small devices */
@media (max-width: 380px) {
    .report-input {
        padding: 16px;
        font-size: 16px;
        min-height: 56px;
    }

    textarea.report-input {
        min-height: 140px;
    }

    .report-modal-section {
        padding: 14px 12px;
    }

    .report-tech-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Dark Theme - Complete Fixes
   ======================================== */

/* Main modal section - dark mode */
[data-theme="dark"] .report-modal-section {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.7));
    border-color: rgba(71, 85, 105, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .report-modal-section:hover {
    background: linear-gradient(145deg, rgba(51, 65, 85, 0.6), rgba(30, 41, 59, 0.6));
    border-color: rgba(96, 165, 250, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Section summary specific - dark mode */
[data-theme="dark"] .report-section-summary {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.85)) !important;
    border-color: rgba(71, 85, 105, 0.6) !important;
}

/* Stats cards - dark mode */
[data-theme="dark"] .report-stat-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
    border-color: rgba(71, 85, 105, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .report-stat-card:hover {
    background: linear-gradient(145deg, rgba(51, 65, 85, 0.95), rgba(30, 41, 59, 0.95));
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .report-stat-label {
    color: rgba(148, 163, 184, 0.9);
}

[data-theme="dark"] .report-stat-value {
    color: #f1f5f9;
}

/* Summary section - dark mode */
[data-theme="dark"] .report-summary--formal {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.6));
    border: 1px solid rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .report-summary-grid--formal {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

/* URL section - dark mode */
[data-theme="dark"] .report-url-section {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.7));
    border: 1px solid rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .report-url-title {
    color: #60a5fa;
}

[data-theme="dark"] .report-field-url {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.7), rgba(30, 41, 59, 0.7));
    border-color: rgba(71, 85, 105, 0.4);
    color: #e2e8f0;
}

/* Technical section - dark mode */
[data-theme="dark"] .report-tech-section {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.7));
    border-color: rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .report-tech-title {
    color: #60a5fa;
}

[data-theme="dark"] .report-tech-item {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8));
    border-color: rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .report-tech-label {
    color: rgba(148, 163, 184, 0.9);
}

[data-theme="dark"] .report-tech-value {
    color: #f1f5f9;
}

/* Message section - dark mode */
[data-theme="dark"] .report-message-title {
    color: #e2e8f0;
}

[data-theme="dark"] .report-message-copy {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

[data-theme="dark"] .report-message-copy:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* AI section - dark mode */
[data-theme="dark"] .report-ai-section {
    background: linear-gradient(145deg, rgba(37, 99, 235, 0.12), rgba(30, 64, 175, 0.1));
    border-color: rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .report-ai-title {
    color: #60a5fa;
}

[data-theme="dark"] .report-ai-content {
    color: #e2e8f0;
}

[data-theme="dark"] .report-ai-disclaimer {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: rgba(251, 191, 36, 0.95);
}

/* Privacy note - dark mode */
[data-theme="dark"] .report-privacy-note {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.6));
    border-color: rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .report-privacy-content {
    color: #cbd5e1;
}

/* Note box - dark mode */
[data-theme="dark"] .report-modal-note-box {
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.1), rgba(217, 119, 6, 0.08));
    border-color: rgba(251, 191, 36, 0.3);
}

[data-theme="dark"] .report-note-content {
    color: #e2e8f0;
}

/* Footer - dark mode */
[data-theme="dark"] .report-modal-footer {
    border-top-color: rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .report-modal-timestamp {
    color: rgba(148, 163, 184, 0.7);
}

/* Input label - dark mode */
[data-theme="dark"] .report-input-label {
    color: #cbd5e1;
}

/* Checkbox - dark mode */
[data-theme="dark"] .report-check {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.6));
    border-color: rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .report-check:hover {
    background: linear-gradient(145deg, rgba(51, 65, 85, 0.8), rgba(30, 41, 59, 0.7));
    border-color: rgba(52, 211, 153, 0.4);
}

[data-theme="dark"] .report-check-box {
    border-color: rgba(148, 163, 184, 0.5);
    background: rgba(15, 23, 42, 0.8);
}

[data-theme="dark"] .report-check input[type="checkbox"]:checked + .report-check-box {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: #3b82f6;
}

[data-theme="dark"] .report-check-text {
    color: #e2e8f0;
}

/* Ring - dark mode */
[data-theme="dark"] .report-ring-bg {
    stroke: rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .report-ring-text {
    color: #60a5fa;
    font-weight: 600;
}

/* Section title - dark mode (already exists but ensure icon is visible) */
[data-theme="dark"] .report-modal-section-title::before {
    background: linear-gradient(135deg, #60a5fa, #34d399);
}

[data-theme="dark"] .report-modal-section-title {
    color: #f1f5f9;
}

/* Description section - dark mode improvement */
[data-theme="dark"] .report-desc-note {
    color: #94a3b8;
}

[data-theme="dark"] .report-desc-content {
    color: #e2e8f0;
}

[data-theme="dark"] .report-desc-content strong {
    color: #f1f5f9;
}

/* Ref bar - dark mode */
[data-theme="dark"] .report-ref-label {
    color: #94a3b8;
}

[data-theme="dark"] .report-ref-copy {
    background: linear-gradient(145deg, rgba(51, 65, 85, 0.6), rgba(30, 41, 59, 0.6));
    border: 1px solid rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .report-ref-copy:hover {
    background: linear-gradient(145deg, rgba(71, 85, 105, 0.7), rgba(51, 65, 85, 0.7));
    border-color: rgba(96, 165, 250, 0.4);
}

[data-theme="dark"] .report-status-pending {
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.15), rgba(217, 119, 6, 0.12));
    border-color: rgba(251, 191, 36, 0.35);
    color: #fbbf24;
}

/* Input dark mode improvements */
[data-theme="dark"] .report-input:focus {
    border-color: rgba(96, 165, 250, 0.7);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.25);
}

[data-theme="dark"] .report-input::placeholder {
    color: rgba(148, 163, 184, 0.6);
}

/* =====================================================================
   DARK MODE PROFESSIONAL REDESIGN - High Specificity Override
   ===================================================================== */

/* Force dark background on modal box */
[data-theme="dark"] .report-modal-overlay .report-modal-box,
[data-theme="dark"] .report-modal-box.report-modal-box--formal {
    background: linear-gradient(160deg, #0c1222 0%, #162032 50%, #1a2744 100%) !important;
    border: 1px solid rgba(71, 85, 105, 0.35) !important;
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
}

/* Professional glass card effect for header */
[data-theme="dark"] .report-modal-box .report-modal-header {
    background: transparent !important;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(71, 85, 105, 0.2);
}

[data-theme="dark"] .report-modal-title {
    color: #f8fafc !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .report-modal-subtitle {
    color: rgba(148, 163, 184, 0.8) !important;
}

/* Ref bar - professional dark glass */
[data-theme="dark"] .report-modal-box .report-ref-bar {
    background: linear-gradient(135deg, 
        rgba(30, 41, 59, 0.9) 0%, 
        rgba(15, 23, 42, 0.95) 100%) !important;
    border: 1px solid rgba(71, 85, 105, 0.4) !important;
    backdrop-filter: blur(8px);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.03) inset !important;
}

[data-theme="dark"] .report-ref-value {
    color: #60a5fa !important;
    text-shadow: 0 0 15px rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .report-ref-label {
    color: #94a3b8 !important;
}

[data-theme="dark"] .report-ref-copy {
    background: rgba(51, 65, 85, 0.6) !important;
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .report-ref-copy:hover {
    background: rgba(96, 165, 250, 0.2) !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
    color: #60a5fa !important;
}

/* Status badge - glowing amber */
[data-theme="dark"] .report-status-pending {
    background: linear-gradient(135deg, 
        rgba(251, 191, 36, 0.18) 0%, 
        rgba(245, 158, 11, 0.12) 100%) !important;
    border: 1px solid rgba(251, 191, 36, 0.4) !important;
    color: #fbbf24 !important;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.15) !important;
}

/* Description box - professional dark glass */
[data-theme="dark"] .report-modal-box .report-modal-desc {
    background: linear-gradient(135deg, 
        rgba(37, 99, 235, 0.08) 0%, 
        rgba(30, 41, 59, 0.85) 100%) !important;
    border: 1px solid rgba(96, 165, 250, 0.2) !important;
    color: #cbd5e1 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="dark"] .report-modal-desc strong {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .report-desc-content {
    color: #e2e8f0 !important;
}

/* Scroll area background */
[data-theme="dark"] .report-modal-scroll {
    background: transparent !important;
}

/* All sections inside modal - dark glass cards */
[data-theme="dark"] .report-modal-box .report-modal-section {
    background: linear-gradient(145deg, 
        rgba(30, 41, 59, 0.85) 0%, 
        rgba(15, 23, 42, 0.9) 100%) !important;
    border: 1px solid rgba(71, 85, 105, 0.45) !important;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.02) inset !important;
}

[data-theme="dark"] .report-modal-box .report-modal-section:hover {
    background: linear-gradient(145deg, 
        rgba(51, 65, 85, 0.75) 0%, 
        rgba(30, 41, 59, 0.85) 100%) !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(96, 165, 250, 0.1) !important;
    transform: translateY(-2px);
}

/* Section titles - glowing */
[data-theme="dark"] .report-modal-box .report-modal-section-title {
    color: #f1f5f9 !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .report-modal-section-title::before {
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.4) !important;
}

/* Summary section - dark premium */
[data-theme="dark"] .report-modal-box .report-summary--formal {
    background: linear-gradient(160deg, 
        rgba(15, 23, 42, 0.95) 0%, 
        rgba(30, 41, 59, 0.85) 100%) !important;
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
}

/* Stats cards - premium dark glass */
[data-theme="dark"] .report-modal-box .report-stat-card {
    background: linear-gradient(160deg, 
        rgba(30, 41, 59, 1) 0%, 
        rgba(15, 23, 42, 0.98) 100%) !important;
    border: 1px solid rgba(71, 85, 105, 0.55) !important;
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.03) inset !important;
}

[data-theme="dark"] .report-modal-box .report-stat-card:hover {
    border-color: rgba(96, 165, 250, 0.5) !important;
    box-shadow: 
        0 12px 30px rgba(0, 0, 0, 0.45),
        0 0 25px rgba(96, 165, 250, 0.1) !important;
    transform: translateY(-3px);
}

[data-theme="dark"] .report-stat-label {
    color: #94a3b8 !important;
}

[data-theme="dark"] .report-stat-value {
    color: #f8fafc !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .report-stat-icon {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Accuracy ring */
[data-theme="dark"] .report-ring-bg {
    stroke: rgba(71, 85, 105, 0.5) !important;
}

[data-theme="dark"] .report-ring-fill {
    filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.5));
}

[data-theme="dark"] .report-ring-text {
    color: #60a5fa !important;
    font-weight: 700;
    text-shadow: 0 0 15px rgba(96, 165, 250, 0.4);
}

/* Summary grid */
[data-theme="dark"] .report-modal-box .report-summary-grid--formal {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(71, 85, 105, 0.35) !important;
}

[data-theme="dark"] .report-field-label {
    color: #94a3b8 !important;
}

[data-theme="dark"] .report-field-value {
    color: #e2e8f0 !important;
}

/* URL section */
[data-theme="dark"] .report-modal-box .report-url-section {
    background: linear-gradient(145deg, 
        rgba(30, 41, 59, 0.7) 0%, 
        rgba(15, 23, 42, 0.75) 100%) !important;
    border: 1px solid rgba(71, 85, 105, 0.4) !important;
}

[data-theme="dark"] .report-url-title,
[data-theme="dark"] .report-tech-title {
    color: #e2e8f0 !important;
}

/* Tech section */
[data-theme="dark"] .report-modal-box .report-tech-section {
    background: linear-gradient(145deg, 
        rgba(30, 41, 59, 0.7) 0%, 
        rgba(15, 23, 42, 0.75) 100%) !important;
    border: 1px solid rgba(71, 85, 105, 0.4) !important;
}

[data-theme="dark"] .report-tech-label {
    color: #94a3b8 !important;
}

[data-theme="dark"] .report-tech-value {
    color: #f1f5f9 !important;
}

/* Message box - code style */
[data-theme="dark"] .report-modal-box .report-message-box {
    background: linear-gradient(160deg, 
        rgba(15, 23, 42, 0.95) 0%, 
        rgba(30, 41, 59, 0.85) 100%) !important;
    border: 1px solid rgba(71, 85, 105, 0.45) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) inset !important;
}

[data-theme="dark"] .report-message-title,
[data-theme="dark"] .report-message-header {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .report-message-copy {
    background: rgba(51, 65, 85, 0.6) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .report-message-copy:hover {
    background: rgba(96, 165, 250, 0.2) !important;
    color: #60a5fa !important;
}

/* AI section */
[data-theme="dark"] .report-modal-box .report-ai-section {
    background: linear-gradient(145deg, 
        rgba(37, 99, 235, 0.12) 0%, 
        rgba(30, 64, 175, 0.08) 100%) !important;
    border: 1px solid rgba(96, 165, 250, 0.3) !important;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.1) !important;
}

[data-theme="dark"] .report-ai-title {
    color: #60a5fa !important;
    text-shadow: 0 0 15px rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .report-ai-content {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .report-ai-disclaimer {
    background: rgba(251, 191, 36, 0.12) !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
    color: #fbbf24 !important;
}

/* Input fields - professional dark */
[data-theme="dark"] .report-modal-box .report-input {
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
    color: #f1f5f9 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) inset !important;
}

[data-theme="dark"] .report-modal-box .report-input:hover {
    border-color: rgba(96, 165, 250, 0.4) !important;
    background: rgba(30, 41, 59, 0.85) !important;
}

[data-theme="dark"] .report-modal-box .report-input:focus {
    border-color: rgba(96, 165, 250, 0.7) !important;
    background: rgba(30, 41, 59, 0.9) !important;
    box-shadow: 
        0 0 0 3px rgba(96, 165, 250, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15) inset !important;
    outline: none;
}

[data-theme="dark"] .report-input::placeholder {
    color: rgba(148, 163, 184, 0.55) !important;
}

[data-theme="dark"] .report-input-label {
    color: #cbd5e1 !important;
}

/* Select dropdown - moved to final fixes section */

/* Checkboxes */
[data-theme="dark"] .report-modal-box .report-check {
    background: linear-gradient(145deg, 
        rgba(30, 41, 59, 0.8) 0%, 
        rgba(15, 23, 42, 0.85) 100%) !important;
    border: 1px solid rgba(71, 85, 105, 0.45) !important;
}

[data-theme="dark"] .report-modal-box .report-check:hover {
    background: linear-gradient(145deg, 
        rgba(51, 65, 85, 0.75) 0%, 
        rgba(30, 41, 59, 0.8) 100%) !important;
    border-color: rgba(52, 211, 153, 0.4) !important;
}

[data-theme="dark"] .report-check-box {
    background: rgba(15, 23, 42, 0.9) !important;
    border-color: rgba(71, 85, 105, 0.6) !important;
}

[data-theme="dark"] .report-check-text {
    color: #e2e8f0 !important;
}

/* Privacy note */
[data-theme="dark"] .report-modal-box .report-privacy-note {
    background: linear-gradient(145deg, 
        rgba(30, 41, 59, 0.7) 0%, 
        rgba(15, 23, 42, 0.75) 100%) !important;
    border: 1px solid rgba(71, 85, 105, 0.4) !important;
}

[data-theme="dark"] .report-privacy-content {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .report-privacy-content strong {
    color: #f1f5f9 !important;
}

/* Note box - warning style */
[data-theme="dark"] .report-modal-box .report-modal-note-box {
    background: linear-gradient(145deg, 
        rgba(251, 191, 36, 0.1) 0%, 
        rgba(217, 119, 6, 0.06) 100%) !important;
    border: 1px solid rgba(251, 191, 36, 0.35) !important;
}

[data-theme="dark"] .report-note-content {
    color: #fef3c7 !important;
}

[data-theme="dark"] .report-note-content strong {
    color: #fbbf24 !important;
}

/* Navigation buttons */
[data-theme="dark"] .report-nav-btn-prev {
    background: rgba(51, 65, 85, 0.6) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .report-nav-btn-prev:hover {
    background: rgba(71, 85, 105, 0.7) !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .report-nav-btn-next {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.35) !important;
}

[data-theme="dark"] .report-nav-btn-next:hover {
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5) !important;
    transform: translateY(-2px);
}

[data-theme="dark"] .report-nav-btn-submit {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] .report-nav-btn-submit:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5) !important;
    transform: translateY(-2px);
}

/* Footer */
[data-theme="dark"] .report-modal-box .report-modal-footer {
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(15, 23, 42, 0.4) 100%) !important;
    border-top: 1px solid rgba(71, 85, 105, 0.25) !important;
}

[data-theme="dark"] .report-modal-timestamp {
    color: rgba(148, 163, 184, 0.7) !important;
}

[data-theme="dark"] .report-modal-btn-secondary {
    background: rgba(51, 65, 85, 0.6) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(71, 85, 105, 0.4) !important;
}

[data-theme="dark"] .report-modal-btn-secondary:hover {
    background: rgba(71, 85, 105, 0.7) !important;
    color: #f1f5f9 !important;
}

/* Close button */
[data-theme="dark"] .report-modal-box .report-modal-close {
    background: rgba(51, 65, 85, 0.6) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .report-modal-box .report-modal-close:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}

/* Print button */
[data-theme="dark"] .report-modal-btn-icon {
    background: rgba(51, 65, 85, 0.6) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .report-modal-btn-icon:hover {
    background: rgba(96, 165, 250, 0.2) !important;
    color: #60a5fa !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
}

/* Help text */
[data-theme="dark"] .report-help {
    background: linear-gradient(135deg, 
        rgba(251, 191, 36, 0.08) 0%, 
        rgba(251, 191, 36, 0.04) 100%) !important;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
}

/* Progress steps */
[data-theme="dark"] .report-modal-box .report-progress-steps {
    background: linear-gradient(135deg, 
        rgba(30, 41, 59, 0.8) 0%, 
        rgba(15, 23, 42, 0.85) 100%) !important;
    border-bottom: 1px solid rgba(71, 85, 105, 0.3) !important;
}

/* Required pill */
[data-theme="dark"] .report-required-pill {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* Confirm summary */
[data-theme="dark"] .report-confirm-summary {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid rgba(71, 85, 105, 0.35) !important;
}

[data-theme="dark"] .report-confirm-item {
    background: linear-gradient(135deg, 
        rgba(51, 65, 85, 0.3) 0%, 
        rgba(30, 41, 59, 0.3) 100%) !important;
    border-left: 3px solid #60a5fa !important;
}

[data-theme="dark"] .report-confirm-label {
    color: #94a3b8 !important;
}

[data-theme="dark"] .report-confirm-value {
    color: #f1f5f9 !important;
}

/* Scroll bar styling */
[data-theme="dark"] .report-modal-scroll::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] .report-modal-scroll::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 4px;
}

[data-theme="dark"] .report-modal-scroll::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.6);
    border-radius: 4px;
}

[data-theme="dark"] .report-modal-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.5);
}

/* =====================================================================
   FINAL DARK MODE FIXES - Critical UI Elements
   ===================================================================== */

/* Fix Select Dropdowns - Remove multiple arrows issue */
select.report-input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px !important;
    padding-right: 44px !important;
    cursor: pointer;
}

[data-theme="dark"] select.report-input,
[data-theme="dark"] .report-modal-box select.report-input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: rgba(15, 23, 42, 0.9) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px !important;
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
    color: #f1f5f9 !important;
    padding-right: 44px !important;
}

[data-theme="dark"] select.report-input:hover,
[data-theme="dark"] .report-modal-box select.report-input:hover {
    background-color: rgba(30, 41, 59, 0.95) !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
}

[data-theme="dark"] select.report-input:focus,
[data-theme="dark"] .report-modal-box select.report-input:focus {
    background-color: rgba(30, 41, 59, 0.95) !important;
    border-color: rgba(96, 165, 250, 0.7) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

/* Fix X Close Button - Dark Background */
[data-theme="dark"] .report-modal-box .report-modal-btn-secondary,
[data-theme="dark"] .report-modal-overlay .report-modal-btn-secondary,
[data-theme="dark"] #reportCloseBtn {
    background: linear-gradient(145deg, rgba(51, 65, 85, 0.9), rgba(30, 41, 59, 0.95)) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .report-modal-box .report-modal-btn-secondary:hover,
[data-theme="dark"] .report-modal-overlay .report-modal-btn-secondary:hover,
[data-theme="dark"] #reportCloseBtn:hover {
    background: linear-gradient(145deg, rgba(71, 85, 105, 0.95), rgba(51, 65, 85, 0.95)) !important;
    color: #f1f5f9 !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
}

/* Fix Message Box - Proper Dark Background */
[data-theme="dark"] .report-modal-box .report-message-box,
[data-theme="dark"] .report-message-box,
[data-theme="dark"] #reportFieldMessage {
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9)) !important;
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) inset !important;
}

/* Fix Message Header/Title */
[data-theme="dark"] .report-message-wrap {
    background: transparent !important;
    padding: 0 !important;
}

[data-theme="dark"] .report-message-header {
    background: transparent !important;
    color: #f1f5f9 !important;
    padding: 0 !important;
    margin-bottom: 8px;
}

[data-theme="dark"] .report-message-title {
    color: #f1f5f9 !important;
    background: transparent !important;
}

[data-theme="dark"] .report-message-copy {
    background: rgba(51, 65, 85, 0.6) !important;
    border: 1px solid rgba(71, 85, 105, 0.4) !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .report-message-copy:hover {
    background: rgba(96, 165, 250, 0.2) !important;
    color: #60a5fa !important;
}

/* Fix Footer Section - Dark */
[data-theme="dark"] .report-modal-footer,
[data-theme="dark"] .report-modal-box .report-modal-footer {
    background: transparent !important;
    border-top: 1px solid rgba(71, 85, 105, 0.3) !important;
}

/* Fix Close Button in Footer - Remove white background */
[data-theme="dark"] .report-modal-actions,
[data-theme="dark"] .report-modal-footer .report-modal-actions {
    background: transparent !important;
}

[data-theme="dark"] .report-modal-btn.report-modal-btn-secondary,
[data-theme="dark"] .report-modal-actions .report-modal-btn-secondary,
[data-theme="dark"] #reportCloseBtn.report-modal-btn-secondary {
    background: linear-gradient(145deg, rgba(51, 65, 85, 0.95), rgba(30, 41, 59, 0.98)) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(71, 85, 105, 0.6) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.03) inset !important;
}

[data-theme="dark"] .report-modal-btn.report-modal-btn-secondary:hover,
[data-theme="dark"] .report-modal-actions .report-modal-btn-secondary:hover,
[data-theme="dark"] #reportCloseBtn.report-modal-btn-secondary:hover {
    background: linear-gradient(145deg, rgba(71, 85, 105, 0.98), rgba(51, 65, 85, 0.98)) !important;
    color: #f1f5f9 !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
}

/* Fix Section Headers with colored backgrounds */
[data-theme="dark"] .report-section-icon {
    filter: none !important;
}

/* Fix Required Pill */
[data-theme="dark"] .report-required-pill {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.15)) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

/* Fix Grid Layout for inputs */
[data-theme="dark"] .report-grid select.report-input {
    background-color: rgba(15, 23, 42, 0.9) !important;
}

/* Ensure all text inputs have proper dark styling */
[data-theme="dark"] .report-modal-box input.report-input,
[data-theme="dark"] .report-modal-box textarea.report-input {
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .report-modal-box input.report-input:hover,
[data-theme="dark"] .report-modal-box textarea.report-input:hover {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
}

[data-theme="dark"] .report-modal-box input.report-input:focus,
[data-theme="dark"] .report-modal-box textarea.report-input:focus {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: rgba(96, 165, 250, 0.7) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

[data-theme="dark"] .report-modal-box input.report-input::placeholder,
[data-theme="dark"] .report-modal-box textarea.report-input::placeholder {
    color: rgba(148, 163, 184, 0.6) !important;
}

/* Fix Help Text */
[data-theme="dark"] .report-help {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.06)) !important;
    border: 1px solid rgba(251, 191, 36, 0.25) !important;
    color: #fcd34d !important;
}

[data-theme="dark"] .report-help-icon {
    color: #fbbf24 !important;
}

@keyframes reportShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

@keyframes loadingPhaseChipIn {
    0% {
        opacity: 0;
        transform: translateX(-8px) scale(0.94);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes loadingPhaseDescIn {
    0% {
        opacity: 0;
        transform: translateY(4px);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* ========================================
   Usage Guide Modal Responsive Styles
   ======================================== */
#screenshotZoomModal .modal-body {
    padding: 0.5rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 140px);
    overscroll-behavior: contain;
}

/* Result popup overlay uses very high z-index (9998/9999).
   Lift only this modal + its backdrop above it while open. */
body.screenshot-zoom-open #screenshotZoomModal {
    z-index: 10020;
}

body.screenshot-zoom-open .modal-backdrop {
    z-index: 10010;
}

#screenshotZoomModal #screenshotZoomImage {
    max-width: 100%;
    height: auto;
    display: block;
}

#usageGuideModal .modal-content {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8);
}

#usageGuideModal .modal-body {
    padding: 0;
}

/* Close button over the image (match welcome popup style) */
#usageGuideModal .usage-guide-modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 2;
  border: none;
  outline: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

#usageGuideModal .usage-guide-modal__close:hover {
  background: rgba(0, 0, 0, 0.85);
}

#usageGuideScrollWrap {
    max-height: 90vh;
    -webkit-overflow-scrolling: touch;
}

#usageGuideImage {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 576px) {
    #usageGuideModalDialog {
        margin: 0.25rem;
        max-width: calc(100% - 0.5rem);
    }

    #usageGuideScrollWrap { max-height: 88vh; }
}

@media (min-width: 577px) and (max-width: 768px) {
    #usageGuideModalDialog {
        max-width: 95%;
        margin: 0.5rem auto;
    }

    #usageGuideScrollWrap {
        max-height: 90vh;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    #usageGuideModalDialog {
        max-width: 90%;
    }

    #usageGuideScrollWrap {
        max-height: 90vh;
    }
}

#usageGuideModalDialog.modal-fullscreen {
    margin: 0;
    max-width: 100%;
}

#usageGuideModalDialog.modal-fullscreen #usageGuideScrollWrap {
    max-height: 100vh;
}

@media (max-width: 576px) {
    #usageGuideModalDialog.modal-fullscreen #usageGuideScrollWrap {
        max-height: 100vh;
    }
}

[data-theme="dark"] #usageGuideModal .modal-content {
    color: #e0e0e0;
}

                            .tab-btn{ cursor:pointer; font-family: 'Mitr', sans-serif; display:inline-block; padding:12px 32px !important; min-width:260px !important; width:260px !important; font-size:16px; border-radius:12px !important; transition: transform .12s ease, box-shadow .12s ease !important; box-shadow: 0 6px 18px rgba(2,6,23,0.28); }
                            .tab-btn:not(.active){ background: rgba(255,255,255,0.03) !important; color: #e2e8f0 !important; border:1px solid rgba(255,255,255,0.06) !important; }
                            .tab-btn.active{ background: linear-gradient(135deg,#2b6cb0 0%,#5b21b6 100%) !important; color: #fff !important; border: none !important; box-shadow: 0 10px 30px rgba(43,76,176,0.18) !important; }
                            .tab-btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(2,6,23,0.28); }
                            .tab-content{ transition: opacity .18s ease; }
                            /* Ensure popup hidden by default if not controlled elsewhere */
                            #aboutUsPopup{ display: none; }

                            /* New team cards layout (luxury look) - creators adjusted to image-top layout */
                            .team-section{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:20px; align-items:start; padding:12px 6px; }
                            .team-section > h3, .team-section > h5 { grid-column: 1 / -1; text-align:center; margin:8px 0 12px; }
                            .team-section > h3.team-title { font-size: 32px; font-weight: 700; letter-spacing: -0.3px; margin-bottom:8px; }
                            @media (max-width: 600px) { .team-section > h3.team-title { font-size: 22px; } }
                            /* Default card (kept for sponsors) - bright, modern light cards */
                            .team-member{
                                --accent: rgba(10,14,25,0.04);
                                --card-bg: #ffffff;
                                --card-text: #071022;
                                background: var(--card-bg);
                                border:1px solid rgba(7,16,40,0.06);
                                padding:18px;
                                border-radius:14px;
                                box-shadow: 0 8px 20px rgba(2,6,23,0.06);
                                display:flex;
                                gap:16px;
                                align-items:flex-start;
                                position:relative;
                                overflow:visible;
                                color: var(--card-text);
                            }
                            /* Interactive polish: gentle sheen + subtle image motion */
                            .team-member{ will-change: box-shadow, transform; transition: box-shadow .32s cubic-bezier(.22,.9,.3,1), transform .32s cubic-bezier(.22,.9,.3,1); }
                            /* hover: soft lift and subtle accent shadow */
                            .team-member:hover{ transform: translateY(-6px); box-shadow: 0 24px 60px rgba(2,6,23,0.08); }
                            .team-member:active{ transform: translateY(-3px) scale(0.998); }

                            /* Sparkle overlay removed — using soft sheen and subtle inner frame instead */

                            /* Subtle sheen overlay that appears on hover (does not affect layout or fonts) */
                            .team-member::before{
                                content: "";
                                position: absolute;
                                inset: 0;
                                border-radius: 14px;
                                background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
                                opacity: 0;
                                transform: translateY(6px);
                                transition: opacity .5s ease, transform .6s cubic-bezier(.22,.9,.3,1);
                                pointer-events: none;
                                z-index: 0;
                            }
                            .team-member:hover::before{ opacity: 0.55; transform: translateY(0); }

                            /* Soft glow around the profile photo for a premium feel */
                            .member-photo{ position: relative; }
                            /* Smooth image transform on parent hover */
                            .member-photo img.profile-image{ transition: transform .44s cubic-bezier(.2,.9,.2,1); }
                            .team-member:hover .member-photo img.profile-image{ transform: translateY(-6px) scale(1.01); }

                            .member-photo::after{
                                content: "";
                                position: absolute;
                                left: 50%;
                                top: 50%;
                                transform: translate(-50%, -50%);
                                width: calc(100% + 18px);
                                height: calc(100% + 18px);
                                border-radius: 14px;
                                /* base soft glow; tinted by card's --accent via mix-blend */
                                background: radial-gradient(closest-side, rgba(255,255,255,0.6), rgba(255,255,255,0.18) 40%, transparent 60%);
                                filter: blur(18px);
                                opacity: 0.85;
                                pointer-events: none;
                                z-index: 0;
                                mix-blend-mode: screen;
                            }
                            /* Tint the photo glow using the card accent color */
                            #creatorsSection .team-member:nth-of-type(1){ --accent: rgba(245,184,28,0.08); --accent-text: #b87a00; --accent-glow: rgba(245,184,28,0.14); --card-text: #071022; }
                            #creatorsSection .team-member:nth-of-type(2){ --accent: rgba(34,197,94,0.08); --accent-text: #0f9b58; --accent-glow: rgba(34,197,94,0.14); --card-text: #071022; }
                            #creatorsSection .team-member:nth-of-type(3){ --accent: rgba(249,115,22,0.08); --accent-text: #c24100; --accent-glow: rgba(249,115,22,0.14); --card-text: #071022; }
                            #creatorsSection .team-member:nth-of-type(4){ --accent: rgba(168,85,247,0.08); --accent-text: #6b21a8; --accent-glow: rgba(168,85,247,0.14); --card-text: #071022; }
                            #creatorsSection .team-member:hover::after{ border-color: rgba(255,255,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
                            .member-photo img.profile-image{ position: relative; z-index: 2; }
                            .member-photo{ flex:0 0 220px; max-width:220px; display:flex; align-items:center; justify-content:center; }
                            .member-photo .profile-image{ width:auto; max-width:100%; height:auto; max-height:260px; object-fit:contain; border-radius:12px; display:block; box-shadow: 0 10px 30px rgba(2,6,23,0.35); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:6px; }
                            .member-info{ flex:1 1 auto; color: var(--card-text, #071022); font-size:15px; }
                            .member-info p{ margin:6px 0; color: var(--card-text, #071022); }
                            .team-member > .member-photo, .team-member > .member-info { position: relative; z-index: 2; }

                            /* Subtle white inner frame for each card */
                            .team-member::after{
                                content: "";
                                position: absolute;
                                left: 10px;
                                right: 10px;
                                top: 10px;
                                bottom: 10px;
                                border-radius: 12px;
                                border: 1px solid var(--accent);
                                box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
                                pointer-events: none;
                                z-index: 1;
                                transition: border-color .32s cubic-bezier(.22,.9,.3,1), box-shadow .32s cubic-bezier(.22,.9,.3,1);
                            }
                            /* hover accent: tint the inner frame and add a soft colored glow */
                            .team-member:hover::after{ border-color: var(--accent); box-shadow: 0 18px 48px var(--accent-glow); }
                            /* member name subtle color and glow transition on hover */
                            .member-name{ transition: color .32s cubic-bezier(.2,.9,.25,1), text-shadow .32s cubic-bezier(.2,.9,.25,1); }
                            .team-member:hover .member-name{ color: var(--accent-text, var(--card-text)); text-shadow: 0 8px 24px var(--accent-glow); }
                            /* Make label appear on its own line and value on next line (per requested layout) */
                            .member-info p strong{ color: var(--card-text, #071022); display:block; font-weight:800; margin-bottom:6px; }
                            .member-info p span.value{ display:block; color: var(--card-text, #071022); margin-left:0; }
                            @media (max-width:720px){ .team-member{ flex-direction:column; } .member-photo{ width:100%; max-width:100%; } .member-photo .profile-image{ height:200px; } }

                            /* Creators: image on top, name prominent, details below */
                            #creatorsSection .team-member{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px; border-radius:16px; background: var(--card-bg, #ffffff); border:1px solid rgba(7,16,40,0.06); }
                            #creatorsSection .member-photo{ width:100%; max-width:320px; margin:0 auto; }
                            #creatorsSection .member-photo .profile-image{ max-height:320px; width:auto; border-radius:14px; border:2px solid rgba(255,255,255,0.06); box-shadow: 0 18px 48px rgba(2,6,23,0.55); transform: translateY(-3px); background:rgba(255,255,255,0.02); padding:6px; }
                            #creatorsSection .member-name{ font-size:22px; font-weight:900; color: var(--card-text, #071022); margin-top:4px; margin-bottom:0; text-shadow: 0 2px 8px rgba(7,16,34,0.06); }
                            #creatorsSection .member-role{ font-size:13.5px; font-weight:400; letter-spacing: 0.2px; color: #0f172a; margin-top:-4px; margin-bottom:10px; }
                            #creatorsSection .member-info{ width:100%; text-align:center; padding-top:6px; max-width:88%; margin:0 auto; }
                            #creatorsSection .member-info p{ margin:4px 0; line-height:1.25; }
                            /* keep label and value on same line */
                            #creatorsSection .member-info p strong{ display:inline-block; color: rgba(7,16,34,0.78); font-weight:700; margin-right:8px; }
                            #creatorsSection .member-info p span.value{ display:inline; color: var(--card-text, #071022); }
                            @media (max-width:900px){ #creatorsSection .team-member{ padding:14px; } #creatorsSection .member-photo .profile-image{ max-height:240px; transform:none; } }

                            /* Sponsors grid - two-column formal layout */
                            .sponsor-grid{ display:grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap:18px; align-items:start; }
                            .sponsor-card{
                                --accent: rgba(37,99,235,0.22);
                                background: var(--card-bg, #fffdf8);
                                border:1px solid rgba(7,16,40,0.06);
                                padding:16px 18px;
                                border-radius:12px;
                                display:flex;
                                flex-direction:row;
                                gap:14px;
                                align-items:center;
                                box-shadow: 0 8px 24px rgba(2,6,23,0.06);
                                border-left:6px solid color-mix(in srgb, var(--accent) 75%, rgba(255,255,255,0));
                            }
                            /* hide circular logo placeholder (we only show names) */
                            .sponsor-logo{ display:none !important; }
                            .sponsor-name{ font-size:18px; color: var(--card-text, #071022); font-weight:800; margin:0; }
                            .sponsor-card .sponsor-meta{ font-size:13px; color: rgba(7,16,34,0.55); margin-top:4px; }
                            @media (max-width:900px){ .sponsor-grid{ grid-template-columns: 1fr; } .sponsor-card{ padding:12px; } }

                            /* Dark mode: make all white/light cards in About modal deep blue with white text */
                            [data-theme="dark"] #aboutUsPopup .team-member,
                            [data-theme="dark"] #aboutUsPopup .sponsor-card{
                                --card-bg: #0b1220;
                                --card-text: #f8fafc;
                                --accent: rgba(59,130,246,0.22);
                                --accent-glow: rgba(59,130,246,0.18);
                                --accent-text: var(--card-text);
                                background-color: var(--card-bg);
                                background-image: linear-gradient(180deg, rgba(59,130,246,0.16) 0%, rgba(59,130,246,0) 54px);
                                color: var(--card-text);
                                border-color: rgba(148,163,184,0.18);
                                box-shadow: 0 14px 42px rgba(2,6,23,0.55);
                            }
                            /* restore visible left accent bar for sponsors in dark mode (border-color above would otherwise wash it out) */
                            [data-theme="dark"] #aboutUsPopup .sponsor-card{ border-left-color: rgba(96,165,250,0.85); }
                            [data-theme="dark"] #aboutUsPopup .member-info,
                            [data-theme="dark"] #aboutUsPopup .member-info p{ color: var(--card-text) !important; }
                            [data-theme="dark"] #aboutUsPopup .sponsor-card .sponsor-meta{ color: rgba(248,250,252,0.72); }
                            [data-theme="dark"] #aboutUsPopup .team-member::after{ border-color: rgba(148,163,184,0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
                            [data-theme="dark"] #aboutUsPopup .team-member:hover::after{ border-color: rgba(59,130,246,0.55); box-shadow: 0 18px 54px rgba(59,130,246,0.20); }
                            [data-theme="dark"] #aboutUsPopup #creatorsSection .member-info p strong{ color: rgba(248,250,252,0.78); }
                            [data-theme="dark"] #aboutUsPopup #creatorsSection .member-role{ color: rgba(248,250,252,0.72); }
                            [data-theme="dark"] #aboutUsPopup .team-member:hover .member-name{ color: var(--card-text); text-shadow: 0 10px 30px rgba(59,130,246,0.22); }

                            /* Allow cards to use full column width (expanded) */
                            .team-section .team-member,
                            .sponsor-card {
                                max-width: none;
                                margin-left: 0;
                                margin-right: 0;
                            }

/* ==============================
   Moved from web/index.html
   Keep at end to preserve cascade
   ============================== */

/*
    NOTE: ปรับหน้าตา/ขนาด popup “รายงานความถูกต้องของผลการวิเคราะห์”
    และเพิ่มสไตล์รองรับฟอร์มรายงานเวอร์ชันใหม่
*/
.report-modal-overlay{
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.report-modal-box{
    width: min(1520px, 99vw);
    max-height: 98vh;
    background: #ffffff;
    border-radius: 22px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.45),
        0 10px 22px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateZ(0);
}

.report-modal-header{
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    position: relative;
}

.report-modal-header::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, #2563eb 0%, #0ea5e9 50%, #4f46e5 100%);
}

.report-modal-title{
    font-family: 'Mitr', system-ui, -apple-system, sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: 0.2px;
    line-height: 1.2;
}

.report-modal-close{
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(248, 250, 252, 0.9);
    color: #0f172a;
    font-size: 26px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.report-modal-close:hover{
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.12);
}

.report-modal-desc{
    padding: 14px 20px;
    background: #f8fafc;
    color: #334155;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 14.5px;
    line-height: 1.55;
}

.report-modal-scroll{
    padding: 18px 20px;
    overflow: auto;
    flex: 1;
    background: radial-gradient(1200px 500px at 20% 0%, rgba(37,99,235,0.06), rgba(255,255,255,0)) , #ffffff;
}

.report-modal-section{
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 18px;
    box-shadow: none;
}

.report-modal-section-title{
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 10px;
    letter-spacing: 0.15px;
}

/* --- New form layout (summary + checked text + improved inputs) --- */
.report-modal-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.report-required-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    color: #0b1220;
    background: linear-gradient(90deg, #fbbf24 0%, #fb7185 100%);
    box-shadow: 0 10px 30px rgba(251, 191, 36, 0.18);
}

.report-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 16px;
    background: #f8fafc;
}

@media (max-width: 760px) {
    .report-summary-grid { grid-template-columns: 1fr; }
}

.report-field {
    padding: 6px 4px;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.report-field-label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.report-field-value {
    font-size: 14px;
    color: #0f172a;
    word-break: break-word;
}

.report-message-wrap {
    border-radius: 18px;
    border: 1px solid rgba(37, 99, 235, 0.22);
    background: linear-gradient(180deg, rgba(37,99,235,0.08) 0%, rgba(255,255,255,1) 60%, rgba(248,250,252,1) 100%);
    box-shadow: 0 20px 55px rgba(2, 6, 23, 0.14);
    overflow: hidden;
}

.report-message-title {
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    background: rgba(248, 250, 252, 0.92);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.report-message-box {
    padding: 16px 14px;
    min-height: 160px;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 14px;
    line-height: 1.6;
    color: #0f172a;
}

.report-input {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #ffffff;
    color: #0f172a;
    padding: 12px 12px;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.04);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.report-input:focus {
    border-color: rgba(37, 99, 235, 0.55);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

.report-help {
    color: #64748b;
    font-size: 12px;
    margin-top: 8px;
}

/* (remove duplicate .report-required-pill definition — keep the newer gradient pill above) */

.report-modal-actions{
    padding: 14px 20px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.report-modal-btn{
    border-radius: 12px;
    padding: 10px 16px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.report-modal-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 12px 20px rgba(0,0,0,0.14);
}

.report-modal-btn-secondary{
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.14);
    color: #0f172a;
}

.report-modal-btn-primary{
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    border: 1px solid rgba(37, 99, 235, 0.35);
    color: #ffffff;
}

/* Responsive tweaks */
@media (max-width: 576px){
    .report-modal-overlay{ padding: 8px; }
    .report-modal-box{ width: 100%; max-height: 98vh; border-radius: 18px; }
    .report-modal-header{ padding: 16px 16px; }
    .report-modal-desc{ padding: 12px 16px; }
    .report-modal-scroll{ padding: 14px 16px; }
    .report-modal-actions{ padding: 12px 16px; }
}

/* Additional mobile compression for Report Accuracy modal: reduce overall height and paddings
   Keeps content scrollable and does not change any JS logic or data handling */
@media (max-width: 640px) {
    .report-modal-box {
        width: calc(100% - 20px) !important;
        max-height: 86vh !important;
        border-radius: 14px !important;
    }
    .report-modal-header {
        padding: 12px 12px !important;
    }
    .report-modal-title {
        font-size: 16px !important;
    }
    .report-modal-desc {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    .report-modal-scroll {
        padding: 10px 12px !important;
        max-height: calc(86vh - 120px) !important;
        overflow: auto !important;
    }
    .report-modal-section {
        margin-bottom: 10px !important;
    }
    .report-message-box {
        min-height: 100px !important;
        padding: 10px !important;
        font-size: 13px !important;
    }
    .report-modal-actions {
        padding: 8px 10px !important;
        gap: 8px !important;
    }
    .report-modal-btn {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    .report-modal-box .popup-result-body, .report-modal-box .popup-result-section {
        /* allow components inside modal to shrink */
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}

/* Inline mobile override: force news tabs into a single centered row with smaller buttons */
@media (max-width: 520px) {
    .home-news-panel .home-news-tabs,
    .home-news-tabs {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 6px !important;
        width: 100% !important;
        overflow: hidden !important;
        flex-wrap: nowrap !important;
    }

    /* Make three equal-width pills that fit on one line */
    .home-news-tab {
        flex: 0 0 calc((100% - 16px) / 3) !important;
        max-width: calc((100% - 16px) / 3) !important;
        min-width: 0 !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 5px 6px !important;
        font-size: 0.60rem !important;
        line-height: 1 !important;
        border-radius: 999px !important;
        box-shadow: 0 4px 10px rgba(2,6,23,0.10) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
        letter-spacing: 0.01em !important;
    }

    .home-news-tab.active {
        transform: none !important;
    }
}

/* Mobile-only landing adjustments: center hero block vertically and nudge background */
@media (max-width: 640px) {
    body {
        background-position: center 65% !important;
    }
    .container-main {
        min-height: calc(100vh - 120px);
        padding-top: 0;
        padding-bottom: 6vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
    }
    .name_sys, .name_systh {
        margin-top: 8px;
    }
    .desc_sys1 {
        margin-top: 6px;
        font-size: 18px;
    }
    .home-duo-wrap {
        margin-top: 18px;
    }
    .sms-input-panel {
        margin-top: 8px;
    }
    .stats-bar {
        margin-top: 18px;
    }
    .hamburger-menu {
        z-index: 10001;
    }
}