/* JapaQuest — African Sky Design System (app UI) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root{--g900:#052415;--g800:#073420;--g700:#0A4A2C;--g600:#0D6B42;--g500:#0F8A54;--g400:#12A765;--g300:#2FC98A;--g200:#7FE0B4;--g100:#DCFFF0;--a900:#3A2508;--a800:#5C3A0C;--a700:#8A5A14;--a600:#B07A20;--a500:#D9A441;--a400:#E6B55C;--a300:#F0C878;--a200:#F8E2AC;--a100:#FCF4DE;--o500:#E8613C;--o400:#F07B4F;--o300:#F59C7E;--r500:#C8102E;--r400:#E8304E;--r300:#FF6B7A;--canvas:#0A1428;--surface:#0D1930;--elev1:#12203A;--elev2:#182848;--elev3:#1F3256;--glass:rgba(255,255,255,0.04);--glass2:rgba(255,255,255,0.07);--t1:#F4F1E8;--t2:#CDC9BE;--t3:#8E8A7D;--t4:#565349;--b0:rgba(255,255,255,0.05);--b1:rgba(255,255,255,0.09);--b2:rgba(255,255,255,0.15);--bg:rgba(232,116,46,0.30);--ba:rgba(217,164,65,0.30);--ff:'Outfit',system-ui,sans-serif;--fd:'Fraunces',Georgia,serif;--fm:'JetBrains Mono',monospace;--shadow-sm:0 2px 8px rgba(0,0,0,.35);--shadow-md:0 8px 32px rgba(0,0,0,.45);--shadow-lg:0 20px 60px rgba(0,0,0,.55);--glow-g:0 0 40px rgba(217,90,35,0.22);--glow-a:0 0 40px rgba(217,164,65,0.20);--r-xs:6px;--r-sm:9px;--r-md:13px;--r-lg:18px;--r-xl:24px;--r-pill:999px;--ease:.22s cubic-bezier(.4,0,.2,1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--ff);background:var(--canvas);color:var(--t1);line-height:1.6;overflow-x:hidden}
img,video{max-width:100%;display:block}
button,input,select,textarea{font-family:var(--ff)}
button{cursor:pointer;border:none;background:none}
a{color:var(--o400);text-decoration:none}
a:hover{color:var(--o300)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:rgba(232,116,46,.3);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(232,116,46,.5)}
/* Typography */
.display,.heading{font-family:var(--fd)}
.display{font-weight:700;line-height:1.08;letter-spacing:-.02em}
.heading{font-weight:600;line-height:1.15}
.label{font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.mono{font-family:var(--fm)}
.grad-text{background:linear-gradient(135deg,var(--o400) 0%,var(--a300) 55%,var(--o300) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gold-text{background:linear-gradient(135deg,var(--a400),var(--a300));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.green-text{background:linear-gradient(135deg,var(--g400),var(--g200));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 22px;border-radius:var(--r-sm);font-size:.88rem;font-weight:600;transition:all var(--ease);white-space:nowrap;position:relative;overflow:hidden}
.btn-primary{background:linear-gradient(135deg,#C14A1B,#E8742E);color:#fff;box-shadow:0 4px 20px rgba(217,90,35,.35)}
.btn-primary:hover{background:linear-gradient(135deg,#D95A23,#F0874A);transform:translateY(-2px);box-shadow:0 8px 30px rgba(217,90,35,.5)}
.btn-gold{background:linear-gradient(135deg,var(--a700),var(--a500));color:#000;box-shadow:0 4px 20px rgba(245,158,11,.3)}
.btn-gold:hover{background:linear-gradient(135deg,var(--a600),var(--a300));transform:translateY(-2px);color:#000;box-shadow:0 8px 30px rgba(245,158,11,.45)}
.btn-outline{background:transparent;border:1px solid var(--b2);color:var(--t2)}
.btn-outline:hover{border-color:var(--ba);color:var(--a400);background:rgba(245,158,11,.06)}
.btn-ghost{background:var(--glass);border:1px solid var(--b1);color:var(--t3)}
.btn-ghost:hover{background:var(--glass2);color:var(--t1)}
.btn-danger{background:rgba(200,16,46,.1);border:1px solid rgba(200,16,46,.25);color:#FF6B7A}
.btn-danger:hover{background:rgba(200,16,46,.2)}
.btn-sm{padding:6px 14px;font-size:.78rem;border-radius:var(--r-sm)}
.btn-lg{padding:14px 32px;font-size:.96rem;border-radius:var(--r-md)}
.btn-xl{padding:17px 40px;font-size:1.02rem;border-radius:var(--r-lg)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
/* Cards */
.card{background:var(--elev1);border:1px solid var(--b1);border-radius:var(--r-lg);padding:20px;transition:all var(--ease)}
.card:hover{border-color:var(--b2);box-shadow:var(--shadow-md)}
/* Inputs */
.input{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--b1);border-radius:var(--r-sm);padding:11px 14px;color:var(--t1);font-size:.88rem;transition:all var(--ease)}
.input:focus{outline:none;border-color:rgba(217,90,35,.55);box-shadow:0 0 0 3px rgba(217,90,35,.12)}
.input::placeholder{color:var(--t4)}
.input:disabled{opacity:.5;cursor:not-allowed}
select.input option{background:var(--elev2)}
textarea.input{resize:vertical;min-height:80px}
/* Form */
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:.74rem;font-weight:500;color:var(--t3);margin-bottom:5px}
.form-hint{font-size:.67rem;color:var(--t4);margin-top:4px}
/* Alerts */
.alert{padding:11px 15px;border-radius:var(--r-sm);font-size:.82rem;margin-bottom:14px;display:none}
.alert.show{display:block}
.alert-error{background:rgba(200,16,46,.08);border:1px solid rgba(200,16,46,.3);color:#FF8F9C}
.alert-success{background:rgba(0,135,81,.08);border:1px solid rgba(0,135,81,.3);color:#6EE7B7}
.alert-warning{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);color:#FFD166;display:block}
.alert-info{background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.3);color:#93C5FD}
/* Badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-pill);font-size:.65rem;font-weight:600;letter-spacing:.04em}
.badge-green{background:rgba(0,135,81,.12);border:1px solid rgba(0,135,81,.25);color:var(--g300)}
.badge-gold{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.25);color:var(--a300)}
.badge-red{background:rgba(200,16,46,.1);border:1px solid rgba(200,16,46,.25);color:var(--r300)}
.badge-purple{background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.25);color:#C4B5FD}
.badge-gray{background:rgba(255,255,255,.06);border:1px solid var(--b1);color:var(--t3)}
/* Spinner */
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.15);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
/* Toast */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(10px);z-index:9999;background:var(--elev2);border:1px solid var(--b2);border-radius:var(--r-md);padding:11px 20px;font-size:.82rem;color:var(--t1);box-shadow:var(--shadow-lg);display:none;white-space:nowrap;max-width:90vw;transition:all .3s ease;opacity:0}
#toast.show{display:block;opacity:1;transform:translateX(-50%) translateY(0)}
/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;z-index:800;padding:20px;backdrop-filter:blur(6px)}
.modal-overlay.open{display:flex}
.modal{background:var(--elev1);border:1px solid var(--b2);border-radius:var(--r-xl);width:100%;max-width:440px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:modalIn .25s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:scale(.93) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-head{padding:20px 24px 0;text-align:center}
.modal-body{padding:20px 24px}
.modal-foot{padding:14px 24px;border-top:1px solid var(--b0);text-align:center;font-size:.8rem;color:var(--t3)}
.modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:var(--r-sm);background:var(--glass);color:var(--t3);display:flex;align-items:center;justify-content:center;font-size:14px;transition:all var(--ease);cursor:pointer;border:none}
.modal-close:hover{background:rgba(200,16,46,.15);color:var(--r300)}
/* Progress */
.progress{height:6px;background:var(--glass2);border-radius:var(--r-pill);overflow:hidden}
.progress-fill{height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,#C14A1B,#E8742E);transition:width .5s ease}
.progress-fill.warn{background:linear-gradient(90deg,var(--a700),var(--a500))}
.progress-fill.danger{background:linear-gradient(90deg,var(--r500),var(--o500))}
/* Toggle */
.toggle{position:relative;width:40px;height:22px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-sl{position:absolute;inset:0;background:rgba(255,255,255,.1);border-radius:22px;cursor:pointer;transition:var(--ease)}
.toggle-sl::before{content:'';position:absolute;height:16px;width:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:var(--ease)}
.toggle input:checked+.toggle-sl{background:var(--o500)}
.toggle input:checked+.toggle-sl::before{transform:translateX(18px)}
/* Table */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{padding:10px 14px;font-size:.64rem;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--b1);white-space:nowrap;text-align:left}
td{padding:10px 14px;font-size:.8rem;color:var(--t3);border-bottom:1px solid var(--b0)}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.02);color:var(--t1)}
/* Section */
.section-eyebrow{display:inline-flex;align-items:center;gap:7px;background:rgba(232,116,46,.1);border:1px solid rgba(232,116,46,.22);border-radius:var(--r-pill);padding:5px 14px;font-size:.65rem;font-weight:600;color:var(--o300);letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.section-title{font-family:var(--fd);font-size:clamp(1.6rem,4vw,2.4rem);font-weight:700;line-height:1.1;margin-bottom:12px}
.section-sub{font-size:.9rem;color:var(--t3);line-height:1.75;max-width:560px}
/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.animate-up{animation:fadeUp .5s var(--ease) both}
.animate-in{animation:fadeIn .4s ease both}
/* Responsive */
@media(max-width:768px){.hide-mobile{display:none!important}.btn-xl{padding:14px 28px;font-size:.92rem}.section-sub{font-size:.84rem}}
@media(min-width:769px){.show-mobile{display:none!important}}
@media(max-width:480px){.modal{border-radius:var(--r-xl) var(--r-xl) 0 0;position:fixed;bottom:0;max-width:100%;margin:0}.btn-lg{padding:12px 24px;font-size:.88rem}}

/* ── MODAL INPUT FIX (ensures inputs work on all browsers/OS) ── */
.modal-overlay.open{pointer-events:all}
.modal-overlay .modal{pointer-events:all}
.modal-overlay input,
.modal-overlay select,
.modal-overlay textarea,
.m-overlay.open .m-box input,
.m-overlay.open .m-box select,
.m-overlay.open .m-box textarea{
  pointer-events:all !important;
  user-select:text !important;
  -webkit-user-select:text !important;
  cursor:text;
  position:relative;
  z-index:1;
}