/* =========================================================
   SNSCUUP PREMIUM GLOBAL DESIGN
   Existing functionality preserved
   ========================================================= */

:root{
    --p:#0b5c8e;
    --p2:#073b5c;
    --p3:#0a789d;
    --a:#f4a900;
    --a2:#ffd166;

    --bg:#f4f8fc;
    --surface:#ffffff;
    --surface2:#eef6fb;

    --text:#142536;
    --muted:#647789;
    --border:#dce7ef;

    --ok:#13795b;
    --danger:#b42318;

    --shadow-sm:0 5px 18px rgba(15,55,85,.07);
    --shadow-md:0 12px 32px rgba(15,55,85,.11);
    --shadow-lg:0 20px 50px rgba(5,42,66,.16);

    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:24px;

    --container:1180px;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Noto Sans Devanagari",
        "Noto Sans",
        sans-serif;

    color:var(--text);
    background:
        linear-gradient(
            180deg,
            #f7fbfe 0%,
            #f4f8fc 100%
        );

    line-height:1.65;
}

/* =========================================================
   TOP INFORMATION BAR
   ========================================================= */

.topbar{
    background:
        linear-gradient(
            90deg,
            var(--p2),
            var(--p)
        );

    color:#fff;

    padding:8px 4%;

    font-size:13px;

    text-align:center;

    border-bottom:1px solid rgba(255,255,255,.12);
}

.topbar a{
    color:#fff;
    text-decoration:none;
    font-weight:700;
}

.topbar b{
    color:var(--a2);
}

/* =========================================================
   MAIN NAVIGATION
   ========================================================= */

.nav{
    background:rgba(255,255,255,.97);

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

    gap:25px;

    padding:10px max(4%,calc((100% - var(--container))/2));

    box-shadow:
        0 3px 18px rgba(10,45,70,.09);

    position:sticky;
    top:0;
    z-index:100;

    border-bottom:1px solid rgba(15,70,100,.06);

    backdrop-filter:blur(10px);
}

.brand{
    display:flex;
    gap:11px;
    align-items:center;

    color:var(--p2);

    text-decoration:none;

    font-weight:850;

    min-width:0;
}

.brand img{
    width:52px;
    height:52px;

    object-fit:contain;

    border-radius:12px;

    background:#fff;

    box-shadow:
        0 4px 12px rgba(0,0,0,.08);
}

.brand span{
    line-height:1.25;
}

.brand small{
    display:block;

    color:var(--muted);

    font-size:11px;

    font-weight:650;

    margin-top:3px;
}

/* =========================================================
   NAV LINKS
   ========================================================= */

.links{
    display:flex;

    gap:7px;

    align-items:center;

    flex-wrap:wrap;

    justify-content:flex-end;
}

.links a{
    color:var(--p2);

    text-decoration:none;

    font-weight:700;

    font-size:14px;

    padding:9px 11px;

    border-radius:9px;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.links a:hover{
    background:#eaf5fb;

    color:var(--p);

    transform:translateY(-1px);
}

/* =========================================================
   MOBILE MENU
   ========================================================= */

.hamb{
    display:none;

    width:44px;
    height:44px;

    border:1px solid var(--border);

    border-radius:12px;

    background:#fff;

    color:var(--p2);

    font-size:25px;

    line-height:1;

    cursor:pointer;

    box-shadow:var(--shadow-sm);
}

/* =========================================================
   GENERAL CONTAINER
   ========================================================= */

.container{
    width:100%;

    max-width:var(--container);

    margin:auto;

    padding:34px 18px;
}

/* =========================================================
   COMMON SECTION
   ========================================================= */

section{
    position:relative;
}

.section-title{
    margin:42px 0 18px;

    color:var(--p2);

    font-size:
        clamp(23px,3vw,32px);

    line-height:1.25;

    font-weight:850;

    letter-spacing:-.2px;
}

.section-title::after{
    content:"";

    display:block;

    width:58px;

    height:4px;

    margin-top:9px;

    border-radius:99px;

    background:
        linear-gradient(
            90deg,
            var(--a),
            var(--p)
        );
}

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

.hero{
    position:relative;

    overflow:hidden;

    color:#fff;

    padding:
        clamp(45px,7vw,82px)
        max(5%,calc((100% - var(--container))/2));

    display:grid;

    grid-template-columns:
        minmax(0,1.35fr)
        minmax(300px,.65fr);

    gap:45px;

    align-items:center;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(42,169,211,.35),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 100%,
            rgba(244,169,0,.15),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #062f4b,
            #0b5c8e 58%,
            #087b99
        );

    box-shadow:
        inset 0 -1px 0 rgba(255,255,255,.1);
}

.hero::before{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    right:-220px;
    top:-250px;

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

    pointer-events:none;
}

.hero::after{
    content:"";

    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

    left:-220px;
    bottom:-240px;

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

    pointer-events:none;
}

.hero h1{
    position:relative;

    font-size:
        clamp(32px,5vw,58px);

    line-height:1.08;

    margin:0 0 20px;

    max-width:780px;

    letter-spacing:-.8px;

    font-weight:900;
}

.hero p{
    position:relative;

    font-size:
        clamp(16px,2vw,19px);

    max-width:760px;

    margin:0 0 27px;

    color:rgba(255,255,255,.9);
}

.hero .btn{
    margin:4px 8px 4px 0;
}

/* =========================================================
   HERO CARD / SECRETARY
   ========================================================= */

.hero-card{
    position:relative;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.16),
            rgba(255,255,255,.06)
        );

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

    border-radius:26px;

    padding:30px 25px;

    text-align:center;

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

    backdrop-filter:blur(12px);
}

.hero-card::before{
    content:"प्रदेश नेतृत्व";

    display:inline-block;

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

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

    padding:5px 13px;

    border-radius:99px;

    font-size:12px;

    margin-bottom:15px;

    color:#fff;
}

.hero-card img{
    width:145px;
    height:145px;

    border-radius:50%;

    object-fit:cover;

    border:5px solid #fff;

    background:#fff;

    box-shadow:
        0 12px 30px rgba(0,0,0,.2);

    display:block;

    margin:0 auto 15px;
}

.hero-card h2{
    margin:5px 0 2px;

    font-size:24px;

    color:#fff;
}

.hero-card p{
    margin:0 0 15px;

    font-size:14px;

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

.hero-card .btn{
    width:100%;
}

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

.btn{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    min-height:44px;

    border:0;

    border-radius:11px;

    padding:11px 18px;

    background:
        linear-gradient(
            135deg,
            var(--p),
            var(--p3)
        );

    color:#fff;

    text-decoration:none;

    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 5px 14px rgba(10,75,110,.16);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}

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

    box-shadow:
        0 9px 20px rgba(10,75,110,.22);
}

.btn.alt{
    background:
        linear-gradient(
            135deg,
            #f4a900,
            #ffc43d
        );

    color:#17212b;
}

.btn.light{
    background:#fff;

    color:var(--p2);
}

.btn:active{
    transform:translateY(0);
}

/* =========================================================
   GRID
   ========================================================= */

.grid{
    display:grid;

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

    gap:20px;
}

.stats{
    grid-template-columns:
        repeat(4,minmax(0,1fr));
}

/* =========================================================
   CARDS
   ========================================================= */

.card{
    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius-md);

    padding:21px;

    box-shadow:var(--shadow-sm);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.card:hover{
    transform:translateY(-4px);

    border-color:#c8dce9;

    box-shadow:var(--shadow-md);
}

/* =========================================================
   STAT CARDS
   ========================================================= */

.stat{
    text-align:center;

    position:relative;

    overflow:hidden;
}

.stat::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:4px;

    background:
        linear-gradient(
            90deg,
            var(--p),
            var(--a)
        );
}

.stat strong{
    font-size:
        clamp(27px,4vw,40px);

    display:block;

    color:var(--p);

    font-weight:900;

    line-height:1.2;

    margin-top:4px;
}

.stat span{
    color:var(--muted);

    font-weight:700;

    font-size:14px;
}

/* =========================================================
   SERVICES
   ========================================================= */

.services .card{
    min-height:165px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;
}

.services .card h3{
    margin:5px 0 7px;

    color:var(--p2);

    font-size:19px;
}

.services .card p{
    margin:0 0 14px;

    color:var(--muted);

    font-size:14px;
}

.services .card > a{
    align-self:flex-start;
}

/* =========================================================
   FORMS
   ========================================================= */

.form{
    background:#fff;

    border-radius:var(--radius-md);

    padding:25px;

    box-shadow:var(--shadow-sm);

    border:1px solid var(--border);
}

.formgrid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:17px;
}

.field label{
    font-weight:750;

    display:block;

    margin-bottom:6px;

    color:var(--text);
}

.field input,
.field select,
.field textarea{
    width:100%;

    padding:11px 13px;

    border:1px solid #ccd9e3;

    border-radius:10px;

    background:#fff;

    color:var(--text);

    font:inherit;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
    border-color:var(--p);

    box-shadow:
        0 0 0 3px rgba(11,92,142,.10);
}

.field.full{
    grid-column:1/-1;
}

/* =========================================================
   NOTICE
   ========================================================= */

.notice{
    padding:13px 16px;

    border-radius:11px;

    background:#eaf4ff;

    margin:12px 0;

    border:1px solid #d5e8f8;
}

.notice.error{
    background:#fff0ef;

    color:var(--danger);

    border-color:#ffd5d1;
}

.notice.success{
    background:#eaf8f1;

    color:var(--ok);

    border-color:#ccebdc;
}

/* =========================================================
   TABLE
   ========================================================= */

.tablewrap{
    overflow:auto;

    background:#fff;

    border-radius:14px;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);
}

.table{
    width:100%;

    border-collapse:collapse;

    min-width:760px;
}

.table th,
.table td{
    padding:12px;

    border-bottom:1px solid #e7edf2;

    text-align:left;
}

.table th{
    background:#f0f6fa;

    color:var(--p2);

    font-weight:800;
}

/* =========================================================
   BADGES
   ========================================================= */

.badge{
    display:inline-block;

    padding:4px 10px;

    border-radius:99px;

    background:#eef2f5;

    font-size:12px;

    font-weight:750;
}

.paid{
    background:#dcf6e8;

    color:#08633f;
}

.pending{
    background:#fff2cc;

    color:#825900;
}

.unpaid,
.failed{
    background:#ffe3e1;

    color:#9e1d15;
}

/* =========================================================
   ID CARD
   ========================================================= */

.idcard{
    max-width:780px;

    margin:25px auto;

    background:#fff;

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

    border-radius:20px;

    padding:24px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.10);
}

.idhead{
    display:flex;

    align-items:center;

    gap:14px;

    border-bottom:2px solid var(--a);

    padding-bottom:12px;
}

.idhead img{
    width:65px;
}

.idbody{
    display:grid;

    grid-template-columns:
        150px 1fr 130px;

    gap:20px;

    align-items:start;

    padding-top:20px;
}

.idphoto{
    width:140px;
    height:165px;

    object-fit:cover;

    border-radius:10px;

    border:1px solid #ccd6df;
}

.qr{
    width:120px;
    height:120px;
}

.print-only{
    display:none;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer{
    margin-top:55px;

    background:
        linear-gradient(
            135deg,
            #062b44,
            #0b4668
        );

    color:#dbe8f2;

    padding:38px max(4%,calc((100% - var(--container))/2));

    display:flex;

    justify-content:space-between;

    gap:25px;

    flex-wrap:wrap;

    border-top:4px solid var(--a);
}

footer b{
    color:#fff;

    font-size:16px;
}

footer a{
    color:#fff;

    text-decoration:none;
}

footer a:hover{
    color:var(--a2);
}

/* =========================================================
   ADMIN
   ========================================================= */

.adminbar{
    background:#102d46;

    color:#fff;

    padding:12px 18px;
}

.tabs{
    display:flex;

    gap:8px;

    flex-wrap:wrap;

    margin:15px 0;
}

.tabs a{
    padding:8px 12px;

    background:#fff;

    border-radius:9px;

    text-decoration:none;

    color:var(--p2);

    border:1px solid #dce5ec;
}

.danger{
    color:var(--danger);
}

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

@media(max-width:1050px){

    .nav{
        padding-left:3%;
        padding-right:3%;
    }

    .links{
        gap:3px;
    }

    .links a{
        font-size:13px;

        padding:8px 8px;
    }

    .hero{
        grid-template-columns:
            minmax(0,1.2fr)
            minmax(260px,.8fr);

        gap:30px;
    }
}

@media(max-width:850px){

    .links{
        display:none;

        position:absolute;

        left:0;
        right:0;

        top:73px;

        background:#fff;

        padding:15px 4% 20px;

        flex-direction:column;

        align-items:stretch;

        box-shadow:
            0 12px 25px rgba(0,0,0,.13);

        border-top:1px solid var(--border);
    }

    .links.open{
        display:flex;
    }

    .links a{
        padding:11px 12px;

        border-bottom:1px solid #edf2f5;
    }

    .hamb{
        display:block;
    }

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

        padding:
            50px 6%;
    }

    .hero-card{
        max-width:400px;

        width:100%;

        margin:auto;
    }

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

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

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

    .idbody{
        grid-template-columns:1fr;

        text-align:center;
    }

    .idphoto,
    .qr{
        margin:auto;
    }
}

@media(max-width:620px){

    .topbar{
        font-size:11px;

        line-height:1.5;

        padding:7px 10px;
    }

    .nav{
        min-height:68px;

        padding:
            8px 12px;
    }

    .brand{
        gap:8px;
    }

    .brand img{
        width:43px;
        height:43px;
    }

    .brand span{
        font-size:13px;
    }

    .brand small{
        font-size:10px;
    }

    .links{
        top:67px;
    }

    .hero{
        padding:
            42px 18px 48px;
    }

    .hero h1{
        font-size:34px;

        letter-spacing:-.4px;
    }

    .hero p{
        font-size:16px;
    }

    .hero-card img{
        width:125px;
        height:125px;
    }

    .container{
        padding:
            24px 13px;
    }

    .grid,
    .stats{
        grid-template-columns:1fr;
    }

    .section-title{
        margin-top:32px;

        font-size:24px;
    }

    .card{
        padding:18px;
    }

    .services .card{
        min-height:145px;
    }

    footer{
        padding:
            30px 18px;

        flex-direction:column;
    }
}

/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */

@media(max-width:380px){

    .brand span{
        font-size:12px;
    }

    .brand small{
        font-size:9px;
    }

    .hero h1{
        font-size:30px;
    }

    .hero-card{
        padding:24px 18px;
    }
}

/* =========================================================
   PRINT
   ========================================================= */

@media print{

    body{
        background:#fff;
    }

    .topbar,
    .nav,
    footer,
    .no-print{
        display:none!important;
    }

    .print-only{
        display:block;
    }

    .idcard{
        box-shadow:none;

        border:2px solid #000;

        margin:0;

        max-width:none;
    }
}