@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=Space+Mono:wght@400;700&family=Noto+Serif:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --indigo: #4338ca;
  --indigo-light: #6366f1;
  --indigo-dark: #2d1f8f;
  --indigo-pale: #eef2ff;
  --green: #16a34a;
  --green-light: #22c55e;
  --blue: #0ea5e9;
  --white: #ffffff;
  --off-white: #f8f9ff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-800: #1f2937;
  --gold: #f59e0b;
  --red: #ef4444;
  --radius: 16px;
  --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(67,56,202,0.12);
  --shadow-lg: 0 12px 48px rgba(67,56,202,0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Sora', sans-serif; background: var(--white); color: var(--gray-800); overflow-x: hidden; }

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(99,102,241,0.1);
  padding: 0 2rem; height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 2px 20px rgba(67,56,202,0.06);
}
.nav-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-mark {
  width:40px; height:40px;
  background: linear-gradient(135deg, var(--indigo), var(--blue));
  border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:white; font-weight:900; font-family:'Space Mono',monospace;
  box-shadow: 0 4px 12px rgba(99,102,241,0.35);
}
.logo-text { font-weight:800; font-size:1.05rem; color:var(--indigo-dark); line-height:1.1; }
.logo-sub { font-size:0.62rem; color:var(--indigo-light); font-weight:600; letter-spacing:0.09em; text-transform:uppercase; }
.nav-links { display:flex; align-items:center; gap:1.8rem; }
.nav-links a { text-decoration:none; color:var(--gray-600); font-weight:500; font-size:0.88rem; transition:color 0.2s; }
.nav-links a:hover { color:var(--indigo); }
.nav-actions { display:flex; gap:0.75rem; align-items:center; }
.btn { display:inline-flex; align-items:center; gap:7px; padding:10px 22px; border-radius:50px; font-weight:700; font-size:0.88rem; cursor:pointer; border:none; font-family:'Sora',sans-serif; transition:all 0.25s; text-decoration:none; }
.btn-primary { background:linear-gradient(135deg,var(--indigo),var(--indigo-light)); color:white; box-shadow:0 4px 14px rgba(99,102,241,0.3); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(99,102,241,0.42); }
.btn-outline { background:transparent; color:var(--indigo); border:2px solid var(--indigo-light); }
.btn-outline:hover { background:var(--indigo-pale); }
.btn-green { background:linear-gradient(135deg,var(--green),var(--green-light)); color:white; box-shadow:0 4px 14px rgba(22,163,74,0.3); }
.btn-green:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(22,163,74,0.42); }
.btn-lg { padding:14px 32px; font-size:1rem; }
.btn-sm { padding:7px 16px; font-size:0.8rem; }
.btn-block { width:100%; justify-content:center; border-radius:12px; }

/* FORMS */
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:1.1rem; }
.form-group label { font-size:0.83rem; font-weight:600; color:var(--gray-600); }
.form-group label .req { color:var(--red); }
.form-control {
  padding:11px 15px; border:1.5px solid var(--gray-200); border-radius:10px;
  font-family:'Sora',sans-serif; font-size:0.92rem; color:var(--gray-800);
  background:var(--gray-50); transition:all 0.2s;
}
.form-control:focus { outline:none; border-color:var(--indigo-light); background:white; box-shadow:0 0 0 3px rgba(99,102,241,0.1); }
.form-control.error { border-color:var(--red); }
textarea.form-control { resize:vertical; min-height:90px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-grid .full { grid-column:1/-1; }
.form-check { display:flex; align-items:flex-start; gap:10px; }
.form-check input[type=checkbox] { width:17px; height:17px; accent-color:var(--indigo); margin-top:2px; flex-shrink:0; }
.form-check label { font-size:0.85rem; color:var(--gray-600); line-height:1.5; cursor:pointer; }

/* CARDS */
.card { background:white; border-radius:var(--radius); border:1px solid var(--gray-200); padding:1.5rem; }
.card-shadow { box-shadow:var(--shadow); }

/* ALERTS */
.alert { padding:12px 16px; border-radius:10px; font-size:0.88rem; margin-bottom:1rem; display:flex; align-items:flex-start; gap:10px; }
.alert-success { background:#dcfce7; color:#15803d; border:1px solid #86efac; }
.alert-error { background:#fee2e2; color:#dc2626; border:1px solid #fca5a5; }
.alert-warning { background:#fef3c7; color:#d97706; border:1px solid #fcd34d; }
.alert-info { background:var(--indigo-pale); color:var(--indigo); border:1px solid #c7d2fe; }

/* BADGES */
.badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:50px; font-size:0.72rem; font-weight:700; }
.badge-green { background:#dcfce7; color:var(--green); }
.badge-indigo { background:var(--indigo-pale); color:var(--indigo); }
.badge-gold { background:#fef3c7; color:#d97706; }
.badge-red { background:#fee2e2; color:var(--red); }
.badge-gray { background:var(--gray-100); color:var(--gray-500); }

/* STATS */
.stat-card { background:white; border-radius:var(--radius); padding:1.4rem; border:1px solid var(--gray-200); transition:all 0.3s; }
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.stat-label { font-size:0.75rem; font-weight:700; color:var(--gray-400); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; }
.stat-value { font-size:1.9rem; font-weight:800; font-family:'Space Mono',monospace; }
.stat-sub { font-size:0.78rem; color:var(--green); font-weight:600; margin-top:4px; }
.stat-indigo { color:var(--indigo); }
.stat-green { color:var(--green); }
.stat-blue { color:var(--blue); }
.stat-gold { color:var(--gold); }

/* TABLES */
.table-wrap { background:white; border-radius:var(--radius); border:1px solid var(--gray-200); overflow:hidden; }
.table-head { padding:1.1rem 1.5rem; border-bottom:1px solid var(--gray-100); display:flex; justify-content:space-between; align-items:center; }
.table-head h3 { font-weight:800; font-size:0.92rem; }
table { width:100%; border-collapse:collapse; }
th { background:var(--gray-50); padding:11px 1.2rem; text-align:left; font-size:0.72rem; color:var(--gray-400); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }
td { padding:13px 1.2rem; border-bottom:1px solid var(--gray-100); font-size:0.86rem; color:var(--gray-700); }
tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--gray-50); }

/* DASHBOARD LAYOUT */
.dash-layout { display:grid; grid-template-columns:255px 1fr; min-height:100vh; padding-top:68px; }
.sidebar { background:var(--indigo-dark); position:fixed; top:68px; left:0; width:255px; height:calc(100vh - 68px); overflow-y:auto; z-index:100; }
.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:4px; }
.sb-user { padding:1.5rem 1.2rem 1.2rem; border-bottom:1px solid rgba(255,255,255,0.08); }
.sb-avatar { width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,var(--indigo-light),var(--green)); display:flex; align-items:center; justify-content:center; color:white; font-weight:800; font-size:1.1rem; margin-bottom:0.8rem; }
.sb-name { color:white; font-weight:700; font-size:0.93rem; }
.sb-email { color:rgba(255,255,255,0.45); font-size:0.75rem; margin-top:1px; }
.sb-pts { background:rgba(255,255,255,0.07); border-radius:9px; padding:8px 12px; margin-top:0.8rem; display:flex; justify-content:space-between; align-items:center; }
.sb-pts-val { color:var(--green-light); font-weight:800; font-family:'Space Mono',monospace; font-size:0.95rem; }
.sb-pts-label { color:rgba(255,255,255,0.45); font-size:0.7rem; }
.sb-nav { padding:0.8rem 0.7rem; }
.sb-section { color:rgba(255,255,255,0.28); font-size:0.67rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; padding:0.9rem 0.6rem 0.3rem; }
.sb-link { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:9px; color:rgba(255,255,255,0.58); text-decoration:none; font-size:0.87rem; font-weight:500; transition:all 0.2s; margin-bottom:2px; }
.sb-link:hover, .sb-link.active { background:rgba(255,255,255,0.09); color:white; }
.sb-link.active { background:rgba(99,102,241,0.38); }
.sb-link .icon { font-size:1rem; width:18px; text-align:center; }
.sb-link .count { margin-left:auto; background:var(--green); color:white; font-size:0.63rem; padding:2px 7px; border-radius:50px; font-weight:700; }
.main { margin-left:255px; background:var(--gray-50); min-height:calc(100vh - 68px); }
.main-inner { padding:2rem; }
.page-title { font-size:1.45rem; font-weight:800; color:var(--gray-800); }
.page-sub { font-size:0.85rem; color:var(--gray-400); margin-top:3px; }

/* SECTION TAGS */
.section-tag { display:inline-flex; align-items:center; gap:7px; background:var(--indigo-pale); color:var(--indigo); padding:5px 14px; border-radius:50px; font-size:0.75rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:0.8rem; }

/* TOAST */
#toast { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; background:var(--indigo-dark); color:white; padding:14px 20px; border-radius:13px; display:none; align-items:center; gap:10px; box-shadow:0 8px 30px rgba(0,0,0,0.2); max-width:320px; font-size:0.88rem; animation:toastIn 0.3s ease; }
#toast.show { display:flex; }
#toast.success { background:var(--green); }
#toast.error { background:var(--red); }
@keyframes toastIn { from{transform:translateX(110%);opacity:0} to{transform:translateX(0);opacity:1} }

/* MODAL */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:5000; display:none; align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.open { display:flex; }
.modal-box { background:white; border-radius:22px; padding:2.2rem; max-width:480px; width:100%; position:relative; max-height:90vh; overflow-y:auto; animation:modalIn 0.3s ease; }
@keyframes modalIn { from{transform:scale(0.9);opacity:0} to{transform:scale(1);opacity:1} }
.modal-close { position:absolute; top:1rem; right:1rem; width:30px; height:30px; border-radius:50%; background:var(--gray-100); border:none; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; }
.modal-title { font-size:1.2rem; font-weight:800; margin-bottom:0.4rem; }
.modal-pts { display:inline-flex; align-items:center; gap:7px; background:var(--indigo-pale); color:var(--indigo); padding:5px 14px; border-radius:50px; font-weight:700; font-size:0.88rem; margin-bottom:1.2rem; }

/* UPLOAD ZONE */
.upload-zone { border:2px dashed var(--gray-300); border-radius:12px; padding:1.8rem; text-align:center; cursor:pointer; transition:all 0.2s; }
.upload-zone:hover { border-color:var(--indigo-light); background:var(--indigo-pale); }
.upload-zone .uz-icon { font-size:2rem; margin-bottom:0.5rem; }
.upload-zone p { font-size:0.84rem; color:var(--gray-500); }
.upload-zone strong { color:var(--indigo); }
.upload-preview { display:none; margin-top:0.8rem; }
.upload-preview.show { display:block; }

/* RECORD BTN */
.record-btn { width:100%; padding:12px; background:linear-gradient(135deg,#7c3aed,var(--indigo)); color:white; border:none; border-radius:11px; font-weight:700; cursor:pointer; font-family:'Sora',sans-serif; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:0.8rem; font-size:0.9rem; transition:all 0.2s; }
.record-btn:hover { opacity:0.9; }
.record-btn.recording { background:linear-gradient(135deg,var(--red),#dc2626); animation:pulse-rec 1s infinite; }
@keyframes pulse-rec { 0%,100%{opacity:1} 50%{opacity:0.7} }

/* PRIORITY BANNER */
.priority-banner { background:linear-gradient(135deg,var(--indigo),var(--indigo-light)); border-radius:var(--radius); padding:1.5rem 1.8rem; color:white; margin-bottom:1.5rem; }
.priority-banner h3 { font-size:1rem; font-weight:700; }
.priority-banner p { font-size:0.83rem; opacity:0.8; margin-top:4px; }
.priority-steps { display:flex; gap:0.8rem; margin-top:0.9rem; flex-wrap:wrap; }
.pri-step { background:rgba(255,255,255,0.15); border-radius:7px; padding:5px 13px; font-size:0.78rem; }

/* REFERRAL CHAIN */
.ref-chain { display:flex; flex-direction:column; gap:0; }
.ref-node { display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; background:white; border-radius:12px; border:1px solid var(--gray-200); position:relative; }
.ref-connector { width:2px; height:24px; background:linear-gradient(var(--indigo-light),var(--green-light)); margin-left:calc(20px + 1.2rem); }
.ref-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--indigo),var(--blue)); display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:0.9rem; flex-shrink:0; }
.ref-info { flex:1; }
.ref-name { font-weight:700; font-size:0.9rem; }
.ref-meta { font-size:0.75rem; color:var(--gray-400); }
.ref-pts { font-weight:800; font-family:'Space Mono',monospace; color:var(--indigo); font-size:0.9rem; }

/* PROGRESS BAR */
.progress-wrap { background:var(--gray-100); border-radius:50px; height:8px; overflow:hidden; }
.progress-fill { height:100%; border-radius:50px; background:linear-gradient(90deg,var(--indigo),var(--green-light)); transition:width 1s ease; }

/* EARNINGS CHART BARS */
.chart-bars { display:flex; align-items:flex-end; gap:6px; height:110px; }
.chart-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.c-bar { width:100%; border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--indigo-light),var(--blue)); min-height:4px; transition:height 0.5s; }
.c-lbl { font-size:0.65rem; color:var(--gray-400); }

/* PAGE HERO (public) */
.pub-hero { background:linear-gradient(160deg,#eef2ff 0%,#e0e7ff 50%,#f0fdf4 100%); padding:5rem 6rem 4rem; position:relative; overflow:hidden; }
.pub-hero::before { content:''; position:absolute; width:500px; height:500px; background:radial-gradient(circle,rgba(99,102,241,0.07),transparent 70%); top:-100px; right:-50px; border-radius:50%; }
.pub-hero::after { content:''; position:absolute; width:300px; height:300px; background:radial-gradient(circle,rgba(22,163,74,0.06),transparent 70%); bottom:-50px; left:-30px; border-radius:50%; }
.hero-badge { display:inline-flex; align-items:center; gap:7px; background:white; border:1px solid rgba(99,102,241,0.18); padding:5px 14px; border-radius:50px; font-size:0.77rem; font-weight:600; color:var(--indigo); box-shadow:0 2px 10px rgba(99,102,241,0.08); margin-bottom:1.2rem; }
.hero-dot { width:7px; height:7px; background:var(--green); border-radius:50%; animation:blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.hero-h1 { font-size:clamp(2rem,4vw,3.2rem); font-weight:800; line-height:1.15; color:var(--indigo-dark); margin-bottom:1.2rem; }
.hero-h1 .accent { color:var(--indigo-light); }
.hero-h1 .green { color:var(--green); }
.hero-sub { font-size:1.05rem; color:var(--gray-600); line-height:1.7; max-width:580px; margin-bottom:2rem; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }

/* FOOTER */
footer { background:var(--indigo-dark); color:white; padding:3.5rem 6rem 2rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:2.5rem; }
.footer-brand p { color:rgba(255,255,255,0.55); font-size:0.85rem; line-height:1.7; margin-top:0.8rem; }
.footer-col h4 { font-weight:700; font-size:0.9rem; margin-bottom:1rem; color:rgba(255,255,255,0.88); }
.footer-col a { display:block; color:rgba(255,255,255,0.5); text-decoration:none; font-size:0.85rem; margin-bottom:0.5rem; transition:color 0.2s; }
.footer-col a:hover { color:white; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:1.5rem; display:flex; justify-content:space-between; font-size:0.8rem; color:rgba(255,255,255,0.35); }

/* RESPONSIVE */
@media (max-width:1024px) {
  .dash-layout { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .main { margin-left:0; }
  .pub-hero { padding:3rem 2rem; }
  .pub-hero .hero-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  section.content-section { padding:3rem 2rem; }
}
@media (max-width:640px) {
  .nav-links { display:none; }
  .form-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .pub-hero { padding:2.5rem 1.5rem; }
}

/* ADMIN OVERRIDES */
.admin-sidebar { background:#1e1b4b; }
.admin-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.action-btn { padding:6px 13px; border-radius:7px; font-size:0.77rem; font-weight:700; cursor:pointer; border:none; font-family:'Sora',sans-serif; transition:all 0.2s; }
.action-approve { background:#dcfce7; color:var(--green); }
.action-reject { background:#fee2e2; color:var(--red); }
.action-view { background:var(--indigo-pale); color:var(--indigo); }

content-section { padding: 4rem 6rem; }