/* =====================================================
   CORE AI Design System v1.0
===================================================== */

:root{

    --navy:#081a35;
    --navy-light:#10274b;
    --gold:#d4af37;

    --bg:#f6f8fb;
    --card:#ffffff;

    --text:#172033;
    --muted:#667085;

    --border:#e5e7eb;

    --radius:22px;

    --shadow:
        0 18px 45px rgba(8,26,53,.08);

    --transition:.28s;

    --container:1180px;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:
        "Hiragino Sans",
        "Yu Gothic",
        sans-serif;

    line-height:1.8;

}

.container{

    width:min(
        calc(100% - 80px),
        var(--container)
    );

    margin:auto;

}

a{

    color:inherit;

    text-decoration:none;

}

img{

    max-width:100%;

}

section{

    padding:70px 0;

}

.services-section{

    padding-top:0;

    padding-bottom:0;

}

.latest-section{

    padding-top:0;

    padding-bottom:0;

}

.history-section{

    padding-top:30px;

    padding-bottom:0;

}

.history-section .latest-card{

    margin:30px 0 80px;

}

/* =====================================================
   Header
===================================================== */

.site-header{

    background:#ffffff;

    position:sticky;

    top:0;

    z-index:999;

    border-bottom:1px solid #edf2f7;

    backdrop-filter:blur(20px);

}

.header-inner{

    height:78px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    font-size:28px;

    font-weight:800;

    letter-spacing:.05em;

    color:var(--navy);

}

.main-nav{

    display:flex;

    gap:34px;

}

.main-nav a{

    color:#475569;

    font-weight:600;

    transition:var(--transition);

}

.main-nav a:hover{

    color:var(--gold);

}

/* =====================================================
   HERO
===================================================== */

.hero{

    background:
        radial-gradient(circle at top right,
        rgba(212,175,55,.20),
        transparent 35%),

        linear-gradient(
        135deg,
        #061325,
        #10274b);

    color:white;

    padding:35px 0 35px;

    overflow:hidden;

}

.hero-grid{

    display:grid;

    grid-template-columns:56% 44%;

    gap:0px;

    align-items:center;

}

.hero-left{

    max-width:760px;

    padding-right:20px;

}

.hero-badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:

        rgba(212,175,55,.15);

    color:var(--gold);

    font-size:14px;

    font-weight:700;

    margin-bottom:24px;

}

.hero-title{

    font-size:58px;

    font-weight:800;

    line-height:1.02;

    letter-spacing:-0.06em;

    max-width:900px;

    margin-bottom:20px;

}

.hero-text{

    font-size:20px;

    line-height:1.9;

    color:rgba(255,255,255,.82);

    max-width:620px;

    margin-bottom:28px;

}

/* ==========================
   Hero Feature Cards
========================== */

.hero-feature-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

    margin-bottom:42px;

}

.hero-feature-card{

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

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

    border-radius:14px;

    padding:16px;

    backdrop-filter:blur(12px);

    transition:.3s;

}

.hero-feature-card:hover{

    transform:translateY(-5px);

    border-color:rgba(212,175,55,.45);

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

}

.feature-number{

    color:var(--gold);

    font-size:22px;

    font-weight:800;

    margin-bottom:8px;

}

.feature-text{

    color:rgba(255,255,255,.82);

    font-size:14px;

    line-height:1.6;

}

/* =====================================================
   Hero
===================================================== */

.hero-check{

    list-style:none;

    display:grid;

    gap:14px;

    margin-bottom:42px;

}

.hero-check li{

    color:rgba(255,255,255,.92);

    font-size:17px;

}

.generate-check{

    list-style:none;

    display:grid;

    gap:14px;

    margin-bottom:28px;

}

.generate-check li{

    color:var(--text);

    font-size:17px;

}

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 38px;

    border-radius:16px;

    background:linear-gradient(
        180deg,
        #e8c85d,
        #c99a22
    );

    color:#081a35;

    font-size:17px;

    font-weight:800;

    letter-spacing:.03em;

    transition:.28s;

    box-shadow:
        0 15px 35px rgba(212,175,55,.35);

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:
        0 20px 45px rgba(212,175,55,.45);

}

.hero-note{

    margin-top:16px;

    font-size:13px;

    color:rgba(255,255,255,.55);

}

.hero-right{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    padding-left:30px;

}

.hero-globe{

    width:620px;

    height:620px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-left:auto;

    position:relative;

    animation:floatGlobe 6s ease-in-out infinite;

}

.hero-circle{

    width:420px;

    height:420px;

    border-radius:50%;

    background:

    radial-gradient(
        circle at center,

        rgba(255,255,255,.08),

        rgba(255,255,255,.02)

    );

    border:

        1px solid

        rgba(255,255,255,.15);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    position:relative;

}

.hero-circle::before{

    content:"";

    position:absolute;

    inset:30px;

    border-radius:50%;

    border:

    1px solid

    rgba(212,175,55,.35);

}

.circle-title{

    font-size:34px;

    font-weight:800;

    color:var(--gold);

}

.circle-sub{

    margin-top:12px;

    color:rgba(255,255,255,.75);

}

/* =====================================================
   Service Card
===================================================== */

.service-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:28px;

    margin-top:60px;

    margin-bottom:-40px;

    position:relative;

    z-index:5;

}

.service-card{

    background:white;

    border-radius:22px;

    padding:34px;

    box-shadow:var(--shadow);

    transition:.28s;

}

.service-card:hover{

    transform:translateY(-8px);

}

.service-icon{

    width:56px;

    height:56px;

    border-radius:50%;

    background:var(--navy);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    margin-bottom:22px;

}

.service-arrow{

    width:36px;

    height:36px;

    border-radius:50%;

    background:#f1f5f9;

    color:var(--navy);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-top:18px;

    transition:.25s;

}

.service-card:hover .service-arrow{

    background:var(--navy);

    color:white;

}

.service-card h3{

    color:var(--navy);

    margin-bottom:14px;

    font-size:24px;

}

.service-card p{

    color:var(--muted);

}

/* =====================================================
   Latest Draw
===================================================== */

.latest-card{

    background:linear-gradient(135deg,#081a35,#10274b);

    color:#fff;

    border-radius:26px;

    padding:42px;

    box-shadow:var(--shadow);

    margin:80px 0;

}

.card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.card-header h2{

    color:#fff;

    font-size:34px;

}

.draw-number{

    color:var(--gold);

    font-weight:700;

}

.lottery-balls{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:16px;

    margin-bottom:40px;

}

.bonus-wrap{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    margin-left:24px;

    padding-left:24px;

    border-left:1px solid rgba(255,255,255,.15);

}

.bonus-label{

    font-size:12px;

    color:var(--gold);

}

.ball{

    width:66px;

    height:66px;

    border-radius:50%;

    background:

    linear-gradient(
        180deg,
        #ffffff,
        #edf2f7);

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:800;

    color:var(--navy);

    font-size:22px;

    box-shadow:

        0 8px 20px

        rgba(8,26,53,.08);

}

.bonus-ball{

    width:66px;

    height:66px;

    border-radius:50%;

    background:

    linear-gradient(
        180deg,
        #ffe27a,
        #d4af37);

    color:var(--navy);

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:800;

    font-size:22px;

    box-shadow:

        0 8px 20px

        rgba(212,175,55,.35);

}

.draw-info{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:22px;

    margin-bottom:34px;

}

.draw-item{

    background:#f8fafc;

    border-radius:18px;

    padding:22px;

}

.draw-item span{

    display:block;

    color:var(--muted);

    font-size:14px;

    margin-bottom:10px;

}

.draw-item strong{

    color:var(--navy);

}

.latest-card .draw-item{

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

}

.latest-card .draw-item span{

    color:rgba(255,255,255,.6);

}

.latest-card .draw-item strong{

    color:#fff;

}

.btn-outline{

    display:inline-flex;

    padding:16px 30px;

    border-radius:14px;

    border:2px solid var(--navy);

    color:var(--navy);

    font-weight:700;

    transition:.25s;

}

.btn-outline:hover{

    background:var(--navy);

    color:white;

}

.latest-card .btn-outline{

    border-color:rgba(212,175,55,.6);

    color:var(--gold);

}

.latest-card .btn-outline:hover{

    background:var(--gold);

    color:var(--navy);

}

.latest-actions{

    text-align:center;

    margin-top:10px;

}

/* =====================================================
   Footer + Mobile
===================================================== */

.site-footer{

    background:#081a35;

    color:white;

}

.footer-inner{

    min-height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.footer-nav{

    display:flex;

    gap:24px;

}

.footer-nav a{

    color:rgba(255,255,255,.75);

}

.footer-nav a:hover{

    color:var(--gold);

}

@media(max-width:900px){

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero h1{

        font-size:42px;

    }

    .hero-right{

        margin-top:30px;

    }

    .hero-circle{

        width:280px;

        height:280px;

    }

    .service-grid{

        grid-template-columns:1fr;

        margin-top:30px;

    }

    .draw-info{

        grid-template-columns:1fr;

    }

    .footer-inner{

        flex-direction:column;

        padding:28px 0;

        gap:20px;

    }

}

/* =====================================================
   GENERATE PAGE
===================================================== */

.hero-small{

    padding:70px 0;

}

.generate-layout{

    display:grid;

    grid-template-columns:1fr 420px;

    gap:40px;

    margin-top:50px;

    align-items:start;

}

.generate-card,
.progress-card,
.ai-panel{

    background:#fff;

    border-radius:24px;

    padding:34px;

    box-shadow:var(--shadow);

}

.generate-card h2{

    color:var(--navy);

    margin-bottom:18px;

}

.generate-card p{

    color:var(--muted);

    margin-bottom:28px;

}

.progress-card{

    margin-top:28px;

}

.progress-card h3{

    margin-bottom:24px;

    color:var(--navy);

}

.progress-item{

    display:flex;

    justify-content:space-between;

    margin-top:20px;

    margin-bottom:8px;

    font-weight:600;

}

.progress-bar{

    width:100%;

    height:8px;

    background:#edf2f7;

    border-radius:999px;

    overflow:hidden;

}

.progress-fill{

    width:0;

    height:100%;

    background:linear-gradient(
        90deg,
        var(--gold),
        #f7d977);

    transition:1s;

}

.best-score{

    margin-top:28px;

    text-align:center;

    font-size:20px;

    color:var(--navy);

}

.ai-panel{

    text-align:center;

    position:sticky;

    top:110px;

}

.ai-logo{

    font-size:28px;

    font-weight:800;

    color:var(--gold);

}

.ai-circle{

    width:240px;

    height:240px;

    margin:40px auto;

    border-radius:50%;

    border:2px solid rgba(212,175,55,.35);

    position:relative;

}

.pulse{

    position:absolute;

    inset:0;

    border-radius:50%;

    border:2px solid rgba(212,175,55,.5);

    animation:pulse 3s infinite;

    animation-play-state:paused;

    opacity:0;

}

.ai-panel.active .pulse{
    animation-play-state:running;
    opacity:1;
}

.pulse2{

    animation-delay:1s;

}

.pulse3{

    animation-delay:2s;

}

@keyframes pulse{

    0%{

        transform:scale(.75);

        opacity:.9;

    }

    100%{

        transform:scale(1.18);

        opacity:0;

    }

}

.ai-status{

    font-size:20px;

    font-weight:700;

    color:var(--navy);

    margin-bottom:16px;

}

.result-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:20px;

    margin:60px 0;

}

.result-card{

    background:white;

    border-radius:22px;

    padding:24px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.25s;

}

.result-card:hover{

    transform:translateY(-8px);

}

.result-rank{

    color:var(--gold);

    font-weight:800;

    font-size:22px;

}

.result-number{

    margin:22px 0;

    font-size:22px;

    line-height:1.7;

    color:var(--navy);

    font-weight:700;

}

.result-score{

    color:var(--muted);

}

.result-score strong{

    color:var(--navy);

    font-size:22px;

}

@media(max-width:900px){

    .generate-layout{

        grid-template-columns:1fr;

    }

    .result-grid{

        grid-template-columns:1fr;

    }

    .ai-panel{

        position:relative;

        top:0;

    }

}

/* =====================================================
   Generate Premium UI v1
===================================================== */

.generate-card{

    position:relative;

    overflow:hidden;

}

.generate-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--gold),
        #f8d86f,
        var(--gold)
    );

}

.generate-card h2{

    font-size:34px;

}

.progress-card{

    border:1px solid rgba(212,175,55,.18);

}

.progress-card:hover{

    transform:translateY(-4px);

    transition:.25s;

}

.ai-panel{

    background:

        linear-gradient(
            180deg,
            #ffffff,
            #f9fbff
        );

}

.ai-logo{

    letter-spacing:.08em;

}

.ai-status{

    margin-top:18px;

    font-size:22px;

}

.ai-panel p{

    color:var(--muted);

    margin-top:20px;

    line-height:1.8;

}

.generate-card,
.progress-card,
.ai-panel,
.result-card{

    transition:.28s;

}

.generate-card:hover,
.progress-card:hover,
.ai-panel:hover{

    transform:translateY(-6px);

    box-shadow:

        0 25px 60px

        rgba(8,26,53,.12);

}

.result-card{

    cursor:pointer;

}

.result-card::after{

    content:"CORE14-PRO";

    display:block;

    margin-top:18px;

    color:var(--gold);

    font-size:12px;

    letter-spacing:.15em;

}

.result-card:hover{

    border:1px solid rgba(212,175,55,.25);

}

/* =====================================================
   AI LIVE EFFECT
===================================================== */

.ai-circle{

    position:relative;

    overflow:hidden;

}

.ai-circle::after{

    content:"";

    position:absolute;

    inset:18px;

    border-radius:50%;

    border:2px solid rgba(212,175,55,.45);

    animation:rotateRing 6s linear infinite;

    animation-play-state:paused;

}

.ai-circle::before{

    content:"";

    position:absolute;

    inset:45px;

    border-radius:50%;

    border:2px dashed rgba(212,175,55,.55);

    animation:rotateRingReverse 9s linear infinite;

    animation-play-state:paused;

}

.ai-panel.active .ai-circle::after,
.ai-panel.active .ai-circle::before{
    animation-play-state:running;
}

@keyframes rotateRing{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes rotateRingReverse{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}

.ai-logo{

    animation:logoGlow 2.8s ease-in-out infinite;

}

@keyframes logoGlow{

    0%{

        opacity:.75;

    }

    50%{

        opacity:1;

        text-shadow:

        0 0 14px rgba(212,175,55,.55);

    }

    100%{

        opacity:.75;

    }

}

.progress-fill{

    position:relative;

}

.progress-fill::after{

    content:"";

    position:absolute;

    right:-6px;

    top:-3px;

    width:14px;

    height:14px;

    border-radius:50%;

    background:white;

    box-shadow:

        0 0 12px rgba(212,175,55,.8);

}

.result-card{

    opacity:0;

    transform:translateY(18px);

    animation:fadeCard .5s forwards;

}

.result-card:nth-child(1){

    animation-delay:.10s;

}

.result-card:nth-child(2){

    animation-delay:.22s;

}

.result-card:nth-child(3){

    animation-delay:.34s;

}

.result-card:nth-child(4){

    animation-delay:.46s;

}

.result-card:nth-child(5){

    animation-delay:.58s;

}

@keyframes fadeCard{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* =====================================================
   AI RUNNING EFFECT
===================================================== */

#run-ai.running{

    background:var(--navy) !important;

    color:white !important;

    box-shadow:
        0 15px 35px rgba(8,26,53,.35);

}

.ai-panel.active .ai-circle{

    box-shadow:

        0 0 35px rgba(212,175,55,.35),

        0 0 80px rgba(212,175,55,.18);

    transition:.4s;

}

.ai-panel.active .ai-logo{

    color:#f5d36a;

    text-shadow:

        0 0 16px rgba(212,175,55,.6);

}

.progress-fill{

    transition:width .8s ease;

}

/* =====================================================
   HERO GLOBE
===================================================== */

.globe-core{

    position:absolute;

    inset:45px;

    border-radius:50%;

    background:

    radial-gradient(circle at 30% 30%,

    #274d7a,

    #0f172a 70%,

    #081221);

    box-shadow:

    0 0 70px rgba(212,175,55,.18);

    border:1px solid rgba(255,215,0,.10);

    overflow:hidden;

    background-image:

    radial-gradient(
    circle at 30% 30%,
    rgba(255,255,255,.10),
    transparent 45%
    ),

    radial-gradient(
    circle at 70% 70%,
    rgba(0,0,0,.18),
    transparent 60%
    );

}

.globe-grid{

    position:absolute;

    inset:25px;

    overflow:hidden;

    border-radius:50%;

    border:1px solid rgba(255,215,0,.08);

    background:

    repeating-linear-gradient(

        0deg,

        transparent 0 18px,

        rgba(212,175,55,.08) 19px,

        transparent 20px

    ),

    repeating-linear-gradient(

        90deg,

        transparent 0 18px,

        rgba(212,175,55,.08) 19px,

        transparent 20px

    );

animation:none;

opacity:.0;

}

@keyframes spinGrid{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.globe-ring{

    position:absolute;

    inset:0;

    border-radius:50%;

    border:2px solid rgba(255,215,0,.75);

    box-shadow:0 0 18px rgba(255,215,0,.45);

    animation:orbit 14s linear infinite;

}

@keyframes orbit{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.ring1{

    animation:spin 26s linear infinite;
}

.ring2{

    inset:18px;

    animation:spinReverse 18s linear infinite;
}

.ring3{

    inset:36px;

    animation:spin 12s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes spinReverse{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}

.hero-globe::before{

    content:"";

    position:absolute;

    inset:80px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(255,255,255,.18),

        transparent 70%

    );

    animation:pulseGlow 4s ease-in-out infinite;

}

@keyframes pulseGlow{

    0%{

        transform:scale(.95);

        opacity:.5;

    }

    50%{

        transform:scale(1.05);

        opacity:1;

    }

    100%{

        transform:scale(.95);

        opacity:.5;

    }

}

/* =====================================================
   GLOBE NETWORK
===================================================== */

@keyframes floatGlobe{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

.globe-core{

    overflow:hidden;

}

.globe-core::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        radial-gradient(circle,#d4af37 1.5px,transparent 2px);

    background-size:42px 42px;

    opacity:.35;

    animation:networkMove 18s linear infinite;

}

.globe-core::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    repeating-linear-gradient(

        45deg,

        transparent,

        transparent 26px,

        rgba(212,175,55,.06) 27px,

        rgba(212,175,55,.06) 28px

    );

    animation:gridMove 16s linear infinite;

}

@keyframes networkMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-42px);

    }

}

@keyframes gridMove{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(42px);

    }

}

@keyframes lightSweep{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.orbit-dot{

    position:absolute;

    width:14px;

    height:14px;

    border-radius:50%;

    background:#ffd700;

    box-shadow:
        0 0 10px rgba(255,215,0,.9),
        0 0 22px rgba(255,215,0,.7);

}

.dot1{

    top:-7px;

    left:50%;

    margin-left:-7px;

}

.dot2{

    top:50%;

    right:-7px;

    margin-top:-7px;

}

.dot3{

    bottom:-7px;

    left:50%;

    margin-left:-7px;

}

@keyframes orbitDot1{

    from{transform:rotate(0deg) translateX(210px) rotate(0deg);}
    to{transform:rotate(360deg) translateX(210	px) rotate(-360deg);}

}

@keyframes orbitDot2{

    from{transform:rotate(120deg) translateX(210px) rotate(-120deg);}
    to{transform:rotate(480deg) translateX(210px) rotate(-480deg);}

}

@keyframes orbitDot3{

    from{transform:rotate(240deg) translateX(174px) rotate(-240deg);}
    to{transform:rotate(600deg) translateX(174px) rotate(-600deg);}

}

@keyframes globeRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ========================================
   HISTORY SEARCH
======================================== */

.history-toolbar{

    margin:40px 0 24px;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:16px;

}

.history-reset{

    padding:14px 22px;

    font-size:15px;

    white-space:nowrap;

}

.history-search{

    display:flex;

    gap:12px;

}

.history-search input{

    width:240px;

    padding:14px 18px;

    border:1px solid #d7dde8;

    border-radius:14px;

    font-size:16px;

    outline:none;

    transition:.25s;

}

.history-search input:focus{

    border-color:#d4af37;

    box-shadow:0 0 0 4px rgba(212,175,55,.15);

}

.history-search button{

    padding:14px 24px;

    border:none;

    border-radius:14px;

    background:#0b2148;

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.history-search button:hover{

    background:#123468;

}

/* =====================================================
   ANALYSIS PAGE
===================================================== */

.analysis-section{
    padding-top:30px;
    padding-bottom:80px;
}

.analysis-card{
    background:#fff;
    border-radius:22px;
    padding:30px;
    box-shadow:var(--shadow);
}

.analysis-card h3{
    color:var(--navy);
    margin-bottom:20px;
    font-size:20px;
}

.analysis-card h4{
    color:var(--navy);
    margin-bottom:16px;
    font-size:16px;
}

.analysis-card.full-width{
    margin-top:28px;
}

.analysis-hotcold-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    margin-top:30px;
}

.bar-list{
    display:grid;
    gap:12px;
}

.bar-row{
    display:grid;
    grid-template-columns:24px 32px 1fr 50px;
    align-items:center;
    gap:10px;
}

.bar-rank{
    color:var(--muted);
    font-size:13px;
}

.bar-number{
    font-weight:800;
    color:var(--navy);
}

.bar-track{
    background:#f1f5f9;
    border-radius:999px;
    height:10px;
    overflow:hidden;
}

.bar-fill{
    height:100%;
    border-radius:999px;
}

.bar-fill.hot{
    background:linear-gradient(90deg,#f8d86f,var(--gold));
}

.bar-fill.cold{
    background:linear-gradient(90deg,#93c5fd,#3b82f6);
}

.bar-count{
    font-size:13px;
    color:var(--muted);
    text-align:right;
}

.analysis-stat-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-top:28px;
}

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

.stat-table tr{
    border-bottom:1px solid var(--border);
}

.stat-table tr:last-child{
    border-bottom:none;
}

.stat-table td{
    padding:10px 4px;
    color:var(--text);
}

.stat-table td:last-child{
    text-align:right;
    font-weight:700;
    color:var(--navy);
}

.stat-table.two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
}

.stat-table.two-col tr{
    display:contents;
}

.number-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(70px,1fr));
    gap:12px;
}

.number-cell{
    background:#f8fafc;
    border-radius:14px;
    padding:12px 8px;
    text-align:center;
}

.number-cell-num{
    display:block;
    font-weight:800;
    color:var(--navy);
    font-size:18px;
}

.number-cell-count{
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-top:4px;
}

.analysis-draw-list{
    display:grid;
    gap:14px;
}

.analysis-draw-row{
    display:flex;
    align-items:center;
    gap:24px;
    padding:14px 0;
    border-bottom:1px solid var(--border);
}

.draw-no-label{
    min-width:90px;
    font-weight:700;
    color:var(--navy);
}

.lottery-balls.small .ball{
    width:42px;
    height:42px;
    font-size:15px;
}

.bonus-ball.small{
    width:42px;
    height:42px;
    font-size:15px;
}

@media(max-width:900px){
    .analysis-hotcold-grid{
        grid-template-columns:1fr;
    }
    .analysis-stat-grid{
        grid-template-columns:1fr 1fr;
    }
}

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

.digit-cell{
    background:#f8fafc;
    border-radius:14px;
    padding:14px 8px;
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.digit-cell-label{
    font-size:12px;
    color:var(--muted);
}

.digit-cell-count{
    font-weight:800;
    color:var(--navy);
    font-size:20px;
}

/* =====================================================
   PREDICT PAGE
===================================================== */

.predict-section{
    padding-top:60px;
    padding-bottom:60px;
}

.section-heading{
    text-align:center;
    max-width:640px;
    margin:0 auto 40px;
}

.section-heading h2{
    color:var(--navy);
    font-size:32px;
    margin-bottom:14px;
}

.section-heading p{
    color:var(--muted);
    font-size:16px;
}

.promise-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.promise-card{
    background:#fff;
    border-radius:22px;
    padding:32px;
    box-shadow:var(--shadow);
}

.promise-card h4{
    color:var(--gold);
    font-size:14px;
    letter-spacing:.08em;
    margin-bottom:14px;
    text-transform:uppercase;
}

.promise-card p{
    color:var(--text);
    line-height:1.8;
}

.promise-card.gold{
    background:linear-gradient(135deg,#081a35,#10274b);
}

.promise-card.gold h4{
    color:var(--gold);
}

.promise-card.gold p{
    color:rgba(255,255,255,.85);
}

.principles-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.principle-card{
    background:#fff;
    border-radius:22px;
    padding:30px 26px;
    box-shadow:var(--shadow);
    position:relative;
}

.principle-number{
    display:block;
    font-size:32px;
    font-weight:800;
    color:rgba(212,175,55,.35);
    margin-bottom:14px;
}

.principle-card p{
    color:var(--navy);
    font-weight:600;
    line-height:1.7;
}

.flow-steps{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:16px;
}

.flow-step{
    background:#fff;
    border-radius:20px;
    box-shadow:var(--shadow);
    padding:26px 20px;
    width:150px;
    text-align:center;
}

.flow-icon{
    font-size:32px;
    margin-bottom:12px;
}

.flow-step p{
    color:var(--navy);
    font-weight:700;
    font-size:14px;
}

.flow-arrow{
    color:var(--gold);
    font-size:22px;
    font-weight:800;
}

@media(max-width:900px){
    .flow-arrow{
        transform:rotate(90deg);
    }
}

.feature-tags{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

.feature-tag{
    background:#fff;
    border:1px solid var(--border);
    border-radius:999px;
    padding:12px 22px;
    font-size:14px;
    font-weight:600;
    color:var(--navy);
    box-shadow:var(--shadow);
}

.feature-tag.gold{
    background:linear-gradient(180deg,#e8c85d,#c99a22);
    color:var(--navy);
    border:none;
    font-weight:800;
}

.charter-section{
    background:linear-gradient(135deg,#081a35,#10274b);
    padding:90px 0;
}

.charter-block{
    max-width:720px;
    margin:0 auto;
    text-align:center;
}

.charter-quote-en{
    color:var(--gold);
    font-size:20px;
    font-style:italic;
    line-height:1.8;
    margin-bottom:24px;
}

.charter-quote-jp{
    color:#fff;
    font-size:24px;
    font-weight:800;
    line-height:1.7;
    margin-bottom:36px;
}

.charter-divider{
    width:60px;
    height:2px;
    background:var(--gold);
    margin:0 auto 36px;
}

.charter-body{
    color:rgba(255,255,255,.75);
    font-size:16px;
    line-height:2;
}

.predict-cta-section{
    padding:80px 0 100px;
}

.predict-cta{
    text-align:center;
}

.predict-cta h2{
    color:var(--navy);
    font-size:32px;
    margin-bottom:32px;
    line-height:1.5;
}

@media(max-width:900px){

    .promise-grid{
        grid-template-columns:1fr;
    }

    .principles-grid{
        grid-template-columns:1fr 1fr;
    }

    .flow-steps{
        flex-direction:column;
    }

}

/* =====================================================
   PRICING PAGE
===================================================== */

.pricing-section{
    padding-top:60px;
    padding-bottom:60px;
}

.pricing-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:32px;
    max-width:900px;
    margin:0 auto;
}

.pricing-card{
    background:#fff;
    border-radius:26px;
    padding:40px;
    box-shadow:var(--shadow);
    position:relative;
}

.pricing-card.featured{
    background:linear-gradient(135deg,#081a35,#10274b);
    color:#fff;
    border:2px solid var(--gold);
}

.pricing-badge{
    position:absolute;
    top:-14px;
    right:32px;
    background:var(--gold);
    color:var(--navy);
    font-size:12px;
    font-weight:800;
    padding:6px 16px;
    border-radius:999px;
}

.pricing-name{
    font-size:15px;
    font-weight:700;
    color:var(--muted);
    margin-bottom:14px;
}

.pricing-card.featured .pricing-name{
    color:rgba(255,255,255,.7);
}

.pricing-price{
    display:flex;
    align-items:baseline;
    gap:6px;
    margin-bottom:18px;
}

.price-amount{
    font-size:42px;
    font-weight:800;
    color:var(--navy);
}

.pricing-card.featured .price-amount{
    color:#fff;
}

.price-period{
    font-size:14px;
    color:var(--muted);
}

.pricing-card.featured .price-period{
    color:rgba(255,255,255,.6);
}

.pricing-desc{
    color:var(--muted);
    margin-bottom:28px;
    font-size:14px;
}

.pricing-card.featured .pricing-desc{
    color:rgba(255,255,255,.75);
}

.pricing-features{
    list-style:none;
    display:grid;
    gap:14px;
    margin-bottom:32px;
}

.pricing-features li{
    font-size:15px;
    color:var(--text);
}

.pricing-card.featured .pricing-features li{
    color:rgba(255,255,255,.9);
}

.pricing-btn{
    width:100%;
    text-align:center;
    justify-content:center;
}

.benefit-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.benefit-card{
    background:#fff;
    border-radius:20px;
    padding:28px;
    box-shadow:var(--shadow);
    text-align:center;
}

.benefit-icon{
    font-size:32px;
    margin-bottom:16px;
}

.benefit-card h4{
    color:var(--navy);
    margin-bottom:10px;
    font-size:16px;
}

.benefit-card p{
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
}

.pricing-note{
    max-width:760px;
    margin:0 auto;
    text-align:center;
    padding:28px;
    background:#f8fafc;
    border-radius:18px;
}

.pricing-note p{
    color:var(--muted);
    font-size:14px;
    line-height:1.9;
}

@media(max-width:900px){

    .pricing-grid{
        grid-template-columns:1fr;
    }

    .benefit-grid{
        grid-template-columns:1fr 1fr;
    }

}

/* =====================================================
   MOBILE NAV
===================================================== */

.nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:32px;
    height:32px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
}

.nav-toggle span{
    display:block;
    width:100%;
    height:2px;
    background:var(--navy);
    border-radius:2px;
    transition:.25s;
}

.nav-toggle.active span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2){
    opacity:0;
}

.nav-toggle.active span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

@media(max-width:1200px){

    .nav-toggle{
        display:flex;
    }

    .main-nav{
        display:none;
        position:absolute;
        top:78px;
        left:0;
        right:0;
        background:#fff;
        flex-direction:column;
        gap:0;
        border-top:1px solid #edf2f7;
        box-shadow:0 12px 24px rgba(8,26,53,.08);
    }

    .main-nav.open{
        display:flex;
    }

    .main-nav a{
        padding:18px 24px;
        border-bottom:1px solid #f1f5f9;
    }

    .site-header{
        position:sticky;
    }

    .header-inner{
        position:relative;
    }

}

html, body{
    overflow-x:hidden;
}

@media(max-width:900px){

    .hero-right{
        width:100%;
        justify-content:center;
        padding-left:0;
        margin-top:30px;
    }

    .hero{
        overflow:hidden;
    }

    .hero-globe{
        width:260px;
        height:260px;
        margin-left:0;
        margin-right:0;
    }

    .hero-feature-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:600px){

    .hero h1{
        font-size:32px;
        overflow-wrap:break-word;
        line-height:1.4;
    }

    .hero-text{
        font-size:15px;
        overflow-wrap:break-word;
        line-height:1.8;
    }

    .hero-badge{
        font-size:13px;
        white-space:normal;
    }

    .sm-break{
        display:block;
    }

}


.sm-break{
    display:none;
}
@media(max-width:600px){

    .hero-left{
        padding-right:0;
        max-width:none;
    }

}

.gold-word{
    color:var(--gold);
}

.hero-text-large{
    font-size:1.15em;
    font-weight:700;
}

@media(max-width:600px){

    .nowrap-line{
        display:inline-block;
        white-space:nowrap;
        font-size:13.5px;
    }

}

/* =====================================================
   LEGAL PAGES (利用規約・プライバシー・会社概要・特商法)
===================================================== */

.legal-section{
    padding-top:40px;
    padding-bottom:40px;
}

.legal-section-top0{
    padding-top:0;
}

.legal-content{
    max-width:820px;
    margin:0 auto;
    background:#fff;
    border-radius:22px;
    padding:44px;
    box-shadow:var(--shadow);
}

.legal-meta{
    color:var(--muted);
    font-size:14px;
    margin-bottom:24px;
}

.legal-content h2{
    color:var(--navy);
    font-size:20px;
    margin-top:36px;
    margin-bottom:14px;
}

.legal-content h2:first-child{
    margin-top:0;
}

.legal-content p{
    color:var(--text);
    line-height:1.9;
    margin-bottom:14px;
}

.legal-content ul{
    margin:0 0 14px 22px;
}

.legal-content li{
    color:var(--text);
    line-height:1.9;
    margin-bottom:6px;
}

.legal-content a{
    color:var(--gold);
    text-decoration:underline;
}

@media(max-width:600px){

    .legal-content{
        padding:28px 22px;
    }

}

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

.info-table tr{
    border-bottom:1px solid var(--border);
}

.info-table tr:last-child{
    border-bottom:none;
}

.info-table th{
    text-align:left;
    color:var(--navy);
    font-weight:700;
    padding:16px 20px 16px 0;
    width:180px;
    vertical-align:top;
}

.info-table td{
    color:var(--text);
    line-height:1.8;
    padding:16px 0;
}

.legal-note{
    margin-top:24px;
    color:var(--muted);
    font-size:14px;
}

@media(max-width:600px){

    .info-table tr{
        display:flex;
        flex-direction:column;
        padding:14px 0;
        gap:6px;
    }

    .info-table th{
        padding:0;
        width:auto;
    }

    .info-table td{
        padding:0;
    }

}

@media(max-width:600px){

    .footer-inner{
        flex-direction:column;
        gap:20px;
        padding:30px 0;
        text-align:center;
    }

    .footer-nav{
        flex-wrap:wrap;
        justify-content:center;
        gap:16px;
        row-gap:10px;
    }

    .footer-nav a{
        white-space:nowrap;
        font-size:13px;
    }

}

/* =====================================================
   BACK TO TOP BUTTON
===================================================== */

.back-to-top{
    position:fixed;
    bottom:28px;
    right:28px;
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--navy);
    color:var(--gold);
    border:none;
    font-size:20px;
    font-weight:800;
    cursor:pointer;
    box-shadow:var(--shadow);
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:.25s;
    z-index:900;
}

.back-to-top.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.back-to-top:hover{
    background:var(--gold);
    color:var(--navy);
}

@media(max-width:600px){

    .back-to-top{
        bottom:20px;
        right:20px;
        width:44px;
        height:44px;
        font-size:18px;
    }

}

/* =====================================================
   CONTACT FORM
===================================================== */

.contact-form{
    display:grid;
    gap:24px;
}

.contact-form label{
    display:grid;
    gap:10px;
    color:var(--navy);
    font-weight:700;
    font-size:14px;
}

.required{
    color:#e11d48;
    font-size:11px;
    font-weight:700;
    background:rgba(225,29,72,.08);
    padding:2px 8px;
    border-radius:999px;
}

.contact-form input,
.contact-form textarea{
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px 16px;
    font-size:15px;
    font-family:inherit;
    color:var(--text);
    outline:none;
    transition:.25s;
    resize:vertical;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(212,175,55,.15);
}

.contact-form button{
    justify-self:start;
}

.contact-success{
    text-align:center;
    padding:40px 20px;
}

.contact-success h2{
    color:var(--navy);
    margin-bottom:14px;
}

.contact-success p{
    color:var(--muted);
}

.contact-error{
    background:rgba(225,29,72,.08);
    color:#be123c;
    padding:16px 20px;
    border-radius:14px;
    margin-bottom:24px;
    font-size:14px;
}

/* =====================================================
   AUTH PAGES
===================================================== */

.auth-content{
    max-width:480px;
}

.auth-switch{
    text-align:center;
    margin-top:20px;
    color:var(--muted);
    font-size:14px;
}

.nav-cta{
    background:var(--gold);
    color:var(--navy) !important;
    padding:10px 20px;
    border-radius:999px;
    font-weight:800;
}

@media(max-width:900px){

    .nav-cta{
        display:inline-block;
        margin:10px 24px;
    }

}

.main-nav a{
    white-space:nowrap;
}

@media(max-width:1500px){

    .logo-subtitle{
        display:none !important;
    }

}

.main-nav{
    align-items:center;
}

.legal-content .btn-primary{
    color:var(--navy) !important;
    text-decoration:none;
}

@media(max-width:600px){

    .legal-content .btn-primary{
        font-size:15px;
        line-height:1.5;
        padding:16px 20px;
        white-space:normal;
        text-align:center;
    }

}

.upsell-note{
    background:rgba(212,175,55,.10);
    color:var(--navy);
    padding:16px 20px;
    border-radius:14px;
    margin-bottom:24px;
    font-size:14px;
    line-height:1.8;
    border:1px solid rgba(212,175,55,.25);
}

.upsell-note a{
    color:var(--gold);
    font-weight:700;
    text-decoration:underline;
}

.latest-card .upsell-note{
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.85);
    border:1px solid rgba(212,175,55,.3);
}

.latest-card .upsell-note a{
    color:var(--gold);
}

.generate-note{
    margin-top:14px;
    font-size:13px;
    color:var(--muted);
}

.upgrade-result-card{
    grid-column:1 / -1;
    background:#fff;
    border-radius:22px;
    padding:40px;
    text-align:center;
    box-shadow:var(--shadow);
    border:1px solid rgba(212,175,55,.3);
}

.upgrade-result-card h3{
    color:var(--navy);
    margin-bottom:14px;
}

.upgrade-result-card p{
    color:var(--muted);
    margin-bottom:24px;
    line-height:1.8;
}

@media(max-width:600px){

    .upgrade-result-card .btn-primary{
        font-size:14px;
        white-space:nowrap;
        padding:14px 18px;
    }

}

/* =====================================================
   LOCKED CONTENT (磨りガラス演出)
===================================================== */

.locked-wrapper{
    position:relative;
}

.locked-wrapper .locked-inner{
    filter:blur(6px);
    user-select:none;
    pointer-events:none;
}

.locked-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
    background:rgba(255,255,255,.55);
    border-radius:22px;
    z-index:5;
}

.locked-overlay-icon{
    font-size:28px;
    margin-bottom:10px;
}

.locked-overlay p{
    color:var(--navy);
    font-weight:700;
    font-size:14px;
    margin-bottom:14px;
    max-width:260px;
}

.locked-overlay a{
    background:linear-gradient(180deg,#e8c85d,#c99a22);
    color:var(--navy);
    font-weight:800;
    padding:10px 20px;
    border-radius:999px;
    font-size:13px;
    text-decoration:none;
}

@media(max-width:600px){
    .sm-break{
        display:block !important;
    }
}

@media(max-width:600px){

    .contact-success p{
        text-align:center;
        font-size:14px;
    }

}

@media(max-width:600px){
    .sm-break-off{
        display:block;
        white-space:nowrap;
        font-size:13px;
    }
}

.terms-checkbox{
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start;
    gap:10px;
    font-weight:400 !important;
    font-size:14px;
    color:var(--muted);
}

.terms-checkbox input{
    width:auto !important;
    margin-top:3px;
    accent-color:var(--gold);
}

.terms-checkbox a{
    color:var(--gold);
    text-decoration:underline;
}

/* =====================================================
   AI SCAN RING (生成中のみ動作)
===================================================== */

.scan-ring{
    position:absolute;
    inset:8px;
    border-radius:50%;
    border:3px solid transparent;
    border-top-color:var(--gold);
    border-right-color:var(--gold);
    opacity:0;
    animation:scanSpin 2.2s linear infinite;
    animation-play-state:paused;
}

.scan-ring2{
    inset:28px;
    border-top-color:transparent;
    border-right-color:transparent;
    border-bottom-color:#f5d36a;
    border-left-color:#f5d36a;
    animation-duration:3.2s;
    animation-direction:reverse;
}

.ai-panel.active .scan-ring{
    opacity:.9;
    animation-play-state:running;
}

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

.scan-dot{
    position:absolute;
    top:50%;
    left:50%;
    width:10px;
    height:10px;
    margin:-5px 0 0 -5px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 0 rgba(212,175,55,.6);
    opacity:0;
}

.ai-panel.active .scan-dot{
    opacity:1;
    animation:scanDotPulse 1.6s ease-in-out infinite;
}

@keyframes scanDotPulse{
    0%{
        box-shadow:0 0 0 0 rgba(212,175,55,.6);
    }
    70%{
        box-shadow:0 0 0 22px rgba(212,175,55,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(212,175,55,0);
    }
}

.logo{
    white-space:nowrap;
    flex-shrink:0;
}

.logo-group{
    flex-shrink:0;
}

.logo-group{
    margin-right:20px;
}

@media(max-width:600px){

    .logo{
        font-size:22px;
    }

    .logo-group{
        margin-right:12px;
    }

}

.main-nav{
    gap:26px;
}

@media(max-width:1500px){

    .main-nav{
        gap:20px;
    }

}

.header-inner{
    min-height:96px;
    height:auto;
    padding:8px 0;
}

.logo-group img{
    position:relative;
    z-index:2;
    height:150px !important;
    width:150px !important;
    margin-right:-45px !important;
}

@media(max-width:1500px){

    .logo-group img{
        height:120px !important;
        width:120px !important;
        margin-right:-36px !important;
    }

}

@media(max-width:600px){

    .logo-group{
        justify-content:flex-start !important;
    }

    .logo-group img{
        height:100px !important;
        width:100px !important;
        margin-right:-30px !important;
    }

}

.header-inner{
    justify-content:flex-start;
    gap:40px;
}

.logo-group{
    margin-right:0;
}

.header-inner{
    justify-content:flex-start !important;
}

@media(max-width:600px){

    .logo-group img{
        height:48px !important;
        width:48px !important;
        margin-right:0 !important;
    }

}

.logo-group img{
    height:48px !important;
    width:48px !important;
    margin-right:0 !important;
}

@media(max-width:1500px){

    .header-inner{
        justify-content:space-between !important;
    }

}

.contact-checkbox-group{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-top:-10px;
}

.contact-checkbox{
    display:flex !important;
    flex-direction:row !important;
    align-items:center;
    gap:10px;
    font-weight:400 !important;
    font-size:14px;
    background:#f8fafc;
    padding:12px 16px;
    border-radius:12px;
    cursor:pointer;
}

.contact-checkbox input{
    width:auto !important;
    accent-color:var(--gold);
}

@media(max-width:600px){

    .contact-checkbox-group{
        grid-template-columns:1fr;
    }

}

.score-note{
    grid-column:1 / -1;
    background:#f8fafc;
    border-radius:14px;
    padding:18px 22px;
    margin-top:10px;
    font-size:13px;
    color:var(--muted);
    line-height:1.8;
}

.score-note strong{
    color:var(--navy);
}