:root{--bg:#06140f;--card:#10231e;--card2:#132d26;--line:rgba(255,255,255,.09);--text:#f4fff9;--muted:#9fb9ae;--green:#16b84e;--green2:#0f8c42;--orange:#f28c18;--blue:#2b7cff;--danger:#ff5757}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top left,#123c30,#071310 45%,#030706);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;color:var(--text)}button,input{font:inherit}button{border:0;border-radius:14px;padding:12px 16px;background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;font-weight:800;cursor:pointer}button:hover{filter:brightness(1.08)}.nb-shell{min-height:100vh;padding-bottom:90px}.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:16px 22px;background:#050f0cdb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center}.brand-logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#35e36d,#0a6d35);display:grid;place-items:center;font-weight:900;box-shadow:0 10px 25px #25c35a40}.brand-logo.big{width:86px;height:86px;font-size:28px;margin:auto}.brand span{display:block;color:var(--muted);font-size:12px}.ghost{background:#ffffff0f;border:1px solid var(--line)}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}.hero-card{max-width:760px;width:100%;text-align:center;border:1px solid var(--line);background:linear-gradient(160deg,#122d26eb,#061310f0);border-radius:34px;padding:44px;box-shadow:0 40px 90px #00000073}.hero-card h1{font-size:48px;margin:18px 0 8px;letter-spacing:-1px}.hero-card p{color:var(--muted);font-size:18px;line-height:1.6}.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}.role-grid button{background:#11251f;border:1px solid var(--line);text-align:left;min-height:120px}.role-grid strong{display:block;font-size:20px;margin-bottom:8px}.role-grid span{color:var(--muted);font-weight:500}.page{max-width:560px;margin:0 auto;padding:22px}.page.wide,.admin-layout{max-width:1180px;margin:0 auto;padding:22px}h1,h2,h3,p{margin-top:0}.muted{color:var(--muted)}.card,.item,.voucher,.ticket,.stat{border:1px solid var(--line);background:linear-gradient(160deg,#132d26f0,#0a1815f0);border-radius:24px;padding:18px;box-shadow:0 20px 50px #00000038}.gradient{background:linear-gradient(135deg,#114d33,#0c241f 60%,#183b31)}.welcome{display:flex;justify-content:space-between;align-items:center}.welcome p,.wallet span,.voucher span,.ticket span,.stat span{color:var(--muted);font-size:13px}.avatar{width:56px;height:56px;border-radius:20px;background:linear-gradient(135deg,#ffd18a,#ff8a1c);display:grid;place-items:center;color:#191006;font-weight:900}.avatar.large{width:96px;height:96px;border-radius:32px;margin:auto auto 12px}.wallet{margin:16px 0}.wallet h1{font-size:44px;margin:6px 0 18px}.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}.quick button{background:#173128;border:1px solid var(--line)}.grid{display:grid;gap:12px}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.four{grid-template-columns:repeat(4,1fr)}.stat strong{display:block;font-size:24px;margin:5px 0}.stat small{color:var(--green)}.list{display:grid;gap:12px}.item{display:flex;align-items:center;justify-content:space-between;gap:12px}.item span{display:block;color:var(--muted);font-size:13px;margin-top:4px}.item .right{text-align:right}.item b{color:#ffe08a}.tabs{display:flex;gap:8px;overflow:auto;margin:14px 0}.tabs button{white-space:nowrap;background:#132a24;border:1px solid var(--line);padding:9px 13px}.voucher-grid{display:grid;gap:14px}.voucher{display:grid;gap:12px}.voucher h3{margin-bottom:4px}.ticket{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#2d1c08,#0b1714);border-color:#ff8a1c59}.qr{width:96px;height:96px;border-radius:16px;background:#fff;color:#111;display:grid;place-items:center;font-weight:900}.bigqr{width:190px;height:190px}.primary{width:100%;margin-top:16px}.search{width:100%;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:#0d211c;color:#fff;margin:12px 0}.ok{color:#34e878}.warn{color:#ffb44c}.profile,.center{text-align:center}.scanbox{display:grid;place-items:center;min-height:300px;border:2px dashed rgba(52,232,120,.5);border-radius:28px;margin:20px 0;background:#25c35a0d}.success{border-color:#34e87880;background:#25c35a1f}.bottom-nav{position:fixed;left:50%;bottom:16px;transform:translate(-50%);width:min(720px,calc(100% - 24px));display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:10px;background:#081411db;border:1px solid var(--line);border-radius:24px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 20px 60px #00000059}.admin-nav{grid-template-columns:repeat(4,1fr)}.bottom-nav button{padding:10px 8px;background:#12271f;font-size:13px}.admin-content{width:100%}.chart{height:220px;display:flex;align-items:end;gap:16px;padding:16px}.chart span{flex:1;border-radius:12px 12px 0 0;background:linear-gradient(180deg,#39e86c,#0d7138);min-height:50px}.chart span:nth-child(1){height:70px}.chart span:nth-child(2){height:110px}.chart span:nth-child(3){height:85px}.chart span:nth-child(4){height:145px}.chart span:nth-child(5){height:125px}.chart span:nth-child(6){height:170px}.chart span:nth-child(7){height:205px}.table{display:grid;gap:10px}.table div{display:grid;grid-template-columns:2fr 2fr 1fr auto;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:16px;background:#10231e}.toast{position:fixed;top:22px;left:50%;transform:translate(-50%);background:#142b24;border:1px solid rgba(52,232,120,.5);padding:14px 18px;border-radius:16px;z-index:20;box-shadow:0 20px 60px #0006}@media(max-width:760px){.role-grid,.grid.four{grid-template-columns:1fr}.quick{grid-template-columns:repeat(2,1fr)}.grid.two{grid-template-columns:1fr 1fr}.hero-card{padding:28px}.hero-card h1{font-size:34px}.topbar{padding:12px}.brand span{display:none}.bottom-nav button{font-size:11px;padding:9px 4px}.table div{grid-template-columns:1fr}}.brand-logo{overflow:hidden;background:#fffffff5;border:2px solid rgba(22,184,78,.55)}.brand-logo img{width:100%;height:100%;object-fit:contain;padding:4px}.brand-logo.logo-fallback:after{content:"NourriBridge";color:#0b3d24;font-size:9px;font-weight:900}.brand-logo.big.logo-fallback:after{font-size:14px}.school-hero{border-color:#f28c1859;background:linear-gradient(135deg,#f28c1829,#132d26f0)}.progress{height:12px;background:#ffffff14;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--green));border-radius:999px}.video-card{display:grid;grid-template-columns:76px 1fr auto;gap:14px;align-items:center;border:1px solid var(--line);background:linear-gradient(160deg,#132d26f0,#0a1815f0);border-radius:24px;padding:14px}.video-preview{width:76px;height:58px;border-radius:18px;display:grid;place-items:center;font-weight:900;background:linear-gradient(135deg,var(--orange),#ffbe55);color:#1b1002}.video-card span{display:block;color:var(--muted);font-size:13px;margin-top:4px}.video-card b{display:block;color:#ffe08a;margin-top:6px}@media(max-width:760px){.video-card{grid-template-columns:64px 1fr}.video-card button{grid-column:1/-1}}.quick button,.bottom-nav button,.tabs button{display:flex;align-items:center;justify-content:center;gap:6px}.item strong:before{margin-right:6px}.card h2,.card h3{letter-spacing:-.3px}.bottom-nav{border:1px solid rgba(255,255,255,.12);box-shadow:0 25px 80px #00000073}.quick button{min-height:56px;border-radius:18px;font-weight:800}.voucher{position:relative;overflow:hidden}.voucher:after{content:"";position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;background:#ffffff0a}.ticket{box-shadow:0 20px 60px #f28c1826}.reward-grid span{padding:14px;border-radius:16px;background:#ffffff0f;border:1px solid var(--line);font-weight:800}.ranking{display:grid;gap:10px}.ranking div{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:16px;background:#ffffff0d;border:1px solid var(--line)}.ranking b{color:var(--orange);font-size:18px}.ranking strong{color:#ffe08a}@media(max-width:760px){.reward-grid,.form-grid{grid-template-columns:1fr}.ranking div{grid-template-columns:44px 1fr}.ranking strong{grid-column:2}}.check-list p{margin:0;padding:12px 14px;border-radius:16px;background:#ffffff0e;border:1px solid var(--line)}.upload-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}.upload-grid div{min-height:84px;display:grid;place-items:center;text-align:center;padding:12px;border-radius:18px;border:1px dashed rgba(255,255,255,.22);background:#ffffff0b;color:var(--muted);font-weight:800}@media(max-width:760px){.upload-grid{grid-template-columns:1fr 1fr}}:root{--bg:#0b120d;--card:#17130b;--card2:#24180b;--line:rgba(255,196,87,.18);--text:#fffaf0;--muted:#d4c5a8;--green:#12a84a;--green2:#076b31;--orange:#f28c18;--gold:#f7c85a;--gold2:#b87918;--dark:#070a07}body{background:radial-gradient(circle at 10% 0%,rgba(247,200,90,.2),transparent 30%),radial-gradient(circle at 90% 10%,rgba(242,140,24,.18),transparent 32%),radial-gradient(circle at 50% 100%,rgba(18,168,74,.14),transparent 35%),linear-gradient(160deg,#070a07,#0b120d 45%,#160f08)}.topbar{background:#0a0c08d1;border-bottom:1px solid rgba(247,200,90,.18)}.brand-logo{background:linear-gradient(135deg,#fff7df,#ffd574 45%,#f28c18);border:2px solid rgba(247,200,90,.75);box-shadow:0 0 0 4px #f7c85a14,0 18px 35px #f28c1838}.hero-card,.card,.item,.voucher,.stat{background:linear-gradient(160deg,#2a1d0bf5,#0e140df5),radial-gradient(circle at top right,rgba(247,200,90,.15),transparent 35%);border:1px solid rgba(247,200,90,.18);box-shadow:0 22px 60px #00000059}.gradient,.welcome,.wallet{background:linear-gradient(135deg,#f28c18eb,#b87918d9 35%,#085628eb),radial-gradient(circle at top right,rgba(255,255,255,.25),transparent 28%);border:1px solid rgba(255,222,142,.45);box-shadow:0 25px 70px #f28c1840}.wallet h1,.stat strong,.item b,.voucher strong,.ranking strong{color:var(--gold);text-shadow:0 0 18px rgba(247,200,90,.18)}button{background:linear-gradient(135deg,var(--orange),var(--gold2));color:#180d03;box-shadow:0 12px 28px #f28c1840}button:hover{filter:brightness(1.1) saturate(1.1)}.quick button,.bottom-nav button,.tabs button,.ghost{background:linear-gradient(135deg,#271a09f5,#121b11f5);color:#fff7df;border:1px solid rgba(247,200,90,.22);box-shadow:none}.quick button:hover,.bottom-nav button:hover,.tabs button:hover{background:linear-gradient(135deg,#f28c1847,#f7c85a1f)}.bottom-nav{background:#0d0d08e0;border:1px solid rgba(247,200,90,.24);box-shadow:0 25px 90px #0000008c,0 0 40px #f28c1814}.ticket{background:linear-gradient(135deg,#3b2407,#1b1208 45%,#08301d),radial-gradient(circle at top right,rgba(247,200,90,.25),transparent 35%);border-color:#f7c85a73}.qr{background:linear-gradient(135deg,#fffaf0,#ffd574);color:#2a1603;box-shadow:0 10px 30px #f7c85a40}.school-hero{background:linear-gradient(135deg,#f28c1852,#f7c85a1f,#12a84a29);border-color:#f7c85a59}.reward-grid span,.check-list p,.upload-grid div,.ranking div{background:linear-gradient(135deg,#f7c85a1a,#ffffff09);border:1px solid rgba(247,200,90,.18)}.video-preview,.avatar{background:linear-gradient(135deg,#fff1bd,#f7c85a 40%,#f28c18);color:#1d1002;box-shadow:0 12px 28px #f28c1840}.search{background:#0f110bd9;border:1px solid rgba(247,200,90,.18);color:#fffaf0}.search:focus{outline:none;border-color:#f7c85aa6;box-shadow:0 0 0 4px #f7c85a1a}.chart span{background:linear-gradient(180deg,#f7c85a,#f28c18 55%,#0d7138);box-shadow:0 0 25px #f7c85a29}.ok{color:#7dff9f}.warn{color:#ffd574}.toast{background:linear-gradient(135deg,#2f1c07,#102217);border:1px solid rgba(247,200,90,.45);color:#fff7df}.hero{border:1px solid rgba(247,200,90,.28);border-radius:28px;padding:24px;margin-bottom:18px}.hero h1{font-size:42px;margin-bottom:8px}.wallet{margin:18px 0}.wallet h2{font-size:38px;color:var(--gold);margin:8px 0}.wallet p{color:var(--muted)}.action-card{cursor:pointer;display:flex;gap:14px;align-items:flex-start}.icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#fff1bd,#f7c85a 40%,#f28c18);color:#1d1002;font-size:22px;box-shadow:0 12px 28px #f28c1840;flex:0 0 auto}.empty,.warn-box{padding:18px;border-radius:22px;border:1px dashed rgba(247,200,90,.35);background:#f7c85a14;color:var(--muted)}.bottom-nav button span{display:block;font-size:12px}.top-actions small{color:var(--gold);font-weight:800;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ticket{margin:18px 0}.qr{font-size:22px;letter-spacing:1px}.wallet h2{font-size:42px}.admin-table div{display:grid;grid-template-columns:1.2fr 1.3fr 1.2fr 1fr 1fr;gap:10px;align-items:center;padding:12px;border-radius:14px;background:#ffffff0d;border:1px solid var(--line)}.admin-table strong{color:var(--gold)}@media(max-width:760px){.admin-table div{grid-template-columns:1fr}}.top-actions{display:flex;align-items:center;gap:8px}.top-actions small{color:var(--gold);font-weight:800;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-nav{grid-template-columns:repeat(5,1fr)}.primary{width:100%;margin-top:10px}.action-card{cursor:pointer}.empty{padding:18px;border-radius:22px;border:1px dashed rgba(247,200,90,.35);background:#f7c85a14;color:var(--muted)}.admin-hero{display:flex;justify-content:space-between;gap:18px;align-items:center;margin:18px 0}.admin-score{min-width:150px;text-align:center;padding:20px;border-radius:24px;background:linear-gradient(135deg,#f7c85a2e,#f28c181f);border:1px solid rgba(247,200,90,.28)}.admin-score strong{display:block;color:var(--gold);font-size:38px}.admin-score span{color:var(--muted);font-size:13px}.admin-modules{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.admin-module{cursor:pointer;display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:14px;padding:16px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(160deg,#2a1d0bf5,#0e140df5)}.admin-module b{color:var(--gold)}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.admin-table{display:grid;gap:8px}.admin-table div{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;gap:10px;align-items:center;padding:12px;border-radius:14px;background:#ffffff0d;border:1px solid var(--line)}.finance-bars{display:grid;gap:14px}.finance-bars div{display:grid;gap:8px}.finance-bars span{color:var(--muted)}.finance-bars b{display:block;height:14px;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--gold))}.check-list{display:grid;gap:10px}.check-list p{margin:0;padding:12px;border-radius:14px;background:#ffffff0d;border:1px solid var(--line)}.reward-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.reward-grid span{padding:14px;border-radius:16px;border:1px solid var(--line);background:#ffffff0d;font-weight:800}@media(max-width:760px){.admin-modules,.form-grid,.reward-grid{grid-template-columns:1fr}.admin-module{grid-template-columns:48px 1fr}.admin-module b{grid-column:2}.admin-hero{flex-direction:column;align-items:stretch}.admin-table div{grid-template-columns:1fr}}.map-box{height:360px;border-radius:28px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at 20% 20%,rgba(247,200,90,.25),transparent 20%),radial-gradient(circle at 70% 40%,rgba(18,168,74,.22),transparent 18%),linear-gradient(135deg,#2a1d0bf5,#0e140df5);position:relative;margin:16px 0}.map-pin{position:absolute;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--orange),var(--gold));color:#1d1002;font-weight:900;box-shadow:0 15px 35px #f28c1847}.map-pin:nth-child(1){left:18%;top:30%}.map-pin:nth-child(2){left:64%;top:22%}.map-pin:nth-child(3){left:48%;top:60%}.withdrawal-card{border:1px solid var(--line);background:linear-gradient(160deg,#2a1d0bf5,#0e140df5);border-radius:24px;padding:18px}.mobile-action{width:100%;padding:16px;border-radius:20px;margin:8px 0;font-weight:900}.android-note{padding:14px;border-radius:18px;border:1px solid var(--line);background:#f7c85a14;color:var(--muted)}

/* ===== NOURRIBRIDGE MOBILE FIX ===== */

html, body{
overflow-x:hidden!important;
max-width:100%!important;
}

body{
font-size:14px!important;
}

.hero,
.gradient{
padding:20px!important;
border-radius:22px!important;
margin:12px!important;
}

.hero h1,
.gradient h1{
font-size:32px!important;
line-height:1.1!important;
}

.card{
padding:16px!important;
border-radius:20px!important;
}

input{
height:52px!important;
font-size:16px!important;
border-radius:16px!important;
}

button{
min-height:46px!important;
font-size:14px!important;
border-radius:14px!important;
}

.roles-grid{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:10px!important;
}

@media(max-width:420px){

.hero h1,
.gradient h1{
font-size:28px!important;
}

button{
font-size:13px!important;
}

}
/* ===== MOBILE PREMIUM V54 ===== */

.hero,
.gradient{
padding:16px!important;
border-radius:18px!important;
margin-top:8px!important;
margin-bottom:10px!important;
}

.hero h1,
.gradient h1{
font-size:24px!important;
line-height:1.05!important;
margin-bottom:10px!important;
}

.hero p,
.gradient p{
font-size:14px!important;
line-height:1.3!important;
}

.card{
padding:14px!important;
margin-top:10px!important;
}

.roles-grid{
margin-top:8px!important;
}

button{
height:44px!important;
}

.topbar,
header{
padding:10px 14px!important;
}

.logo{
width:42px!important;
height:42px!important;
}

input{
margin-bottom:10px!important;
}
/* ===== FINAL MOBILE COMPACT ===== */

body{
padding-top:0!important;
}

header,
.topbar{
height:68px!important;
padding:8px 12px!important;
}

.hero,
.gradient{
padding:14px!important;
min-height:auto!important;
}

.hero h1,
.gradient h1{
font-size:20px!important;
margin-bottom:6px!important;
}

.hero p,
.gradient p{
font-size:13px!important;
margin-bottom:0!important;
}

.card{
padding:12px!important;
}

input{
height:48px!important;
}

.roles-grid{
gap:8px!important;
}

button{
height:42px!important;
font-size:13px!important;
}

.logo{
width:38px!important;
height:38px!important;
}

@media(max-width:420px){

.hero{
margin-top:4px!important;
}

.card{
margin-top:8px!important;
}

}
/* ===== NOURRIBRIDGE PREMIUM UI ===== */

body{
background:#111111!important;
color:white!important;
font-family:Inter,sans-serif!important;
}

.hero,
.gradient{
background:linear-gradient(135deg,#ff9f1a,#ffe600,#00c853)!important;
box-shadow:0 8px 30px rgba(255,193,7,.25)!important;
}

.card{
background:rgba(30,30,30,.95)!important;
backdrop-filter:blur(12px)!important;
box-shadow:0 4px 20px rgba(0,0,0,.35)!important;
border:1px solid rgba(255,255,255,.08)!important;
}

input{
background:#1a1a1a!important;
border:1px solid rgba(255,255,255,.08)!important;
color:white!important;
}

input::placeholder{
color:#bdbdbd!important;
}

button{
background:linear-gradient(135deg,#ffb300,#ff9100)!important;
color:#111!important;
font-weight:700!important;
border:none!important;
box-shadow:0 4px 12px rgba(255,152,0,.3)!important;
transition:.2s ease!important;
}

button:active{
transform:scale(.98)!important;
}

header,
.topbar{
background:rgba(20,20,20,.92)!important;
backdrop-filter:blur(14px)!important;
border-bottom:1px solid rgba(255,255,255,.05)!important;
position:sticky!important;
top:0!important;
z-index:999!important;
}