/* AfriAds Platform — Main Stylesheet */
:root{
  --gold:#D4A843;--gold-light:#F0C060;--terracotta:#C4602A;
  --deep:#0D0D0D;--surface:#141414;--surface2:#1C1C1C;--surface3:#252525;
  --border:#2A2A2A;--text:#F0EDE8;--muted:#7A7A7A;
  --green:#3DAA6E;--red:#D44343;--blue:#4A90D9;--radius:12px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--deep);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;overflow-x:hidden;line-height:1.6;}
h1,h2,h3,h4,h5{font-family:'Syne',sans-serif;}
a{color:var(--gold);text-decoration:none;}
a:hover{text-decoration:underline;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--surface);}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px;}

/* ── LAYOUT ── */
.layout{display:flex;min-height:100vh;}
.sidebar{width:256px;min-height:100vh;background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:100;transition:transform .25s ease;}
.sidebar-logo{padding:26px 22px 18px;border-bottom:1px solid var(--border);}
.logo-row{display:flex;align-items:center;gap:10px;}
.logo-icon{width:38px;height:38px;background:linear-gradient(135deg,var(--gold),var(--terracotta));
  border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.logo-name{font-family:'Syne',sans-serif;font-size:20px;font-weight:800;color:var(--gold);}
.logo-tag{font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}
.sidebar-nav{flex:1;padding:18px 10px;overflow-y:auto;}
.nav-section{margin-bottom:22px;}
.nav-label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);padding:0 12px;margin-bottom:6px;}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;cursor:pointer;
  transition:.18s;font-size:13.5px;color:var(--muted);border:1px solid transparent;}
.nav-item:hover{background:var(--surface2);color:var(--text);}
.nav-item.active{background:rgba(212,168,67,.1);color:var(--gold);border-color:rgba(212,168,67,.2);}
.nav-item .ni{width:18px;text-align:center;font-size:15px;}
.nav-item .badge{margin-left:auto;background:var(--gold);color:var(--deep);font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;}
.sidebar-user{padding:14px 10px;border-top:1px solid var(--border);}
.user-card{display:flex;align-items:center;gap:9px;padding:10px 12px;background:var(--surface2);border-radius:10px;cursor:pointer;border:1px solid var(--border);}
.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--terracotta));
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;}
.user-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-plan{font-size:10px;color:var(--gold);}
.main{margin-left:256px;flex:1;min-height:100vh;display:flex;flex-direction:column;}
.topbar{position:sticky;top:0;z-index:50;background:rgba(13,13,13,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);padding:0 28px;height:60px;display:flex;align-items:center;justify-content:space-between;}
.topbar-title{font-family:'Syne',sans-serif;font-size:17px;font-weight:700;}
.topbar-right{display:flex;align-items:center;gap:10px;}
.credits-badge{font-size:12px;color:var(--gold);background:rgba(212,168,67,.1);border:1px solid rgba(212,168,67,.2);padding:4px 12px;border-radius:20px;}
.page-content{padding:28px;flex:1;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:8px;
  font-size:13px;font-weight:600;cursor:pointer;border:none;transition:.18s;font-family:'DM Sans',sans-serif;white-space:nowrap;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--terracotta));color:#fff;}
.btn-primary:hover:not(:disabled){opacity:.88;transform:translateY(-1px);}
.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border);}
.btn-secondary:hover:not(:disabled){border-color:var(--gold);color:var(--gold);}
.btn-outline{background:transparent;color:var(--gold);border:1px solid var(--gold);}
.btn-outline:hover:not(:disabled){background:rgba(212,168,67,.08);}
.btn-danger{background:var(--red);color:#fff;}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid transparent;}
.btn-ghost:hover{color:var(--text);}
.btn-sm{padding:6px 13px;font-size:12px;}
.btn-lg{padding:13px 26px;font-size:15px;}
.btn-full{width:100%;justify-content:center;}

/* ── CARDS ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-bottom:24px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;position:relative;overflow:hidden;}
.stat-card::after{content:'';position:absolute;top:0;right:0;width:70px;height:70px;
  background:radial-gradient(circle,rgba(212,168,67,.07),transparent);border-radius:0 var(--radius) 0 70px;}
.stat-val{font-family:'Syne',sans-serif;font-size:26px;font-weight:800;color:var(--gold);}
.stat-lbl{font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px;}
.stat-chg{font-size:12px;margin-top:7px;color:var(--green);}

/* ── FORMS ── */
.form-group{margin-bottom:16px;}
label{display:block;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-bottom:7px;}
input,textarea,select{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;
  padding:10px 13px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:13.5px;transition:.18s;outline:none;}
input:focus,textarea:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,168,67,.1);}
textarea{resize:vertical;min-height:80px;}
select option{background:var(--surface2);color:var(--text);}
.input-error{border-color:var(--red)!important;}
.field-error{font-size:11px;color:var(--red);margin-top:4px;}

/* ── TABS ── */
.tabs{display:flex;gap:3px;background:var(--surface2);padding:4px;border-radius:10px;margin-bottom:18px;}
.tab{flex:1;text-align:center;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:.18s;color:var(--muted);}
.tab.active{background:linear-gradient(135deg,var(--gold),var(--terracotta));color:#fff;}
.tab:hover:not(.active){color:var(--text);}

/* ── TOGGLE ── */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:var(--surface2);border-radius:8px;border:1px solid var(--border);margin-bottom:10px;}
.toggle-info .tl{font-size:13.5px;font-weight:500;}
.toggle-info .ts{font-size:11px;color:var(--muted);}
.toggle{position:relative;width:42px;height:22px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;}
.tslider{position:absolute;cursor:pointer;inset:0;background:var(--border);border-radius:22px;transition:.28s;}
.tslider:before{content:'';position:absolute;width:16px;height:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.28s;}
.toggle input:checked+.tslider{background:var(--gold);}
.toggle input:checked+.tslider:before{transform:translateX(20px);}

/* ── UPLOAD ZONE ── */
.upload-zone{border:2px dashed var(--border);border-radius:10px;padding:28px;text-align:center;cursor:pointer;transition:.18s;}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--gold);background:rgba(212,168,67,.04);}
.upload-icon{font-size:28px;margin-bottom:8px;}

/* ── SECTION HEADERS ── */
.section-title{font-family:'Syne',sans-serif;font-size:22px;font-weight:700;margin-bottom:5px;}
.section-sub{font-size:13px;color:var(--muted);margin-bottom:22px;}
.divider{height:1px;background:var(--border);margin:18px 0;}

/* ── PROGRESS ── */
.progress-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--terracotta));border-radius:2px;transition:width .45s ease;}
.progress-label{font-size:11px;color:var(--muted);margin-top:5px;}

/* ── USAGE BARS ── */
.usage-item{margin-bottom:13px;}
.usage-hdr{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px;}

/* ── PLANS ── */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px;}
.plan-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px;position:relative;transition:.25s;}
.plan-card.featured{border-color:var(--gold);background:linear-gradient(160deg,rgba(212,168,67,.05),rgba(196,96,42,.04));}
.plan-card:hover{transform:translateY(-3px);}
.plan-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--gold),var(--terracotta));color:#fff;font-size:10px;font-weight:700;padding:3px 13px;border-radius:20px;white-space:nowrap;}
.plan-name{font-family:'Syne',sans-serif;font-size:18px;font-weight:800;margin-bottom:6px;}
.plan-price{font-family:'Syne',sans-serif;font-size:30px;font-weight:800;color:var(--gold);}
.plan-price-unit{font-size:14px;color:var(--muted);font-weight:400;}
.plan-desc{font-size:12px;color:var(--muted);margin:8px 0 18px;}
.plan-features{list-style:none;margin-bottom:20px;}
.plan-features li{font-size:12.5px;padding:6px 0;border-bottom:1px solid rgba(42,42,42,.7);display:flex;align-items:center;gap:7px;color:var(--muted);}
.plan-features li:last-child{border:none;}
.feat-yes{color:var(--green);}
.feat-no{color:var(--red);}

/* ── GATEWAY CARDS ── */
.gateway-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px;}
.gateway-card{border:2px solid var(--border);border-radius:10px;padding:14px;cursor:pointer;transition:.18s;background:var(--surface2);text-align:center;}
.gateway-card:hover,.gateway-card.selected{border-color:var(--gold);}
.gateway-card.selected{background:rgba(212,168,67,.08);}
.gateway-logo{font-size:22px;margin-bottom:5px;}
.gateway-name{font-size:13px;font-weight:700;}
.gateway-desc{font-size:10px;color:var(--muted);margin-top:3px;}

/* ── TABLE ── */
.table-wrap{overflow-x:auto;}
table.tbl{width:100%;border-collapse:collapse;}
table.tbl th{text-align:left;padding:11px 14px;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);}
table.tbl td{padding:13px 14px;font-size:12.5px;border-bottom:1px solid rgba(42,42,42,.5);}
table.tbl tr:hover td{background:rgba(255,255,255,.015);}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px;}
.dot-g{background:var(--green);}
.dot-r{background:var(--red);}
.dot-y{background:var(--gold);}
.pill{padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;}
.pill-text{background:rgba(74,144,217,.12);color:var(--blue);}
.pill-image{background:rgba(61,170,110,.12);color:var(--green);}
.pill-video{background:rgba(196,96,42,.12);color:var(--terracotta);}
.pill-free{background:rgba(122,122,122,.12);color:var(--muted);}
.pill-pro{background:rgba(212,168,67,.12);color:var(--gold);}
.pill-ent{background:rgba(196,96,42,.12);color:var(--terracotta);}
.pill-success{background:rgba(61,170,110,.12);color:var(--green);}
.pill-pending{background:rgba(212,168,67,.12);color:var(--gold);}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(5px);
  z-index:200;display:none;align-items:center;justify-content:center;padding:16px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:460px;max-width:100%;max-height:90vh;overflow-y:auto;}
.modal-hdr{padding:22px 26px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.modal-title{font-family:'Syne',sans-serif;font-size:17px;font-weight:700;}
.modal-close{width:30px;height:30px;border-radius:7px;background:var(--surface2);border:none;color:var(--text);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;}
.modal-body{padding:26px;}
.modal-ftr{padding:18px 26px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;}

/* ── GENERATE LAYOUT ── */
.gen-grid{display:grid;grid-template-columns:370px 1fr;gap:22px;}
.gen-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
.gen-phdr{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700;}
.gen-pbody{padding:22px;}
.output-area{background:var(--surface2);border-radius:10px;min-height:280px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.output-placeholder{text-align:center;color:var(--muted);}
.output-placeholder .opi{font-size:42px;margin-bottom:10px;opacity:.3;}
.generated-text{padding:22px;font-size:13.5px;line-height:1.85;white-space:pre-wrap;width:100%;}
.ad-card-img{width:100%;border-radius:10px;overflow:hidden;}
.ad-figure{height:300px;background:linear-gradient(135deg,#1a0d04,#2e1708,#1a0d04);
  display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;}
.ad-figure .emoji{font-size:72px;filter:drop-shadow(0 4px 22px rgba(212,168,67,.45));}
.ad-overlay{position:absolute;bottom:0;left:0;right:0;padding:14px 18px;
  background:linear-gradient(transparent,rgba(0,0,0,.88));}
.ad-tagline{font-family:'Syne',sans-serif;font-size:16px;font-weight:700;color:var(--gold);}
.ad-sub{font-size:11px;color:rgba(255,255,255,.6);margin-top:3px;}
.video-frame{height:260px;background:linear-gradient(135deg,#10070a,#1e0e14,#10070a);
  display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;border-radius:10px;}
.video-badge{position:absolute;top:10px;left:10px;background:rgba(212,68,67,.8);border-radius:5px;padding:3px 9px;font-size:9px;font-weight:700;}

/* ── HISTORY ── */
.history-list{display:flex;flex-direction:column;gap:10px;}
.hist-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 18px;
  display:flex;align-items:center;gap:14px;transition:.18s;}
.hist-item:hover{background:var(--surface2);}
.hist-thumb{width:52px;height:38px;background:var(--surface3);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.hist-title{font-size:13.5px;font-weight:600;}
.hist-meta{font-size:11px;color:var(--muted);margin-top:2px;}

/* ── TOAST ── */
.toast-container{position:fixed;bottom:22px;right:22px;z-index:999;display:flex;flex-direction:column;gap:7px;pointer-events:none;}
.toast{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 16px;
  font-size:12.5px;min-width:240px;display:flex;align-items:center;gap:9px;
  animation:slideUp .28s ease;box-shadow:0 8px 28px rgba(0,0,0,.45);pointer-events:all;}
.toast.success{border-left:3px solid var(--green);}
.toast.error{border-left:3px solid var(--red);}
.toast.info{border-left:3px solid var(--gold);}
@keyframes slideUp{from{transform:translateY(18px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* ── LANDING ── */
.landing{padding:70px 50px 50px;text-align:center;position:relative;}
.landing::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:520px;height:520px;background:radial-gradient(circle,rgba(212,168,67,.06),transparent 70%);pointer-events:none;}
.hero-eye{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;}
.hero-h1{font-family:'Syne',sans-serif;font-size:48px;font-weight:800;line-height:1.1;margin-bottom:18px;
  background:linear-gradient(135deg,var(--text) 40%,var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-sub{font-size:16px;color:var(--muted);max-width:520px;margin:0 auto 30px;line-height:1.75;}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:40px 0 0;}
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;text-align:left;}
.feature-icon{font-size:26px;margin-bottom:11px;}
.feature-title{font-size:15px;font-weight:700;margin-bottom:7px;}
.feature-desc{font-size:12.5px;color:var(--muted);line-height:1.75;}

/* ── AUTH PAGES ── */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(ellipse at 20% 50%,rgba(212,168,67,.05) 0%,transparent 60%);}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;width:420px;max-width:100%;padding:36px;}
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:28px;justify-content:center;}
.auth-title{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;text-align:center;margin-bottom:6px;}
.auth-sub{font-size:13px;color:var(--muted);text-align:center;margin-bottom:24px;}
.auth-switch{font-size:13px;text-align:center;color:var(--muted);margin-top:18px;}

/* ── NOTIFICATIONS ── */
.alert{padding:12px 16px;border-radius:8px;font-size:13px;margin-bottom:14px;display:flex;align-items:center;gap:9px;}
.alert-error{background:rgba(212,67,67,.1);border:1px solid rgba(212,67,67,.3);color:#f08080;}
.alert-success{background:rgba(61,170,110,.1);border:1px solid rgba(61,170,110,.3);color:#80d4a0;}
.alert-info{background:rgba(212,168,67,.1);border:1px solid rgba(212,168,67,.3);color:var(--gold);}

/* ── GATEWAY STATUS ── */
.gw-status{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:var(--surface2);border-radius:8px;margin-bottom:10px;}

/* ── CURRENCY SELECTOR ── */
.curr-flag{font-size:16px;margin-right:6px;}

/* ── RESPONSIVE ── */
@media(max-width:920px){
  .sidebar{transform:translateX(-260px);}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;}
  .gen-grid{grid-template-columns:1fr;}
  .plans-grid{grid-template-columns:1fr;}
  .feature-grid{grid-template-columns:1fr;}
  .landing{padding:50px 20px 30px;}
  .hero-h1{font-size:32px;}
  #menuBtn{display:flex!important;}
  .topbar{padding:0 18px;}
  .page-content{padding:18px;}
}
@media(min-width:921px){#menuBtn{display:none!important;}}

/* ── ANIMATIONS ── */
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.spin{animation:spin .8s linear infinite;display:inline-block;}
.pulse{animation:pulse 1.8s ease infinite;}
.fade-in{animation:fadeIn .4s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}