@charset "utf-8";

:root {
    --lg-bg: #05080d;
    --lg-surface: #0b1119;
    --lg-surface-2: #101923;
    --lg-line: rgba(214, 174, 79, .26);
    --lg-gold: #e5b84c;
    --lg-gold-light: #ffe39a;
    --lg-teal: #26e2c0;
    --lg-text: #f6f4ec;
    --lg-muted: #b8c2cc;
}

.lottogpt-page {
    background: var(--lg-bg);
    color: var(--lg-text);
}

.lg-home {
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 18%, rgba(24, 122, 160, .15), transparent 30%),
        radial-gradient(circle at 80% 22%, rgba(229, 184, 76, .10), transparent 28%),
        var(--lg-bg);
    padding-top: 78px;
}

.lg-shell {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
}

.lg-hero {
    min-height: 690px;
    padding: 72px 0 46px;
    border-bottom: 1px solid rgba(229,184,76,.14);
    position: relative;
}

.lg-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(38,226,192,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(38,226,192,.025) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, #000, transparent 90%);
}

.lg-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 56px;
    align-items: center;
}

.lg-eyebrow,
.lg-section-title p {
    color: var(--lg-teal);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .16em;
}

.lg-hero-copy h1 {
    margin: 16px 0 24px;
    color: #fff;
    font-size: clamp(48px, 5vw, 76px);
    line-height: 1.12;
    letter-spacing: -.055em;
}

.lg-hero-copy h1 strong {
    color: transparent;
    background: linear-gradient(90deg, #fff2b7, var(--lg-gold), #b78528);
    -webkit-background-clip: text;
    background-clip: text;
}

.lg-lead {
    max-width: 610px;
    color: #bac2cc;
    font-size: 18px;
    line-height: 1.75;
    word-break: keep-all;
}

.lg-actions {
    display: flex;
    gap: 14px;
    margin-top: 34px;
}

.lg-btn {
    display: inline-flex;
    min-height: 50px;
    padding: 0 24px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    transition: transform .2s, box-shadow .2s;
}

.lg-btn:hover {
    transform: translateY(-2px);
}

.lg-btn-primary {
    color: #111 !important;
    background: linear-gradient(135deg, #9b6e1d, #f4cd67 55%, #b27a1e);
    box-shadow: 0 12px 30px rgba(229,184,76,.18);
}

.lg-btn-secondary {
    color: #fff !important;
    border: 1px solid rgba(229,184,76,.42);
    background: rgba(255,255,255,.025);
}

.lg-trust-list {
    display: flex;
    gap: 25px;
    margin-top: 36px;
    color: #9ea9b6;
    font-size: 15px;
}

.lg-trust-list span {
    display: block;
    margin-bottom: 7px;
    color: var(--lg-teal);
    font-family: Montserrat, sans-serif;
    font-weight: 800;
}

.lg-analysis-card,
.lg-panel,
.lg-process-grid article,
.lg-metric-grid article {
    border: 1px solid rgba(229,184,76,.20);
    background: linear-gradient(145deg, rgba(14,22,32,.96), rgba(6,11,17,.96));
    box-shadow: inset 0 1px rgba(255,255,255,.025), 0 18px 60px rgba(0,0,0,.22);
}

.lg-analysis-card {
    padding: 26px;
    border-color: rgba(38,226,192,.40);
    border-radius: 18px;
}

.lg-card-head,
.lg-panel-head,
.lg-number-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lg-card-head {
    color: #edf4f5;
    font-weight: 700;
}

.lg-card-head > span {
    color: var(--lg-teal);
    font-size: 15px;
}

.lg-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--lg-teal);
    box-shadow: 0 0 14px var(--lg-teal);
}

.lg-analysis-main {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    align-items: center;
    margin: 28px 0 22px;
}

.lg-gauge {
    width: 160px;
    height: 160px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--lg-teal) 0 94%, #1a2631 94% 100%);
    box-shadow: 0 0 32px rgba(38,226,192,.18);
}

.lg-gauge::before {
    content: "";
    grid-area: 1/1;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: #081018;
}

.lg-gauge div {
    grid-area: 1/1;
    z-index: 1;
    text-align: center;
}

.lg-gauge strong {
    display: block;
    font: 800 34px/1 Montserrat, sans-serif;
    color: #fff;
}

.lg-gauge span {
    display: block;
    margin-top: 8px;
    color: #b7c1cc;
    font-size: 15px;
}

.lg-network {
    min-height: 165px;
    position: relative;
    border-radius: 14px;
    background:
        radial-gradient(circle at 15% 50%, rgba(38,226,192,.95) 0 3px, transparent 4px),
        radial-gradient(circle at 38% 22%, rgba(38,226,192,.95) 0 3px, transparent 4px),
        radial-gradient(circle at 55% 68%, rgba(229,184,76,.95) 0 3px, transparent 4px),
        radial-gradient(circle at 76% 28%, rgba(38,226,192,.95) 0 3px, transparent 4px),
        radial-gradient(circle at 90% 60%, rgba(229,184,76,.95) 0 3px, transparent 4px),
        linear-gradient(25deg, transparent 48%, rgba(38,226,192,.35) 49% 50%, transparent 51%),
        linear-gradient(-18deg, transparent 48%, rgba(229,184,76,.28) 49% 50%, transparent 51%);
    border: 1px solid rgba(38,226,192,.09);
}

.lg-network span {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lg-teal);
    box-shadow: 0 0 13px var(--lg-teal);
    animation: lgPulse 2s infinite alternate;
}

.lg-network span:nth-child(1){left:12%;top:20%}
.lg-network span:nth-child(2){left:31%;top:62%;animation-delay:.2s}
.lg-network span:nth-child(3){left:49%;top:30%;animation-delay:.5s}
.lg-network span:nth-child(4){left:65%;top:72%;animation-delay:.8s}
.lg-network span:nth-child(5){left:80%;top:18%;animation-delay:1s}
.lg-network span:nth-child(6){left:91%;top:54%;animation-delay:1.2s}

@keyframes lgPulse {
    to { transform: scale(1.8); opacity: .45; }
}

.lg-progress {
    height: 4px;
    overflow: hidden;
    border-radius: 99px;
    background: #18222c;
}

.lg-progress span {
    display: block;
    width: 94%;
    height: 100%;
    background: linear-gradient(90deg, var(--lg-teal), #4bd4ff);
}

.lg-number-title {
    margin: 24px 0 13px;
}

.lg-number-title small {
    color: #697787;
}

.lg-balls {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 13px;
}

.lg-balls li {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #15100a;
    background: radial-gradient(circle at 35% 30%, #fff5b9, #e2ae3c 45%, #755013 100%);
    font: 800 22px Montserrat, sans-serif;
    box-shadow: 0 0 0 3px rgba(229,184,76,.13), 0 7px 22px rgba(229,184,76,.16);
}

.lg-card-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 22px;
}

.lg-card-stats div {
    padding: 13px 10px;
    text-align: center;
    border-radius: 9px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
}

.lg-card-stats span,
.lg-metric-grid span,
.lg-metric-grid small {
    display: block;
    color: #b7c1cc;
    font-size: 15px;
}

.lg-card-stats strong {
    display: block;
    margin-top: 7px;
    color: #dce6e8;
    font-size: 15px;
}

.lg-metrics {
    padding: 26px 0;
}

.lg-metric-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.lg-metric-grid article {
    min-height: 128px;
    padding: 22px;
    border-radius: 13px;
}

.lg-metric-grid strong {
    display: block;
    margin: 14px 0 8px;
    color: #fff;
    font: 700 27px Montserrat, sans-serif;
}

.lg-teal {
    color: var(--lg-teal) !important;
}

.lg-section {
    padding: 76px 0;
}

.lg-section-dark {
    padding-top: 28px;
}

.lg-section-title {
    margin-bottom: 30px;
    text-align: center;
}

.lg-section-title h2 {
    margin-top: 10px;
    color: #fff;
    font-size: 30px;
}

.lg-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.lg-process-grid article {
    min-height: 220px;
    padding: 28px;
    border-radius: 14px;
    position: relative;
}

.lg-process-grid b {
    position: absolute;
    right: 20px;
    top: 17px;
    color: rgba(229,184,76,.25);
    font: 800 32px Montserrat, sans-serif;
}

.lg-process-grid i {
    color: var(--lg-teal);
    font-size: 30px;
}

.lg-process-grid h3 {
    margin: 25px 0 12px;
    color: #fff;
    font-size: 19px;
}

.lg-process-grid p {
    color: #8f9ba8;
    line-height: 1.65;
    word-break: keep-all;
}

.lg-content-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr .8fr;
    gap: 14px;
}

.lg-panel {
    min-height: 285px;
    padding: 25px;
    border-radius: 14px;
}

.lg-panel-head {
    margin-bottom: 22px;
}

.lg-panel h2 {
    color: #fff;
    font-size: 20px;
}

.lg-panel-head a {
    color: var(--lg-teal);
    font-size: 15px;
}

.lg-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.lg-insight-grid div {
    min-height: 158px;
    padding: 20px 15px;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.055);
}

.lg-insight-grid span,
.lg-insight-grid small {
    display: block;
    color: #b7c1cc;
    font-size: 15px;
}

.lg-insight-grid strong {
    display: block;
    margin: 23px 0 15px;
    color: #fff;
    font: 700 19px Montserrat, sans-serif;
}

.lg-notice-list li {
    min-height: 52px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 15px;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.lg-notice-list a {
    color: #d5dde5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lg-notice-list time {
    color: #667382;
    font-size: 15px;
}

.lg-empty {
    color: #b7c1cc;
}

.lg-premium-panel {
    border-color: rgba(229,184,76,.45);
    background:
        radial-gradient(circle at 90% 15%, rgba(229,184,76,.16), transparent 30%),
        linear-gradient(145deg, #17150e, #090d12);
}

.lg-premium-label {
    color: var(--lg-gold);
    font: 700 12px Montserrat, sans-serif;
    letter-spacing: .12em;
}

.lg-premium-panel h2 {
    margin: 17px 0;
    line-height: 1.45;
}

.lg-premium-panel ul {
    margin-bottom: 24px;
    color: #a8afb6;
    line-height: 1.9;
}

.lg-premium-panel li::before {
    content: "✓";
    margin-right: 8px;
    color: var(--lg-gold);
}

.lg-quote {
    padding: 28px 0;
    color: var(--lg-gold-light);
    text-align: center;
    border-top: 1px solid var(--lg-line);
    border-bottom: 1px solid var(--lg-line);
    background: radial-gradient(circle at 50% 50%, rgba(229,184,76,.08), transparent 60%);
}

.lottogpt-page .footer {
    background: #04070b;
    color: #b7c1cc;
}

.lottogpt-page .footer .footer_top {
    border-color: rgba(229,184,76,.16);
}

.lottogpt-page .footer_top ul li a,
.lottogpt-page .footer .footer_bottom .f_l li,
.lottogpt-page .footer .footer_bottom .f_r li {
    color: #b7c1cc;
}

.lottogpt-page .footer .footer_bottom .f_l li:nth-child(1),
.lottogpt-page .footer .footer_bottom .f_r li:nth-child(1) {
    color: var(--lg-gold-light);
}

@media (max-width: 1100px) {
    .lg-hero-grid,
    .lg-content-grid {
        grid-template-columns: 1fr;
    }

    .lg-metric-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 760px) {
    .lg-shell {
        width: min(100% - 28px, 1320px);
    }

    .lg-hero {
        padding-top: 45px;
    }

    .lg-analysis-main,
    .lg-process-grid,
    .lg-metric-grid,
    .lg-insight-grid {
        grid-template-columns: 1fr;
    }

    .lg-gauge {
        margin: 0 auto;
    }

    .lg-balls {
        grid-template-columns: repeat(3, 1fr);
    }

    .lg-card-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .lg-actions,
    .lg-trust-list {
        flex-direction: column;
    }
}

/* LottoGPT Home v2 */
.lg-live-badge {
    display: inline-flex;
    min-height: 34px;
    padding: 0 13px;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(38,226,192,.24);
    border-radius: 999px;
    background: rgba(38,226,192,.045);
    color: #a8fff0;
    font: 700 11px Montserrat, sans-serif;
    letter-spacing: .12em;
}

.lg-live-badge span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lg-teal);
    box-shadow: 0 0 15px var(--lg-teal);
    animation: lgLive 1.3s infinite alternate;
}

@keyframes lgLive {
    to { opacity: .35; transform: scale(.75); }
}

.lg-orbit {
    min-height: 188px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 15px;
    border: 1px solid rgba(38,226,192,.12);
    background:
        radial-gradient(circle at 50% 50%, rgba(38,226,192,.13), transparent 35%),
        linear-gradient(rgba(38,226,192,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(38,226,192,.03) 1px, transparent 1px);
    background-size: auto, 24px 24px, 24px 24px;
}

.lg-orbit-core {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    z-index: 3;
    border-radius: 50%;
    color: #07100f;
    background: radial-gradient(circle at 35% 30%, #b9fff4, var(--lg-teal) 45%, #158d7d 100%);
    font: 900 22px Montserrat, sans-serif;
    box-shadow: 0 0 32px rgba(38,226,192,.5);
}

.lg-orbit-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(38,226,192,.32);
}

.lg-orbit-ring-1 {
    width: 142px;
    height: 142px;
    animation: lgRotate 10s linear infinite;
}

.lg-orbit-ring-2 {
    width: 190px;
    height: 96px;
    transform: rotate(-24deg);
    border-color: rgba(229,184,76,.28);
    animation: lgRotateReverse 13s linear infinite;
}

.lg-orbit-node {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--lg-teal);
    box-shadow: 0 0 13px var(--lg-teal);
}

.lg-orbit-node-1 { top: 22px; left: 50%; }
.lg-orbit-node-2 { right: 34px; top: 50%; background: var(--lg-gold); box-shadow: 0 0 13px var(--lg-gold); }
.lg-orbit-node-3 { bottom: 25px; left: 34%; }
.lg-orbit-node-4 { left: 32px; top: 38%; background: var(--lg-gold); box-shadow: 0 0 13px var(--lg-gold); }

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

@keyframes lgRotateReverse {
    from { transform: rotate(-24deg); }
    to { transform: rotate(-384deg); }
}

.lg-data-ticker {
    overflow: hidden;
    border-top: 1px solid rgba(38,226,192,.12);
    border-bottom: 1px solid rgba(38,226,192,.12);
    background: rgba(5,11,16,.94);
}

.lg-ticker-track {
    width: max-content;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 28px;
    color: #b7c1cc;
    font: 700 11px Montserrat, sans-serif;
    letter-spacing: .12em;
    animation: lgTicker 22s linear infinite;
}

.lg-ticker-track span:nth-of-type(odd) {
    color: var(--lg-teal);
}

.lg-ticker-track b {
    color: var(--lg-gold);
}

@keyframes lgTicker {
    from { transform: translateX(0); }
    to { transform: translateX(-38%); }
}

.lg-analysis-card {
    position: relative;
    overflow: hidden;
}

.lg-analysis-card::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -120px;
    bottom: -150px;
    border-radius: 50%;
    background: rgba(229,184,76,.08);
    filter: blur(18px);
    pointer-events: none;
}

/* LottoGPT requested refinements */
.lg-hero-copy h1,
.lg-hero-copy h1 strong {
    word-break: keep-all;
    overflow-wrap: normal;
}

.lottogpt-hidden-signup,
.lottogpt-hidden-menu {
    display: none !important;
}


/* LottoGPT latest result card */
.lg-lotto-result-card {
    padding: 26px;
    border: 1px solid rgba(229,184,76,.34);
    border-radius: 18px;
    background:
        radial-gradient(circle at 90% 5%, rgba(229,184,76,.12), transparent 30%),
        linear-gradient(145deg, rgba(14,22,32,.98), rgba(6,11,17,.98));
    box-shadow: inset 0 1px rgba(255,255,255,.03), 0 18px 60px rgba(0,0,0,.26);
}

.lg-result-head,
.lg-result-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.lg-result-head p {
    margin-bottom: 7px;
    color: var(--lg-teal);
    font: 700 11px Montserrat, sans-serif;
    letter-spacing: .14em;
}

.lg-result-head h2 {
    color: #fff;
    font-size: 21px;
}

.lg-result-source {
    padding: 7px 10px;
    border: 1px solid rgba(229,184,76,.3);
    border-radius: 999px;
    color: var(--lg-gold-light);
    font-size: 15px;
}

.lg-result-empty {
    margin: 24px 0 20px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    background: rgba(255,255,255,.02);
}

.lg-result-round {
    text-align: center;
}

.lg-result-round strong,
.lg-result-round span {
    display: block;
}

.lg-result-round strong {
    color: #fff;
    font-size: 18px;
}

.lg-result-round span {
    margin-top: 7px;
    color: #b7c1cc;
    font-size: 15px;
}

.lg-winning-balls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.lg-lotto-ball {
    width: 48px;
    height: 48px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font: 800 17px Montserrat, sans-serif;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
    box-shadow:
        inset 7px 7px 12px rgba(255,255,255,.18),
        inset -7px -7px 13px rgba(0,0,0,.25),
        0 8px 18px rgba(0,0,0,.25);
}

.lg-ball-yellow {
    background: #d8a72e;
}

.lg-ball-blue {
    background: #3b83c5;
}

.lg-ball-red {
    background: #d9534f;
}

.lg-ball-gray {
    background: #68727d;
}

.lg-ball-green {
    background: #45a76c;
}

.lg-ball-bonus {
    background: linear-gradient(145deg, #8a641c, #e5b84c);
}

.lg-bonus-plus {
    margin: 0 2px;
    color: var(--lg-gold-light);
    font-size: 22px;
}

.lg-prize-table {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
}

.lg-prize-row {
    min-height: 42px;
    display: grid;
    grid-template-columns: 70px 1fr 1.5fr;
    align-items: center;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255,255,255,.055);
    color: #aeb8c3;
    font-size: 15px;
}

.lg-prize-row:last-child {
    border-bottom: 0;
}

.lg-prize-row strong {
    color: var(--lg-gold-light);
}

.lg-prize-head {
    min-height: 38px;
    background: rgba(255,255,255,.035);
    color: #b7c1cc;
    font-size: 15px;
}

.lg-result-footer {
    margin-top: 16px;
    color: #667382;
    font-size: 15px;
}

.lg-result-footer a {
    color: var(--lg-teal);
}

@media (max-width: 760px) {
    .lg-lotto-result-card {
        padding: 20px;
    }

    .lg-lotto-ball {
        width: 42px;
        height: 42px;
        font-size: 15px;
    }

    .lg-prize-row {
        grid-template-columns: 52px 1fr 1.4fr;
        padding: 0 10px;
    }

    .lg-result-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Latest result readability */
.lg-result-round strong {
    font-size: 22px;
}

.lg-result-round span {
    font-size: 15px;
}

.lg-prize-row {
    font-size: 15px;
}

.lg-prize-head {
    font-size: 15px;
}

.lg-prize-row strong {
    font-size: 15px;
}

@media (max-width: 760px) {
    .lg-result-round strong {
        font-size: 20px;
    }

    .lg-result-round span {
        font-size: 15px;
    }

    .lg-prize-row {
        font-size: 15px;
    }

    .lg-prize-head {
        font-size: 15px;
    }

    .lg-prize-row strong {
        font-size: 15px;
    }
}


/* LottoGPT footer v2 */
.lottogpt-page .lg-footer {
    position: relative;
    padding: 64px 0 28px;
    border-top: 1px solid rgba(229, 184, 76, .18);
    background:
        radial-gradient(circle at 15% 0%, rgba(30, 199, 190, .07), transparent 32%),
        radial-gradient(circle at 85% 10%, rgba(229, 184, 76, .08), transparent 30%),
        #04070b;
    color: #b7c1cc;
}

.lg-footer-shell {
    width: min(1320px, calc(100% - 40px));
    margin: 0 auto;
}

.lg-footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.25fr;
    gap: 48px;
    padding-bottom: 42px;
}

.lg-footer-logo {
    display: inline-block;
    color: #fff;
    font: 800 28px Montserrat, sans-serif;
    letter-spacing: -.04em;
}

.lg-footer-logo span {
    color: var(--lg-gold-light);
}

.lg-footer-brand p {
    max-width: 420px;
    margin-top: 18px;
    color: #b7c1cc;
    font-size: 15px;
    line-height: 1.8;
}

.lg-footer-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--lg-teal);
    font: 700 10px Montserrat, sans-serif;
    letter-spacing: .12em;
}

.lg-footer-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lg-teal);
    box-shadow: 0 0 10px rgba(30, 199, 190, .75);
}

.lg-footer-links,
.lg-footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
}

.lg-footer-links strong,
.lg-footer-contact strong {
    margin-bottom: 7px;
    color: var(--lg-gold-light);
    font: 700 12px Montserrat, sans-serif;
    letter-spacing: .1em;
}

.lg-footer-links a,
.lg-footer-contact p,
.lg-footer-contact a {
    margin: 0;
    color: #b7c1cc;
    font-size: 15px;
    line-height: 1.55;
    transition: color .2s ease;
}

.lg-footer-links a:hover,
.lg-footer-contact a:hover {
    color: #fff;
}

.lg-footer-company {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: 15px;
    line-height: 1.6;
}

.lg-footer-company strong {
    width: 100%;
    color: #d7dde4;
    font-size: 15px;
}

.lg-footer-notice {
    margin-top: 22px;
    padding: 17px 20px;
    border: 1px solid rgba(229, 184, 76, .13);
    border-radius: 10px;
    background: rgba(229, 184, 76, .035);
    color: #6f7a86;
    font-size: 15px;
    line-height: 1.75;
}

.lg-footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 24px;
    color: #58636e;
    font: 500 10px Montserrat, sans-serif;
    letter-spacing: .04em;
}

.lottogpt-page #top_btn {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(229, 184, 76, .25);
    border-radius: 50%;
    background: rgba(7, 12, 18, .92);
    color: var(--lg-gold-light);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    z-index: 100;
}

@media (max-width: 900px) {
    .lg-footer-main {
        grid-template-columns: 1.5fr 1fr 1fr;
    }

    .lg-footer-contact {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .lottogpt-page .lg-footer {
        padding-top: 46px;
    }

    .lg-footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 34px 24px;
    }

    .lg-footer-brand,
    .lg-footer-contact {
        grid-column: 1 / -1;
    }

    .lg-footer-company {
        flex-direction: column;
        gap: 5px;
    }

    .lg-footer-bottom {
        flex-direction: column;
        gap: 8px;
    }

    .lottogpt-page #top_btn {
        right: 18px;
        bottom: 18px;
        width: 42px;
        height: 42px;
    }
}


/* LottoGPT service cards */
.lg-service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.lg-service-card {
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    padding: 28px 25px 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(30, 199, 190, .08), transparent 38%),
        linear-gradient(145deg, rgba(15, 23, 33, .96), rgba(8, 13, 20, .98));
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.lg-service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(229, 184, 76, .3);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .25);
}

.lg-service-number {
    position: absolute;
    top: 19px;
    right: 21px;
    color: rgba(229, 184, 76, .25);
    font: 800 30px Montserrat, sans-serif;
}

.lg-service-card > i {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 26px;
    border: 1px solid rgba(30, 199, 190, .2);
    border-radius: 14px;
    background: rgba(30, 199, 190, .07);
    color: var(--lg-teal);
    font-size: 21px;
}

.lg-service-card h3 {
    color: #fff;
    font-size: 19px;
    font-weight: 700;
}

.lg-service-card p {
    margin-top: 13px;
    color: #b7c1cc;
    font-size: 15px;
    line-height: 1.75;
}

.lg-service-card strong {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 24px;
    color: var(--lg-gold-light);
    font-size: 15px;
}

.lg-service-card strong i {
    font-size: 15px;
    transition: transform .2s ease;
}

.lg-service-card:hover strong i {
    transform: translateX(4px);
}

.lg-content-grid {
    grid-template-columns: 1.25fr .75fr;
}

@media (max-width: 1000px) {
    .lg-service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .lg-service-grid {
        grid-template-columns: 1fr;
    }

    .lg-service-card {
        min-height: 245px;
    }
}

/* Lotto result list */
.lg-results-page {
    min-height: 100vh;
    background: #080d14;
    color: #fff;
}

.lg-results-hero {
    padding: 90px 0 55px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background:
        radial-gradient(circle at 80% 0%, rgba(30, 199, 190, .1), transparent 34%),
        linear-gradient(145deg, #101925, #080d14);
}

.lg-results-hero h1 {
    margin-top: 12px;
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 800;
}

.lg-results-hero > .lg-shell > p:last-child {
    max-width: 620px;
    margin-top: 16px;
    color: #8b97a4;
    line-height: 1.8;
}

.lg-results-section {
    padding: 55px 0 100px;
}

.lg-results-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 220px));
    gap: 15px;
    margin-bottom: 28px;
}

.lg-results-summary > div {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
}

.lg-results-summary span {
    display: block;
    margin-bottom: 8px;
    color: #b7c1cc;
    font-size: 15px;
}

.lg-results-summary strong {
    color: var(--lg-gold-light);
    font-size: 22px;
}

.lg-results-list {
    display: grid;
    gap: 16px;
}

.lg-result-item {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(16, 25, 37, .98), rgba(9, 14, 21, .98));
}

.lg-result-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.lg-result-item-head strong {
    margin-right: 10px;
    color: #fff;
    font-size: 19px;
}

.lg-result-item-head span {
    color: #b7c1cc;
    font-size: 15px;
}

.lg-result-item-head a {
    color: #b7c1cc;
    font-size: 15px;
}

.lg-result-item-head a i {
    margin-left: 5px;
}

.lg-result-item-body {
    display: grid;
    grid-template-columns: 1fr 250px;
    align-items: center;
    gap: 25px;
    padding: 25px 24px;
}

.lg-result-balls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.lg-result-numbers small {
    display: block;
    margin-top: 13px;
    color: #687481;
    font-size: 15px;
}

.lg-result-prize {
    padding-left: 28px;
    border-left: 1px solid rgba(255, 255, 255, .08);
}

.lg-result-prize span,
.lg-result-prize strong,
.lg-result-prize b,
.lg-result-prize small {
    display: block;
}

.lg-result-prize span {
    color: #b7c1cc;
    font-size: 15px;
}

.lg-result-prize strong {
    margin-top: 6px;
    color: #fff;
    font-size: 18px;
}

.lg-result-prize b {
    margin-top: 6px;
    color: var(--lg-gold-light);
    font-size: 15px;
}

.lg-result-prize small {
    margin-top: 8px;
    color: #697582;
    font-size: 15px;
}

.lg-results-pagination {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 35px;
}

.lg-results-pagination a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
    color: #b7c1cc;
    font-size: 15px;
}

.lg-results-pagination a:hover,
.lg-results-pagination a.is-active {
    border-color: var(--lg-gold);
    background: var(--lg-gold);
    color: #10151b;
}

.lg-results-empty {
    padding: 80px 20px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    color: #b7c1cc;
    text-align: center;
}

@media (max-width: 760px) {
    .lg-results-hero {
        padding: 65px 0 40px;
    }

    .lg-results-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .lg-result-item-body {
        grid-template-columns: 1fr;
    }

    .lg-result-prize {
        padding-top: 20px;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .08);
        border-left: 0;
    }
}

@media (max-width: 480px) {
    .lg-results-summary {
        grid-template-columns: 1fr;
    }

    .lg-result-item-head,
    .lg-result-item-body {
        padding-right: 17px;
        padding-left: 17px;
    }

    .lg-result-item-head span {
        display: block;
        margin-top: 4px;
    }

    .lg-result-item-head a {
        font-size: 0;
    }

    .lg-result-item-head a i {
        font-size: 15px;
    }

    .lg-results-pagination a {
        width: 34px;
        height: 34px;
    }
}

/* LottoGPT data statistics */
.lg-stats-page {
    min-height: 100vh;
    background: #080d14;
    color: #fff;
}

.lg-stats-hero {
    padding: 90px 0 55px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background:
        radial-gradient(circle at 75% 0%, rgba(30,199,190,.10), transparent 35%),
        linear-gradient(145deg, #101925, #080d14);
}

.lg-stats-hero h1 {
    margin-top: 12px;
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 800;
}

.lg-stats-hero > .lg-shell > p:last-child {
    max-width: 650px;
    margin-top: 16px;
    color: #8b97a4;
    line-height: 1.8;
}

.lg-stats-section {
    padding: 55px 0 100px;
}

.lg-stats-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.lg-stats-summary article {
    padding: 22px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    background: rgba(255,255,255,.03);
}

.lg-stats-summary span {
    display: block;
    margin-bottom: 8px;
    color: #b7c1cc;
    font-size: 15px;
}

.lg-stats-summary strong {
    color: var(--lg-gold-light);
    font-size: 19px;
}

.lg-stats-panel {
    margin-top: 18px;
    padding: 26px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(30,199,190,.04), transparent 30%),
        linear-gradient(145deg, rgba(16,25,37,.98), rgba(9,14,21,.98));
}

.lg-stats-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 24px;
}

.lg-stats-panel-head span {
    color: var(--lg-teal);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
}

.lg-stats-panel-head h2 {
    margin-top: 6px;
    color: #fff;
    font-size: 20px;
}

.lg-stats-panel-head > p {
    color: #687582;
    font-size: 15px;
}

.lg-number-frequency-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 10px;
}

.lg-number-frequency-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 16px 6px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    background: rgba(255,255,255,.02);
}

.lg-number-frequency-item strong {
    color: #dbe2e9;
    font-size: 15px;
}

.lg-number-frequency-item small {
    color: #687481;
    font-size: 15px;
    text-align: center;
}

.lg-stats-two-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.lg-stats-ranking {
    display: grid;
    gap: 8px;
}

.lg-stats-ranking > div {
    display: grid;
    grid-template-columns: 30px 46px 1fr;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
}

.lg-stats-ranking > div > b {
    color: #687481;
    font-size: 15px;
}

.lg-stats-ranking strong {
    color: #e4e9ee;
    font-size: 15px;
}

.lg-recent-number-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.lg-recent-number-grid article {
    min-width: 90px;
    padding: 14px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}

.lg-recent-number-grid strong {
    display: block;
    margin-top: 8px;
    color: #dce3e9;
    font-size: 15px;
}

.lg-ratio-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.lg-ratio-row > div {
    padding: 18px;
    border-radius: 12px;
    background: rgba(255,255,255,.03);
}

.lg-ratio-row span,
.lg-ratio-row strong,
.lg-ratio-row b {
    display: block;
}

.lg-ratio-row span {
    color: #b7c1cc;
    font-size: 15px;
}

.lg-ratio-row strong {
    margin-top: 7px;
    color: #fff;
    font-size: 18px;
}

.lg-ratio-row b {
    margin-top: 4px;
    color: var(--lg-gold-light);
    font-size: 15px;
}

.lg-ratio-bar {
    height: 7px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(30,199,190,.55);
}

.lg-ratio-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--lg-gold);
}

.lg-range-list {
    display: grid;
    gap: 15px;
}

.lg-range-list > div {
    display: grid;
    grid-template-columns: 55px 1fr 75px;
    align-items: center;
    gap: 12px;
}

.lg-range-list span {
    color: #9ba6b1;
    font-size: 15px;
}

.lg-range-list > div > div {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
}

.lg-range-list i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--lg-teal);
}

.lg-range-list strong {
    color: #dce3e9;
    font-size: 15px;
    text-align: right;
}

.lg-stats-notice {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    padding: 16px 18px;
    border: 1px solid rgba(229,184,76,.13);
    border-radius: 12px;
    background: rgba(229,184,76,.04);
    color: #b7c1cc;
    font-size: 15px;
    line-height: 1.7;
}

.lg-stats-notice i {
    margin-top: 3px;
    color: var(--lg-gold);
}

@media (max-width: 1000px) {
    .lg-stats-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .lg-number-frequency-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 700px) {
    .lg-stats-hero {
        padding: 65px 0 40px;
    }

    .lg-stats-two-column {
        grid-template-columns: 1fr;
    }

    .lg-number-frequency-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .lg-stats-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .lg-stats-summary {
        grid-template-columns: 1fr;
    }

    .lg-stats-panel {
        padding: 20px 16px;
    }

    .lg-number-frequency-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
    }
}

/* LottoGPT statistics readability */
.lg-stats-page {
    color: #f3f6f9;
}

.lg-stats-hero > .lg-shell > p:last-child {
    color: #b8c2cc;
    font-size: 15px;
}

.lg-stats-summary span {
    color: #aeb9c4;
    font-size: 15px;
}

.lg-stats-summary strong {
    font-size: 22px;
}

.lg-stats-panel {
    background:
        radial-gradient(circle at 100% 0%, rgba(30,199,190,.055), transparent 30%),
        linear-gradient(145deg, #111c28, #0c141e);
}

.lg-stats-panel-head span {
    font-size: 15px;
}

.lg-stats-panel-head h2 {
    font-size: 22px;
    line-height: 1.35;
}

.lg-stats-panel-head > p {
    color: #a9b5c0;
    font-size: 15px;
    line-height: 1.6;
}

.lg-number-frequency-item {
    background: rgba(255,255,255,.035);
}

.lg-number-frequency-item strong {
    color: #f1f4f7;
    font-size: 15px;
}

.lg-number-frequency-item small {
    color: #a7b3bf;
    font-size: 15px;
    line-height: 1.45;
}

.lg-stats-ranking > div {
    background: rgba(255,255,255,.035);
}

.lg-stats-ranking > div > b {
    color: #a6b2be;
    font-size: 15px;
}

.lg-stats-ranking strong {
    color: #f1f4f7;
    font-size: 15px;
}

.lg-recent-number-grid article {
    background: rgba(255,255,255,.035);
}

.lg-recent-number-grid strong {
    color: #f1f4f7;
    font-size: 15px;
}

.lg-ratio-row span {
    color: #b2bdc8;
    font-size: 15px;
}

.lg-ratio-row strong {
    font-size: 21px;
}

.lg-ratio-row b {
    font-size: 15px;
}

.lg-range-list span {
    color: #bcc6cf;
    font-size: 15px;
}

.lg-range-list strong {
    color: #f0f4f7;
    font-size: 15px;
}

.lg-range-list > div > div {
    background: rgba(255,255,255,.11);
}

.lg-stats-notice {
    color: #bbc5ce;
    font-size: 15px;
    line-height: 1.8;
}

@media (max-width: 700px) {
    .lg-stats-panel-head h2 {
        font-size: 20px;
    }

    .lg-number-frequency-item strong {
        font-size: 15px;
    }

    .lg-number-frequency-item small {
        font-size: 15px;
    }
}

/* LottoGPT about page */
.lg-about-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 12%, rgba(38, 226, 192, .10), transparent 30%),
        radial-gradient(circle at 85% 20%, rgba(229, 184, 76, .10), transparent 28%),
        var(--lg-bg);
    color: var(--lg-text);
}

.lg-about-hero {
    position: relative;
    padding: 120px 0 110px;
    overflow: hidden;
    border-bottom: 1px solid rgba(229, 184, 76, .14);
}

.lg-about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(38, 226, 192, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(38, 226, 192, .025) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, #000, transparent);
}

.lg-about-hero .lg-shell {
    position: relative;
    z-index: 1;
}

.lg-about-hero h1 {
    max-width: 850px;
    margin: 18px 0 26px;
    color: #fff;
    font-size: clamp(46px, 5vw, 72px);
    line-height: 1.15;
    letter-spacing: -.055em;
}

.lg-about-hero h1 strong {
    color: transparent;
    background: linear-gradient(
        90deg,
        #fff2b7,
        var(--lg-gold),
        #b78528
    );
    -webkit-background-clip: text;
    background-clip: text;
}

.lg-about-hero-copy {
    max-width: 720px;
    margin: 0;
    color: #b9c3ce;
    font-size: 18px;
    line-height: 1.85;
    word-break: keep-all;
}

.lg-about-section {
    padding: 100px 0;
}

.lg-about-heading {
    max-width: 720px;
    margin-bottom: 50px;
}

.lg-about-heading h2 {
    margin: 14px 0 18px;
    color: #fff;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.25;
    letter-spacing: -.04em;
}

.lg-about-heading > p:last-child {
    margin: 0;
    color: #aeb8c3;
    font-size: 17px;
    line-height: 1.8;
    word-break: keep-all;
}

.lg-about-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.lg-about-card {
    min-height: 260px;
    padding: 34px;
    background:
        linear-gradient(
            145deg,
            rgba(16, 25, 35, .96),
            rgba(8, 13, 20, .96)
        );
    border: 1px solid rgba(229, 184, 76, .20);
    border-radius: 18px;
}

.lg-about-card-number {
    display: block;
    margin-bottom: 54px;
    color: var(--lg-teal);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .14em;
}

.lg-about-card h3 {
    margin: 0 0 16px;
    color: #fff;
    font-size: 24px;
    letter-spacing: -.03em;
}

.lg-about-card p {
    margin: 0;
    color: #9fabb7;
    font-size: 15px;
    line-height: 1.8;
    word-break: keep-all;
}

.lg-about-message {
    padding: 0 0 110px;
}

.lg-about-message-panel {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: center;
    padding: 55px 60px;
    background:
        linear-gradient(
            135deg,
            rgba(15, 24, 34, .98),
            rgba(8, 12, 18, .98)
        );
    border: 1px solid var(--lg-line);
    border-radius: 20px;
}

.lg-about-message-panel h2 {
    margin: 14px 0 0;
    color: #fff;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.35;
    letter-spacing: -.04em;
}

.lg-about-message-panel > p {
    margin: 0;
    color: #aeb8c3;
    font-size: 16px;
    line-height: 1.9;
    word-break: keep-all;
}

@media (max-width: 900px) {
    .lg-about-hero {
        padding: 80px 0 72px;
    }

    .lg-about-section {
        padding: 72px 0;
    }

    .lg-about-values {
        grid-template-columns: 1fr;
    }

    .lg-about-card {
        min-height: 0;
    }

    .lg-about-card-number {
        margin-bottom: 30px;
    }

    .lg-about-message {
        padding-bottom: 72px;
    }

    .lg-about-message-panel {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 36px 28px;
    }
}

@media (max-width: 640px) {
    .lg-about-page .lg-shell {
        width: min(100% - 32px, 1320px);
    }

    .lg-about-hero {
        padding: 64px 0 58px;
    }

    .lg-about-hero h1 {
        font-size: 40px;
    }

    .lg-about-hero-copy {
        font-size: 16px;
        line-height: 1.75;
    }

    .lg-about-heading h2 {
        font-size: 31px;
    }

    .lg-about-heading > p:last-child {
        font-size: 15px;
    }

    .lg-about-card {
        padding: 28px 24px;
    }

    .lg-about-card h3 {
        font-size: 22px;
    }

    .lg-about-message-panel h2 {
        font-size: 28px;
    }

    .lg-about-message-panel > p {
        font-size: 15px;
    }
}

/* LottoGPT membership page */
.lg-membership-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 12%, rgba(38, 226, 192, .09), transparent 30%),
        radial-gradient(circle at 82% 16%, rgba(229, 184, 76, .11), transparent 28%),
        var(--lg-bg);
    color: var(--lg-text);
}

.lg-membership-hero {
    padding: 110px 0 90px;
    border-bottom: 1px solid rgba(229, 184, 76, .14);
}

.lg-membership-hero h1 {
    max-width: 850px;
    margin: 18px 0 24px;
    color: #fff;
    font-size: clamp(46px, 5vw, 70px);
    line-height: 1.15;
    letter-spacing: -.055em;
}

.lg-membership-hero h1 strong {
    color: transparent;
    background: linear-gradient(
        90deg,
        #fff2b7,
        var(--lg-gold),
        #b78528
    );
    -webkit-background-clip: text;
    background-clip: text;
}

.lg-membership-hero > .lg-shell > p:last-child {
    max-width: 680px;
    margin: 0;
    color: #b7c1cc;
    font-size: 18px;
    line-height: 1.8;
    word-break: keep-all;
}

.lg-membership-section {
    padding: 90px 0 110px;
}

.lg-membership-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.lg-membership-card {
    position: relative;
    display: flex;
    min-height: 540px;
    padding: 38px 34px 34px;
    flex-direction: column;
    background:
        linear-gradient(
            145deg,
            rgba(16, 25, 35, .98),
            rgba(8, 13, 20, .98)
        );
    border: 1px solid rgba(229, 184, 76, .20);
    border-radius: 20px;
}

.lg-membership-pro {
    border-color: rgba(229, 184, 76, .58);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, .26),
        inset 0 0 40px rgba(229, 184, 76, .04);
}

.lg-membership-badge {
    position: absolute;
    top: 0;
    right: 26px;
    padding: 9px 14px;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #9b701f, #f1c75b);
    border-radius: 20px;
    color: #070a0e;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .12em;
}

.lg-membership-card-head {
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.lg-membership-level {
    display: block;
    margin-bottom: 20px;
    color: var(--lg-teal);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .16em;
}

.lg-membership-card h2 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -.04em;
}

.lg-membership-card-head p {
    margin: 0;
    color: #9eaab6;
    font-size: 15px;
}

.lg-membership-price {
    display: flex;
    min-height: 105px;
    align-items: flex-end;
    padding: 28px 0 24px;
    color: #fff;
}

.lg-membership-price strong {
    font-size: 38px;
    line-height: 1;
    letter-spacing: -.04em;
}

.lg-membership-price span {
    margin-left: 6px;
    color: #b8c1cb;
    font-size: 15px;
}

.lg-membership-price-contact strong {
    color: var(--lg-gold-light);
    font-size: 34px;
}

.lg-membership-features {
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.lg-membership-features li {
    position: relative;
    margin-bottom: 14px;
    padding-left: 22px;
    color: #aeb8c3;
    font-size: 15px;
    line-height: 1.65;
    word-break: keep-all;
}

.lg-membership-features li::before {
    content: "";
    position: absolute;
    top: .65em;
    left: 0;
    width: 7px;
    height: 7px;
    background: var(--lg-teal);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(38, 226, 192, .45);
}

.lg-membership-btn {
    display: flex;
    width: 100%;
    min-height: 50px;
    margin-top: auto;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(229, 184, 76, .35);
    border-radius: 10px;
    color: #f3e6bd;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.lg-membership-btn:hover {
    transform: translateY(-2px);
    background: rgba(229, 184, 76, .10);
    border-color: rgba(229, 184, 76, .70);
    color: #fff;
}

.lg-membership-pro .lg-membership-btn {
    background: linear-gradient(135deg, #916719, #e9bd50);
    border-color: transparent;
    color: #080b0e;
}

.lg-membership-notice {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 30px;
    margin-top: 36px;
    padding: 28px 32px;
    background: rgba(9, 15, 22, .78);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
}

.lg-membership-notice span {
    color: var(--lg-gold);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .16em;
}

.lg-membership-notice p {
    margin: 0;
    color: #b7c1cc;
    font-size: 15px;
    line-height: 1.75;
    word-break: keep-all;
}

@media (max-width: 1100px) {
    .lg-membership-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg-membership-card {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .lg-membership-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .lg-membership-page .lg-shell {
        width: min(100% - 32px, 1320px);
    }

    .lg-membership-hero {
        padding: 64px 0 58px;
    }

    .lg-membership-hero h1 {
        font-size: 39px;
    }

    .lg-membership-hero > .lg-shell > p:last-child {
        font-size: 16px;
    }

    .lg-membership-section {
        padding: 60px 0 72px;
    }

    .lg-membership-card {
        padding: 32px 24px 26px;
    }

    .lg-membership-card h2 {
        font-size: 33px;
    }

    .lg-membership-price strong {
        font-size: 34px;
    }

    .lg-membership-notice {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 24px;
    }
}

/* LottoGPT winning data page */
.lg-winning-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 10%, rgba(38, 226, 192, .09), transparent 30%),
        radial-gradient(circle at 85% 18%, rgba(229, 184, 76, .10), transparent 28%),
        var(--lg-bg);
    color: var(--lg-text);
}

.lg-winning-hero {
    padding: 110px 0 90px;
    border-bottom: 1px solid rgba(229, 184, 76, .14);
}

.lg-winning-hero h1 {
    max-width: 850px;
    margin: 18px 0 24px;
    color: #fff;
    font-size: clamp(46px, 5vw, 70px);
    line-height: 1.15;
    letter-spacing: -.055em;
}

.lg-winning-hero h1 strong {
    color: transparent;
    background: linear-gradient(
        90deg,
        #fff2b7,
        var(--lg-gold),
        #b78528
    );
    -webkit-background-clip: text;
    background-clip: text;
}

.lg-winning-hero > .lg-shell > p:last-child {
    max-width: 700px;
    margin: 0;
    color: #b7c1cc;
    font-size: 18px;
    line-height: 1.8;
    word-break: keep-all;
}

.lg-winning-section {
    padding: 90px 0 110px;
}

.lg-winning-panel {
    padding: 40px;
    background:
        linear-gradient(
            145deg,
            rgba(16, 25, 35, .98),
            rgba(8, 13, 20, .98)
        );
    border: 1px solid rgba(229, 184, 76, .22);
    border-radius: 20px;
}

.lg-winning-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.lg-winning-label {
    display: block;
    margin-bottom: 10px;
    color: var(--lg-teal);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .16em;
}

.lg-winning-panel-head h2 {
    margin: 0;
    color: #fff;
    font-size: 30px;
    letter-spacing: -.04em;
}

.lg-winning-db-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #b7c1cc;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
}

.lg-winning-db-status i {
    width: 7px;
    height: 7px;
    background: var(--lg-teal);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(38, 226, 192, .55);
}

.lg-winning-result {
    padding-top: 40px;
}

/* ajax.turn.list.view2.php 기존 구조 LottoGPT 스타일 */
.lg-winning-result .flex_center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.lg-winning-result .product_li1_1 {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.03em;
}

.lg-winning-result .product_li1_1 b {
    color: var(--lg-gold-light);
}

.lg-winning-result .product_li1_1 em {
    display: block;
    margin-top: 8px;
    color: #b7c1cc;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.lg-winning-result .product_li1_2 select {
    min-width: 150px;
    height: 46px;
    padding: 0 38px 0 15px;
    background: #0d151e;
    border: 1px solid rgba(229, 184, 76, .30);
    border-radius: 9px;
    color: #fff;
    font-size: 15px;
    outline: none;
    cursor: pointer;
}

.lg-winning-result .product_li1_3 {
    margin-top: 40px;
    padding: 34px 28px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 16px;
}

.lg-winning-result .product_li1_3 ul {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.lg-winning-result .l_ball {
    display: flex;
    width: 58px;
    height: 58px;
    margin: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .25),
        0 8px 24px rgba(0, 0, 0, .24);
}

.lg-winning-result .l_plus {
    background: transparent !important;
    box-shadow: none;
    color: var(--lg-gold);
    font-size: 26px;
}

.lg-winning-guide {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 28px;
}

.lg-winning-guide article {
    padding: 30px;
    background: rgba(11, 18, 26, .78);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
}

.lg-winning-guide article > span {
    display: block;
    margin-bottom: 28px;
    color: var(--lg-teal);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .15em;
}

.lg-winning-guide h3 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 20px;
    letter-spacing: -.03em;
}

.lg-winning-guide p {
    margin: 0;
    color: #97a3af;
    font-size: 15px;
    line-height: 1.75;
    word-break: keep-all;
}

@media (max-width: 800px) {
    .lg-winning-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .lg-winning-result .flex_center {
        align-items: flex-start;
        flex-direction: column;
    }

    .lg-winning-result .product_li1_2,
    .lg-winning-result .product_li1_2 select {
        width: 100%;
    }

    .lg-winning-guide {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .lg-winning-page .lg-shell {
        width: min(100% - 32px, 1320px);
    }

    .lg-winning-hero {
        padding: 64px 0 58px;
    }

    .lg-winning-hero h1 {
        font-size: 39px;
    }

    .lg-winning-hero > .lg-shell > p:last-child {
        font-size: 16px;
    }

    .lg-winning-section {
        padding: 60px 0 72px;
    }

    .lg-winning-panel {
        padding: 26px 22px;
    }

    .lg-winning-panel-head h2 {
        font-size: 25px;
    }

    .lg-winning-result {
        padding-top: 30px;
    }

    .lg-winning-result .product_li1_1 {
        font-size: 21px;
    }

    .lg-winning-result .product_li1_3 {
        padding: 26px 18px;
    }

    .lg-winning-result .l_ball {
        width: 48px;
        height: 48px;
        font-size: 16px;
    }
}

/* LottoGPT winning data page - DB result layout */
.lg-winning-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
}

.lg-winning-result-head > div {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.lg-winning-result-head strong {
    color: #fff;
    font-size: 30px;
    letter-spacing: -.04em;
}

.lg-winning-result-head span {
    color: var(--lg-gold-light);
    font-size: 19px;
    font-weight: 700;
}

.lg-winning-result-head small {
    width: 100%;
    margin-top: 3px;
    color: #b7c1cc;
    font-size: 15px;
}

.lg-winning-turn-form {
    min-width: 170px;
}

.lg-winning-turn-form label {
    display: block;
    margin-bottom: 8px;
    color: #b7c1cc;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
}

.lg-winning-turn-form select {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    background: #0d151e;
    border: 1px solid rgba(229, 184, 76, .30);
    border-radius: 9px;
    color: #fff;
    font-size: 15px;
    outline: none;
    cursor: pointer;
}

.lg-winning-balls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 38px;
    padding: 38px 24px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 16px;
}

.lg-winning-ball {
    display: flex;
    width: 62px;
    height: 62px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .28),
        0 10px 24px rgba(0, 0, 0, .28);
}

.lg-ball-yellow {
    background: linear-gradient(145deg, #f3c84e, #a97914);
}

.lg-ball-blue {
    background: linear-gradient(145deg, #4d9be8, #235a94);
}

.lg-ball-red {
    background: linear-gradient(145deg, #ee6565, #983939);
}

.lg-ball-gray {
    background: linear-gradient(145deg, #8b949d, #4d555d);
}

.lg-ball-green {
    background: linear-gradient(145deg, #53b87a, #286742);
}

.lg-winning-plus {
    color: var(--lg-gold);
    font-size: 26px;
    font-weight: 800;
}

.lg-winning-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.lg-winning-summary > div {
    padding: 22px 24px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
}

.lg-winning-summary span {
    display: block;
    margin-bottom: 8px;
    color: #b7c1cc;
    font-size: 15px;
}

.lg-winning-summary strong {
    color: #fff;
    font-size: 20px;
}

.lg-winning-empty {
    padding: 40px 0 10px;
    color: #b7c1cc;
    font-size: 17px;
}

@media (max-width: 640px) {
    .lg-winning-result-head {
        flex-direction: column;
    }

    .lg-winning-turn-form {
        width: 100%;
        min-width: 0;
    }

    .lg-winning-ball {
        width: 48px;
        height: 48px;
        font-size: 16px;
    }

    .lg-winning-summary {
        grid-template-columns: 1fr;
    }
}

/* LottoGPT analysis system page */
.lg-analysis-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 14% 10%, rgba(38, 226, 192, .10), transparent 30%),
        radial-gradient(circle at 84% 18%, rgba(229, 184, 76, .10), transparent 30%),
        var(--lg-bg);
    color: var(--lg-text);
}

.lg-analysis-hero {
    position: relative;
    padding: 115px 0 100px;
    overflow: hidden;
    border-bottom: 1px solid rgba(229, 184, 76, .14);
}

.lg-analysis-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(38, 226, 192, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(38, 226, 192, .025) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, #000, transparent);
}

.lg-analysis-hero .lg-shell {
    position: relative;
    z-index: 1;
}

.lg-analysis-hero h1 {
    max-width: 850px;
    margin: 18px 0 26px;
    color: #fff;
    font-size: clamp(46px, 5vw, 72px);
    line-height: 1.15;
    letter-spacing: -.055em;
}

.lg-analysis-hero h1 strong {
    color: transparent;
    background: linear-gradient(
        90deg,
        #fff2b7,
        var(--lg-gold),
        #b78528
    );
    -webkit-background-clip: text;
    background-clip: text;
}

.lg-analysis-hero-copy {
    max-width: 720px;
    margin: 0;
    color: #b9c3ce;
    font-size: 18px;
    line-height: 1.85;
    word-break: keep-all;
}

.lg-analysis-section {
    padding: 100px 0;
}

.lg-analysis-heading {
    max-width: 720px;
    margin-bottom: 50px;
}

.lg-analysis-heading h2 {
    margin: 14px 0 18px;
    color: #fff;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.25;
    letter-spacing: -.04em;
}

.lg-analysis-heading > p:last-child {
    margin: 0;
    color: #aeb8c3;
    font-size: 17px;
    line-height: 1.8;
    word-break: keep-all;
}

.lg-analysis-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.lg-analysis-step {
    position: relative;
    min-height: 300px;
    padding: 28px 24px;
    background:
        linear-gradient(
            145deg,
            rgba(16, 25, 35, .98),
            rgba(8, 13, 20, .98)
        );
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
}

.lg-analysis-step-number {
    display: block;
    margin-bottom: 40px;
    color: var(--lg-teal);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .14em;
}

.lg-analysis-step-code {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--lg-gold);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .15em;
}

.lg-analysis-step h3 {
    margin: 0 0 15px;
    color: #fff;
    font-size: 21px;
    letter-spacing: -.03em;
}

.lg-analysis-step p {
    margin: 0;
    color: #98a4b0;
    font-size: 15px;
    line-height: 1.75;
    word-break: keep-all;
}

.lg-analysis-principle {
    padding: 0 0 110px;
}

.lg-analysis-principle-panel {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 70px;
    align-items: center;
    padding: 56px 60px;
    background:
        linear-gradient(
            135deg,
            rgba(15, 24, 34, .98),
            rgba(8, 12, 18, .98)
        );
    border: 1px solid var(--lg-line);
    border-radius: 20px;
}

.lg-analysis-principle h2 {
    margin: 14px 0 0;
    color: #fff;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.35;
    letter-spacing: -.04em;
}

.lg-analysis-principle h2 strong {
    color: var(--lg-gold-light);
}

.lg-analysis-principle-copy p {
    margin: 0 0 18px;
    color: #aeb8c3;
    font-size: 16px;
    line-height: 1.9;
    word-break: keep-all;
}

.lg-analysis-principle-copy p:last-child {
    margin-bottom: 0;
}

@media (max-width: 1100px) {
    .lg-analysis-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .lg-analysis-principle-panel {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 640px) {
    .lg-analysis-page .lg-shell {
        width: min(100% - 32px, 1320px);
    }

    .lg-analysis-hero {
        padding: 64px 0 58px;
    }

    .lg-analysis-hero h1 {
        font-size: 40px;
    }

    .lg-analysis-hero-copy {
        font-size: 16px;
    }

    .lg-analysis-section {
        padding: 70px 0;
    }

    .lg-analysis-heading h2 {
        font-size: 31px;
    }

    .lg-analysis-heading > p:last-child {
        font-size: 15px;
    }

    .lg-analysis-flow {
        grid-template-columns: 1fr;
    }

    .lg-analysis-step {
        min-height: 0;
    }

    .lg-analysis-step-number {
        margin-bottom: 28px;
    }

    .lg-analysis-principle {
        padding-bottom: 72px;
    }

    .lg-analysis-principle-panel {
        padding: 36px 28px;
    }

    .lg-analysis-principle h2 {
        font-size: 28px;
    }

    .lg-analysis-principle-copy p {
        font-size: 15px;
    }
}

/* LottoGPT probability and combination page */
.lg-combination-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 14% 8%, rgba(38, 226, 192, .09), transparent 29%),
        radial-gradient(circle at 86% 13%, rgba(229, 184, 76, .09), transparent 28%),
        var(--lg-bg);
    color: var(--lg-text);
}

.lg-combination-hero {
    position: relative;
    padding: 105px 0 90px;
    overflow: hidden;
    border-bottom: 1px solid rgba(229, 184, 76, .14);
}

.lg-combination-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(38, 226, 192, .024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(38, 226, 192, .024) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, #000, transparent);
}

.lg-combination-hero .lg-shell {
    position: relative;
    z-index: 1;
}

.lg-combination-hero h1 {
    max-width: 900px;
    margin: 18px 0 25px;
    color: #fff;
    font-size: clamp(45px, 5vw, 70px);
    line-height: 1.15;
    letter-spacing: -.055em;
}

.lg-combination-hero h1 strong {
    color: transparent;
    background: linear-gradient(
        90deg,
        #fff1b3,
        var(--lg-gold),
        #b98529
    );
    -webkit-background-clip: text;
    background-clip: text;
}

.lg-combination-hero-copy {
    max-width: 760px;
    margin: 0;
    color: #b4bfca;
    font-size: 18px;
    line-height: 1.85;
    word-break: keep-all;
}

.lg-combination-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 55px;
}

.lg-combination-summary article {
    padding: 25px 26px;
    background: rgba(11, 17, 25, .82);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 15px;
}

.lg-combination-summary span {
    display: block;
    margin-bottom: 11px;
    color: var(--lg-muted);
    font-size: 15px;
    font-weight: 700;
}

.lg-combination-summary strong {
    display: block;
    color: var(--lg-gold-light);
    font-size: clamp(23px, 2vw, 31px);
    line-height: 1.2;
    letter-spacing: -.025em;
}

.lg-combination-summary small {
    display: block;
    margin-top: 9px;
    color: #b7c1cc;
    font-size: 15px;
}

.lg-combination-section {
    padding: 95px 0 110px;
}

.lg-combination-heading {
    max-width: 720px;
    margin-bottom: 48px;
}

.lg-combination-heading h2 {
    margin: 13px 0 17px;
    color: #fff;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.25;
    letter-spacing: -.04em;
}

.lg-combination-heading > p:last-child {
    margin: 0;
    color: #aab5c0;
    font-size: 16px;
    line-height: 1.8;
    word-break: keep-all;
}

.lg-combination-panel {
    margin-bottom: 24px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(15, 23, 33, .98),
            rgba(8, 13, 20, .98)
        );
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
}

.lg-combination-panel-head {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    padding: 28px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.lg-combination-panel-head > span {
    flex: 0 0 auto;
    color: var(--lg-teal);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .16em;
}

.lg-combination-panel-head h3 {
    margin: 0 0 7px;
    color: #fff;
    font-size: 21px;
    line-height: 1.35;
    letter-spacing: -.025em;
}

.lg-combination-panel-head p {
    margin: 0;
    color: #b7c1cc;
    font-size: 15px;
    line-height: 1.65;
    word-break: keep-all;
}

.lg-combination-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.lg-combination-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    table-layout: fixed;
}

.lg-combination-table th {
    padding: 15px 14px;
    background: rgba(229, 184, 76, .07);
    border-bottom: 1px solid rgba(229, 184, 76, .17);
    color: #d7c78f;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.lg-combination-table td {
    padding: 16px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    color: #c5cdd6;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

.lg-combination-table tbody tr:last-child td {
    border-bottom: 0;
}

.lg-combination-table tbody tr:hover td {
    background: rgba(38, 226, 192, .025);
}

.lg-combination-table .lg-combination-highlight {
    color: var(--lg-gold-light);
    font-weight: 800;
}

.lg-combination-table .lg-combination-total td {
    background: rgba(38, 226, 192, .045);
    color: #e8f8f4;
    font-weight: 800;
}

.lg-combination-notice {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 55px;
    align-items: center;
    margin-top: 55px;
    padding: 45px 48px;
    background:
        linear-gradient(
            135deg,
            rgba(15, 24, 34, .98),
            rgba(8, 13, 19, .98)
        );
    border: 1px solid var(--lg-line);
    border-radius: 18px;
}

.lg-combination-notice span {
    display: block;
    margin-bottom: 11px;
    color: var(--lg-teal);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .16em;
}

.lg-combination-notice h2 {
    margin: 0;
    color: var(--lg-gold-light);
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.35;
    letter-spacing: -.035em;
}

.lg-combination-notice > p {
    margin: 0;
    color: #aab5c0;
    font-size: 15px;
    line-height: 1.9;
    word-break: keep-all;
}

@media (max-width: 850px) {
    .lg-combination-summary {
        grid-template-columns: 1fr;
    }

    .lg-combination-notice {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

@media (max-width: 640px) {
    .lg-combination-page .lg-shell {
        width: min(100% - 32px, 1320px);
    }

    .lg-combination-hero {
        padding: 63px 0 58px;
    }

    .lg-combination-hero h1 {
        font-size: 39px;
    }

    .lg-combination-hero-copy {
        font-size: 15px;
    }

    .lg-combination-summary {
        margin-top: 38px;
    }

    .lg-combination-summary article {
        padding: 21px 22px;
    }

    .lg-combination-section {
        padding: 68px 0 75px;
    }

    .lg-combination-heading {
        margin-bottom: 35px;
    }

    .lg-combination-heading h2 {
        font-size: 30px;
    }

    .lg-combination-heading > p:last-child {
        font-size: 15px;
    }

    .lg-combination-panel {
        margin-bottom: 18px;
        border-radius: 14px;
    }

    .lg-combination-panel-head {
        gap: 15px;
        padding: 22px 20px;
    }

    .lg-combination-panel-head h3 {
        font-size: 18px;
    }

    .lg-combination-panel-head p {
        font-size: 15px;
    }

    .lg-combination-table {
        min-width: 650px;
    }

    .lg-combination-table th {
        padding: 12px 10px;
        font-size: 15px;
    }

    .lg-combination-table td {
        padding: 13px 10px;
        font-size: 15px;
    }

    .lg-combination-notice {
        margin-top: 38px;
        padding: 30px 26px;
    }

    .lg-combination-notice h2 {
        font-size: 26px;
    }

    .lg-combination-notice > p {
        font-size: 15px;
    }
}

/* LottoGPT play guide page */
.lg-play-guide-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 14% 8%, rgba(38, 226, 192, .09), transparent 29%),
        radial-gradient(circle at 86% 15%, rgba(229, 184, 76, .09), transparent 28%),
        var(--lg-bg);
    color: var(--lg-text);
}

.lg-play-guide-hero {
    position: relative;
    padding: 110px 0 100px;
    overflow: hidden;
    border-bottom: 1px solid rgba(229, 184, 76, .14);
}

.lg-play-guide-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(38, 226, 192, .024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(38, 226, 192, .024) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, #000, transparent);
}

.lg-play-guide-hero .lg-shell {
    position: relative;
    z-index: 1;
}

.lg-play-guide-hero h1 {
    max-width: 900px;
    margin: 18px 0 26px;
    color: #fff;
    font-size: clamp(46px, 5vw, 72px);
    line-height: 1.15;
    letter-spacing: -.055em;
}

.lg-play-guide-hero h1 strong {
    color: transparent;
    background: linear-gradient(
        90deg,
        #fff1b3,
        var(--lg-gold),
        #b98529
    );
    -webkit-background-clip: text;
    background-clip: text;
}

.lg-play-guide-hero-copy {
    max-width: 760px;
    margin: 0;
    color: #b5c0ca;
    font-size: 18px;
    line-height: 1.85;
    word-break: keep-all;
}

.lg-play-guide-section {
    padding: 95px 0;
}

.lg-play-guide-heading {
    max-width: 740px;
    margin-bottom: 48px;
}

.lg-play-guide-heading h2 {
    margin: 13px 0 17px;
    color: #fff;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.25;
    letter-spacing: -.04em;
}

.lg-play-guide-heading > p:last-child {
    margin: 0;
    color: #aab5c0;
    font-size: 16px;
    line-height: 1.8;
    word-break: keep-all;
}

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

.lg-play-guide-card {
    position: relative;
    min-height: 285px;
    padding: 28px 27px;
    background:
        linear-gradient(
            145deg,
            rgba(15, 23, 33, .98),
            rgba(8, 13, 20, .98)
        );
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 17px;
}

.lg-play-guide-number {
    display: block;
    margin-bottom: 35px;
    color: var(--lg-teal);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .16em;
}

.lg-play-guide-code {
    display: inline-block;
    margin-bottom: 13px;
    color: var(--lg-gold);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .15em;
}

.lg-play-guide-card h3 {
    margin: 0 0 15px;
    color: #fff;
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: -.025em;
    word-break: keep-all;
}

.lg-play-guide-card p {
    margin: 0;
    color: #96a3b0;
    font-size: 15px;
    line-height: 1.75;
    word-break: keep-all;
}

.lg-play-guide-data {
    padding: 95px 0;
    background: rgba(255, 255, 255, .012);
    border-top: 1px solid rgba(255, 255, 255, .045);
    border-bottom: 1px solid rgba(255, 255, 255, .045);
}

.lg-play-guide-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.lg-play-guide-stats article {
    padding: 30px;
    background: rgba(11, 17, 25, .88);
    border: 1px solid rgba(229, 184, 76, .13);
    border-radius: 17px;
}

.lg-play-guide-stats span {
    display: block;
    margin-bottom: 15px;
    color: var(--lg-muted);
    font-size: 15px;
    font-weight: 700;
}

.lg-play-guide-stats strong {
    display: block;
    color: var(--lg-gold-light);
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.15;
    letter-spacing: -.035em;
}

.lg-play-guide-stats p {
    margin: 16px 0 0;
    color: #b7c1cc;
    font-size: 15px;
    line-height: 1.75;
    word-break: keep-all;
}

.lg-play-guide-explain {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 65px;
    align-items: center;
    margin-top: 55px;
    padding: 50px 52px;
    background:
        linear-gradient(
            135deg,
            rgba(15, 24, 34, .98),
            rgba(8, 13, 19, .98)
        );
    border: 1px solid var(--lg-line);
    border-radius: 19px;
}

.lg-play-guide-explain h2 {
    margin: 13px 0 0;
    color: #fff;
    font-size: clamp(29px, 3vw, 40px);
    line-height: 1.4;
    letter-spacing: -.04em;
}

.lg-play-guide-explain h2 strong {
    color: var(--lg-gold-light);
}

.lg-play-guide-explain-copy p {
    margin: 0 0 17px;
    color: #aab5c0;
    font-size: 15px;
    line-height: 1.9;
    word-break: keep-all;
}

.lg-play-guide-explain-copy p:last-child {
    margin-bottom: 0;
}

.lg-play-guide-notice {
    padding: 90px 0 110px;
}

.lg-play-guide-notice-panel {
    padding: 45px 48px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(38, 226, 192, .08), transparent 48%),
        rgba(10, 16, 24, .95);
    border: 1px solid rgba(38, 226, 192, .19);
    border-radius: 18px;
}

.lg-play-guide-notice-panel > span {
    display: block;
    margin-bottom: 13px;
    color: var(--lg-teal);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .17em;
}

.lg-play-guide-notice-panel h2 {
    margin: 0;
    color: var(--lg-gold-light);
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.35;
    letter-spacing: -.035em;
}

.lg-play-guide-notice-panel p {
    max-width: 780px;
    margin: 20px auto 0;
    color: #a7b2bd;
    font-size: 15px;
    line-height: 1.9;
    word-break: keep-all;
}

@media (max-width: 950px) {
    .lg-play-guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg-play-guide-explain {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 760px) {
    .lg-play-guide-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .lg-play-guide-page .lg-shell {
        width: min(100% - 32px, 1320px);
    }

    .lg-play-guide-hero {
        padding: 64px 0 60px;
    }

    .lg-play-guide-hero h1 {
        font-size: 39px;
    }

    .lg-play-guide-hero-copy {
        font-size: 15px;
    }

    .lg-play-guide-section,
    .lg-play-guide-data {
        padding: 68px 0;
    }

    .lg-play-guide-heading {
        margin-bottom: 34px;
    }

    .lg-play-guide-heading h2 {
        font-size: 30px;
    }

    .lg-play-guide-heading > p:last-child {
        font-size: 15px;
    }

    .lg-play-guide-grid {
        grid-template-columns: 1fr;
    }

    .lg-play-guide-card {
        min-height: 0;
        padding: 24px 22px;
    }

    .lg-play-guide-number {
        margin-bottom: 26px;
    }

    .lg-play-guide-stats article {
        padding: 25px 23px;
    }

    .lg-play-guide-explain {
        margin-top: 38px;
        padding: 32px 27px;
    }

    .lg-play-guide-explain h2 {
        font-size: 27px;
    }

    .lg-play-guide-notice {
        padding: 68px 0 75px;
    }

    .lg-play-guide-notice-panel {
        padding: 32px 25px;
        text-align: left;
    }

    .lg-play-guide-notice-panel h2 {
        font-size: 26px;
    }

    .lg-play-guide-notice-panel p {
        font-size: 15px;
    }
}

/* LottoGPT my lotto dashboard */
.lg-my-page {
    min-height: 100vh;
    color: var(--lg-text);
    background: var(--lg-bg);
}

.lg-my-hero {
    padding: 86px 0 72px;
    background:
        radial-gradient(circle at 18% 10%, rgba(38, 226, 192, .08), transparent 34%),
        radial-gradient(circle at 82% 0%, rgba(229, 184, 76, .1), transparent 35%),
        #05080d;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.lg-my-hero h1 {
    margin: 16px 0 0;
    color: #fff;
    font-size: clamp(40px, 5vw, 66px);
    line-height: 1.18;
    letter-spacing: -.05em;
}

.lg-my-hero h1 strong {
    color: var(--lg-gold-light);
}

.lg-my-hero-copy {
    max-width: 720px;
    margin: 25px 0 0;
    color: #9da9b5;
    font-size: 16px;
    line-height: 1.9;
    word-break: keep-all;
}

.lg-my-summary {
    padding: 52px 0 72px;
}

.lg-my-service-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.lg-my-service-grid article,
.lg-my-rank-grid article {
    padding: 24px;
    background: rgba(11, 17, 25, .92);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
}

.lg-my-service-grid span,
.lg-my-rank-grid span {
    display: block;
    margin-bottom: 10px;
    color: var(--lg-muted);
    font-size: 15px;
    font-weight: 700;
}

.lg-my-service-grid strong {
    display: block;
    color: #fff;
    font-size: 21px;
    line-height: 1.4;
    word-break: keep-all;
}

.lg-my-rank-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.lg-my-rank-grid article {
    border-color: rgba(229, 184, 76, .16);
}

.lg-my-rank-grid strong {
    display: block;
    color: var(--lg-gold-light);
    font-size: 34px;
    line-height: 1.1;
}

.lg-my-rank-grid small {
    display: block;
    margin-top: 8px;
    color: #b7c1cc;
    font-size: 15px;
}

.lg-my-section {
    padding: 72px 0;
    border-top: 1px solid rgba(255, 255, 255, .045);
}

.lg-my-winning-section {
    padding-bottom: 110px;
}

.lg-my-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 28px;
}

.lg-my-heading h2 {
    margin: 8px 0 0;
    color: #fff;
    font-size: 34px;
    line-height: 1.3;
    letter-spacing: -.035em;
}

.lg-my-heading select {
    min-width: 145px;
    height: 44px;
    padding: 0 38px 0 14px;
    color: #e9eef3;
    background: #0d151f;
    border: 1px solid rgba(229, 184, 76, .22);
    border-radius: 9px;
}

.lg-my-panel {
    overflow: hidden;
    background: rgba(9, 15, 22, .96);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 17px;
}

.lg-my-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.lg-my-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.lg-my-table th {
    padding: 17px 20px;
    color: #b7c1cc;
    background: rgba(255, 255, 255, .025);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: 15px;
    font-weight: 700;
    text-align: left;
}

.lg-my-table td {
    padding: 20px;
    color: #d6dde4;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    font-size: 15px;
    vertical-align: middle;
}

.lg-my-table tr:last-child td {
    border-bottom: 0;
}

.lg-my-balls {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
}

.lg-my-balls .lg-lotto-ball {
    flex: 0 0 auto;
}

.lg-my-rank {
    display: inline-flex;
    min-width: 58px;
    height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    color: var(--lg-gold-light);
    background: rgba(229, 184, 76, .08);
    border: 1px solid rgba(229, 184, 76, .2);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
}

.lg-my-empty {
    padding: 65px 30px;
    text-align: center;
}

.lg-my-empty strong {
    display: block;
    color: #fff;
    font-size: 21px;
}

.lg-my-empty p {
    max-width: 520px;
    margin: 13px auto 0;
    color: #b7c1cc;
    font-size: 15px;
    line-height: 1.8;
    word-break: keep-all;
}

.lg-my-note {
    margin-top: 20px;
    padding: 22px 25px;
    background: rgba(38, 226, 192, .035);
    border: 1px solid rgba(38, 226, 192, .13);
    border-radius: 12px;
}

.lg-my-note span {
    display: block;
    margin-bottom: 7px;
    color: var(--lg-teal);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .15em;
}

.lg-my-note p {
    margin: 0;
    color: #b7c1cc;
    font-size: 15px;
    line-height: 1.75;
}

@media (max-width: 1050px) {
    .lg-my-service-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg-my-rank-grid {
        grid-template-columns: repeat(5, minmax(110px, 1fr));
        overflow-x: auto;
    }
}

@media (max-width: 760px) {
    .lg-my-page .lg-shell {
        width: min(100% - 32px, 1320px);
    }

    .lg-my-hero {
        padding: 62px 0 56px;
    }

    .lg-my-hero h1 {
        font-size: 39px;
    }

    .lg-my-hero-copy {
        font-size: 15px;
    }

    .lg-my-summary {
        padding: 38px 0 55px;
    }

    .lg-my-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg-my-service-grid article,
    .lg-my-rank-grid article {
        padding: 20px 18px;
    }

    .lg-my-section {
        padding: 55px 0;
    }

    .lg-my-winning-section {
        padding-bottom: 75px;
    }

    .lg-my-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .lg-my-heading h2 {
        font-size: 29px;
    }

    .lg-my-heading form,
    .lg-my-heading select {
        width: 100%;
    }

    .lg-my-empty {
        padding: 48px 22px;
    }
}

@media (max-width: 520px) {
    .lg-my-service-grid {
        grid-template-columns: 1fr;
    }
}

/* LottoGPT my lotto mobile rank cards */
@media (max-width:760px) {
  .lg-my-rank-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    overflow-x:visible;
  }

  .lg-my-rank-grid article:last-child {
    grid-column:1 / -1;
  }

  .lg-my-rank-grid strong {
    font-size:30px;
  }
}

/* LottoGPT common site header
 * PC: logo / navigation / account in one row
 * Mobile: logo + account / navigation in two rows
 */

body.lottogpt-page {
    padding-top: 78px;
}

body.lottogpt-page .lg-home {
    padding-top: 0;
}

.lottogpt-page .header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    width: 100%;
    height: 78px;
    padding: 0;

    background: rgba(4, 7, 11, .94);
    border-bottom: 1px solid var(--lg-line);
    backdrop-filter: blur(18px);
}

.lottogpt-page .header .inner {
    position: relative;

    width: min(1320px, calc(100% - 48px));
    height: 78px;
    margin: 0 auto;

    display: flex;
    align-items: center;

    padding: 0;
}


/* logo + account */

.lottogpt-page .header .header_ul_1 {
    position: static;

    width: auto;
    height: auto;

    display: flex;
    align-items: center;

    padding: 0;
    margin: 0;

    flex: 0 0 auto;
}

.lottogpt-page .header .header_ul_1 .logo {
    width: clamp(150px, 14vw, 220px);
    margin: 0;
    flex: 0 0 auto;
}

.lottogpt-page .header .header_ul_1 .logo a {
    display: block;
}

.lottogpt-page .header .header_ul_1 .logo img {
    display: block;

    width: 100%;
    height: auto;
}

.lottogpt-page .header .header_ul_1 .logo a::before,
.lottogpt-page .header .header_ul_1 .logo a::after {
    display: none;
    content: none;
}


/* main navigation */

.lottogpt-page .header .header_ul_2 {
    position: static;

    display: flex;
    align-items: center;

    min-width: 0;
    height: 78px;

    margin:
        0
        clamp(270px, 22vw, 320px)
        0
        clamp(16px, 2vw, 28px);

    padding: 0;

    flex: 1 1 auto;
}

.lottogpt-page .header .header_ul_2 > li {
    width: 100%;
    height: 100%;
}

.lottogpt-page .header .menu {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;
    gap: clamp(0px, .25vw, 4px);
}

.lottogpt-page .header .menu > li {
    position: relative;

    float: none;

    width: auto;
    margin: 0;
    padding: 0;

    flex: 0 1 auto;
}

.lottogpt-page .header .menu > li > a {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 0 clamp(7px, .85vw, 15px);

    border: 1px solid transparent;
    border-radius: 9px;

    color: #c8d0d9;

    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em;

    white-space: nowrap;

    transform: none;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease;
}

.lottogpt-page .header .menu > li:hover > a,
.lottogpt-page .header .menu > li:focus-within > a {
    color: var(--lg-gold-light);

    border-color: rgba(229, 184, 76, .22);
    background: rgba(229, 184, 76, .065);
}


/* dropdown */

.lottogpt-page .header .sub_menu {
    position: absolute;

    top: 60px;
    left: 50%;
    z-index: 50;

    display: none;

    width: 176px;

    padding: 8px;
    margin: 0;

    transform: translateX(-50%);

    background: rgba(6, 10, 15, .98);
    border: 1px solid rgba(229, 184, 76, .24);
    border-radius: 12px;

    box-shadow: 0 18px 45px rgba(0, 0, 0, .42);
}

.lottogpt-page .header .sub_menu > li {
    margin: 0;
    padding: 0;
}

.lottogpt-page .header .sub_menu > li > a {
    display: block;

    width: 100%;

    padding: 11px 12px;

    color: #aeb8c3;

    border-radius: 8px;

    font-size: 16px;
    line-height: 1.3;

    transform: none;
}

.lottogpt-page .header .sub_menu > li > a:hover,
.lottogpt-page .header .sub_menu > li > a:focus {
    color: #fff;
    background: rgba(38, 226, 192, .09);
}


/* account */

.lottogpt-page .header .header_ul_1 .top_menu {
    position: absolute;

    top: 50%;
    right: 0;
    left: auto;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: auto;

    margin: 0;
    padding: 0;
    gap: 7px;

    transform: translateY(-50%);
}

.lottogpt-page .header .header_ul_1 .top_menu div {
    margin: 0;
}

.lottogpt-page .header .header_ul_1 .top_menu div:first-child::after {
    display: none;
    content: none;
}

.lottogpt-page .header .header_ul_1 .top_menu a {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding: 0 12px;

    color: #b9c3cd;

    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 8px;

    background: rgba(255, 255, 255, .025);

    font-size: 16px;

    white-space: nowrap;

    transform: none;
}

.lottogpt-page .header .header_ul_1 .top_menu a:hover {
    color: #fff;

    border-color: rgba(229, 184, 76, .30);
    background: rgba(229, 184, 76, .06);
}


/* inline login */

.lottogpt-page .header .lg-header-login {
    display: flex;
    align-items: center;

    margin: 0;
    gap: 6px;
}

.lottogpt-page .header .lg-header-login input {
    width: clamp(92px, 8vw, 125px);
    height: 38px;

    box-sizing: border-box;

    padding: 0 9px;

    color: #fff;

    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    outline: 0;

    background: rgba(255, 255, 255, .08);

    font-size: 16px;
    font-weight: 500;
}

.lottogpt-page .header .lg-header-login input::placeholder {
    color: #b8c2cc;
    opacity: 1;
}

.lottogpt-page .header .lg-header-login input:focus {
    border-color: rgba(229, 184, 76, .55);
    background: rgba(255, 255, 255, .07);
}

.lottogpt-page .header .lg-header-login button {
    height: 36px;

    padding: 0 12px;

    border: 1px solid rgba(229, 184, 76, .55);
    border-radius: 8px;

    background: linear-gradient(135deg, #805915, #e7b84b);
    color: #090b0e;

    font-size: 16px;
    font-weight: 700;

    white-space: nowrap;
    cursor: pointer;
}


/* tablet */

@media (max-width: 1100px) {
    .lottogpt-page .header .header_ul_1 .logo {
        width: clamp(130px, 15vw, 170px);
    }

    .lottogpt-page .header .header_ul_2 {
        margin-right: clamp(225px, 27vw, 270px);
        margin-left: 12px;
    }

    .lottogpt-page .header .menu > li > a {
        padding: 0 7px;
        font-size: 15px;
    }

    .lottogpt-page .header .lg-header-login input {
        width: clamp(70px, 8vw, 88px);
    }
}


/* mobile
 * row 1: logo + login/account
 * row 2: five main menus
 */

@media (max-width: 760px) {
    body.lottogpt-page {
        padding-top: 118px;
    }

    .lottogpt-page .header {
        height: 118px;
    }

    .lottogpt-page .header .inner {
        width: 100%;
        height: 118px;

        display: block;

        padding: 0 clamp(8px, 2.7vw, 14px);
    }

    .lottogpt-page .header .header_ul_1 {
        width: 100%;
        height: 64px;

        display: flex;
        align-items: center;

        margin: 0;
        padding: 0;
    }

    .lottogpt-page .header .header_ul_1 .logo {
        width: clamp(102px, 28vw, 132px);
    }

    .lottogpt-page .header .header_ul_1 .top_menu {
        position: static;

        top: auto;
        right: auto;
        left: auto;

        min-width: 0;

        margin-left: auto;

        gap: 4px;

        transform: none;
    }

    .lottogpt-page .header .lg-header-login {
        min-width: 0;

        gap: 3px;
    }

    .lottogpt-page .header .lg-header-login input {
        width: clamp(64px, 18vw, 78px);
        min-width: 0;
        height: 34px;

        padding: 0 6px;

        font-size: 15px;
    }

    .lottogpt-page .header .lg-header-login button {
        height: 34px;

        padding: 0 clamp(7px, 1.9vw, 10px);

        font-size: 15px;
    }

    .lottogpt-page .header .header_ul_1 .top_menu a {
        min-height: 32px;

        padding: 0 clamp(6px, 1.8vw, 9px);

        font-size: 14px;
    }

    .lottogpt-page .header .header_ul_2 {
        position: absolute;

        left: 0;
        right: 0;
        bottom: 0;

        display: block;

        width: 100%;
        height: 54px;

        margin: 0;
        padding: 0;

        border-top: 1px solid rgba(229, 184, 76, .12);
    }

    .lottogpt-page .header .header_ul_2 > li {
        width: 100%;
        height: 54px;
    }

    .lottogpt-page .header .menu {
        width: 100%;
        height: 54px;

        display: flex;
        align-items: stretch;
        justify-content: stretch;

        margin: 0;
        padding: 0;

        gap: 0;
    }

    .lottogpt-page .header .menu > li {
        float: none;

        min-width: 0;
        height: 54px;

        margin: 0;
        padding: 0;

        flex: 1 1 20%;
    }

    .lottogpt-page .header .menu > li > a {
        width: 100%;
        height: 54px;
        min-height: 54px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0 2px;

        border: 0;
        border-radius: 0;

        font-size: 15px;
        line-height: 1;
        letter-spacing: -.04em;

        white-space: nowrap;
    }

    .lottogpt-page .header .sub_menu {
        display: none !important;
    }
}

@media (max-width: 400px) {
    .lottogpt-page .header .inner {
        padding-left: 7px;
        padding-right: 7px;
    }

    .lottogpt-page .header .header_ul_1 .logo {
        width: clamp(96px, 27vw, 108px);
    }

    .lottogpt-page .header .lg-header-login input {
        width: clamp(55px, 16.5vw, 64px);
    }

    .lottogpt-page .header .lg-header-login button {
        padding-left: 6px;
        padding-right: 6px;
    }

    .lottogpt-page .header .menu > li > a {
        font-size: 14px;
    }
}

/* LottoGPT customer support hero */

.lottogpt-page .sub_top.lg-support-hero {
    position: relative;

    width: 100%;
    min-height: 320px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 58px 24px 46px;

    overflow: hidden;

    background:
        radial-gradient(circle at 20% 20%, rgba(38, 226, 192, .10), transparent 34%),
        radial-gradient(circle at 80% 15%, rgba(229, 184, 76, .13), transparent 30%),
        linear-gradient(145deg, #05080d, #0a1119 58%, #06090e);

    border-bottom: 1px solid rgba(229, 184, 76, .20);

    text-align: center;
}

.lottogpt-page .sub_top.lg-support-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent 0,
            rgba(255,255,255,.025) 50%,
            transparent 100%
        );
}

.lottogpt-page .sub_top.lg-support-hero .s01_li1,
.lottogpt-page .sub_top.lg-support-hero .s01_li2,
.lottogpt-page .sub_top.lg-support-hero .sub_top_ul {
    position: relative;
    z-index: 1;
}

.lottogpt-page .sub_top.lg-support-hero .s01_li1 {
    margin: 0 0 14px;

    color: var(--lg-teal);

    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .24em;
}

.lottogpt-page .sub_top.lg-support-hero .s01_li1 span {
    letter-spacing: .24em;
}

.lottogpt-page .sub_top.lg-support-hero .s01_li2 {
    margin: 0 0 36px;

    color: #fff;

    font-size: clamp(34px, 4vw, 52px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
}

.lottogpt-page .sub_top.lg-support-hero .sub_top_ul {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin: 0;
    padding: 0;

    flex-wrap: wrap;
}

.lottogpt-page .sub_top.lg-support-hero .sub_top_ul li {
    margin: 0;
    padding: 0;
}

.lottogpt-page .sub_top.lg-support-hero .sub_top_ul li a {
    min-width: 142px;
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 20px;

    color: #aeb8c3;

    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 10px;

    background: rgba(255, 255, 255, .025);

    font-size: 17px;
    font-weight: 600;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.lottogpt-page .sub_top.lg-support-hero .sub_top_ul li a:hover,
.lottogpt-page .sub_top.lg-support-hero .sub_top_ul li a:focus {
    color: #fff;

    border-color: rgba(38, 226, 192, .35);
    background: rgba(38, 226, 192, .07);
}

.lottogpt-page .sub_top.lg-support-hero .sub_top_ul li.active a {
    color: #090b0e;

    border-color: rgba(229, 184, 76, .72);

    background:
        linear-gradient(
            135deg,
            #9b701f,
            #f1c75b
        );
}

.lottogpt-page #sub_div {
    margin-top: 0;
}

.lottogpt-page #sub_div > .sub_tit {
    margin: 0;
    padding: 42px 24px 34px;

    color: #fff;
    background: var(--lg-bg);

    font-size: clamp(28px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

@media (max-width: 760px) {
    .lottogpt-page .sub_top.lg-support-hero {
        min-height: 250px;

        padding: 42px 16px 34px;
    }

    .lottogpt-page .sub_top.lg-support-hero .s01_li1 {
        margin-bottom: 10px;

        font-size: 16px;
        letter-spacing: .12em;
    }

    .lottogpt-page .sub_top.lg-support-hero .s01_li1 span {
        letter-spacing: .18em;
    }

    .lottogpt-page .sub_top.lg-support-hero .s01_li2 {
        margin-bottom: 28px;

        font-size: 34px;
    }

    .lottogpt-page .sub_top.lg-support-hero .sub_top_ul {
        width: 100%;

        gap: 7px;
        flex-wrap: nowrap;
    }

    .lottogpt-page .sub_top.lg-support-hero .sub_top_ul li {
        min-width: 0;

        flex: 1 1 0;
    }

    .lottogpt-page .sub_top.lg-support-hero .sub_top_ul li a {
        width: 100%;
        min-width: 0;
        min-height: 40px;

        padding: 0 5px;

        border-radius: 8px;

        font-size: 15px;

        white-space: nowrap;
    }

    .lottogpt-page #sub_div > .sub_tit {
        padding: 30px 16px 24px;

        font-size: 28px;
    }
}

/* Customer support legacy sub-top reset */

.lottogpt-page .sub_top.lg-support-hero {
    height: auto;
    margin-bottom: 0;
}

.lottogpt-page .sub_top.lg-support-hero .s01_li1 {
    padding-top: 0;
}

@media (max-width: 760px) {
    .lottogpt-page .sub_top.lg-support-hero {
        height: auto;
        min-height: 250px;
        margin-bottom: 0;
    }
}
