/* ===== ANIMATIONS ===== */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideOutLeft{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-30px)}}
@keyframes slideOutRight{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(30px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes float{0%{transform:translateY(0px)}50%{transform:translateY(-10px)}100%{transform:translateY(0px)}}
@keyframes shimmer{0%{background-position:-1000px 0}100%{background-position:1000px 0}}
@keyframes successBounce{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
@keyframes checkmark{0%{transform:scale(0) rotate(-45deg);opacity:0}50%{transform:scale(1.2)}100%{transform:scale(1) rotate(0deg);opacity:1}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes glow{0%,100%{box-shadow:0 0 5px rgba(18,73,54,.3)}50%{box-shadow:0 0 15px rgba(18,73,54,.6)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ===== ROOT & BASE STYLES ===== */
:root{--g:#124936;--g2:#2d7659;--bg:#f5f8f5;--ink:#17221d;--muted:#68736d;--line:#dce4df;--white:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px Arial,sans-serif;transition:background-color .3s ease;overflow-x:hidden}
a{text-decoration:none;color:inherit}

/* ===== HEADER & NAVIGATION ===== */
header{height:74px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;animation:slideInDown .5s ease;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.logo{font-weight:800;letter-spacing:.08em;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:inline-block}
.logo:hover{transform:scale(1.08)}
.logo:first-letter{background:var(--g);color:#fff;padding:8px;border-radius:8px;transition:all .3s ease}
.logo:hover:first-letter{background:var(--g2);box-shadow:0 4px 12px rgba(18,73,54,.3)}
nav{display:flex;gap:25px;align-items:center}
nav a{transition:all .3s ease;position:relative;padding-bottom:2px;font-weight:500}
nav a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--g);transition:width .3s ease}
nav a:hover::after{width:100%}
nav a:hover{color:var(--g)}
nav a.admin-link{background:var(--g2);color:#fff;padding:8px 14px;border-radius:8px;font-size:13px}
nav a.admin-link::after{display:none}
nav a.admin-link:hover{background:var(--g);transform:translateY(-2px);box-shadow:0 4px 12px rgba(18,73,54,.3)}

/* ===== BUTTONS ===== */
.btn{display:inline-block;background:var(--g);color:#fff;border:0;border-radius:10px;padding:13px 18px;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden;box-shadow:0 4px 12px rgba(18,73,54,.2)}
.btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,.3);border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s}
.btn:hover::before{width:300px;height:300px}
.btn:hover{background:var(--g2);transform:translateY(-3px);box-shadow:0 12px 25px rgba(18,73,54,.3)}
.btn:active{transform:translateY(-1px)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.05)}
.btn.ghost:hover{background:var(--g);color:#fff;border-color:var(--g);box-shadow:0 8px 20px rgba(18,73,54,.2)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ===== HERO SECTION ===== */
.hero{max-width:1150px;margin:auto;padding:90px 25px;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.hero>div:first-child{animation:slideInLeft .7s cubic-bezier(.34,1.56,.64,1) .2s both}
.hero>div:last-child{animation:slideInRight .7s cubic-bezier(.34,1.56,.64,1) .4s both}
.hero small,section>small,.center small{color:var(--g2);font-weight:800;letter-spacing:.15em}
.hero h1{font-size:clamp(45px,6vw,75px);line-height:1.02;letter-spacing:-.05em;animation:slideInUp .6s cubic-bezier(.34,1.56,.64,1)}
.hero h1 span{color:var(--g2);transition:all .3s ease}
.hero h1:hover span{color:var(--g);text-shadow:0 2px 8px rgba(18,73,54,.2)}
.hero p{color:var(--muted);font-size:18px;line-height:1.7;max-width:620px;animation:fadeIn .6s ease .3s both}
.big{margin-top:15px}
.hero-card{background:linear-gradient(135deg, #dfece4 0%, #e8f2ec 100%);padding:55px;border-radius:28px;transition:all .4s cubic-bezier(.34,1.56,.64,1);animation:slideInRight .7s ease .4s both;box-shadow:0 10px 30px rgba(18,73,54,.1)}
.hero-card:hover{transform:translateY(-12px);box-shadow:0 25px 50px rgba(18,73,54,.15)}

/* ===== CARDS ===== */
.card{background:#fff;padding:28px;border-radius:18px;box-shadow:0 4px 15px rgba(0,0,0,.08);transition:all .4s cubic-bezier(.23,1,.320,1);animation:slideInUp .6s ease}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(18,73,54,.15)}
.card>*{display:block;margin:10px 0;animation:fadeIn .5s ease}
.card strong{font-size:22px;color:var(--ink)}
.card span{color:var(--g2);font-weight:600}

/* ===== SECTIONS ===== */
section{max-width:1150px;margin:auto;padding:80px 25px;animation:fadeIn .6s ease}
section h2{font-size:40px;margin:10px 0 35px;animation:slideInUp .6s ease}

/* ===== CATEGORIES ===== */
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}
.cat{background:#fff;border:2px solid var(--line);padding:20px;border-radius:15px;transition:all .4s cubic-bezier(.34,1.56,.64,1);cursor:pointer;animation:slideInUp .5s ease;animation-fill-mode:both;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.cat:nth-child(1){animation-delay:.05s}
.cat:nth-child(2){animation-delay:.1s}
.cat:nth-child(3){animation-delay:.15s}
.cat:nth-child(4){animation-delay:.2s}
.cat:nth-child(5){animation-delay:.25s}
.cat i{font-style:normal;font-size:25px;display:block;margin-bottom:18px;transition:all .4s cubic-bezier(.34,1.56,.64,1)}
.cat b,.cat small{display:block;transition:all .3s ease}
.cat small{margin-top:8px;color:var(--g2);font-size:11px}
.cat:hover{border-color:var(--g);background:linear-gradient(135deg, #f5f8f5 0%, #eef5f0 100%);transform:translateY(-8px);box-shadow:0 15px 35px rgba(18,73,54,.15)}
.cat:hover i{transform:scale(1.25) rotate(8deg) translateY(-5px);filter:drop-shadow(0 2px 4px rgba(18,73,54,.2))}
.cat:hover b,.cat:hover small{color:var(--g)}

/* ===== STEPS SECTION ===== */
.how{max-width:none;background:linear-gradient(135deg, #eaf1eb 0%, #e3eceb 100%);padding-left:calc((100% - 1100px)/2);padding-right:calc((100% - 1100px)/2);animation:fadeIn .6s ease}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;animation:slideInUp .6s ease}
.steps article{background:#fff;padding:25px;border-radius:15px;transition:all .4s ease;animation:slideInUp .5s ease;animation-fill-mode:both;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.steps article:nth-child(1){animation-delay:0s}
.steps article:nth-child(2){animation-delay:.1s}
.steps article:nth-child(3){animation-delay:.2s}
.steps article:nth-child(4){animation-delay:.3s}
.steps article:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(18,73,54,.12)}
.steps p{color:var(--muted);line-height:1.5}

/* ===== FOOTER ===== */
footer{padding:35px 6%;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-between;animation:slideInUp .6s ease .3s both}

/* ===== FORM STYLES ===== */
.formwrap{max-width:1200px;width:100%;margin:0 auto;padding:55px 25px;animation:fadeIn .5s ease}
.center{text-align:center;animation:slideInUp .6s ease}
.center h1{font-size:48px;animation:slideInDown .6s ease}
.center p{color:var(--muted);animation:fadeIn .6s ease .2s both}
.progress{text-align:center;color:var(--g2);font-weight:800;margin:30px;animation:slideInDown .6s ease;font-size:14px;letter-spacing:.05em;transition:all .3s ease}
.step{display:none;background:#fff;border:1px solid var(--line);padding:40px;border-radius:20px;box-shadow:0 15px 35px rgba(23,62,39,.06);animation:slideInUp .4s cubic-bezier(.34,1.56,.64,1);opacity:0;pointer-events:none}
.step.active{display:block;animation:slideInUp .4s cubic-bezier(.34,1.56,.64,1);opacity:1;pointer-events:auto}
.step.exit{animation:slideOutLeft .4s cubic-bezier(.34,1.56,.64,1)}
.step h2{font-size:27px;margin-bottom:25px;animation:slideInDown .5s ease}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
label{font-size:12px;font-weight:700;color:#52605a;transition:color .3s ease;display:block;margin-bottom:8px}
label:hover{color:var(--g)}
input,select,textarea{display:block;width:100%;margin-top:8px;border:1px solid #d4ddd7;border-radius:10px;padding:14px 16px;font:15px Arial;background:#fbfcfb;transition:all .3s ease}select{cursor:pointer;min-height:52px}select:disabled{opacity:.65;cursor:wait}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--g);background:#fff;box-shadow:0 0 0 3px rgba(18,73,54,.1);transform:translateY(-2px)}
input::placeholder{color:#a8b3ad}
textarea{resize:vertical;min-height:100px;padding:14px 16px;font-size:15px}
.full{grid-column:1/-1}
.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:35px}
.notice{margin:20px 0;padding:14px;background:linear-gradient(135deg, #eaf3ed 0%, #e5f0e8 100%);color:#456252;border-radius:10px;animation:slideInUp .4s ease;border-left:4px solid var(--g);font-size:13px;font-weight:500}
.specific{margin-top:25px;border-top:1px solid var(--line);padding-top:20px;animation:slideInUp .4s ease}
.docs{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.doc{padding:20px;border:2px dashed #b9c9bf;border-radius:12px;transition:all .3s ease;cursor:pointer;text-align:center;background:#fbfcfb}
.doc:hover{border-color:var(--g);background:linear-gradient(135deg, #f5f8f5 0%, #eef5f0 100%);transform:scale(1.02)}
.doc input{display:none}
.doc b{display:block;font-weight:600;margin-bottom:8px;color:var(--ink);font-size:14px}
.doc small{display:block;color:var(--muted);font-size:12px}
.review>div{padding:14px;border:1px solid var(--line);border-radius:10px;margin:8px 0;animation:slideInUp .4s ease;transition:all .3s ease;background:#fbfcfb}
.review>div:hover{background:#fff;box-shadow:0 4px 12px rgba(18,73,54,.08)}
.check{display:flex;gap:8px;align-items:flex-start;padding:8px;transition:all .3s ease;border-radius:8px}
.check:hover{background:rgba(18,73,54,.03)}
.check input{width:auto;cursor:pointer}

/* ===== SUCCESS SCREEN ===== */
.success{text-align:center;animation:fadeIn .5s ease}
.ok{margin:auto;background:linear-gradient(135deg, #e4f1e8 0%, #d8ebe2 100%);color:var(--g);width:80px;height:80px;border-radius:50%;display:grid;place-items:center;font-size:40px;animation:successBounce .6s cubic-bezier(.34,1.56,.64,1);box-shadow:0 10px 30px rgba(18,73,54,.15)}
.success strong{display:inline-block;padding:15px;background:linear-gradient(135deg, #eaf2ed 0%, #e5f0e8 100%);border-radius:10px;font-size:20px;margin:15px 0;animation:slideInUp .6s ease .3s both;color:var(--g)}
.success p{animation:slideInUp .6s ease .4s both}

/* ===== UTILITY CLASSES ===== */
.hidden{display:none!important}
.loading{animation:pulse 1.5s ease-in-out infinite}
.glow{animation:glow 2s ease-in-out infinite}

/* ===== ADMIN SECTION ===== */
.admin{max-width:1300px}
.login{max-width:480px;margin:40px auto;background:#fff;padding:30px;border-radius:18px;animation:slideInUp .6s ease;box-shadow:0 15px 35px rgba(23,62,39,.06)}
.login form{display:grid;gap:16px}
.login p{color:var(--muted);font-size:12px}.login .login-message.error{color:#b42318;font-weight:600}
.adminhead{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}
.admingrid{display:grid;grid-template-columns:1.5fr 1fr;gap:15px}
.panel{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:auto;box-shadow:0 2px 8px rgba(0,0,0,.04);transition:all .3s ease}
.panel:hover{box-shadow:0 8px 20px rgba(0,0,0,.08)}
.toolbar{padding:15px;display:flex;gap:8px;border-bottom:1px solid var(--line)}
.toolbar input,.toolbar select{margin:0}
.table{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:12px}
th,td{padding:12px;border-bottom:1px solid #edf0ee;text-align:left;white-space:nowrap;transition:all .3s ease}
tr:hover{background:#f9faf9}
th{background:#f5f8f5;font-weight:700;color:var(--g)}
.pill{background:linear-gradient(135deg, #edf4ef 0%, #e8f1ec 100%);padding:6px 10px;border-radius:20px;font-size:10px;font-weight:600;color:var(--g);transition:all .3s ease}
.pill:hover{transform:scale(1.05);box-shadow:0 2px 6px rgba(18,73,54,.15)}
.detail{padding:20px;max-height:650px;animation:slideInRight .4s ease}
.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;margin:16px 0 10px}
.info-grid label{margin:0}
.info-grid .full{grid-column:1/-1}
.docline{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:10px 0;font-size:11px;transition:all .3s ease}
.docline:hover{background:#fbfcfb}
.docline select{width:100px;margin:0}
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:20px 0}
.stats>div{background:#fff;border:1px solid var(--line);padding:15px;border-radius:12px;transition:all .4s ease;animation:slideInUp .5s ease;animation-fill-mode:both;cursor:pointer}
.stats>div:nth-child(1){animation-delay:0s}
.stats>div:nth-child(2){animation-delay:.08s}
.stats>div:nth-child(3){animation-delay:.16s}
.stats>div:nth-child(4){animation-delay:.24s}
.stats>div:nth-child(5){animation-delay:.32s}
.stats>div:nth-child(6){animation-delay:.4s}
.stats>div:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(18,73,54,.12)}
.stats b{font-size:24px;display:block;color:var(--g);transition:color .3s ease}
.stats small{color:var(--muted)}
.stats>div:hover b{color:var(--g2)}

/* ===== RESPONSIVE DESIGN ===== */
@media(max-width:800px){
  .hero{grid-template-columns:1fr}
  .cats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr 1fr}
  .grid,.docs,.admingrid{grid-template-columns:1fr}
  .full{grid-column:auto}
  .stats{grid-template-columns:repeat(2,1fr)}
  nav a:not(.btn){display:none}
  .center h1{font-size:38px}
  .hero-card{padding:35px}
  section{padding:50px 20px}
}

/* Suraksha Security Force visual integration */
:root{--g:#0f2345;--g2:#1d4a94;--gold:#d4af37;--bg:#f4f7fb;--ink:#14213d;--muted:#64748b;--line:#dce4ef}
body{font-family:Poppins,Arial,sans-serif;background:linear-gradient(180deg,#f7f9fd 0,#fff 45%)}
header{background:rgba(8,28,58,.96);border-color:rgba(255,255,255,.1);box-shadow:0 8px 26px rgba(6,20,47,.16)}
.logo,nav a{color:#fff}.logo:first-letter{background:var(--gold);color:var(--g)}.logo em{font-size:10px;letter-spacing:0;text-transform:uppercase;color:#f3d46b;font-style:normal;margin-left:4px}.logo span{color:var(--gold)}
nav a:hover{color:var(--gold)}nav a::after{background:var(--gold)}.btn{background:linear-gradient(135deg,var(--gold),#f3d46b);color:#081c3a;box-shadow:0 8px 18px rgba(212,175,55,.2)}.btn:hover{background:linear-gradient(135deg,#f3d46b,var(--gold));color:#081c3a}.btn.ghost{color:var(--g)}.btn.ghost:hover{background:var(--g);color:#fff}
.login{border-top:4px solid var(--gold)}.login>p,#dashboardNote{color:var(--muted)}
.stats>div{border-top:3px solid var(--gold);box-shadow:0 8px 24px rgba(15,35,69,.08)}.stats b,.stats>div:hover b{color:var(--g)}
.analytics{max-width:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:1.15fr 1fr .85fr;gap:16px}.chart-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 10px 28px rgba(15,35,69,.07)}.chart-title{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.chart-title small{color:var(--g2);font-weight:800;letter-spacing:.1em;font-size:10px}.chart-title h3{margin:5px 0 0;font-size:16px}.chart-title>span{font-size:12px;color:var(--muted);font-weight:600}.legend i{width:9px;height:9px;display:inline-block;border-radius:50%;background:var(--gold);margin-right:4px}.status-row{margin:12px 0}.status-row>div:first-child{display:flex;justify-content:space-between;font-size:12px}.status-row small{font-size:10px;color:var(--muted)}.bar{height:7px;background:#ecf0f6;border-radius:999px;overflow:hidden;margin:6px 0}.bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--g),var(--g2))}.verified .bar i{background:linear-gradient(90deg,#198754,#55b87b)}.rejected .bar i{background:linear-gradient(90deg,#bd3131,#e66b6b)}.category-row{display:grid;grid-template-columns:116px 1fr 25px;gap:8px;align-items:center;margin:12px 0;font-size:11px}.category-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.category-row .bar i{background:linear-gradient(90deg,#b68a17,var(--gold))}.empty-chart{color:var(--muted);font-size:12px}.weekly-chart{height:177px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding:0 4px}.day{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px}.day i{width:100%;max-width:26px;background:linear-gradient(180deg,var(--gold),#f4d976);border-radius:6px 6px 2px 2px;min-height:4px}.day b{font-size:10px;color:var(--g);height:14px}.day span{font-size:9px;color:var(--muted)}
.pill{background:#eef3fb;color:var(--g)}
nav a.admin-link{background:linear-gradient(135deg,#d4af37,#f3d46b)!important;color:#081c3a!important;padding:10px 14px;border:1px solid rgba(255,255,255,.22);border-radius:9px;font-size:12px;font-weight:800;letter-spacing:.02em;box-shadow:0 7px 18px rgba(0,0,0,.22)}nav a.admin-link:hover{background:linear-gradient(135deg,#f3d46b,#d4af37)!important;color:#081c3a!important;transform:translateY(-2px);box-shadow:0 10px 22px rgba(212,175,55,.3)}nav a.admin-link::after{display:none}
.contact-section{max-width:none;background:linear-gradient(130deg,#081c3a,#163d78);color:#fff;padding:70px max(6%,calc((100% - 1100px)/2));display:flex;justify-content:space-between;align-items:center;gap:35px}.contact-section small{color:var(--gold);font-weight:800;letter-spacing:.12em}.contact-section h2{margin:8px 0 10px;font-size:32px}.contact-section p{max-width:620px;color:rgba(255,255,255,.78)}.contact-actions{display:flex;flex-wrap:wrap;gap:10px}.contact-actions .ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}.contact-actions .ghost:hover{background:#fff;color:var(--g)}.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:20;background:#25d366;color:#fff!important;padding:12px 17px;border-radius:999px;font-size:13px;font-weight:800;box-shadow:0 10px 26px rgba(37,211,102,.35);animation:float 2.8s ease-in-out infinite}.whatsapp-float:hover{transform:translateY(-3px);color:#fff}.creugo-footer{background:#06172f;color:#fff;border:0;display:grid;grid-template-columns:1fr auto;gap:20px;padding:36px max(6%,calc((100% - 1100px)/2))}.creugo-footer strong{letter-spacing:.14em;color:var(--gold)}.creugo-footer p{margin:8px 0 0;color:rgba(255,255,255,.65);font-size:12px}.creugo-footer>div:last-of-type{display:flex;gap:18px;align-items:start}.creugo-footer a{color:rgba(255,255,255,.84);font-size:12px}.creugo-footer .footer-admin{color:var(--gold);font-weight:800}.creugo-footer small{grid-column:1/-1;color:rgba(255,255,255,.45);font-size:11px;border-top:1px solid rgba(255,255,255,.12);padding-top:15px}
.admin-actions{display:flex;gap:10px;align-items:center}.logout{background:#0f2345;color:#fff}.admingrid{align-items:start}.detail{position:sticky;top:92px;max-height:calc(100vh - 118px);overflow-y:auto;overscroll-behavior:contain}.detail h2{font-size:28px;line-height:1.2;word-break:break-word}.detail .adminhead{align-items:start;gap:12px}.detail .adminhead .btn{flex:none;white-space:nowrap}
.profile-actions{display:flex;gap:8px;align-items:center}.delete-btn{background:#b42318;color:#fff;padding:10px 13px;border-radius:9px;font-size:12px;box-shadow:none}.delete-btn:hover{background:#8f1d14;box-shadow:0 7px 16px rgba(180,35,24,.2)}
@media(max-width:1000px){.analytics{grid-template-columns:1fr 1fr}.activity-card{grid-column:1/-1}}@media(max-width:650px){.analytics{grid-template-columns:1fr}.activity-card{grid-column:auto}.logo em{display:none}.contact-section{display:block;padding:50px 20px}.contact-actions{margin-top:22px}.creugo-footer{grid-template-columns:1fr;padding:30px 20px}.creugo-footer>div:last-of-type{flex-wrap:wrap}.whatsapp-float span{display:none}}

/* =====================================================
   ADMIN DASHBOARD - FULL RESPONSIVE FIX
   ===================================================== */

.admin {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding-left: 25px;
    padding-right: 25px;
}

/* Header */
.adminhead {
    gap: 20px;
}

.adminhead > div:first-child {
    min-width: 0;
}

.adminhead h1 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    margin: 10px 0;
}

.adminhead p {
    max-width: 600px;
    line-height: 1.5;
}

.admin-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Statistics */
.stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.stats > div {
    min-width: 0;
}

.stats b {
    font-size: clamp(20px, 2vw, 24px);
}

/* Analytics */
.analytics {
    width: 100%;
}

.chart-card {
    min-width: 0;
    overflow: hidden;
}

.chart-title {
    gap: 10px;
}

.chart-title > div {
    min-width: 0;
}

.chart-title h3 {
    word-break: break-word;
}

/* Main admin grid */
.admingrid {
    width: 100%;
    min-width: 0;
}

.panel {
    min-width: 0;
}

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

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

/* Toolbar */
.toolbar {
    flex-wrap: wrap;
}

.toolbar input,
.toolbar select {
    flex: 1 1 200px;
    min-width: 0;
}

/* Detail panel */
.detail {
    min-width: 0;
}

.info-grid {
    min-width: 0;
}

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

@media (max-width: 1100px) {

    .admin {
        padding-left: 20px;
        padding-right: 20px;
    }

    .adminhead {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-actions {
        width: 100%;
        justify-content: flex-start;
    }

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

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

    .detail {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* =====================================================
   SMALL TABLET / LARGE MOBILE
   ===================================================== */

@media (max-width: 800px) {

    .admin {
        padding: 0 16px;
    }

    .adminhead {
        margin-bottom: 16px;
    }

    .adminhead h1 {
        max-width: 500px;
    }

    .admin-actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }

    .admin-actions .btn {
        width: 100%;
        text-align: center;
        padding: 11px 8px;
        font-size: 12px;
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .stats > div {
        padding: 14px;
    }

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

    .activity-card {
        grid-column: auto;
    }

    .chart-card {
        padding: 18px;
    }

    .weekly-chart {
        height: 160px;
    }

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

    .detail {
        width: 100%;
    }
}

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

@media (max-width: 600px) {

    header {
        height: auto;
        min-height: 64px;
        padding: 10px 14px;
    }

    header nav {
        gap: 6px;
    }

    header nav a:not(.btn) {
        display: none;
    }

    header nav .btn {
        padding: 9px 11px;
        font-size: 11px;
        white-space: nowrap;
    }

    .logo {
        font-size: 12px;
        letter-spacing: .04em;
    }

    .admin {
        padding: 0 12px;
    }

    .adminhead {
        gap: 14px;
    }

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

    .adminhead h1 {
        font-size: 30px;
        line-height: 1.15;
    }

    .adminhead p {
        font-size: 12px;
        margin-bottom: 0;
    }

    .admin-actions {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 7px;
    }

    .admin-actions .btn {
        font-size: 10px;
        min-height: 46px;
        padding: 8px 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin: 16px 0;
    }

    .stats > div {
        padding: 12px;
        border-radius: 10px;
    }

    .stats b {
        font-size: 21px;
    }

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

    .chart-card {
        padding: 15px;
        border-radius: 14px;
    }

    .chart-title {
        margin-bottom: 14px;
    }

    .chart-title h3 {
        font-size: 14px;
    }

    .chart-title small {
        font-size: 8px;
    }

    .chart-title > span {
        font-size: 10px;
    }

    .status-row {
        margin: 10px 0;
    }

    .category-row {
        grid-template-columns: 90px minmax(0, 1fr) 20px;
        gap: 6px;
        font-size: 10px;
    }

    .weekly-chart {
        height: 140px;
        gap: 5px;
    }

    .day i {
        max-width: 20px;
    }

    .day b {
        font-size: 9px;
    }

    .day span {
        font-size: 8px;
    }

    .toolbar {
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr;
    }

    .toolbar input,
    .toolbar select {
        width: 100%;
        min-height: 45px;
    }

    .panel {
        border-radius: 12px;
    }

    .detail {
        padding: 15px;
    }

    .detail h2 {
        font-size: 23px;
    }

    .info-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .info-grid .full {
        grid-column: auto;
    }

    .profile-actions {
        flex-wrap: wrap;
    }

    .profile-actions .btn,
    .profile-actions button {
        flex: 1;
    }
}

/* =====================================================
   VERY SMALL PHONES
   ===================================================== */

@media (max-width: 380px) {

    .admin {
        padding: 0 10px;
    }

    .adminhead h1 {
        font-size: 27px;
    }

    .admin-actions {
        grid-template-columns: 1fr;
    }

    .admin-actions .btn {
        min-height: 42px;
    }

    .stats {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .stats > div {
        padding: 10px;
    }

    .stats b {
        font-size: 19px;
    }

    .chart-card {
        padding: 12px;
    }

    .category-row {
        grid-template-columns: 75px minmax(0, 1fr) 18px;
    }
}
/* =====================================================
   DOCUMENT UPLOAD STATUS
   ===================================================== */

.doc {
    position: relative;
    padding: 20px;
    border: 2px dashed #b9c9bf;
    border-radius: 12px;
    transition: all .25s ease;
    cursor: pointer;
    text-align: center;
    background: #fbfcfb;
    overflow: hidden;
}

.doc:hover {
    border-color: var(--g);
    background: #f5f8f5;
    transform: translateY(-2px);
}

/* Header */

.doc-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 25px;
}

.doc-header b {
    display: block;
    margin: 0;
    color: var(--ink);
    font-size: 14px;
}

/* Green tick */

.doc-tick {
    display: none;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 3px 8px rgba(22, 163, 74, .25);
    animation: documentTick .3s ease;
}

/* Upload area */

.doc-upload-area {
    margin-top: 15px;
    padding: 14px 10px;
    border-radius: 10px;
    background: #f4f7f5;
    transition: all .2s ease;
}

.doc:hover .doc-upload-area {
    background: #edf4ef;
}

.doc-icon {
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto 7px;
    border-radius: 50%;
    background: #e5eee8;
    color: var(--g);
    font-size: 20px;
    line-height: 34px;
    font-weight: 700;
}

.doc-upload-text {
    display: block;
    color: var(--g);
    font-size: 12px;
    font-weight: 700;
}

.doc-upload-area small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
}

/* Hide actual file input */

.doc input[type="file"] {
    display: none;
}

/* Status */

.doc-status {
    min-height: 18px;
    margin-top: 10px;
    font-size: 10px;
    line-height: 1.4;
}

.doc-status strong {
    display: block;
    color: #15803d;
    font-size: 11px;
}

.doc-status span {
    display: block;
    margin-top: 2px;
    color: #52605a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-status small {
    display: block;
    margin-top: 2px;
    color: #7a8780;
}

/* Successful upload */

.doc.uploaded {
    border: 2px solid #16a34a;
    background: #f0fdf4;
    box-shadow: 0 5px 18px rgba(22, 163, 74, .10);
}

.doc.uploaded .doc-upload-area {
    background: #dcfce7;
}

.doc.uploaded .doc-icon {
    background: #bbf7d0;
    color: #15803d;
}

/* Invalid upload */

.doc.invalid {
    border: 2px solid #dc2626;
    background: #fff7f7;
}

.doc.invalid .doc-upload-area {
    background: #fef2f2;
}

.doc.invalid .doc-icon {
    background: #fee2e2;
    color: #dc2626;
}

.doc.invalid .doc-status {
    color: #dc2626;
}

/* Animation */

@keyframes documentTick {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}


/* Mobile */

@media (max-width: 650px) {

    .docs {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .doc {
        padding: 16px;
    }

    .doc-upload-area {
        padding: 12px;
    }

}
/* =====================================================
   CONFIRMATION CHECKBOX
   ===================================================== */

/* Confirmation checkbox */

.confirm-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    gap: 10px;

    width: 100%;
    margin-top: 24px;
    padding: 0;

    border: 0;
    background: transparent;

    cursor: pointer;
}

.confirm-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;

    width: 20px;
    height: 20px;
    min-width: 20px;

    margin: 0;
    padding: 0;

    border: 2px solid #aeb9b2;
    border-radius: 4px;

    background: #fff;

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

    position: relative;
    vertical-align: middle;

    cursor: pointer;
}

.confirm-check span {
    display: block;

    margin: 0;
    padding: 0;

    font-size: 14px;
    line-height: 20px;
    font-weight: 600;

    color: #37433d;

    position: static;
}

/* Checked */

.confirm-check input[type="checkbox"]:checked {
    background: var(--g);
    border-color: var(--g);
}

.confirm-check input[type="checkbox"]:checked::after {
    content: "✓";

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -52%);

    color: white;
    font-size: 13px;
    font-weight: 900;
}

/* Mobile */

@media (max-width: 650px) {

    .confirm-check {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 9px;
    }

    .confirm-check input[type="checkbox"] {
        width: 19px;
        height: 19px;
        min-width: 19px;
        margin-top: 0;
    }

    .confirm-check span {
        font-size: 12px;
        line-height: 18px;
    }
}
/* =====================================================
   REGISTRATION DETAIL MODAL
   ===================================================== */

body.modal-open {
    overflow: hidden;
}

/* Dark background */

body.modal-open::before {
    content: "";
    position: fixed;
    inset: 0;

    background: rgba(5, 20, 15, 0.48);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    z-index: 9998;
}

/* Modal */

.detail {
    position: fixed !important;

    top: 50%;
    left: 50%;

    width: min(920px, calc(100vw - 40px));
    max-height: calc(100vh - 40px);

    margin: 0 !important;

    transform: translate(-50%, -46%) scale(.97);

    background: #fff;

    border: 1px solid #d9e2dd;
    border-radius: 18px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .22),
        0 5px 20px rgba(0, 0, 0, .08);

    overflow-y: auto;
    overflow-x: hidden;

    padding: 28px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 9999;

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
}

/* Open state */

.detail.detail-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translate(-50%, -50%) scale(1);
}

/* Close button */

.detail-close {
    position: sticky;

    top: 0;
    margin-left: auto;

    width: 38px;
    height: 38px;

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

    border: 1px solid #d7dfda;
    border-radius: 50%;

    background: #fff;
    color: #26352e;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;

    z-index: 10;

    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);

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

.detail-close:hover {
    background: var(--g);
    color: #fff;
    border-color: var(--g);

    transform: rotate(90deg);
}

.detail-close:active {
    transform: rotate(90deg) scale(.94);
}

/* Better scrollbar */

.detail::-webkit-scrollbar {
    width: 8px;
}

.detail::-webkit-scrollbar-track {
    background: transparent;
}

.detail::-webkit-scrollbar-thumb {
    background: #c8d2cc;
    border-radius: 20px;
}

.detail::-webkit-scrollbar-thumb:hover {
    background: #9eaaa3;
}

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

@media (max-width: 800px) {

    .detail {
        width: calc(100vw - 28px);

        max-height: calc(100vh - 28px);

        padding: 22px;

        border-radius: 15px;
    }

}

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

@media (max-width: 600px) {

    .detail {
        top: 10px;
        left: 10px;

        width: calc(100vw - 20px);

        max-height: calc(100vh - 20px);

        transform: translateY(10px) scale(.98);

        padding: 18px;

        border-radius: 14px;
    }

    .detail.detail-open {
        transform: translateY(0) scale(1);
    }

    .detail-close {
        width: 34px;
        height: 34px;

        font-size: 22px;
    }
}
/* =====================================================
   DETAIL PANEL DROPDOWNS
   ===================================================== */

.detail select {
    width: 100%;
    min-height: 42px;

    padding: 9px 38px 9px 12px;

    border: 1px solid #d5dfd9;
    border-radius: 9px;

    background-color: #fff;
    color: #17231e;

    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-weight: 500;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23384640' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;

    outline: none;

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

.detail select:hover {
    border-color: var(--g);
    background-color: #fbfdfc;
}

.detail select:focus {
    border-color: var(--g);

    box-shadow:
        0 0 0 3px rgba(0, 87, 62, .10);
}

/* Status colours */

.detail select[name="status"] {
    font-weight: 600;
}

.detail select[name="status"] option {
    background: #fff;
    color: #17231e;
}

/* Document / verification dropdown */

.docline select,
.check select {
    width: 145px;
    min-height: 38px;

    padding: 7px 32px 7px 10px;

    border-radius: 8px;

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

    background-position: right 9px center;
    background-size: 12px;
}

/* Mobile */

@media (max-width: 600px) {

    .detail select {
        min-height: 40px;
        font-size: 12px;
    }

    .docline select,
    .check select {
        width: 100%;
        min-width: 0;
    }
}