:root{--bg:#050d16;--bg2:#081522;--panel:#091827;--panel2:#0b1d2e;--cyan:#00e5ff;--blue:#087eff;--gold:#d7b96e;--white:#f5f8fc;--text:#d4e0e8;--muted:#7890a1;--line:rgba(104,185,214,.15);--cyan-line:rgba(0,229,255,.28);--green:#54d9a5;--orange:#e2ad69}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"IBM Plex Sans Thai",sans-serif}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.app-shell{min-height:100vh;display:grid;grid-template-columns:250px 1fr}.sidebar{height:100vh;position:sticky;top:0;padding:23px 18px 18px;border-right:1px solid var(--line);background:#040b14;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:12px;padding:0 8px;text-decoration:none;color:#b7c9d1;font:500 10px Manrope;letter-spacing:2.3px}.brand-symbol{position:relative;font:italic 700 22px Manrope;color:var(--white);letter-spacing:-2px}.brand-symbol i{position:absolute;left:-5px;top:-2px;width:45px;height:25px;border:1px solid var(--cyan);border-left-color:transparent;border-radius:50%;transform:rotate(-8deg);opacity:.55}.brand small{display:block;color:#48687a;font-size:5px;letter-spacing:2.7px;margin-top:4px}.status-chip{height:38px;margin:24px 7px 26px;padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(0,229,255,.025);color:#688595;font:500 7px Manrope;letter-spacing:1.2px}.status-chip i{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px var(--cyan)}.status-chip b{margin-left:auto;color:var(--cyan);font-size:9px}.sidebar nav{display:flex;flex-direction:column}.nav-label{padding:0 10px 9px;color:#365768;font:500 6px Manrope;letter-spacing:1.8px}.nav-label.lower{margin-top:24px}.nav-item{width:100%;height:44px;padding:0 10px;display:flex;align-items:center;gap:11px;border:0;border-left:1px solid transparent;background:transparent;color:#7892a1;font-family:inherit;text-align:left;cursor:pointer;transition:.2s}.nav-item svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}.nav-item>i{margin-left:auto;min-width:21px;padding:2px 5px;border-radius:10px;background:rgba(0,229,255,.08);color:var(--cyan);font:500 7px Manrope;text-align:center}.nav-item:hover{color:#b9ccd4;background:rgba(255,255,255,.015)}.nav-item.active{color:var(--cyan);border-color:var(--cyan);background:linear-gradient(90deg,rgba(0,229,255,.08),transparent)}.sidebar-profile{margin-top:auto;padding:16px 7px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}.sidebar-profile>span,.avatar{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--cyan-line);background:rgba(0,229,255,.06);color:var(--cyan);font:600 9px Manrope}.sidebar-profile div{display:flex;flex-direction:column}.sidebar-profile b{font-size:11px;color:#b6c8d0}.sidebar-profile small{font:500 7px Manrope;color:#516e7e;margin-top:3px}.sidebar-profile>i{margin-left:auto;color:#4f6c7c}.workspace{min-width:0}.topbar{height:68px;padding:0 30px;display:flex;align-items:center;border-bottom:1px solid var(--line);background:rgba(5,13,22,.88);position:sticky;top:0;z-index:15;backdrop-filter:blur(15px)}.breadcrumb{color:#49697a;font:500 8px Manrope;letter-spacing:1.5px}.breadcrumb span{margin:0 8px;color:#284b5d}.breadcrumb b{color:#9cb2bd;font-weight:500}.top-actions{margin-left:auto;display:flex;align-items:center;gap:18px}.top-actions a{color:#6f8b9b;text-decoration:none;font-size:11px}.sync{color:#4e7066;font:500 6px Manrope;letter-spacing:1.2px}.sync i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);margin-right:6px}.mobile-menu{display:none;background:0;border:0;color:var(--cyan);font-size:20px;margin-right:12px}main{padding:28px 32px 55px;max-width:1550px;margin:auto}.demo-alert{min-height:62px;padding:13px 16px;display:flex;align-items:flex-start;gap:12px;border:1px solid rgba(226,173,105,.2);background:rgba(226,173,105,.04);margin-bottom:30px}.demo-alert>span{color:var(--gold)}.demo-alert b{font-size:12px;color:#cbbf9d}.demo-alert p{margin:4px 0 0;color:#776f5f;font-size:10px;line-height:1.6}.page{display:none}.page.active{display:block}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:28px}.page-head.compact{align-items:center}.eyebrow{color:var(--cyan);font:500 7px Manrope;letter-spacing:2.2px}.page-head h1{font:400 clamp(32px,3.6vw,49px) Manrope;margin:8px 0 5px;color:var(--white);letter-spacing:-2px}.page-head p{color:var(--muted);font-size:13px;margin:0;max-width:670px}.page-head p b{color:#b5cbd3;font-weight:500}.commission-badge{width:180px;height:88px;padding:14px 17px;display:grid;grid-template-columns:1fr auto;border:1px solid var(--cyan-line);background:linear-gradient(145deg,rgba(0,229,255,.07),rgba(7,20,34,.8));clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}.commission-badge small{grid-column:1/-1;color:#5f7c8b;font:500 6px Manrope;letter-spacing:1.3px}.commission-badge strong{color:var(--cyan);font:600 32px Manrope;text-shadow:0 0 20px rgba(0,229,255,.25)}.commission-badge span{align-self:end;padding-bottom:5px;color:#6e8796;font-size:9px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.metrics article{min-height:126px;padding:21px;display:flex;justify-content:space-between;border:1px solid var(--line);background:linear-gradient(145deg,rgba(10,27,43,.78),rgba(6,16,28,.85));position:relative;overflow:hidden}.metrics article:before{content:"";position:absolute;left:0;top:0;width:28px;height:1px;background:var(--cyan)}.metrics small{color:#617d8c;font-size:9px}.metrics strong{display:block;color:var(--white);font:500 26px Manrope;margin:10px 0 6px}.metrics span{color:#557080;font-size:9px}.metrics span.up{color:#54bb95}.metrics article>i{color:#345667;font:500 8px Manrope;font-style:normal}.overview-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:12px;margin-top:12px}.panel{border:1px solid var(--line);background:linear-gradient(145deg,rgba(9,24,39,.83),rgba(5,15,27,.92))}.performance-panel,.referral-panel{min-height:385px;padding:22px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between}.panel-head small,.section-title small,.content-card>div:last-child>span{color:#4b6a7a;font:500 6px Manrope;letter-spacing:1.5px}.panel-head h2,.section-title h2{font:500 15px Manrope;color:#d1e0e6;margin:6px 0 0}.period{display:flex;border:1px solid var(--line);padding:3px}.period button{height:27px;padding:0 10px;border:0;background:0;color:#5e7888;font:500 7px Manrope}.period button.active{background:rgba(0,229,255,.08);color:var(--cyan)}.legend{display:flex;gap:16px;margin:20px 0 5px;color:#688392;font-size:8px}.legend i{display:inline-block;width:12px;height:2px;margin-right:6px;vertical-align:middle}.legend i.sales{background:var(--cyan)}.legend i.comm{background:var(--gold)}.chart{height:245px;position:relative}.chart-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(104,185,214,.07) 1px,transparent 1px);background-size:100% 52px}.chart svg{position:absolute;inset:8px 0 22px;width:100%;height:calc(100% - 30px)}.area{fill:url(#chartFill)}.sales-line,.comm-line{fill:none;stroke:var(--cyan);stroke-width:2;vector-effect:non-scaling-stroke}.comm-line{stroke:var(--gold);stroke-width:1.4;stroke-dasharray:5 4}.chart-days{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;color:#3e5d6e;font:500 6px Manrope}.active-dot{color:#50bf94;font:500 6px Manrope;letter-spacing:1px}.referral-panel>p{color:#6f8796;font-size:11px;line-height:1.65;margin:25px 0}.referral-panel>label,.link-builder label{display:block;color:#4c6b7b;font:500 6px Manrope;letter-spacing:1.4px;margin-bottom:7px}.link-box{height:48px;padding-left:12px;display:flex;align-items:center;border:1px solid var(--cyan-line);background:#06141f;overflow:hidden}.link-box span{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#8ca5b1;font:500 8px Manrope;white-space:nowrap}.link-box button{height:100%;margin-left:auto;padding:0 15px;border:0;border-left:1px solid var(--cyan-line);background:rgba(0,229,255,.08);color:var(--cyan);font-family:inherit;cursor:pointer}.link-meta{display:grid;grid-template-columns:repeat(3,1fr);margin-top:15px;border-block:1px solid var(--line)}.link-meta span{padding:10px 3px;color:#4d6878;font:500 6px Manrope;letter-spacing:1px;border-right:1px solid var(--line)}.link-meta span:last-child{border:0}.link-meta b{display:block;color:#a0b5bf;font-size:8px;margin-top:4px}.footnote{display:block;color:#405d6e;font-size:8px;line-height:1.5;margin:9px 0}.create-link,.generate-button{width:100%;height:42px;border:1px solid var(--cyan-line);background:rgba(0,229,255,.04);color:#8bb7c2;font-family:inherit;cursor:pointer}.create-link:hover,.generate-button:hover{color:var(--cyan);background:rgba(0,229,255,.08)}.section-title{display:flex;align-items:center;justify-content:space-between;margin:30px 0 12px}.section-title button{border:0;background:0;color:#6c8999;font-family:inherit;font-size:10px;cursor:pointer}.orders-table{overflow:hidden}.table-head,.table-row{display:grid;grid-template-columns:1.15fr 1.25fr .7fr .85fr 1fr .8fr;align-items:center;gap:12px;padding:0 18px}.table-head{height:42px;background:rgba(0,229,255,.02);border-bottom:1px solid var(--line);color:#405f70;font:500 6px Manrope;letter-spacing:1px}.table-row{min-height:62px;border-bottom:1px solid var(--line);color:#8299a6;font-size:10px}.table-row:last-child{border:0}.table-row b{display:block;color:#aec2cb;font:500 9px Manrope}.table-row small{font-size:8px;color:#496575}.table-row .cyan{color:var(--cyan);font:600 10px Manrope}.status{display:inline-flex;padding:5px 8px;border-radius:10px;font-style:normal;font-size:8px;white-space:nowrap}.status.approved{color:#55d9a6;background:rgba(85,217,166,.08)}.status.pending{color:#e1b66c;background:rgba(225,182,108,.08)}.status.cooling{color:#84a8d0;background:rgba(70,128,193,.1)}.status.paid{color:#70e2eb;background:rgba(0,229,255,.07)}
.campaign-grid{display:grid;grid-template-columns:1fr .8fr;gap:12px}.link-builder,.link-result{padding:25px}.link-builder h2,.link-result h2{font:500 18px Manrope;color:var(--white);margin:0 0 25px}.link-builder input{width:100%;height:46px;margin-bottom:20px;padding:0 12px;border:1px solid var(--line);outline:0;background:#06131f;color:#acc0c9;font-family:inherit}.link-builder input:focus{border-color:var(--cyan-line)}.product-options,.channel-options{display:grid;gap:8px;margin-bottom:20px}.product-options{grid-template-columns:1fr 1fr}.channel-options{grid-template-columns:repeat(4,1fr)}.product-options button,.channel-options button{min-height:46px;padding:9px;border:1px solid var(--line);background:#06131f;color:#6b8796;font-family:inherit;cursor:pointer}.product-options button small{display:block;font-size:8px;margin-top:4px}.product-options button.selected,.channel-options button.selected{border-color:var(--cyan-line);color:var(--cyan);background:rgba(0,229,255,.05)}.generate-button{margin-top:3px}.link-result>small{color:var(--cyan);font:500 6px Manrope;letter-spacing:1.5px}.preview-product{height:110px;display:flex;align-items:center;gap:18px;margin:22px 0;border:1px solid var(--cyan-line);background:radial-gradient(circle at 25% 50%,rgba(0,229,255,.12),transparent 35%),#06131f;padding:20px}.preview-product>span{font:italic 700 34px Manrope;color:var(--white);text-shadow:0 0 20px rgba(0,229,255,.3)}.preview-product b{color:#c7d7de;font:500 14px Manrope}.preview-product small{display:block;color:var(--cyan);font:500 6px Manrope;letter-spacing:1.2px;margin-top:5px}.generated-link{padding:14px;border:1px solid var(--line);background:#05101a;color:#6d8a99;font:500 8px Manrope;word-break:break-all}.copy-generated{width:100%;height:42px;margin-top:8px;border:1px solid var(--cyan-line);background:rgba(0,229,255,.07);color:var(--cyan);font-family:inherit;cursor:pointer}.link-result>p{color:#506d7d;font-size:9px;line-height:1.6;margin-top:17px}.campaign-list>div{min-height:62px;padding:0 18px;display:grid;grid-template-columns:42px 1.6fr 1fr .8fr .8fr .7fr;align-items:center;gap:12px;border-bottom:1px solid var(--line)}.campaign-list>div:last-child{border:0}.campaign-list .channel{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--cyan-line);color:var(--cyan);font:600 7px Manrope}.campaign-list b{color:#afc3cc;font-size:10px}.campaign-list small,.campaign-list strong,.campaign-list em{color:#667f8e;font-size:9px;font-style:normal;font-weight:400}.campaign-list i{color:var(--cyan);font:600 9px Manrope;font-style:normal}.filter-bar{min-height:58px;padding:8px;display:flex;align-items:center;gap:4px;margin-bottom:12px}.filter-bar button{height:39px;padding:0 12px;border:0;background:0;color:#648091;font-family:inherit;cursor:pointer}.filter-bar button.active{background:rgba(0,229,255,.07);color:var(--cyan)}.filter-bar b{font:500 7px Manrope;margin-left:4px}.filter-bar input{margin-left:auto;width:210px;height:38px;padding:0 11px;border:1px solid var(--line);outline:0;background:#06131f;color:#a5b8c1;font-family:inherit}.orders-table.full .table-row{min-height:68px}.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.content-card{border:1px solid var(--line);background:var(--panel);overflow:hidden}.content-preview{height:260px;padding:28px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;background-color:#06131f;background-image:linear-gradient(rgba(104,185,214,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(104,185,214,.07) 1px,transparent 1px);background-size:38px 38px}.content-preview:after{content:"";position:absolute;width:170px;height:170px;border:1px solid var(--cyan-line);border-radius:50%;right:-40px;bottom:-60px;box-shadow:0 0 50px rgba(0,229,255,.08)}.content-preview>span{color:var(--cyan);font:italic 700 25px Manrope}.content-preview>b{font:600 28px/1.15 Manrope;color:var(--white);margin:14px 0}.content-preview>small{color:#557384;font:500 6px Manrope;letter-spacing:1.3px}.post-two{background:radial-gradient(circle at 70% 25%,rgba(8,126,255,.2),transparent 32%),#071521}.post-two>i{position:absolute;right:24px;top:22px;color:var(--gold);font:600 18px Manrope;font-style:normal}.post-two>b{font-size:38px}.post-three{background:radial-gradient(circle at 30% 65%,rgba(0,229,255,.12),transparent 35%),#06121e}.post-three>span{font:300 50px Georgia}.content-card>div:last-child{padding:20px}.content-card h3{font:500 15px Manrope;color:#c7d7de;margin:7px 0}.content-card p{color:#647f8f;font-size:10px}.content-card button{width:100%;height:38px;border:1px solid var(--cyan-line);background:rgba(0,229,255,.04);color:#78a6b2;font-family:inherit;cursor:pointer}.content-card button:hover{color:var(--cyan)}.content-rule{padding:15px;border-left:2px solid var(--gold);background:rgba(215,185,110,.04);color:#7d735c;font-size:10px;line-height:1.6}.policy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.policy-grid article{min-height:190px;padding:22px}.policy-grid span{color:var(--cyan);font:500 8px Manrope}.policy-grid h2{font:500 15px Manrope;color:#c7d7de;margin:42px 0 10px}.policy-grid p{color:#647f8f;font-size:10px;line-height:1.6}.calculation{margin-top:12px;padding:24px}.calculation h2{font:500 16px Manrope;color:#c9d9df;margin:6px 0}.formula{display:flex;align-items:center;justify-content:center;gap:25px;margin:28px 0}.formula span{min-width:150px;padding:15px;border:1px solid var(--line);color:#617d8d;font-size:9px}.formula strong{display:block;color:#d0dfe5;font:500 22px Manrope;margin-top:7px}.formula>b{color:#426273;font:400 21px Manrope}.formula span.result{border-color:var(--cyan-line)}.formula .result strong{color:var(--cyan)}.calculation>p{color:#4f6d7d;font-size:9px;text-align:center}.payout-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:12px}.payout-balance,.payout-method{padding:25px}.payout-balance>small{color:#527182;font:500 6px Manrope;letter-spacing:1.5px}.payout-balance>strong{display:block;color:var(--white);font:500 38px Manrope;margin:10px 0 3px}.payout-balance>span{color:#587586;font-size:9px}.payout-balance>div{margin:25px 0;padding:13px 0;border-block:1px solid var(--line);display:flex;justify-content:space-between}.payout-balance>div small{color:#4f6d7d;font:500 6px Manrope}.payout-balance>div b{color:#9db2bc;font:500 10px Manrope}.payout-balance button{width:100%;height:40px;border:1px solid var(--line);background:#07141f;color:#435f6f}.payout-method .panel-head i{color:var(--gold);font:500 7px Manrope;font-style:normal}.bank{display:flex;align-items:center;gap:15px;margin:27px 0;padding:18px;border:1px solid var(--line);background:#06131f}.bank>span{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--cyan-line);color:var(--cyan);font:600 9px Manrope}.bank b{color:#b4c7d0;font-size:12px}.bank small{display:block;color:#577384;font-size:9px;margin-top:5px}.payout-method>p{color:#587485;font-size:10px;line-height:1.7}.payout-history>div{min-height:60px;padding:0 18px;display:grid;grid-template-columns:1fr 1.3fr .7fr .7fr;align-items:center;border-bottom:1px solid var(--line);color:#6c8594;font-size:10px}.payout-history>div:last-child{border:0}.payout-history b{color:#9eb3bd;font-weight:500}.payout-history strong{color:var(--cyan);font:500 11px Manrope}.toast{position:fixed;right:25px;bottom:25px;z-index:100;padding:12px 18px;border:1px solid var(--cyan-line);background:#071723;color:#9cd0d8;font-size:11px;box-shadow:0 15px 40px #0008;opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:none}
@media(max-width:1100px){.app-shell{grid-template-columns:210px 1fr}.sidebar{padding-inline:12px}.metrics{grid-template-columns:repeat(2,1fr)}.overview-grid{grid-template-columns:1fr}.content-grid{grid-template-columns:1fr 1fr}.policy-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:fixed;left:0;top:0;width:250px;transform:translateX(-105%);transition:.3s;box-shadow:20px 0 60px #000b}.sidebar.open{transform:none}.topbar{height:60px;padding:0 16px}.mobile-menu{display:block}.breadcrumb{display:none}.top-actions .sync{display:none}.top-actions{gap:12px}.top-actions a{font-size:9px}main{padding:20px 15px 45px}.demo-alert p{font-size:9px}.page-head{align-items:flex-start;flex-direction:column}.commission-badge{width:100%}.metrics{grid-template-columns:1fr}.campaign-grid,.payout-grid{grid-template-columns:1fr}.content-grid{grid-template-columns:1fr}.policy-grid{grid-template-columns:1fr}.table-head{display:none}.table-row{grid-template-columns:1fr 1fr 1fr;padding:13px;gap:10px}.table-row>span:nth-child(5),.table-row>span:nth-child(6){text-align:left}.campaign-list>div{grid-template-columns:36px 1.5fr 1fr;padding:12px}.campaign-list strong,.campaign-list em,.campaign-list i{grid-column:auto}.channel-options{grid-template-columns:1fr 1fr}.formula{flex-direction:column;gap:10px}.formula span{width:100%}.filter-bar{flex-wrap:wrap}.filter-bar input{margin-left:0;width:100%}.payout-history>div{grid-template-columns:1fr 1fr;padding:12px}.toast{left:15px;right:15px;bottom:15px}.orders-table{overflow-x:auto}}