@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
    --black:#050505;
    --dark:#111111;
    --orange:#ffad00;
    --orange-dark:#ef9200;
    --yellow:#ffc400;
    --bg:#f5f6f8;
    --card:#ffffff;
    --text:#171717;
    --muted:#737373;
    --border:#e5e7eb;
    --success:#16a34a;
    --header-height:82px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',Arial,sans-serif;
    font-size:14px;
}
a{text-decoration:none}
.site-header{
    position:sticky;
    top:0;
    z-index:1030;
    min-height:var(--header-height);
    background:#000;
    box-shadow:0 4px 20px rgba(0,0,0,.22);
}
.header-main{
    min-height:var(--header-height);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.brand img{
    display:block;
    width:auto;
    max-width:260px;
    height:60px;
    object-fit:contain;
}
.desktop-nav{align-items:center;gap:28px}
.desktop-nav a{
    color:#fff;
    font-size:13px;
    font-weight:600;
    transition:.2s;
}
.desktop-nav a:hover{color:var(--orange)}
.mobile-menu-btn{
    border-radius:10px;
    font-size:22px;
    padding:7px 11px;
}
.mobile-menu{background:#080808;color:#fff}
.mobile-menu .offcanvas-header{border-bottom:1px solid #242424}
.mobile-menu .offcanvas-title{font-weight:700}
.mobile-menu .offcanvas-body{padding:20px}
.mobile-menu a{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    padding:14px 10px;
    border-bottom:1px solid #222;
    font-weight:600;
}
.mobile-menu a i{color:var(--orange);font-size:18px}

.hero-section{padding:28px 0 18px}
.hero-card{
    position:relative;
    overflow:hidden;
    min-height:260px;
    border-radius:22px;
    background:
        radial-gradient(circle at 82% 20%,rgba(255,174,0,.32),transparent 28%),
        radial-gradient(circle at 92% 95%,rgba(255,196,0,.14),transparent 30%),
        linear-gradient(125deg,#090909 0%,#181818 52%,#090909 100%);
    border:1px solid #272727;
    box-shadow:0 16px 45px rgba(0,0,0,.15);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:38px 48px;
}
.hero-content{position:relative;z-index:2;max-width:650px}
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#111;
    background:var(--orange);
    padding:7px 12px;
    border-radius:100px;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.hero-content h1{
    color:#fff;
    font-size:42px;
    line-height:1.05;
    margin:18px 0 10px;
    font-weight:800;
}
.hero-content p{
    color:#cfcfcf;
    line-height:1.7;
    max-width:610px;
    margin:0;
}
.hero-points{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px}
.hero-points span{color:#fff;font-size:12px;font-weight:600}
.hero-points i{color:var(--orange);margin-right:5px}
.hero-visual{
    position:relative;
    width:270px;
    height:200px;
    flex:0 0 270px;
}
.lottery-balls{position:absolute;inset:0}
.ball{
    position:absolute;
    width:70px;height:70px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    font-weight:800;
    color:#111;
    background:linear-gradient(145deg,#fff,#cfcfcf);
    border:4px solid #f5a800;
    box-shadow:0 8px 20px rgba(0,0,0,.45);
}
.ball-1{left:20px;top:72px}
.ball-2{left:100px;top:18px}
.ball-3{right:8px;top:75px}
.ball-4{left:82px;bottom:2px}
.ball-5{right:45px;bottom:3px}
.winner-text{
    position:absolute;
    left:35px;right:25px;
    bottom:75px;
    text-align:center;
    color:#ffbd00;
    font-size:23px;
    font-weight:900;
    letter-spacing:7px;
    text-shadow:0 2px 10px rgba(255,170,0,.3);
    transform:rotate(-8deg);
}
.toolbar-section{padding:10px 0 8px}
.results-toolbar{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:16px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}
.results-toolbar h2{font-size:20px;font-weight:800;margin:0}
.results-toolbar p{font-size:12px;color:var(--muted);margin:4px 0 0}
.toolbar-actions{display:flex;align-items:center;gap:10px}
.search-box{
    width:250px;
    position:relative;
}
.search-box i{
    position:absolute;
    left:13px;top:50%;
    transform:translateY(-50%);
    color:#999;
}
.search-box input{
    width:100%;
    height:42px;
    border:1px solid var(--border);
    border-radius:10px;
    outline:none;
    padding:0 13px 0 38px;
    font-size:13px;
    transition:.2s;
}
.search-box input:focus{
    border-color:var(--orange);
    box-shadow:0 0 0 3px rgba(255,173,0,.12);
}
.refresh-btn{
    height:42px;
    background:var(--orange);
    color:#111;
    border:0;
    border-radius:10px;
    font-size:12px;
    font-weight:800;
    padding:0 15px;
}
.refresh-btn:hover{background:#ffbf25;color:#111}
.refresh-btn i{margin-right:5px}
.spin{animation:spin .65s linear}
@keyframes spin{to{transform:rotate(360deg)}}

.results-section{padding:22px 0}
.past-section{padding-top:35px}
.section-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    margin-bottom:14px;
}
.section-kicker{
    color:var(--orange-dark);
    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
}
.section-heading h2{
    margin:3px 0 0;
    font-size:24px;
    font-weight:800;
}
.result-status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--success);
    font-size:11px;
    font-weight:700;
    background:#ecfdf3;
    border:1px solid #c8f1d7;
    padding:7px 10px;
    border-radius:100px;
}
.results-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.result-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    transition:.2s;
}
.result-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,.07);
}
.result-card-head{
    min-height:40px;
    background:linear-gradient(90deg,#ffad00,#ffc21b);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 13px;
    color:#151515;
}
.draw-number{font-size:10px;font-weight:900;letter-spacing:.8px}
.draw-date{font-size:10px;font-weight:700}
.numbers-row{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    min-height:76px;
}
.number-box{
    min-width:0;
    border-right:1px solid #e8e8e8;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
}
.number-box:last-child{border-right:0}
.number{
    font-size:16px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.3px;
}
.number-box small{
    color:#5b5959;
    font-size:14px;
    font-weight:600;
}
.time-section{padding:28px 0 45px}
.time-card{
    overflow:hidden;
    border-radius:16px;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:0 8px 30px rgba(0,0,0,.05);
}
.time-header{
    background:#262626;
    color:#fff;
    padding:13px 18px;
    display:flex;
    align-items:center;
    gap:10px;
}
.time-header i{color:var(--orange)}
.time-header h2{font-size:16px;margin:0;font-weight:800}
.time-body{
    background:linear-gradient(135deg,#ffad00,#ffbd0a);
    padding:20px;
}
.time-title{
    text-align:center;
    font-size:15px;
    font-weight:900;
    letter-spacing:1px;
    margin-bottom:12px;
}
.time-list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    max-width:700px;
    margin:auto;
}
.time-list span{
    background:rgba(255,255,255,.35);
    border:1px solid rgba(0,0,0,.08);
    border-radius:8px;
    text-align:center;
    padding:10px 5px;
    font-size:14px;
    font-weight:700;
}
.time-list b{font-size:7px;margin-left:3px}
.time-note{
    margin:16px;
    color:#444;
    font-size:14px;
    line-height:1.6;
}
.site-footer{
    background:#f0f2f6;
    border-top:1px solid #dfe2e7;
    padding:17px 0;
}
.footer-inner{
    display:flex;
    justify-content:space-between;
    gap:15px;
    color:#777;
    font-size:13px;
}

@media (max-width: 991.98px){
    .brand img{height:55px;max-width:225px}
    .hero-card{padding:30px}
    .hero-content h1{font-size:36px}
    .hero-visual{transform:scale(.9);margin-right:-10px}
}
@media (max-width: 767.98px){
    :root{--header-height:70px}
    body{font-size:13px}
    .header-main{min-height:70px}
    .brand img{height:50px;max-width:200px}
    .hero-section{padding:15px 0 10px}
    .hero-card{
        min-height:auto;
        padding:25px 20px;
        border-radius:16px;
        display:block;
    }
    .hero-content h1{font-size:31px;margin-top:15px}
    .hero-content p{font-size:12px;line-height:1.6}
    .hero-points{gap:10px 15px}
    .hero-points span{font-size:10px}
    .hero-visual{
        width:100%;
        height:125px;
        margin:4px 0 -5px;
        transform:none;
    }
    .ball{width:52px;height:52px;font-size:20px;border-width:3px}
    .ball-1{left:8%;top:45px}
    .ball-2{left:32%;top:8px}
    .ball-3{right:7%;top:42px}
    .ball-4{left:48%;bottom:-2px}
    .ball-5{right:25%;bottom:0}
    .winner-text{
        left:18%;right:18%;bottom:42px;
        font-size:15px;letter-spacing:4px;
    }
    .results-toolbar{
        padding:13px;
        display:block;
        border-radius:12px;
    }
    .results-toolbar h2{font-size:18px}
    .toolbar-actions{margin-top:12px;display:grid;grid-template-columns:1fr auto}
    .search-box{width:auto}
    .refresh-btn{padding:0 11px}
    .refresh-btn span{display:none}
    .refresh-btn i{margin:0;font-size:17px}
    .section-heading{align-items:center}
    .section-heading h2{font-size:20px}
    .result-status{font-size:9px;padding:6px 8px}
    .results-grid{grid-template-columns:1fr;gap:10px}
    .result-card-head{min-height:37px}
    .numbers-row{min-height:68px}
    .number{font-size:14px}
    .number-box small{font-size:13px}
    .time-section{padding-top:10px}
    .time-list{grid-template-columns:repeat(2,1fr)}
    .footer-inner{display:block;text-align:center;line-height:1.8}
}
@media (max-width: 380px){
    .brand img{max-width:175px}
    .hero-content h1{font-size:27px}
    .hero-points span{font-size:9px}
    .number{font-size:13px}
    .draw-date{font-size:10px}
}


/* =========================================================
   SHARE BUTTONS
   ========================================================= */

.share-buttons{
    display:flex;
    align-items:center;
    gap:8px;
}

.share-btn{
    height:42px;
    border:0;
    border-radius:10px;
    padding:0 13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:12px;
    font-weight:800;
    transition:.2s;
}

.share-btn i{
    font-size:16px;
}

.whatsapp-btn{
    background:#25D366;
    color:#fff;
}

.whatsapp-btn:hover{
    background:#1ebe5d;
    color:#fff;
    transform:translateY(-1px);
}

.telegram-btn{
    background:#229ED9;
    color:#fff;
}

.telegram-btn:hover{
    background:#168dcc;
    color:#fff;
    transform:translateY(-1px);
}

/* =========================================================
   MOBILE SHARE DESIGN
   ========================================================= */

@media (max-width:767.98px){

    .toolbar-actions{
        display:grid;
        grid-template-columns:1fr auto;
        gap:9px;
    }

    .search-box{
        width:auto;
    }

    .refresh-btn{
        width:44px;
        padding:0;
    }

    .refresh-btn span{
        display:none;
    }

    .refresh-btn i{
        margin:0;
        font-size:17px;
    }

    .share-buttons{
        grid-column:1 / -1;
        width:100%;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:9px;
        margin-top:2px;
    }

    .share-btn{
        width:100%;
        height:40px;
        border-radius:9px;
        font-size:11px;
        padding:0 10px;
    }

    .share-btn span{
        display:inline;
    }

    .share-btn i{
        font-size:16px;
    }
}