/* =========================================================
   XMAVA API
   Responsive Style v2
========================================================= */

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

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --primary-light:#dbeafe;

    --success:#22c55e;
    --warning:#f59e0b;
    --danger:#ef4444;

    --dark:#0f172a;
    --text:#334155;
    --gray:#64748b;

    --white:#ffffff;
    --border:#e5e7eb;
    --bg:#f8fbff;

    --radius:18px;

    --shadow:
    0 15px 35px rgba(15,23,42,.08);

    --shadow-hover:
    0 20px 45px rgba(37,99,235,.18);

}

/* ========================================================= */

*{

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

}

html{

scroll-behavior:smooth;
overflow-x:hidden;

}

body{

font-family:'Poppins',sans-serif;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

width:100%;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

button{

font-family:'Poppins',sans-serif;

cursor:pointer;

}

.container{

width:92%;

max-width:1250px;

margin:auto;

}

/* =========================================================
HEADER
========================================================= */

.header{

position:sticky;

top:0;

left:0;

width:100%;

z-index:9999;

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

backdrop-filter:blur(15px);

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

}

.header .container{

display:flex;

justify-content:space-between;

align-items:center;

height:82px;

}

/* =========================================================
LOGO
========================================================= */

.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo-icon{

width:50px;

height:50px;

border-radius:15px;

background:

linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:24px;

box-shadow:

0 10px 25px rgba(37,99,235,.25);

}

.logo h2{

font-size:24px;

color:var(--primary);

font-weight:700;

}

.logo p{

font-size:11px;

letter-spacing:2px;

text-transform:uppercase;

color:var(--gray);

}

/* =========================================================
NAVBAR
========================================================= */

nav{

display:flex;

align-items:center;

gap:28px;

}

nav a{

font-size:15px;

font-weight:500;

color:var(--text);

transition:.3s;

position:relative;

}

nav a:hover{

color:var(--primary);

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--primary);

transition:.3s;

}

nav a:hover::after{

width:100%;

}

.btn-nav{

padding:13px 28px;

border-radius:30px;

background:

linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

color:#fff;

font-weight:600;

box-shadow:

0 10px 25px rgba(37,99,235,.25);

}

.btn-nav::after{

display:none;

}

.btn-nav:hover{

transform:translateY(-3px);

}

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

.menu-toggle{

display:none;

font-size:28px;

cursor:pointer;

color:var(--primary);

}

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

.hero{

    padding:90px 0;

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #eef5ff 100%
    );

}

.hero-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:var(--primary-light);

    color:var(--primary);

    padding:10px 20px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    margin-bottom:25px;

}

.hero h1{

    font-size:56px;

    line-height:1.18;

    color:var(--dark);

    font-weight:800;

    margin-bottom:25px;

}

.hero p{

    color:var(--gray);

    font-size:16px;

    line-height:1.9;

    max-width:560px;

}

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

.hero-button{

    display:flex;

    gap:18px;

    margin-top:35px;

    flex-wrap:wrap;

}

.btn-primary{

    display:inline-block;

    padding:15px 34px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

    font-weight:600;

    transition:.3s;

    box-shadow:
    0 12px 25px rgba(37,99,235,.25);

}

.btn-primary:hover{

    transform:translateY(-4px);

}

.btn-secondary{

    display:inline-block;

    padding:15px 34px;

    border-radius:14px;

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

    background:#fff;

    color:var(--primary);

    font-weight:600;

    transition:.3s;

}

.btn-secondary:hover{

    background:var(--primary);

    color:#fff;

}

/* =========================================================
INFO CARD
========================================================= */

.hero-info{

    display:grid;

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

    gap:18px;

    margin-top:45px;

}

.hero-info div{

    background:#fff;

    padding:24px;

    text-align:center;

    border-radius:18px;

    box-shadow:var(--shadow);

}

.hero-info h2{

    color:var(--primary);

    font-size:32px;

    margin-bottom:5px;

}

.hero-info span{

    color:var(--gray);

    font-size:13px;

}

/* =========================================================
API CARD
========================================================= */

.api-card{

    background:#0f172a;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
    0 25px 60px rgba(15,23,42,.18);

}

.api-header{

    background:#1e293b;

    padding:16px;

    display:flex;

    gap:8px;

}

.circle{

    width:12px;

    height:12px;

    border-radius:50%;

}

.red{

    background:#ef4444;

}

.yellow{

    background:#eab308;

}

.green{

    background:#22c55e;

}

.api-card pre{

    padding:30px;

    color:#38bdf8;

    font-size:14px;

    line-height:1.8;

    overflow:auto;

}

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

@media(max-width:992px){

.hero{

padding:70px 0;

}

.hero-grid{

grid-template-columns:1fr;

gap:45px;

text-align:center;

}

.hero p{

margin:auto;

}

.hero-button{

justify-content:center;

}

.hero-info{

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

}

}

@media(max-width:768px){

.hero h1{

font-size:40px;

}

.hero-button{

flex-direction:column;

}

.hero-button a{

width:100%;

text-align:center;

}

.hero-info{

grid-template-columns:1fr;

}

.api-card{

margin-top:20px;

}

}

@media(max-width:480px){

.hero{

padding:55px 0;

}

.hero h1{

font-size:34px;

}

.hero p{

font-size:15px;

}

.badge{

font-size:12px;

padding:8px 16px;

}

}

/* =========================================================
   FEATURES
========================================================= */

.features{

    padding:100px 0;

    background:#fff;

}

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title span{

    display:inline-block;

    color:var(--primary);

    font-size:13px;

    font-weight:700;

    letter-spacing:3px;

    margin-bottom:12px;

}

.section-title h2{

    font-size:42px;

    color:var(--dark);

    margin-bottom:15px;

}

.section-title p{

    max-width:700px;

    margin:auto;

    color:var(--gray);

    line-height:1.8;

}

.feature-grid{

    display:grid;

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

    gap:30px;

}

.feature-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

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

    box-shadow:var(--shadow);

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-8px);

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

}

.feature-card .icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:linear-gradient(135deg,var(--primary),var(--primary-dark));

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    margin-bottom:25px;

}

.feature-card h3{

    font-size:22px;

    color:var(--dark);

    margin-bottom:15px;

}

.feature-card p{

    color:var(--gray);

    line-height:1.8;

}

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

.pricing{

    padding:100px 0;

    background:#f8fbff;

}

.pricing-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(300px,360px));

    justify-content:center;

    gap:35px;

}

.price-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

    text-align:center;

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

    box-shadow:var(--shadow);

    transition:.35s;

}

.price-card:hover{

    transform:translateY(-8px);

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

}

.price-card h3{

    font-size:24px;

    margin-bottom:15px;

}

.price-card h1{

    font-size:48px;

    color:var(--primary);

    margin:15px 0;

}

.price-card p{

    color:var(--gray);

}

.price-card ul{

    list-style:none;

    margin:30px 0;

    padding:0;

}

.price-card li{

    padding:12px 0;

    border-bottom:1px solid #edf2f7;

}

.price-card .btn-primary{

    width:100%;

    display:block;

}

.free{

    border-top:6px solid #64748b;

}

.premium{

    border-top:6px solid #2563eb;

}

.reseller{

    border-top:6px solid #9333ea;

}

.enterprise{

    border-top:6px solid #f59e0b;

}

.vip{

    border-top:6px solid #dc2626;

    grid-column:1 / span 2;

    width:340px;

    margin:auto;

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:992px){

.feature-grid{

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

}

.pricing-grid{

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

}

.vip{

grid-column:1 / span 2;

width:320px;

}

}

@media(max-width:768px){

.feature-grid{

grid-template-columns:1fr;

}

.pricing-grid{

grid-template-columns:1fr;

}

.vip{

grid-column:auto;

width:100%;

}

.price-card{

padding:28px;

}

.section-title h2{

font-size:32px;

}

}

/* =========================================================
   HOW IT WORKS
========================================================= */

.how{

    padding:100px 0;

    background:#eef5ff;

}

.step-grid{

    display:grid;

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

    gap:30px;

}

.step{

    background:#fff;

    border-radius:22px;

    padding:35px 25px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.step:hover{

    transform:translateY(-8px);

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

}

.step div{

    width:70px;

    height:70px;

    margin:auto auto 20px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    font-weight:700;

}

.step h3{

    color:var(--dark);

    margin-bottom:12px;

    font-size:22px;

}

.step p{

    color:var(--gray);

    line-height:1.8;

}

/* =========================================================
   CTA
========================================================= */

.cta{

    padding:100px 0;

    background:#fff;

}

.cta-box{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    border-radius:28px;

    padding:70px 40px;

    text-align:center;

    color:#fff;

    box-shadow:
    0 20px 50px rgba(37,99,235,.30);

}

.cta-box h2{

    font-size:42px;

    margin-bottom:18px;

}

.cta-box p{

    max-width:700px;

    margin:auto auto 35px;

    line-height:1.9;

    opacity:.95;

}

.btn-white{

    display:inline-block;

    padding:16px 36px;

    border-radius:14px;

    background:#fff;

    color:var(--primary);

    font-weight:700;

    transition:.3s;

}

.btn-white:hover{

    transform:translateY(-4px);

}

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

footer{

    background:#0f172a;

    color:#fff;

    padding:80px 0 30px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:50px;

}

.footer-grid h3{

    font-size:28px;

    margin-bottom:18px;

}

.footer-grid h4{

    margin-bottom:18px;

}

.footer-grid p{

    color:#cbd5e1;

    line-height:1.9;

    font-size:14px;

}

.footer-grid a{

    display:block;

    color:#cbd5e1;

    margin-bottom:12px;

    transition:.3s;

}

.footer-grid a:hover{

    color:#60a5fa;

    padding-left:6px;

}

.copyright{

    margin-top:50px;

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

    padding-top:25px;

    text-align:center;

    color:#94a3b8;

    font-size:14px;

}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:992px){

.step-grid{

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

}

.footer-grid{

grid-template-columns:1fr 1fr;

gap:35px;

}

.cta-box h2{

font-size:34px;

}

}

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

@media(max-width:768px){

.header .container{

flex-direction:column;

height:auto;

padding:18px 0;

gap:18px;

}

.logo{

justify-content:center;

}

nav{

width:100%;

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:12px;

}

nav a{

font-size:14px;

}

.btn-nav{

padding:10px 18px;

}

.step-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-grid a{

padding-left:0 !important;

}

.cta{

padding:70px 0;

}

.cta-box{

padding:45px 25px;

}

.cta-box h2{

font-size:30px;

}

}

@media(max-width:480px){

.container{

width:94%;

}

.footer-grid h3{

font-size:24px;

}

.cta-box h2{

font-size:26px;

}

.btn-white{

width:100%;

text-align:center;

}

}

/* =========================================================
   LOGIN / REGISTER
========================================================= */

.auth-wrapper{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:50px 20px;

    background:
    linear-gradient(
        135deg,
        #eef5ff,
        #ffffff
    );

}

.auth-box{

    width:100%;

    max-width:460px;

    background:#fff;

    border-radius:24px;

    padding:40px;

    box-shadow:
    0 20px 45px rgba(15,23,42,.08);

    border:1px solid #e5e7eb;

}

.auth-logo{

    text-align:center;

    margin-bottom:30px;

}

.auth-logo h1{

    font-size:42px;

    color:#2563eb;

    font-weight:800;

    letter-spacing:3px;

}

.auth-logo p{

    margin-top:8px;

    color:#64748b;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:13px;

}

.auth-box h2{

    text-align:center;

    font-size:28px;

    color:#0f172a;

    margin-bottom:10px;

}

.auth-box .subtitle{

    text-align:center;

    color:#64748b;

    margin-bottom:30px;

    font-size:14px;

}

/* =========================================================
   INPUT
========================================================= */

.form-group{

    margin-bottom:18px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#334155;

}

.form-group input,

.form-group select,

.form-group textarea{

    width:100%;

    padding:15px 16px;

    border:2px solid #dbeafe;

    border-radius:12px;

    font-size:15px;

    transition:.25s;

    outline:none;

    background:#fff;

}

.form-group textarea{

    resize:vertical;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

    border-color:#2563eb;

    box-shadow:

    0 0 15px rgba(37,99,235,.15);

}

/* =========================================================
   BUTTON
========================================================= */

.auth-box button{

    width:100%;

    padding:15px;

    border:none;

    border-radius:12px;

    background:

    linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color:#fff;

    font-size:16px;

    font-weight:700;

    transition:.3s;

}

.auth-box button:hover{

    transform:translateY(-3px);

}

/* =========================================================
   ALERT
========================================================= */

.alert{

    padding:14px 16px;

    border-radius:12px;

    margin-bottom:20px;

    font-size:14px;

}

.alert.success{

    background:#dcfce7;

    color:#166534;

    border:1px solid #86efac;

}

.alert.error{

    background:#fee2e2;

    color:#991b1b;

    border:1px solid #fecaca;

}

.alert.warning{

    background:#fef3c7;

    color:#92400e;

    border:1px solid #fde68a;

}

/* =========================================================
   BOTTOM LINK
========================================================= */

.bottom{

    margin-top:25px;

    text-align:center;

    font-size:14px;

}

.bottom a{

    color:#2563eb;

    font-weight:700;

}

/* =========================================================
   RESEND BUTTON
========================================================= */

.btn-resend{

    display:inline-block;

    margin-top:15px;

    padding:12px 18px;

    border-radius:10px;

    background:#2563eb;

    color:#fff;

    font-size:14px;

    transition:.3s;

}

.btn-resend:hover{

    background:#1d4ed8;

}

/* =========================================================
   HUMAN VERIFICATION
========================================================= */

.human-box{

    margin:25px 0;

}

.human-box label{

    display:block;

    margin-bottom:12px;

    text-align:center;

    font-weight:700;

    color:#334155;

}

.human-code{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    padding:18px;

    border-radius:14px;

    background:

    linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color:#fff;

    font-size:32px;

    font-weight:800;

    letter-spacing:8px;

    font-family:Consolas,monospace;

    margin-bottom:18px;

    user-select:none;

}

.human-box input{

    text-align:center;

    text-transform:uppercase;

    font-size:18px;

    font-weight:700;

    letter-spacing:2px;

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:768px){

.auth-box{

padding:30px 25px;

}

.auth-logo h1{

font-size:34px;

}

.auth-box h2{

font-size:24px;

}

.human-code{

font-size:24px;

letter-spacing:5px;

}

}

@media(max-width:480px){

.auth-wrapper{

padding:25px 12px;

}

.auth-box{

padding:25px 18px;

border-radius:18px;

}

.auth-logo h1{

font-size:30px;

}

.auth-box h2{

font-size:22px;

}

.form-group input,

.form-group select,

.form-group textarea{

padding:13px;

}

.human-code{

font-size:20px;

letter-spacing:3px;

}

}

/* =========================================================
   MEMBER & ADMIN DASHBOARD
========================================================= */

.dashboard{

    display:flex;

    min-height:100vh;

    background:#f8fbff;

}

/* =========================================================
SIDEBAR
========================================================= */

.sidebar{

    width:260px;

    background:#0f172a;

    color:#fff;

    position:fixed;

    left:0;

    top:0;

    bottom:0;

    overflow-y:auto;

    padding:25px 0;

}

.sidebar .logo{

    display:block;

    text-align:center;

    margin-bottom:35px;

}

.sidebar .logo h2{

    color:#fff;

    font-size:30px;

    margin-bottom:5px;

}

.sidebar .logo p{

    color:#94a3b8;

    font-size:12px;

    letter-spacing:2px;

}

.sidebar a{

    display:block;

    color:#cbd5e1;

    padding:14px 25px;

    transition:.25s;

    font-size:15px;

    border-left:4px solid transparent;

}

.sidebar a:hover{

    background:#1e293b;

    color:#fff;

    border-left:4px solid #2563eb;

}

.sidebar a.active{

    background:#2563eb;

    color:#fff;

    border-left:4px solid #60a5fa;

}

/* =========================================================
CONTENT
========================================================= */

.content{

    margin-left:260px;

    width:calc(100% - 260px);

    padding:35px;

}

.topbar{

    background:#fff;

    padding:18px 25px;

    border-radius:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.topbar h2{

    font-size:28px;

    color:#0f172a;

}

.admin{

    color:#64748b;

    font-size:14px;

}

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

.cards{

    display:grid;

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

    gap:25px;

    margin-bottom:30px;

}

.card{

    background:#fff;

    border-radius:20px;

    padding:25px;

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

    transition:.3s;

}

.card:hover{

    transform:translateY(-6px);

}

.card h4{

    color:#64748b;

    margin-bottom:12px;

}

.card h2{

    color:#2563eb;

    font-size:28px;

}

/* =========================================================
BOX
========================================================= */

.box{

    background:#fff;

    border-radius:20px;

    padding:25px;

    margin-bottom:25px;

    box-shadow:0 10px 20px rgba(0,0,0,.05);

}

.box h3{

    margin-bottom:20px;

    color:#0f172a;

}

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

.box input,

.box select,

.box textarea{

    width:100%;

    padding:14px;

    border:1px solid #dbeafe;

    border-radius:10px;

    margin-bottom:15px;

    outline:none;

    transition:.25s;

}

.box input:focus,

.box select:focus,

.box textarea:focus{

    border-color:#2563eb;

    box-shadow:0 0 10px rgba(37,99,235,.18);

}

/* =========================================================
BUTTON
========================================================= */

.btn{

    display:inline-block;

    background:#2563eb;

    color:#fff;

    border:none;

    padding:12px 22px;

    border-radius:10px;

    cursor:pointer;

    transition:.3s;

}

.btn:hover{

    background:#1d4ed8;

}

.btn-success{

    background:#16a34a;

}

.btn-warning{

    background:#f59e0b;

}

.btn-danger{

    background:#dc2626;

}

/* =========================================================
BADGE
========================================================= */

.badge{

    display:inline-block;

    padding:7px 12px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

}

.badge.success{

    background:#dcfce7;

    color:#166534;

}

.badge.reject{

    background:#fee2e2;

    color:#991b1b;

}

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

table{

    width:100%;

    border-collapse:collapse;

}

table th{

    background:#2563eb;

    color:#fff;

    padding:14px;

    text-align:left;

}

table td{

    padding:14px;

    border-bottom:1px solid #eee;

}

table tr:hover{

    background:#f8fbff;

}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:992px){

.sidebar{

width:80px;

}

.sidebar .logo p,

.sidebar .logo h2{

display:none;

}

.sidebar a{

text-align:center;

padding:16px 10px;

font-size:13px;

}

.content{

margin-left:80px;

width:calc(100% - 80px);

}

.cards{

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

}

}

@media(max-width:768px){

.sidebar{

position:relative;

width:100%;

height:auto;

}

.content{

margin-left:0;

width:100%;

padding:20px;

}

.topbar{

flex-direction:column;

gap:10px;

text-align:center;

}

.cards{

grid-template-columns:1fr;

}

table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

}

/* =====================================================
   AUTH PAGE (LOGIN & REGISTER)
===================================================== */

body{

    background:linear-gradient(135deg,#eff6ff,#ffffff);

    font-family:'Poppins',sans-serif;

}

.auth-box{

    width:100%;
    max-width:460px;

    margin:70px auto;

    background:#fff;

    border-radius:22px;

    padding:40px;

    box-shadow:
    0 20px 60px rgba(37,99,235,.12);

    border:1px solid #dbeafe;

    animation:fade .5s ease;

}

.logo{

    text-align:center;

    margin-bottom:25px;

}

.logo h1{

    margin:0;

    color:#2563eb;

    font-size:42px;

    font-weight:800;

    letter-spacing:3px;

}

.logo p{

    margin-top:8px;

    color:#64748b;

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

}

.auth-box h2{

    text-align:center;

    color:#1e293b;

    font-size:28px;

    margin-bottom:8px;

}

.auth-box>p{

    text-align:center;

    color:#64748b;

    margin-bottom:28px;

    font-size:14px;

}

/* ==========================
INPUT
========================== */

.auth-box input,

.auth-box select{

    width:100%;

    padding:15px 16px;

    margin-bottom:18px;

    border:2px solid #dbeafe;

    border-radius:12px;

    font-size:15px;

    transition:.3s;

    outline:none;

}

.auth-box input:focus{

    border-color:#2563eb;

    box-shadow:0 0 15px rgba(37,99,235,.18);

}

/* ==========================
BUTTON
========================== */

.auth-box button{

    width:100%;

    padding:15px;

    border:none;

    border-radius:12px;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.auth-box button:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(37,99,235,.30);

}

/* ==========================
BOTTOM
========================== */

.bottom{

    margin-top:22px;

    text-align:center;

    color:#64748b;

    font-size:14px;

}

.bottom a{

    color:#2563eb;

    font-weight:700;

}

/* ==========================
ALERT
========================== */

.alert{

    padding:15px;

    border-radius:12px;

    margin-bottom:20px;

    font-size:14px;

}

.alert.error{

    background:#fee2e2;

    color:#991b1b;

    border:1px solid #fecaca;

}

.alert.success{

    background:#dcfce7;

    color:#166534;

    border:1px solid #86efac;

}

/* ==========================
HUMAN VERIFY
========================== */

.human-box{

    margin:20px 0;

    text-align:center;

}

.human-code{

    width:100%;

    padding:18px;

    border-radius:12px;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    color:#fff;

    font-size:30px;

    font-weight:800;

    letter-spacing:8px;

    margin-bottom:15px;

    user-select:none;

    font-family:monospace;

}

.human-info{

    color:#64748b;

    font-size:13px;

}

/* ==========================
RESEND
========================== */

.btn-resend{

    display:inline-block;

    margin-top:15px;

    padding:12px 20px;

    background:#2563eb;

    color:#fff;

    border-radius:10px;

    text-decoration:none;

}

.btn-resend:hover{

    background:#1d4ed8;

}

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

.admin-login .logo h1{

    color:#dc2626;

}

.admin-login button{

    background:linear-gradient(135deg,#dc2626,#b91c1c);

}

.admin-login button:hover{

    box-shadow:0 15px 30px rgba(220,38,38,.25);

}

/* ==========================
RESPONSIVE
========================== */

@media(max-width:768px){

.auth-box{

margin:30px 15px;

padding:30px 22px;

}

.logo h1{

font-size:34px;

}

.auth-box h2{

font-size:24px;

}

.human-code{

font-size:24px;

letter-spacing:4px;

}

}

/* ======================================
   PUBLIC API DOCUMENTATION
====================================== */

.docs-public{
    padding:90px 0;
    background:#f8fbff;
}

.docs-public .box{
    background:#fff;
    border-radius:18px;
    padding:30px;
    margin-bottom:30px;
    border:1px solid #e5e7eb;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    transition:.3s;
}

.docs-public .box:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(37,99,235,.12);
}

.docs-public h3{
    color:#2563eb;
    margin-bottom:20px;
    font-size:22px;
}

.endpoint{
    background:#2563eb;
    color:#fff;
    padding:16px;
    border-radius:10px;
    font-weight:600;
    font-size:15px;
    margin:20px 0;
    word-break:break-all;
}

.code{
    background:#0f172a;
    color:#22c55e;
    padding:20px;
    border-radius:12px;
    overflow:auto;
    font-family:Consolas,monospace;
    font-size:14px;
    line-height:1.8;
}

.table-api{
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
}

.table-api th{
    background:#2563eb;
    color:#fff;
    padding:14px;
    text-align:left;
}

.table-api td{
    padding:14px;
    border:1px solid #e5e7eb;
}

.table-api tr:nth-child(even){
    background:#f8fafc;
}

.docs-public ol{
    padding-left:20px;
    line-height:34px;
}

.docs-public .btn-primary{
    display:inline-block;
    margin-top:15px;
}

@media(max-width:768px){

.docs-public{
    padding:60px 0;
}

.docs-public .box{
    padding:20px;
}

.table-api{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
}

.endpoint{
    font-size:13px;
}

.code{
    font-size:13px;
}

}