*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#0a0a0a;--white:#fff;
  --gray-50:#F8F8F8;--gray-100:#F0F0F0;--gray-200:#E2E2E2;--gray-300:#C8C8C8;
  --gray-500:#6E6E6E;--gray-700:#3D3D3D;--gray-900:#141414;
  --accent:#0a0a0a;--accent-inv:#fff;
  --success:#166534;--success-bg:#F0FDF4;--success-border:#BBF7D0;
  --danger:#991B1B;--danger-bg:#FEF2F2;--danger-border:#FECACA;
  --warn:#92400E;--warn-bg:#FFFBEB;--warn-border:#FDE68A;
  --info:#1E40AF;--info-bg:#EFF6FF;--info-border:#BFDBFE;
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;--r-2xl:28px;
  --shadow-sm:0 1px 4px rgba(0,0,0,.07);
  --shadow-md:0 4px 20px rgba(0,0,0,.09);
  --shadow-lg:0 8px 40px rgba(0,0,0,.14);
  --ff-head:'Clash Display',sans-serif;
  --ff-body:'Cabinet Grotesk',sans-serif;
  --nav-h:62px;
  --sidebar-w:220px;
}
html{scroll-behavior:smooth}
body{font-family:var(--ff-body);background:var(--gray-50);color:var(--black);font-size:15px;line-height:1.6;min-height:100vh}
.nav{position:sticky;top:0;z-index:500;background:var(--black);border-bottom:1px solid #1e1e1e;height:var(--nav-h);display:flex;align-items:center;padding:0 1.5rem;gap:1rem}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.nav-brand img{height:30px;width:auto;object-fit:contain}
.nav-brand-text{font-family:var(--ff-head);font-size:14px;font-weight:700;color:#fff;letter-spacing:-.2px;white-space:nowrap}
.nav-brand-text span{color:var(--gray-500)}
.nav-spacer{flex:1}
.nav-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:38px;height:38px;background:transparent;border:1px solid #2a2a2a;border-radius:var(--r-md);cursor:pointer;flex-shrink:0}
.nav-hamburger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:all .25s}
.nav-hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.nav-user{display:flex;align-items:center;gap:10px}
.nav-avatar{width:34px;height:34px;border-radius:50%;background:var(--white);border:2px solid #2e2e2e;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--black);overflow:hidden;flex-shrink:0;cursor:pointer}
.nav-avatar img{width:100%;height:100%;object-fit:cover}
.nav-uname{font-size:13px;color:#e0e0e0;font-weight:500;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-btn{position:relative;width:36px;height:36px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;border:1px solid #2a2a2a;transition:background .15s;flex-shrink:0}
.notif-btn:hover{background:#181818}
.notif-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;background:#ef4444;color:#fff;font-size:9px;font-weight:700;border-radius:20px;display:none;align-items:center;justify-content:center;border:2px solid var(--black)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 20px;border-radius:var(--r-md);font-family:var(--ff-body);font-size:13px;font-weight:700;cursor:pointer;border:none;transition:all .15s;white-space:nowrap;text-decoration:none}
.btn-white{background:var(--white);color:var(--black)}.btn-white:hover{background:var(--gray-100)}
.btn-black{background:var(--black);color:var(--white);border:1px solid #333}.btn-black:hover{background:#111}
.btn-outline{background:transparent;color:var(--white);border:1px solid #333}.btn-outline:hover{border-color:#555;background:#0a0a0a}
.btn-outline-dark{background:transparent;color:var(--black);border:1px solid var(--gray-300)}.btn-outline-dark:hover{background:var(--gray-50);border-color:var(--gray-500)}
.btn-lg{padding:13px 32px;font-size:15px;border-radius:var(--r-lg)}
.btn-sm{padding:6px 13px;font-size:12px;border-radius:var(--r-sm)}
.btn-danger{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-border)}
.btn-success{background:var(--success-bg);color:var(--success);border:1px solid var(--success-border)}
.btn-full{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.dash-layout{display:flex;min-height:calc(100vh - var(--nav-h));background:var(--gray-50);position:relative;overflow-x:hidden}
.sidebar{width:var(--sidebar-w);background:var(--white);border-right:1px solid var(--gray-200);padding:1.25rem 0;flex-shrink:0;position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow-y:auto;transition:transform .3s ease;z-index:100}
.sidebar-section{padding:0 .75rem;margin-bottom:1.25rem}
.sidebar-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--gray-300);padding:.5rem .75rem;margin-bottom:.25rem}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer;font-size:13px;color:var(--gray-500);font-weight:500;transition:all .15s;user-select:none}
.nav-item:hover{background:var(--gray-50);color:var(--black)}
.nav-item.active{background:var(--black);color:var(--white)}
.nav-item svg{width:15px;height:15px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;backdrop-filter:blur(2px)}
.dash-content{flex:1;padding:2rem;overflow-y:auto;min-width:0}
.dash-topbar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.75rem;gap:1rem;flex-wrap:wrap}
.dash-title{font-family:var(--ff-head);font-size:1.6rem;font-weight:700;letter-spacing:-.5px}
.dash-subtitle{font-size:13px;color:var(--gray-500);margin-top:2px}
.panel{display:none;animation:panelIn .2s ease}
.panel.active{display:block}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ref-link-box{background:var(--black);border-radius:var(--r-xl);padding:16px 18px;display:flex;align-items:center;gap:10px;margin-bottom:1.75rem;border:1px solid #1e1e1e;flex-wrap:wrap}
.ref-link-label{font-size:10px;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:1px;white-space:nowrap}
.ref-link-url{font-family:monospace;font-size:12px;color:var(--gray-300);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ref-link-copy{padding:7px 16px;background:var(--white);color:var(--black);border:none;border-radius:var(--r-sm);font-family:var(--ff-body);font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap}
.ref-link-copy:hover{background:var(--gray-100)}
.ref-link-copy.ok{background:var(--success-bg);color:var(--success)}
.metrics-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.875rem;margin-bottom:1.25rem}
.metric-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-xl);padding:1.25rem 1.25rem 1rem;transition:box-shadow .15s,transform .15s}
.metric-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.metric-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--gray-500);margin-bottom:.5rem}
.metric-value{font-family:var(--ff-head);font-size:1.7rem;font-weight:700;letter-spacing:-.5px;line-height:1.1}
.metric-delta{font-size:11px;margin-top:.35rem;font-weight:600}
.delta-up{color:var(--success)}.delta-down{color:var(--danger)}.delta-neutral{color:var(--gray-500)}
.card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-xl);padding:1.5rem;margin-bottom:1rem}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;gap:.75rem;flex-wrap:wrap}
.card-title{font-family:var(--ff-head);font-size:14px;font-weight:700;letter-spacing:-.2px}
.card-grid-2{display:grid;grid-template-columns:2fr 1fr;gap:1rem;margin-bottom:1rem}
.card-grid-2x{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:440px}
th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--gray-500);padding:8px 14px;text-align:left;border-bottom:1px solid var(--gray-200);white-space:nowrap;background:var(--gray-50)}
td{font-size:13px;padding:11px 14px;border-bottom:1px solid var(--gray-100);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--gray-50)}
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:40px;font-size:11px;font-weight:700;letter-spacing:.3px}
.badge-pending{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-border)}
.badge-approved,.badge-active,.badge-paid{background:var(--success-bg);color:var(--success);border:1px solid var(--success-border)}
.badge-rejected,.badge-suspended{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-border)}
.badge-processing{background:var(--info-bg);color:var(--info);border:1px solid var(--info-border)}
.notif-list{}
.notif-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--gray-100)}
.notif-item:last-child{border-bottom:none}
.notif-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
.notif-dot.info{background:var(--info)}.notif-dot.success{background:var(--success)}.notif-dot.warning{background:var(--warn)}.notif-dot.alert{background:var(--danger)}.notif-dot.read{background:var(--gray-200)}
.notif-title{font-size:13px;font-weight:700;margin-bottom:2px}
.notif-body{font-size:13px;color:var(--gray-500);line-height:1.5}
.notif-time{font-size:11px;color:var(--gray-300);margin-top:4px;font-weight:500}
.tier-bar-track{height:6px;background:var(--gray-100);border-radius:3px;overflow:hidden;margin:.5rem 0}
.tier-bar-fill{height:100%;background:var(--black);border-radius:3px;transition:width .5s ease}
.period-btns{display:flex;gap:4px}
.period-btn{padding:5px 12px;font-size:11px;font-weight:700;border:1px solid var(--gray-200);border-radius:var(--r-sm);cursor:pointer;background:transparent;color:var(--gray-500);font-family:var(--ff-body);transition:all .15s}
.period-btn.active{background:var(--black);color:var(--white);border-color:var(--black)}
.live{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#16a34a}
.live::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;animation:livePulse 2s infinite}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.link-item{display:grid;grid-template-columns:auto 1fr auto auto auto auto;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--gray-100)}
.link-item:last-child{border-bottom:none}
.link-icon{width:40px;height:40px;border-radius:var(--r-md);background:var(--gray-100);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.link-name{font-size:13px;font-weight:700}
.link-url{font-family:monospace;font-size:11px;color:var(--gray-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.link-stat{text-align:right}
.link-stat-val{font-size:13px;font-weight:700}
.link-stat-lbl{font-size:10px;color:var(--gray-500)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:1rem}
.product-card{border:1px solid var(--gray-200);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:all .15s;background:var(--white)}
.product-card:hover{border-color:var(--black);box-shadow:var(--shadow-sm)}
.product-card.selected{border-color:var(--black);box-shadow:0 0 0 2px var(--black)}
.product-thumb{width:100%;height:100px;background:var(--gray-100);display:flex;align-items:center;justify-content:center;font-size:2rem;overflow:hidden}
.product-thumb img{width:100%;height:100%;object-fit:cover}
.product-info{padding:10px 12px}
.product-name{font-size:12px;font-weight:700;line-height:1.3;margin-bottom:4px}
.product-price{font-size:11px;color:var(--gray-500)}
.payout-form{border:1px solid var(--gray-200);border-radius:var(--r-xl);padding:1.5rem;background:var(--white);margin-bottom:1rem}
.pw-wrap{position:relative}
.pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--gray-400);padding:2px;display:flex;align-items:center}
.pw-toggle:hover{color:var(--gray-700)}
.pw-strength{margin-top:8px}
.pw-bar-track{height:4px;background:var(--gray-100);border-radius:2px;overflow:hidden;margin-bottom:5px}
.pw-bar-fill{height:100%;border-radius:2px;transition:width .3s ease,background .3s ease;width:0%}
.pw-label{font-size:11px;font-weight:600;transition:color .3s}
.pw-hints{font-size:11px;color:var(--gray-400);margin-top:3px;line-height:1.5}
.pw-hint{display:inline-flex;align-items:center;gap:4px;margin-right:10px}
.pw-hint.met{color:var(--success)}.pw-hint.unmet{color:var(--gray-300)}
/* Profile avatar */
.avatar-upload-wrap{display:flex;align-items:center;gap:1.25rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--gray-100)}
.avatar-preview{width:80px;height:80px;border-radius:50%;background:var(--gray-100);border:3px solid var(--gray-200);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;color:var(--gray-500);overflow:hidden;flex-shrink:0;font-family:var(--ff-head)}
.avatar-preview img{width:100%;height:100%;object-fit:cover}
.avatar-upload-btn{display:flex;flex-direction:column;gap:6px}
.avatar-upload-label{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;background:var(--black);color:#fff;border-radius:var(--r-md);font-size:13px;font-weight:700;cursor:pointer;transition:opacity .15s}
.avatar-upload-label:hover{opacity:.85}
.avatar-upload-label input[type=file]{display:none}
.avatar-upload-hint{font-size:11px;color:var(--gray-500)}
.avatar-upload-progress{height:3px;background:var(--gray-100);border-radius:3px;overflow:hidden;display:none;margin-top:4px}
.avatar-upload-progress-bar{height:100%;background:var(--black);border-radius:3px;width:0%;transition:width .3s}
/* Toast */
#toast{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast-item{background:var(--black);color:var(--white);padding:12px 18px;border-radius:var(--r-lg);font-size:13px;font-weight:500;box-shadow:var(--shadow-lg);animation:toastIn .25s ease;max-width:320px;display:flex;align-items:center;gap:10px;pointer-events:all;transition:opacity .3s}
@keyframes toastIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
.toast-item.success{background:#15803d;color:#fff}
.toast-item.error{background:#991b1b;color:#fff}
.spinner{width:20px;height:20px;border:2px solid var(--gray-200);border-top-color:var(--black);border-radius:50%;animation:spin .6s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-state{text-align:center;padding:3rem;color:var(--gray-500);font-size:13px;display:flex;align-items:center;justify-content:center;gap:10px}
.empty-state{text-align:center;padding:3rem;color:var(--gray-500)}
/* Forms */
.form-group{margin-bottom:1rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
label{display:block;font-size:11px;font-weight:700;color:var(--gray-700);margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.4px}
input,select,textarea{width:100%;padding:10px 13px;border:1px solid var(--gray-200);border-radius:var(--r-md);font-family:var(--ff-body);font-size:14px;color:var(--black);background:var(--white);outline:none;transition:border .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--black);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
input::placeholder{color:var(--gray-300)}
input:disabled{background:var(--gray-50);color:var(--gray-500);cursor:not-allowed}
textarea{resize:vertical;min-height:80px}
.alert{padding:10px 14px;border-radius:var(--r-md);font-size:13px;display:none;margin-bottom:1rem;font-weight:500;line-height:1.4}
.alert-error{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-border)}
.alert-success{background:var(--success-bg);color:var(--success);border:1px solid var(--success-border)}
/* Landing */
.page{display:none;animation:fadeIn .2s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.hero{background:var(--black);padding:7rem 2rem 6rem;min-height:85vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}
.hero-inner{text-align:center;max-width:760px;position:relative}
.hero-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid #2a2a2a;border-radius:40px;padding:5px 16px 5px 5px;margin-bottom:2.5rem;background:#0a0a0a}
.hero-badge-dot{width:6px;height:6px;background:var(--white);border-radius:50%;margin-left:4px;animation:pulse 2s infinite}
.hero-badge-text{font-size:12px;color:var(--gray-500);font-weight:500}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{font-family:var(--ff-head);font-size:clamp(3rem,8vw,5.5rem);font-weight:700;color:var(--white);line-height:1.0;letter-spacing:-2px;margin-bottom:1.5rem}
.hero-accent{display:inline-block;border-bottom:3px solid var(--white);padding-bottom:2px}
.hero p{font-size:17px;color:var(--gray-500);max-width:500px;margin:0 auto 2.5rem;line-height:1.7;font-weight:400}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:4rem}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #1a1a1a;padding-top:3rem;gap:2rem}
.stat-n{font-family:var(--ff-head);font-size:2.4rem;font-weight:700;color:var(--white);letter-spacing:-1px}
.stat-l{font-size:12px;color:var(--gray-500);text-transform:uppercase;letter-spacing:1px;margin-top:2px;font-weight:500}
.features{padding:6rem 2rem;max-width:1100px;margin:0 auto}
.section-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--gray-500);margin-bottom:.75rem}
.section-title{font-family:var(--ff-head);font-size:clamp(2rem,4vw,3.2rem);font-weight:700;letter-spacing:-1px;line-height:1.1;margin-bottom:3.5rem}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--gray-200);border:1px solid var(--gray-200);border-radius:var(--r-xl);overflow:hidden}
.feat-item{background:var(--white);padding:2rem;transition:background .15s}
.feat-item:hover{background:var(--gray-50)}
.feat-icon{width:40px;height:40px;background:var(--black);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}
.feat-icon svg{width:20px;height:20px;stroke:var(--white);fill:none;stroke-width:1.5}
.feat-item h3{font-family:var(--ff-head);font-size:15px;font-weight:600;margin-bottom:.5rem}
.feat-item p{font-size:13px;color:var(--gray-500);line-height:1.6}
.tiers-section{background:var(--gray-50);border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);padding:6rem 2rem}
.tiers-inner{max-width:900px;margin:0 auto;text-align:center}
.tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--gray-200);border-radius:var(--r-xl);overflow:hidden;margin-top:3rem}
.tier-card{background:var(--white);padding:2.5rem 1.5rem;text-align:center;border-right:1px solid var(--gray-200);position:relative}
.tier-card:last-child{border-right:none}
.tier-card.featured{background:var(--black);color:var(--white)}
.tier-card.featured .tier-sub{color:var(--gray-500)}
.tier-name{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--gray-500);margin-bottom:.75rem}
.tier-card.featured .tier-name{color:var(--gray-500)}
.tier-pct{font-family:var(--ff-head);font-size:3.5rem;font-weight:700;letter-spacing:-2px;line-height:1}
.tier-sub{font-size:12px;color:var(--gray-500);margin-top:.5rem;font-weight:500}
.tier-badge{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--black);color:var(--white);font-size:10px;font-weight:700;padding:3px 12px;border-radius:0 0 var(--r-sm) var(--r-sm);letter-spacing:.5px}
.cta-section{background:var(--black);padding:6rem 2rem;text-align:center}
.cta-section h2{font-family:var(--ff-head);font-size:clamp(2rem,4vw,3rem);font-weight:700;color:var(--white);letter-spacing:-1px;margin-bottom:1rem}
.cta-section p{color:var(--gray-500);font-size:16px;margin-bottom:2rem}
.auth-wrap{min-height:calc(100vh - var(--nav-h));display:grid;place-items:center;padding:2rem;background:var(--gray-50)}
.auth-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-2xl);padding:2.5rem;width:100%;max-width:420px;box-shadow:var(--shadow-sm)}
.auth-head{margin-bottom:2rem}
.auth-brand{display:flex;align-items:center;gap:9px;margin-bottom:.25rem}
.auth-brand img{height:28px;width:auto;object-fit:contain}
.auth-brand-text{font-family:var(--ff-head);font-size:15px;font-weight:700;color:var(--black)}
.auth-brand span{color:var(--gray-500);font-weight:400}
.auth-title{font-family:var(--ff-head);font-size:1.8rem;font-weight:700;letter-spacing:-.5px}
.auth-sub{font-size:13px;color:var(--gray-500);margin-top:4px}
.divider{display:flex;align-items:center;gap:12px;margin:1.25rem 0;color:var(--gray-300);font-size:12px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--gray-200)}
.google-btn{width:100%;padding:11px;border:1px solid var(--gray-200);border-radius:var(--r-md);background:var(--white);font-family:var(--ff-body);font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .15s;color:var(--black)}
.google-btn:hover{background:var(--gray-50)}
.google-btn svg{width:18px;height:18px}
.auth-footer{text-align:center;margin-top:1.25rem;font-size:13px;color:var(--gray-500)}
.auth-footer a{color:var(--black);font-weight:700;cursor:pointer}
.terms{font-size:11px;color:var(--gray-500);text-align:center;margin-top:.75rem;line-height:1.6}
.otp-wrap{text-align:center;padding:.5rem 0}
.otp-inputs{display:flex;gap:.75rem;justify-content:center;margin:1.5rem 0}
.otp-input{width:48px;height:56px;text-align:center;font-size:1.5rem;font-weight:700;font-family:var(--ff-head);border:2px solid var(--gray-200);border-radius:var(--r-md);outline:none;transition:border .15s;background:var(--white);color:var(--black)}
.otp-input:focus{border-color:var(--black)}
.otp-resend{font-size:13px;color:var(--gray-500);cursor:pointer;background:none;border:none;font-family:var(--ff-body)}
.otp-resend:hover{color:var(--black)}
.otp-resend:disabled{opacity:.4;cursor:not-allowed}
/* Importation tools */
.lc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lc-advanced summary{cursor:pointer;font-size:.8rem;color:var(--gray-500);padding:8px 0;user-select:none}
.lc-result-wrap{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:20px;background:var(--gray-50);border:1px solid var(--gray-100);border-radius:var(--r-lg)}
.lc-result-col-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-400);margin:0 0 12px}
.lc-line{display:flex;justify-content:space-between;padding:5px 0;font-size:.85rem;border-bottom:1px solid var(--gray-100)}
.lc-line:last-child{border-bottom:none}
.lc-line-total{font-weight:700;color:var(--gray-900)}
.lc-big{display:flex;flex-direction:column;margin-bottom:14px}
.lc-big-label{font-size:.72rem;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em}
.lc-big-val{font-size:1.6rem;font-weight:800;line-height:1.2}
.lc-big-val.gold{color:#b8860b}
.lc-profit-line{font-size:.82rem;color:var(--success,#16a34a);font-weight:600;margin-top:4px}
.lc-rate-note{font-size:.7rem;color:var(--gray-400);margin-top:10px}
/* Media kit */
.mk-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.mk-filter-btn{background:transparent;border:1px solid var(--gray-200);color:var(--gray-500);border-radius:20px;padding:4px 14px;font-size:.75rem;cursor:pointer;transition:all .15s;font-weight:600}
.mk-filter-btn.active,.mk-filter-btn:hover{border-color:var(--gray-900);color:var(--gray-900);background:var(--gray-50)}
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:14px}
.mk-item{border:1px solid var(--gray-100);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s}
.mk-item:hover{border-color:var(--gray-400)}
.mk-thumb{width:100%;height:125px;background:var(--gray-50);display:flex;align-items:center;justify-content:center;font-size:2rem;overflow:hidden}
.mk-thumb img{width:100%;height:100%;object-fit:cover}
.mk-body{padding:10px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.mk-caption{font-size:.82rem;font-weight:600;word-break:break-word;line-height:1.3}
.mk-meta{font-size:.7rem;color:var(--gray-400);display:flex;justify-content:space-between}
.mk-actions{display:flex;gap:5px;margin-top:2px}
.mk-btn{flex:1;border:none;border-radius:6px;padding:6px 0;font-size:.72rem;font-weight:700;cursor:pointer;transition:opacity .15s}
.mk-btn:hover{opacity:.8}
.mk-btn-dl{background:var(--gray-900);color:#fff}
.mk-btn-cp{background:var(--gray-100);color:var(--gray-700);border:1px solid var(--gray-200)}
.mk-btn-cp.copied{background:#dcfce7;color:#15803d;border-color:#86efac}
.mk-type-badge{display:inline-block;padding:1px 7px;border-radius:4px;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.mk-type-image{background:#dbeafe;color:#1d4ed8}
.mk-type-video{background:#ede9fe;color:#6d28d9}
.mk-type-document{background:#dcfce7;color:#15803d}
.mk-type-design{background:#fce7f3;color:#be185d}
.wa-support-btn{display:inline-flex;align-items:center;gap:8px;background:#25d366;color:#fff;border:none;border-radius:8px;padding:10px 20px;font-size:.9rem;font-weight:700;cursor:pointer;transition:opacity .2s}
.wa-support-btn:hover{opacity:.88}
.tools-desc{font-size:.85rem;color:var(--gray-500);margin-bottom:20px;line-height:1.6}
/* PWA */
#pwa-install{display:none;position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:var(--black);color:var(--white);border-radius:var(--r-xl);padding:12px 20px;font-size:13px;font-weight:600;z-index:9998;align-items:center;gap:12px;box-shadow:var(--shadow-lg);max-width:340px;width:calc(100% - 2rem)}
#pwa-install.show{display:flex}
#pwa-install button{background:var(--white);color:var(--black);border:none;border-radius:var(--r-sm);padding:6px 14px;font-family:var(--ff-body);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
#pwa-install-dismiss{background:none!important;color:var(--gray-500)!important;padding:4px!important}
/* Mobile bottom nav */

/* Gen link search */
.gen-link-search{display:flex;gap:8px;margin-bottom:1rem}
.gen-link-search input{flex:1}
/* Analytics blank chart note */
.chart-no-data-note{font-size:11px;color:var(--gray-400);text-align:center;margin-top:6px;font-style:italic}
@media(max-width:900px){
  .card-grid-2{grid-template-columns:1fr}
}
@media(max-width:768px){
  :root{--sidebar-w:280px}
  .nav-hamburger{display:flex}
  .nav-uname{display:none}
  .nav{padding:0 1rem}
  .sidebar{position:fixed;top:var(--nav-h);left:0;transform:translateX(-100%);box-shadow:var(--shadow-lg);z-index:100}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay.visible{display:block}
  .dash-content{padding:1rem}
  .form-row{grid-template-columns:1fr}
  .card-grid-2,.card-grid-2x{grid-template-columns:1fr}
  .tier-grid{grid-template-columns:repeat(2,1fr)}
  .stats-row{grid-template-columns:1fr}
  .hero h1{letter-spacing:-1px}
  .dash-title{font-size:1.35rem}
  .lc-grid,.lc-result-wrap{grid-template-columns:1fr}
  .link-item{grid-template-columns:auto 1fr auto}
}
@media(max-width:480px){
  .hero{padding:5rem 1.25rem 4rem}
  .hero h1{font-size:2.8rem;letter-spacing:-1px}
  .hero p{font-size:15px}
  .hero-cta{flex-direction:column;align-items:center}
  .hero-cta .btn{width:100%;max-width:280px}
  .auth-card{padding:1.75rem 1.25rem}
  .tier-grid{grid-template-columns:1fr 1fr}
  .feat-grid{grid-template-columns:1fr}
  .metrics-row{grid-template-columns:1fr 1fr}
  #toast{bottom:calc(74px + .75rem);right:.75rem;left:.75rem}
  .toast-item{max-width:100%}
}

/* ═══════════════════════════════════════════
   MOBILE BOTTOM NAV + RESPONSIVE OVERHAUL
   Paramount Affiliate — Mobile-first upgrade
═══════════════════════════════════════════ */

/* ── Bottom Nav Bar (mobile only) ───────────── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: #fff;
  border-top: 1px solid var(--gray-200);
  z-index: 300;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}
.mobile-bottom-nav ul {
  display: flex;
  height: 100%;
  list-style: none;
  padding: 0; margin: 0;
}
.mobile-bottom-nav li {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-bottom-nav .mbn-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--r-md);
  transition: all .15s;
  width: 100%;
  height: 100%;
  color: var(--gray-500);
  font-family: var(--ff-body);
  position: relative;
}
.mobile-bottom-nav .mbn-btn svg {
  width: 22px; height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  transition: stroke .15s;
}
.mobile-bottom-nav .mbn-btn span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1;
}
.mobile-bottom-nav .mbn-btn.active {
  color: var(--black);
}
.mobile-bottom-nav .mbn-btn.active::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 3px;
  background: var(--black);
  border-radius: 0 0 3px 3px;
}
.mobile-bottom-nav .mbn-btn.mbn-generate {
  color: #fff;
  background: var(--black);
  border-radius: 50%;
  width: 48px; height: 48px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  margin-top: -14px;
}
.mobile-bottom-nav .mbn-btn.mbn-generate.active::after { display: none; }
.mobile-bottom-nav .mbn-btn.mbn-generate svg { width: 20px; height: 20px; stroke: #fff; }
.mobile-bottom-nav .mbn-btn .mbn-badge {
  position: absolute;
  top: 5px; right: 10px;
  min-width: 16px; height: 16px;
  background: #ef4444; color: #fff;
  font-size: 9px; font-weight: 700;
  border-radius: 10px; padding: 0 4px;
  display: none; align-items: center; justify-content: center;
}

/* ── Nav improvements on mobile ─────────────── */
@media (max-width: 768px) {
  :root { --nav-h: 56px; }

  .nav { padding: 0 1rem; gap: .75rem; }
  .nav-brand img { height: 26px; }
  .nav-brand-text { font-size: 13px; }
  .nav-uname, .notif-btn { display: none; }
  .nav-hamburger { display: none !important; } /* replaced by bottom nav */

  /* Sidebar hidden on mobile */
  .sidebar { display: none !important; }
  .sidebar-overlay { display: none !important; }

  /* Bottom nav visible on mobile */
  .mobile-bottom-nav { display: block; }

  /* Content padding for bottom nav */
  .dash-content {
    padding: 1rem;
    padding-bottom: 80px;
  }

  /* Panels */
  .panel { animation: none; }

  /* Topbar */
  .dash-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: 1rem;
  }
  .dash-title { font-size: 1.2rem; }

  /* Metrics row */
  .metrics-row { grid-template-columns: 1fr 1fr; gap: .625rem; }
  .metric-card { padding: 1rem .875rem .75rem; }
  .metric-value { font-size: 1.4rem; }

  /* Card */
  .card { padding: 1rem; border-radius: var(--r-lg); }
  .card-head { margin-bottom: .875rem; }

  /* Links */
  .link-item {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
  }
  .link-stat { display: none; }
  .link-stat:first-of-type { display: block; } /* show only first stat */
  .link-url { max-width: 180px; }

  /* Gen link form */
  .gl-store-tabs { gap: 4px; }
  .gl-store-tab { padding: 7px 12px; font-size: 12px; }
  .gl-top-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .gl-prod-card-img { height: 90px; }

  /* Ref link box */
  .ref-link-box { padding: 12px 14px; }
  .ref-link-url { font-size: 11px; }

  /* Tables → scrollable */
  .tbl-wrap { border-radius: var(--r-lg); border: 1px solid var(--gray-200); overflow: hidden; }
  table { min-width: 360px; }
  th, td { padding: 9px 12px; font-size: 12px; }

  /* Chart area */
  .card-grid-2, .card-grid-2x {
    grid-template-columns: 1fr;
  }

  /* Analytics tracker */
  .tracker-row { grid-template-columns: 1fr 1fr; }

  /* Popup improvements */
  #gl-all-popup { padding: 10px 0 !important; }
  #gl-all-popup > div { border-radius: 16px 16px 0 0; margin: 0 !important; position: fixed; bottom: 64px; left: 0; right: 0; max-height: 85vh; overflow: hidden; }
  #gl-popup-search { width: 100% !important; }
  #gl-popup-grid { grid-template-columns: 1fr 1fr !important; }

  /* Media kit grid */
  .mk-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }

  /* Pwa banner */
  #pwa-install { bottom: 72px; }

  /* Lc grid */
  .lc-grid { grid-template-columns: 1fr; }
  .lc-result-wrap { grid-template-columns: 1fr; }
}

/* ── Media Kit Product Cards (enhanced) ─────── */
.mk-prod-card {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, box-shadow .15s, transform .15s;
}
.mk-prod-card:hover {
  border-color: var(--black);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.mk-prod-card-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--gray-50);
  display: block;
}
.mk-prod-card-img-ph {
  width: 100%;
  aspect-ratio: 1;
  background: var(--gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}
.mk-prod-card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.mk-prod-card-source {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
}
.mk-prod-card-source.emart { background: #dbeafe; color: #1d4ed8; }
.mk-prod-card-source.preorder { background: #fef3c7; color: #92400e; }
.mk-prod-card-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--black);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mk-prod-card-price {
  font-size: 13px;
  font-weight: 800;
  color: var(--black);
}
.mk-prod-card-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}
.mk-prod-card-actions .btn {
  padding: 8px 0;
  font-size: 11px;
  border-radius: var(--r-md);
  justify-content: center;
}
.mk-dl-btn {
  background: var(--black);
  color: var(--white);
  border: none;
}
.mk-dl-btn:hover { background: #222; }
.mk-dl-btn.loading {
  opacity: .6;
  cursor: wait;
}
.mk-dl-btn.success {
  background: var(--success);
  color: #fff;
}
.mk-link-btn {
  background: transparent;
  border: 1px solid var(--gray-200);
  color: var(--black);
}
.mk-link-btn:hover {
  border-color: var(--black);
}
.mk-link-btn.copied {
  border-color: var(--success);
  color: var(--success);
}

/* ── Enhanced link item with media kit ──────── */
.link-item-v2 {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-100);
}
.link-item-v2:last-child { border-bottom: none; }
.link-thumb {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: var(--gray-100);
  object-fit: cover;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  overflow: hidden;
}
.link-thumb img { width: 100%; height: 100%; object-fit: cover; }
.link-info { min-width: 0; }
.link-info-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-info-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.link-info-url {
  font-family: monospace;
  font-size: 10px;
  color: var(--gray-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
  display: block;
}
.link-stats-row {
  display: flex;
  gap: 12px;
  margin-top: 5px;
}
.link-stat-pill {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.link-stat-pill .val {
  font-size: 13px;
  font-weight: 700;
}
.link-stat-pill .lbl {
  font-size: 10px;
  color: var(--gray-500);
  font-weight: 600;
}
.link-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.link-actions .btn {
  padding: 7px 12px;
  font-size: 11px;
  white-space: nowrap;
}

/* ── Generate Link Success State ────────────── */
.gen-link-success {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-xl);
  padding: 16px;
  margin-top: 1rem;
}
.gen-link-success-url {
  font-family: monospace;
  font-size: 11px;
  color: var(--gray-700);
  word-break: break-all;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-md);
  padding: 8px 10px;
  margin: 8px 0;
  display: block;
}
.gen-link-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ── Notification dot on bottom nav ─────────── */
@media (min-width: 769px) {
  .mobile-bottom-nav { display: none !important; }
}

/* ── Mid-breakpoint sidebar containment fix ──────────────────
   Prevents sidebar from bleeding into nav or content area
   at tablet widths where the sidebar is still visible.       */
@media (min-width: 769px) and (max-width: 900px) {
  :root { --sidebar-w: 180px; }
  .sidebar { width: 180px; }
  .nav-uname { display: none; }
}

/* ── Extra guard: sidebar never overlaps nav ─────────────── */
.sidebar, .sidebar-overlay, .mobile-bottom-nav {
  top: var(--nav-h, 62px);
}
.sidebar-overlay, .mobile-bottom-nav {
  top: 0; /* overlay and bottom nav start from screen edge */
}