:root{--affiliate-sidebar:268px}
.affiliate-body{min-height:100dvh;background:radial-gradient(circle at 88% -10%,rgba(58,119,255,.16),transparent 30rem),#050b16;color:var(--text)}
.affiliate-shell{min-height:100dvh}.affiliate-sidebar{position:fixed;z-index:40;inset:0 auto 0 0;display:flex;width:var(--affiliate-sidebar);padding:20px 16px;overflow:hidden;flex-direction:column;border-right:1px solid rgba(64,88,126,.4);background:linear-gradient(180deg,#081426,#050c18);box-shadow:18px 0 60px rgba(0,0,0,.18)}
.affiliate-brand{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:2px 3px 18px;border-bottom:1px solid rgba(68,92,132,.3)}.affiliate-brand .brand-mark{width:44px;height:44px}.affiliate-brand strong{font-size:18px}.affiliate-brand strong span{color:#4b84ff}.affiliate-brand>small{grid-column:2;color:#7c8da8;font-size:8px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.affiliate-status-card{display:flex;align-items:center;gap:10px;margin:18px 0 14px;padding:12px;border:1px solid rgba(74,102,150,.38);border-radius:15px;background:linear-gradient(145deg,rgba(15,32,57,.92),rgba(9,20,37,.92))}.affiliate-status-card>span{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;background:linear-gradient(145deg,#5b8fff,#285ff2);color:#fff;font-weight:850}.affiliate-status-card>div{display:grid;min-width:0;flex:1}.affiliate-status-card strong{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.affiliate-status-card small{color:#7893c8;font-size:8px;font-weight:800;letter-spacing:.12em}.affiliate-status-card>i{width:8px;height:8px;border-radius:50%;background:#42dd91;box-shadow:0 0 12px #42dd91}
.affiliate-nav{display:grid;gap:6px}.affiliate-nav button{display:flex;height:46px;align-items:center;gap:11px;padding:0 13px;cursor:pointer;border:1px solid transparent;border-radius:12px;background:transparent;color:#8795aa;font-size:11px;font-weight:700;text-align:left}.affiliate-nav button:hover{background:rgba(255,255,255,.035);color:#eef4ff}.affiliate-nav button.active{border-color:rgba(73,127,255,.3);background:linear-gradient(90deg,rgba(51,111,255,.19),rgba(51,111,255,.05));color:#6f9cff;box-shadow:inset 2px 0 #4b84ff}.affiliate-nav svg{width:18px;height:18px}.affiliate-sidebar-bottom{display:grid;gap:9px;margin-top:auto}.affiliate-rate-card{display:grid;padding:14px;border:1px solid rgba(73,127,255,.3);border-radius:16px;background:radial-gradient(circle at 100% 0,rgba(73,127,255,.18),transparent 9rem),rgba(11,24,44,.9)}.affiliate-rate-card span{color:#7083a2;font-size:7px;font-weight:850;letter-spacing:.16em}.affiliate-rate-card strong{margin:5px 0 2px;font-size:28px}.affiliate-rate-card small{color:#8c9ab0;font-size:8px}.affiliate-back,.affiliate-logout{display:flex;min-height:42px;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(67,92,132,.36);border-radius:12px;background:rgba(10,20,36,.82);color:#aab6c9;font-size:9px;font-weight:700}.affiliate-logout{cursor:pointer;color:#f18b92}.affiliate-sidebar-bottom>small{text-align:center;color:#56657d;font-size:7px}
.affiliate-main{min-height:100dvh;margin-left:var(--affiliate-sidebar);padding:28px 32px 50px}.affiliate-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;max-width:1420px;margin:auto}.affiliate-topbar h1{margin:6px 0 4px;font-size:40px;letter-spacing:-1.8px}.affiliate-topbar p{margin:0;color:var(--muted);font-size:12px}.affiliate-top-actions{display:flex;align-items:center;gap:10px}.affiliate-content{display:grid;gap:16px;max-width:1420px;margin:24px auto 0}.affiliate-mobile-only{display:none!important}
.affiliate-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px;border:1px solid rgba(65,93,139,.4);border-radius:22px;background:radial-gradient(circle at 87% 0,rgba(70,126,255,.18),transparent 18rem),linear-gradient(145deg,rgba(12,27,49,.98),rgba(7,17,31,.98));box-shadow:0 25px 70px rgba(0,0,0,.18)}.affiliate-hero h2{margin:6px 0;font-size:27px}.affiliate-hero p{max-width:680px;margin:0;color:#92a0b7}.affiliate-link-box{display:flex;min-width:min(470px,100%);align-items:center;gap:8px;padding:9px 9px 9px 14px;border:1px solid rgba(70,99,145,.42);border-radius:14px;background:rgba(5,14,27,.7)}.affiliate-link-box code{min-width:0;flex:1;overflow:hidden;color:#9bb6ee;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.affiliate-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.affiliate-metric{position:relative;overflow:hidden;padding:18px;border:1px solid rgba(65,91,134,.4);border-radius:17px;background:linear-gradient(145deg,rgba(13,27,48,.96),rgba(8,18,33,.96))}.affiliate-metric>span{display:grid;width:36px;height:36px;place-items:center;border-radius:12px;background:rgba(67,126,255,.12);color:#6192ff}.affiliate-metric small{display:block;margin-top:16px;color:#7e8ca3;font-size:8px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.affiliate-metric strong{display:block;margin-top:5px;font-size:25px}.affiliate-metric p{margin:3px 0 0;color:#697991;font-size:8px}.affiliate-metric.green>span{background:rgba(54,211,139,.11);color:#43d88e}.affiliate-metric.amber>span{background:rgba(238,177,77,.11);color:#efb457}.affiliate-metric.violet>span{background:rgba(142,101,255,.12);color:#a381ff}
.affiliate-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:14px}.affiliate-panel{overflow:hidden;border:1px solid rgba(64,91,135,.4);border-radius:19px;background:linear-gradient(145deg,rgba(12,25,45,.96),rgba(8,17,31,.96))}.affiliate-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 18px;border-bottom:1px solid rgba(64,91,135,.3)}.affiliate-panel-head strong{font-size:14px}.affiliate-panel-head small{display:block;margin-top:3px;color:#77869e;font-size:8px}.affiliate-panel-body{padding:17px}.affiliate-trend{display:flex;height:210px;align-items:flex-end;gap:12px;padding-top:22px}.affiliate-trend-column{display:grid;height:100%;min-width:0;flex:1;align-items:end;grid-template-rows:1fr auto;gap:8px}.affiliate-trend-bars{display:flex;height:100%;align-items:flex-end;justify-content:center;gap:4px}.affiliate-trend-bars i{display:block;width:min(18px,38%);min-height:4px;border-radius:6px 6px 2px 2px;background:linear-gradient(#5d91ff,#275ff1)}.affiliate-trend-bars i:last-child{background:linear-gradient(#48da94,#21955f)}.affiliate-trend-column small{text-align:center;color:#697991;font-size:7px}.affiliate-list{display:grid;gap:8px}.affiliate-list-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid rgba(61,87,130,.3);border-radius:13px;background:rgba(255,255,255,.018)}.affiliate-list-row>span:first-child{display:grid;width:38px;height:38px;place-items:center;border-radius:11px;background:rgba(68,126,255,.11);color:#6494ff}.affiliate-list-row strong,.affiliate-list-row small{display:block}.affiliate-list-row strong{font-size:10px}.affiliate-list-row small{margin-top:3px;color:#74839a;font-size:7px}.affiliate-money{font-size:11px;font-weight:800}.affiliate-status{display:inline-flex;padding:5px 8px;border:1px solid rgba(80,108,153,.36);border-radius:999px;color:#8fa0ba;font-size:7px;font-weight:800}.affiliate-status.paid,.affiliate-status.available,.affiliate-status.approved{border-color:rgba(58,211,139,.3);background:rgba(58,211,139,.08);color:#4adf96}.affiliate-status.pending,.affiliate-status.processing{border-color:rgba(236,177,79,.3);background:rgba(236,177,79,.08);color:#efb55c}.affiliate-status.reversed,.affiliate-status.cancelled{border-color:rgba(244,104,111,.3);background:rgba(244,104,111,.08);color:#f27d84}
.affiliate-table-wrap{overflow:auto}.affiliate-table{width:100%;min-width:760px;border-collapse:collapse}.affiliate-table th,.affiliate-table td{padding:13px 15px;border-bottom:1px solid rgba(64,91,135,.27);font-size:9px;text-align:left}.affiliate-table th{color:#71819a;font-size:7px;letter-spacing:.12em;text-transform:uppercase}.affiliate-table td strong,.affiliate-table td small{display:block}.affiliate-table td small{margin-top:3px;color:#718098;font-size:7px}.affiliate-empty{display:grid;min-height:160px;place-items:center;padding:24px;color:#738199;text-align:center}.affiliate-empty span{display:grid;width:48px;height:48px;place-items:center;border-radius:15px;background:rgba(66,123,255,.1);color:#5f91ff}.affiliate-material-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.affiliate-material{display:grid;align-content:start;padding:17px;border:1px solid rgba(64,91,135,.36);border-radius:17px;background:linear-gradient(145deg,rgba(13,27,48,.96),rgba(8,18,33,.96))}.affiliate-material>span{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;background:rgba(73,128,255,.12);color:#6795ff}.affiliate-material h3{margin:15px 0 5px;font-size:13px}.affiliate-material p{min-height:42px;margin:0;color:#7e8ca3;font-size:8px}.affiliate-material footer{display:flex;gap:7px;margin-top:14px}.affiliate-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.affiliate-profile-grid .form-field:last-child{grid-column:1/-1}.affiliate-campaign-builder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.affiliate-campaign-builder footer{grid-column:1/-1;display:flex;gap:8px}.affiliate-notice{padding:14px;border:1px solid rgba(73,128,255,.28);border-radius:14px;background:rgba(73,128,255,.07);color:#91a6cf;font-size:9px;line-height:1.55}
:root[data-theme=light] .affiliate-body{background:radial-gradient(circle at 88% -10%,rgba(58,119,255,.11),transparent 30rem),#eef3fb;color:#142033}:root[data-theme=light] .affiliate-sidebar{border-color:#d5dfed;background:linear-gradient(180deg,#fff,#f5f8fc)}:root[data-theme=light] .affiliate-status-card,:root[data-theme=light] .affiliate-rate-card,:root[data-theme=light] .affiliate-back,:root[data-theme=light] .affiliate-logout{border-color:#d6e0ee;background:#f7f9fd;color:#43536b}:root[data-theme=light] .affiliate-nav button{color:#64748b}:root[data-theme=light] .affiliate-nav button.active{border-color:#c5d6fa;background:#eaf1ff;color:#265ecf}:root[data-theme=light] .affiliate-hero,:root[data-theme=light] .affiliate-panel,:root[data-theme=light] .affiliate-metric,:root[data-theme=light] .affiliate-material{border-color:#d6e0ee;background:linear-gradient(145deg,#fff,#f7f9fd);box-shadow:0 14px 36px rgba(31,55,91,.06)}:root[data-theme=light] .affiliate-link-box,:root[data-theme=light] .affiliate-list-row{border-color:#d9e2ef;background:#f7f9fd}:root[data-theme=light] .affiliate-topbar h1,:root[data-theme=light] .affiliate-hero h2,:root[data-theme=light] .affiliate-panel-head strong,:root[data-theme=light] .affiliate-metric strong,:root[data-theme=light] .affiliate-material h3{color:#142033}
@media(max-width:1050px){.affiliate-metrics{grid-template-columns:repeat(2,1fr)}.affiliate-grid{grid-template-columns:1fr}.affiliate-material-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){:root{--affiliate-sidebar:300px}.affiliate-mobile-only{display:grid!important}.affiliate-sidebar{width:min(90vw,330px);padding-top:max(18px,env(safe-area-inset-top));transform:translateX(-105%);transition:transform .25s}.affiliate-sidebar.open{transform:translateX(0)}.affiliate-brand{padding-top:8px}.affiliate-brand button{grid-column:3;grid-row:1/3}.affiliate-main{margin-left:0;padding:max(16px,env(safe-area-inset-top)) 12px calc(28px + env(safe-area-inset-bottom))}.affiliate-topbar{display:grid;grid-template-columns:44px 1fr;gap:10px}.affiliate-topbar>div:nth-child(2){min-width:0}.affiliate-topbar h1{font-size:28px}.affiliate-top-actions{grid-column:1/-1;justify-content:space-between}.affiliate-content{margin-top:18px}.affiliate-hero{align-items:stretch;flex-direction:column;padding:18px}.affiliate-hero h2{font-size:22px}.affiliate-link-box{min-width:0}.affiliate-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.affiliate-metric{padding:14px}.affiliate-metric strong{font-size:20px}.affiliate-grid{grid-template-columns:1fr}.affiliate-material-grid{grid-template-columns:1fr}.affiliate-profile-grid,.affiliate-campaign-builder{grid-template-columns:1fr}.affiliate-profile-grid .form-field:last-child,.affiliate-campaign-builder footer{grid-column:auto}.affiliate-top-actions .primary-button span{display:inline}.affiliate-panel-head{padding:14px}.affiliate-panel-body{padding:13px}}
@media(max-width:390px){.affiliate-metrics{grid-template-columns:1fr 1fr}.affiliate-metric small{font-size:7px}.affiliate-metric strong{font-size:18px}.affiliate-link-box{align-items:stretch;flex-direction:column}.affiliate-link-box .primary-button{width:100%}}