/* ============================================================
   FundiNG v2 — Full Service Marketplace Design System
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Clash+Display:wght@600;700;800&display=swap');

:root {
  --font:'Inter',system-ui,sans-serif; --font-d:'Clash Display','Inter',sans-serif;
  --brand:#080D1A; --accent:#4F74FF; --accent-dark:#3A5CE6; --accent-light:rgba(79,116,255,.1);
  --success:#10B981; --success-bg:#ECFDF5; --warning:#F59E0B; --warning-bg:#FFFBEB;
  --danger:#EF4444; --danger-bg:#FEF2F2; --gold:#F59E0B;
  --n900:#0A0A0A; --n800:#1A1A2E; --n700:#374151; --n600:#4B5563; --n500:#6B7280;
  --n400:#9CA3AF; --n300:#D1D5DB; --n200:#E5E7EB; --n100:#F3F4F6; --n50:#F9FAFB;
  --r:12px; --rsm:8px; --rlg:18px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-tap-highlight-color:transparent;}
body{font-family:var(--font);font-size:14px;color:var(--n800);background:var(--n50);line-height:1.5;}
a{color:inherit;} button,input,select,textarea{font-family:var(--font);}

/* Typography */
h1,h2,h3,h4{font-family:var(--font-d);letter-spacing:-.03em;line-height:1.25;}
.page-title{font-size:20px;font-weight:800;color:var(--n800);margin-bottom:3px;}
.page-sub{font-size:13px;color:var(--n500);margin-bottom:18px;}
.sec-title{font-size:11px;font-weight:700;color:var(--n500);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;}
.page-header{margin-bottom:18px;}
.opt{font-size:11px;color:var(--n400);font-weight:400;}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:600;font-size:13px;padding:9px 18px;border-radius:var(--r);border:none;cursor:pointer;transition:all .18s;text-decoration:none;white-space:nowrap;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--accent);color:#fff;} .btn-primary:hover{background:linear-gradient(135deg,#4F74FF 0%,#2D4FCC 100%);color:#fff;}
.btn-success{background:var(--success);color:#fff;} .btn-danger{background:var(--danger);color:#fff;}
.btn-ghost{background:var(--n100);color:var(--n700);border:1.5px solid var(--n200);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-outline{background:transparent;color:var(--accent);border:1.5px solid var(--accent);}
.btn-outline:hover{background:var(--accent-light);color:var(--accent-dark);}
.btn-dark{background:linear-gradient(160deg,#0A1128 0%,#080D1A 60%,#0D1535 100%);color:#fff;}
.btn-sm{font-size:11px;padding:6px 12px;border-radius:var(--rsm);}
.btn-lg{font-size:15px;padding:13px 24px;border-radius:var(--rlg);}
.btn-block{width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none;}

/* Forms */
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--n600);margin-bottom:5px;}
.input{width:100%;border:1.5px solid var(--n200);border-radius:var(--r);padding:10px 13px;font-size:13px;color:var(--n800);background:#fff;outline:none;transition:border-color .18s;}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,116,255,.08);}
.input::placeholder{color:var(--n400);}
textarea.input{min-height:80px;resize:vertical;}
.input-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.input-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.alert{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border-radius:var(--r);font-size:13px;margin-bottom:14px;}
.alert-error{background:var(--danger-bg);color:#B91C1C;border:1px solid rgba(239,68,68,.2);}
.alert-success{background:var(--success-bg);color:#065F46;border:1px solid rgba(16,185,129,.2);}
.alert-warn{background:var(--warning-bg);color:#92400E;border:1px solid rgba(245,158,11,.2);}

/* Cards */
.card{background:#fff;border:1px solid var(--n200);border-radius:var(--rlg);}
.card-p{padding:20px;}

/* Badges & status */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.badge-verified{background:rgba(79,116,255,.12);color:var(--accent);}
.badge-skilled{background:rgba(245,158,11,.15);color:#B45309;}
.badge-trusted{background:rgba(16,185,129,.12);color:#065F46;}
.badge-top_rated{background:rgba(79,116,255,.18);color:#3730A3;}
.badge-top_rated_plus{background:rgba(139,92,246,.2);color:#6D28D9;}
.badge-elite{background:rgba(245,158,11,.2);color:#92400E;}
.b-green{background:var(--success-bg);color:#065F46;border:1px solid rgba(16,185,129,.2);}
.b-amber{background:var(--warning-bg);color:#92400E;border:1px solid rgba(245,158,11,.2);}
.b-red{background:var(--danger-bg);color:#B91C1C;border:1px solid rgba(239,68,68,.2);}
.b-blue{background:rgba(79,116,255,.1);color:var(--accent);border:1px solid rgba(79,116,255,.2);}
.b-purple{background:rgba(139,92,246,.12);color:#6D28D9;border:1px solid rgba(139,92,246,.2);}
.b-neutral{background:var(--n100);color:var(--n600);}

.status{display:inline-flex;align-items:center;padding:3px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.status-draft{background:var(--n100);color:var(--n600);}
.status-open{background:rgba(79,116,255,.1);color:var(--accent);}
.status-pending{background:var(--warning-bg);color:#B45309;}
.status-confirmed{background:rgba(79,116,255,.1);color:var(--accent);}
.status-in_progress{background:rgba(16,185,129,.1);color:#065F46;}
.status-under_review{background:var(--warning-bg);color:#92400E;}
.status-completed{background:var(--success-bg);color:#065F46;}
.status-disputed{background:var(--danger-bg);color:#B91C1C;}
.status-cancelled{background:var(--n100);color:var(--n500);}

/* Category type pills */
.type-physical{background:rgba(16,185,129,.1);color:#065F46;}
.type-digital{background:rgba(79,116,255,.1);color:var(--accent);}
.type-professional{background:rgba(139,92,246,.12);color:#6D28D9;}

/* Contract type */
.contract-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:100px;font-size:10px;font-weight:700;}
.ct-fixed{background:rgba(79,116,255,.1);color:var(--accent);}
.ct-hourly{background:rgba(16,185,129,.1);color:var(--success);}
.ct-milestone{background:rgba(245,158,11,.1);color:var(--warning);}
.ct-recurring{background:rgba(139,92,246,.12);color:#7C3AED;}

/* Tabs */
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-bottom:14px;padding-bottom:2px;}
.tabs::-webkit-scrollbar{display:none;}
.tab-btn{padding:6px 14px;border-radius:100px;border:1.5px solid var(--n200);background:#fff;font-size:12px;font-weight:600;color:var(--n500);cursor:pointer;white-space:nowrap;transition:all .18s;}
.tab-btn.active,.tab-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* Sidebar layout */
.sidebar{position:fixed;top:0;left:0;height:100vh;width:248px;background:var(--brand);z-index:200;display:flex;flex-direction:column;overflow-y:auto;border-right:1px solid rgba(255,255,255,.06);transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);}
.sidebar.open{transform:translateX(0);}
.main{padding:14px 16px 80px;min-height:100vh;}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:190;backdrop-filter:blur(2px);}
.overlay.open{display:block;}
.sb-header{padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.07);}
.sb-brand{font-family:var(--font-d);font-size:20px;font-weight:800;color:#fff;text-decoration:none;letter-spacing:-.5px;}
.sb-brand span{color:var(--accent);}
.sb-user{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:10px;}
.sb-avatar{width:34px;height:34px;border-radius:10px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0;}
.sb-name{font-size:13px;font-weight:600;color:#fff;}
.sb-role{font-size:10px;color:rgba(255,255,255,.4);}
.sb-section{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.25);padding:12px 14px 4px;}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 14px;color:rgba(255,255,255,.4);font-size:12px;font-weight:400;cursor:pointer;transition:all .15s;border:none;background:none;width:100%;text-align:left;border-left:2px solid transparent;font-family:var(--font);text-decoration:none;}
.nav-item:hover{color:rgba(255,255,255,.8);background:rgba(255,255,255,.05);}
.nav-item.active{color:#fff;background:rgba(79,116,255,.18);border-left-color:var(--accent);font-weight:500;}
.nav-item svg{flex-shrink:0;opacity:.6;}
.nav-item.active svg,.nav-item:hover svg{opacity:1;}
.sb-close{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.08);border:none;border-radius:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.5);}
.sb-bottom{padding:8px;border-top:1px solid rgba(255,255,255,.07);margin-top:auto;}

/* Mobile header */
.mobile-header{background:var(--brand);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:150;border-bottom:1px solid rgba(255,255,255,.06);}
.mobile-logo{font-family:var(--font-d);font-size:18px;font-weight:800;color:#fff;text-decoration:none;}
.mobile-logo span{color:var(--accent);}
.mh-right{display:flex;align-items:center;gap:8px;}
.icon-btn{width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.6);transition:all .18s;}
.icon-btn:hover{background:rgba(255,255,255,.1);color:#fff;}

/* Bottom nav */
.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--n200);z-index:150;padding:0 4px env(safe-area-inset-bottom,8px);}
.bnav-items{display:flex;}
.bnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;font-size:10px;font-weight:500;color:var(--n400);background:none;border:none;cursor:pointer;text-decoration:none;transition:color .18s;}
.bnav-btn.active,.bnav-btn:hover{color:var(--accent);}

/* Navbar */
.navbar{background:var(--brand);padding:0 24px;height:58px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:150;border-bottom:1px solid rgba(255,255,255,.06);}
.navbar-brand{font-family:var(--font-d);font-size:20px;font-weight:800;color:#fff;text-decoration:none;letter-spacing:-.5px;}
.navbar-brand span{color:var(--accent);}
.navbar-links{display:flex;align-items:center;gap:6px;}
.navbar-link{font-size:13px;font-weight:500;color:rgba(255,255,255,.55);text-decoration:none;padding:6px 12px;border-radius:var(--rsm);transition:all .18s;}
.navbar-link:hover,.navbar-link.active{color:#fff;background:rgba(255,255,255,.08);}
.navbar-auth{display:flex;align-items:center;gap:8px;}
.navbar-avatar{width:30px;height:30px;border-radius:9px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;}

/* Modals */
.modal-wrap{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:300;align-items:flex-end;justify-content:center;backdrop-filter:blur(3px);}
.modal-wrap.open{display:flex!important;}
.modal-wrap.open{display:flex;}
.modal-wrap.center{align-items:center;}
.modal{background:#fff;border-radius:24px 24px 0 0;padding:24px 20px 28px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;position:relative;animation:slide-up .22s ease;}
.modal-wrap.center .modal{border-radius:20px;}
@keyframes slide-up{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-handle{width:36px;height:4px;background:var(--n200);border-radius:2px;margin:0 auto 18px;}
.modal-close{position:absolute;top:16px;right:16px;background:var(--n100);border:none;border-radius:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--n500);font-size:14px;}
.modal-title{font-family:var(--font-d);font-size:18px;font-weight:800;color:var(--n900);margin-bottom:3px;letter-spacing:-.03em;}
.modal-sub{font-size:13px;color:var(--n500);margin-bottom:18px;}

/* Pro cards */
.pro-card{background:#fff;border:1.5px solid var(--n200);border-radius:18px;padding:18px;transition:all .22s;}
.pro-card:hover{border-color:rgba(79,116,255,.3);box-shadow:0 6px 24px rgba(79,116,255,.09);transform:translateY(-2px);}
.pro-av{width:52px;height:52px;border-radius:14px;background:var(--accent-light);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:18px;font-weight:800;color:var(--accent);flex-shrink:0;}

/* Skeleton */
.sk{background:var(--n150, #e8eaf0);background-size:200%;animation:sk .8s infinite;border-radius:var(--r);}
.sk-card{height:90px;margin-bottom:10px;}
.sk-line{height:14px;margin-bottom:8px;border-radius:4px;}
@keyframes sk{0%{background-position:200%}100%{background-position:-200%}}

/* Toast */
.toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--n800);color:#fff;padding:11px 18px;border-radius:100px;font-size:13px;font-weight:500;opacity:0;transition:all .25s;pointer-events:none;white-space:nowrap;z-index:999;max-width:calc(100vw - 32px);text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.t-success{background:#065F46;} .toast.t-error{background:#B91C1C;} .toast.t-warning{background:#92400E;}

/* Switch */
.switch-wrap{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--n100);}
.switch-wrap:last-child{border-bottom:none;}
.sw{width:42px;height:24px;background:var(--n200);border-radius:100px;position:relative;cursor:pointer;transition:background .2s;border:none;flex-shrink:0;}
.sw.on{background:var(--accent);color:#fff;}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.sw.on::after{transform:translateX(18px);}

/* Misc */
.divider{height:1px;background:var(--n100);margin:16px 0;}
.empty-state{text-align:center;padding:48px 20px;}
.empty-state h3{font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--n700);margin-bottom:6px;}
.empty-state p{font-size:13px;color:var(--n400);}
.empty-icon{width:52px;height:52px;background:var(--n100);border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--n400);}
.fade-up{animation:fadeup .3s ease both;}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.vb{background:var(--accent-light);border:1px solid rgba(79,116,255,.15);border-radius:12px;padding:12px;display:flex;gap:10px;margin-bottom:16px;}
.vb-icon{width:34px;height:34px;border-radius:9px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.vb h4{font-size:13px;font-weight:700;color:var(--n800);margin-bottom:3px;}
.vb p{font-size:12px;color:var(--n600);}

/* Milestone track */
.ms-track{display:flex;flex-direction:column;gap:0;}
.ms-item{display:flex;gap:14px;padding-bottom:16px;position:relative;}
.ms-dot{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;z-index:1;}
.ms-dot.funded{background:var(--accent);color:#fff;}
.ms-dot.done{background:var(--success);color:#fff;}
.ms-dot.pending{background:var(--n100);color:var(--n400);border:1.5px solid var(--n200);}
.ms-dot.disputed{background:var(--danger);color:#fff;}
.ms-item:not(:last-child) .ms-dot::after{content:'';position:absolute;left:13px;top:28px;width:2px;height:calc(100% - 28px);background:var(--n200);z-index:0;}

/* Offer card */
.offer-card{background:#EEF2FF;border:1.5px solid rgba(79,116,255,.2);border-radius:14px;padding:16px;margin-bottom:10px;}

/* Notif badge */
.notif-badge{position:absolute;top:2px;right:2px;width:16px;height:16px;background:var(--danger);border-radius:50%;border:2px solid var(--brand);font-size:9px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;}

@media(min-width:768px){
  .sidebar{transform:translateX(0);}
  .main{margin-left:248px;}
  .mobile-header{display:none;}
  .mobile-bottom-nav{display:none;}
}
@media(max-width:767px){
  .navbar-links{display:none;}
  .input-row{grid-template-columns:1fr;}
  .input-row-3{grid-template-columns:1fr 1fr;}
}

/* ── Skills picker ──────────────────────────────────────────── */
.skill-tags{display:flex;flex-wrap:wrap;gap:6px;min-height:0;margin-bottom:8px;}
.skill-tag{display:inline-flex;align-items:center;gap:4px;background:var(--accent);color:#fff;padding:4px 10px;border-radius:100px;font-size:12px;font-weight:500;cursor:pointer;}
.skill-options{display:flex;flex-wrap:wrap;gap:6px;max-height:200px;overflow-y:auto;padding:2px;}
.skill-opt{background:var(--n50);border:1.5px solid var(--n200);border-radius:100px;padding:5px 12px;font-size:12px;font-weight:500;color:var(--n600);cursor:pointer;transition:all .15s;white-space:nowrap;}
.skill-opt:hover{border-color:var(--accent);color:var(--accent);}
.skill-opt.active{background:var(--accent-light);border-color:var(--accent);color:var(--accent);}

/* ── Cat type tabs ──────────────────────────────────────────── */
.type-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.type-tab{padding:6px 14px;border-radius:100px;border:1.5px solid var(--n200);background:#fff;font-size:12px;font-weight:600;color:var(--n500);cursor:pointer;transition:all .18s;}
.type-tab.active{border-color:var(--accent);color:var(--accent);background:var(--accent-light);}
.type-tab.physical.active{border-color:var(--success);color:var(--success);background:var(--success-bg);}
.type-tab.professional.active{border-color:#7C3AED;color:#7C3AED;background:#F5F3FF;}

/* ── Pro card grid ──────────────────────────────────────────── */
.pros-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.jss-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--accent);}

/* Solid accent bg → always white text + icons */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active { color: #fff !important; }

/* Accent-light (tinted) bg → dark text */
.btn-outline,
.btn-outline:hover,
.tab-btn.active,
.tab-btn:hover,
.skill-opt.active,
.type-tab.active,
.b-blue,
.status-open,
.status-confirmed,
.type-digital,
.ct-fixed,
.badge-verified,
.pro-av { color: var(--accent-dark) !important; }

/* Brand bg → always near-white text */
.navbar,
.mobile-header,
.sidebar,
.asb,
.footer { color: rgba(255,255,255,.85); }

/* Navbar links and buttons inherit from navbar */
.navbar a,
.navbar button,
.mobile-header a,
.mobile-header button,
.asb a,
.asb button { color: inherit; }

/* Nav items on brand bg */
.nav-link,
.nav-item { color: rgba(255,255,255,.75); }
.nav-link:hover,
.nav-item:hover,
.nav-item.active { color: #fff; }

/* Sidebar items */
.asb-item { color: rgba(255,255,255,.65); }
.asb-item:hover,
.asb-item.active { color: #fff; background: rgba(79,116,255,.18); }
.asb-sec { color: rgba(255,255,255,.3); }

/* Toggle switch ON */
.sw.on { background: var(--accent); color: #fff; }

/* Badges — solid colored ones need white text */
.b-green  { background: var(--success-bg); color: #065F46; }
.b-red    { background: var(--danger-bg);  color: #991B1B; }
.b-yellow { background: var(--warning-bg); color: #92400E; }
.b-neutral{ background: var(--n100);       color: var(--n700); }
.b-blue   { background: rgba(79,116,255,.1); color: var(--accent-dark); }

/* Status badges */
.status-open,
.status-confirmed  { background: rgba(79,116,255,.1); color: #2D4FCC; }
.status-pending    { background: var(--warning-bg);   color: #92400E; }
.status-completed  { background: var(--success-bg);   color: #065F46; }
.status-cancelled,
.status-disputed   { background: var(--danger-bg);    color: #991B1B; }
.status-in_progress{ background: rgba(245,158,11,.1); color: #92400E; }

/* Wallet card — dark bg */
.wallet-card { color: #fff; }
.wallet-card p,
.wallet-card span { color: inherit; }
.wallet-label { color: rgba(255,255,255,.55) !important; }
.wallet-sub   { color: rgba(255,255,255,.45) !important; }

/* Hero section — brand bg */
.hero { color: #fff; }
.hero p,
.hero h1,
.hero span { color: inherit; }
.hero-sub  { color: rgba(255,255,255,.75); }
.hs-lbl    { color: rgba(255,255,255,.5); }

/* Cards on white bg — readable dark text */
.scard,
.pro-card,
.cat-card { color: var(--n800); }

/* Form inputs always readable */
.input { color: var(--n900); background: #fff; }
.input::placeholder { color: var(--n400); }

/* Skill tags — solid accent */
.skill-tag { background: var(--accent); color: #fff; }

/* Pro onboarding steps */
.step-dot.active,
.step-dot.done { background: var(--accent); color: #fff; }

/* Admin sidebar */
.asb-logo a { color: #fff; }
.asb-logo p  { color: rgba(255,255,255,.4); }
.asb-user p  { color: #fff; }

/* Topup pills selected */
.topup-pill.sel { border-color: var(--accent); background: var(--accent-light); color: var(--accent-dark); }

/* KYC doc options selected */
.kyc-doc-option.selected { border-color: var(--accent); background: var(--accent-light); color: var(--n800); }

/* Any element with solid accent bg → force white text */

/* ═══════════════════════════════════════════════════════════
   CONTRAST SYSTEM — ensures readable text on every background
   ═══════════════════════════════════════════════════════════ */

/* ── Accent solid (#4F74FF) → white text ───────────────────── */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.skill-tag,
.ms-dot.funded,
.step-dot.active,
.step-dot.done,
.bnav-item.active,
.sw.on { color: #fff !important; }

/* ── Accent-light (rgba tint) → dark accent text ─────────── */
.btn-outline,
.btn-outline:hover,
.tab-btn.active,
.tab-btn:hover,
.skill-opt.active,
.type-tab.active,
.kyc-doc-option.selected,
.pro-av,
.topup-pill.sel { color: var(--accent-dark) !important; }
.btn-outline      { color: var(--accent); border-color: var(--accent); }
.btn-outline:hover{ color: var(--accent-dark); }

/* ── Brand/dark navy → near-white text ───────────────────── */
.navbar          { color: rgba(255,255,255,.9); }
.navbar a        { color: rgba(255,255,255,.8); }
.navbar a:hover  { color: #fff; }
.mobile-header   { color: rgba(255,255,255,.9); }
.mobile-header a { color: rgba(255,255,255,.85); }
.asb             { color: rgba(255,255,255,.8); }
.asb-item        { color: rgba(255,255,255,.6); font-weight: 500; }
.asb-item:hover  { color: rgba(255,255,255,.9); background: rgba(255,255,255,.06); }
.asb-item.active { color: #fff; background: rgba(79,116,255,.22); border-left: 3px solid var(--accent); }
.asb-sec         { color: rgba(255,255,255,.28); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 14px 16px 4px; }
.asb-logo a,
.asb-logo span   { color: #fff; text-decoration: none; }
.asb-logo p      { color: rgba(255,255,255,.35); font-size: 11px; }
.asb-av          { background: var(--accent); color: #fff; }
.asb-user p      { color: rgba(255,255,255,.9); }

/* Sidebar nav item icons & text always inherit */
.asb-item svg    { opacity: .7; }
.asb-item.active svg { opacity: 1; }

/* ── Hero section ─────────────────────────────────────────── */
.hero            { color: #fff; }
.hero h1,.hero-title { color: #fff; }
.hero-sub        { color: rgba(255,255,255,.72); }
.hs-lbl          { color: rgba(255,255,255,.45); }
.hs .val         { color: #fff; }
.trust-item p    { color: rgba(255,255,255,.5); }

/* ── Wallet card ─────────────────────────────────────────── */
.wallet-card     { color: #fff; }
.wallet-label    { color: rgba(255,255,255,.5) !important; }
.wallet-sub      { color: rgba(255,255,255,.4) !important; }
.wallet-amount   { color: #fff !important; }
.wc-greet        { color: rgba(255,255,255,.5); }
.wc-name         { color: #fff; }

/* ── Token bar (accent bg) ───────────────────────────────── */
.token-bar       { background: linear-gradient(135deg,#3A5CE6 0%,#4F74FF 100%); }
.token-bar .lbl  { color: rgba(255,255,255,.5) !important; }
.token-bar .bal  { color: #fff !important; }
.token-bar a,
.token-bar button{ color: rgba(255,255,255,.85) !important; }

/* ── AI card (brand bg) ──────────────────────────────────── */
.ai-card h3      { color: #fff !important; }
.ai-card p       { color: rgba(255,255,255,.6) !important; }
.ai-card label   { color: rgba(255,255,255,.7) !important; }
.ai-card .input  { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.15); }
.ai-card .input::placeholder { color: rgba(255,255,255,.35); }

/* ── Pro onboarding hero ──────────────────────────────────── */
.pg-hero h1     { color: #fff !important; }
.pg-hero p      { color: rgba(255,255,255,.55) !important; }

/* ── Badges ──────────────────────────────────────────────── */
.badge          { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 100px; display: inline-flex; align-items: center; }
.b-green        { background: #ECFDF5; color: #065F46 !important; }
.b-red          { background: #FEF2F2; color: #991B1B !important; }
.b-yellow       { background: #FFFBEB; color: #92400E !important; }
.b-neutral      { background: var(--n100); color: var(--n700) !important; }
.b-blue         { background: rgba(79,116,255,.1); color: #2D4FCC !important; }

/* ── Status badges ───────────────────────────────────────── */
.status-open,
.status-confirmed  { background: rgba(79,116,255,.1); color: #2D4FCC; }
.status-pending    { background: #FFFBEB; color: #92400E; }
.status-completed  { background: #ECFDF5; color: #065F46; }
.status-cancelled,
.status-disputed   { background: #FEF2F2; color: #991B1B; }
.status-in_progress{ background: rgba(245,158,11,.12); color: #92400E; }

/* ── Cards ───────────────────────────────────────────────── */
.scard           { color: var(--n800); }
.sec-title       { color: var(--n700); font-weight: 700; }
.page-title      { color: var(--n900); }
.page-sub        { color: var(--n500); }
.stat-val        { color: var(--n900); }
.stat-lbl        { color: var(--n500); }

/* ── Forms ───────────────────────────────────────────────── */
label            { color: var(--n700); font-size: 12px; font-weight: 600; }
.input           { color: var(--n900); background: #fff; border: 1.5px solid var(--n200); }
.input::placeholder { color: var(--n400); }
.input:focus     { border-color: var(--accent); color: var(--n900); }
textarea.input   { color: var(--n900); }

/* ── Buttons on dark cards ───────────────────────────────── */
.btn-ghost         { color: var(--n700); }
.btn-ghost:hover   { background: var(--n100); color: var(--n900); }
.btn-danger        { background: var(--danger); color: #fff !important; }
.btn-danger:hover  { background: #DC2626; color: #fff !important; }
.btn-success       { background: var(--success); color: #fff !important; }

/* ── Admin panel ─────────────────────────────────────────── */
.am              { color: var(--n800); background: var(--n50); }
.atb             { color: rgba(255,255,255,.9); }
.ap .page-title  { color: var(--n900); }
.feerow          { color: var(--n800); }
.feelbl p        { color: var(--n700); font-weight: 600; }
.feein           { color: var(--n900); font-weight: 700; }
.sw-lbl          { color: var(--n700); font-size: 13px; font-weight: 600; }
.sw-sub          { color: var(--n500); font-size: 12px; }

/* ── Footer ──────────────────────────────────────────────── */
.footer          { color: rgba(255,255,255,.7); }
.footer-col h4   { color: rgba(255,255,255,.3); }
.footer-col a    { color: rgba(255,255,255,.55); }
.footer-col a:hover { color: #fff; }
.footer-bottom   { color: rgba(255,255,255,.3); text-align: center; }
.footer-desc     { color: rgba(255,255,255,.5); }
.logo            { color: #fff; }
.logo span       { color: var(--accent); }