:root{--ink:#17203a;--muted:#a1a1aa;--bg:#f6f7fb;--card:#fff;--primary:#b40589;--primary2:#7202ff;--coral:#ff7b64;--line:#e8eaf2;--ok:#169b72;--warn:#d58a10;--bad:#cf4458;--shadow:0 18px 55px rgba(34,39,84,.10)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}.brand{display:flex;align-items:center;gap:.65rem;font-weight:850;font-size:1.25rem}.brand span{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:linear-gradient(135deg,var(--primary),var(--coral));color:#fff}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;padding:.78rem 1.15rem;background:var(--primary);color:#fff;font-weight:750;box-shadow:0 8px 22px rgba(101,88,232,.2);transition:.2s}.btn:hover{transform:translateY(-1px);background:var(--primary2)}.btn.secondary{background:#fff;color:var(--primary);border:1px solid #dcd9ff;box-shadow:none}.btn.wide{width:100%;margin-top:.5rem}.btn.small{padding:.5rem .8rem;font-size:.85rem}.text-link,.back{color:var(--primary);font-weight:750}.eyebrow{text-transform:uppercase;letter-spacing:.13em;color:var(--primary);font-size:.75rem;font-weight:850}.public-nav{height:78px;padding:0 max(5vw,28px);display:flex;justify-content:space-between;align-items:center;background:#fff}.public-nav nav{display:flex;gap:1.3rem;align-items:center}.hero{min-height:650px;padding:7rem max(7vw,32px);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:4rem;background:radial-gradient(circle at 85% 20%,#d6d2da 0,transparent 34%),linear-gradient(150deg,#fff 0,#f4f1ff 100%)}.hero h1{font-size:clamp(3rem,6vw,5.8rem);line-height:.99;letter-spacing:-.055em;margin:.5rem 0 1.5rem;max-width:850px}.hero p{font-size:1.15rem;color:var(--muted);max-width:650px}.actions{display:flex;gap:.8rem;margin-top:2rem;flex-wrap:wrap}.hero-art{height:430px;position:relative}.orbit{position:absolute;inset:20px;border:1px solid #bbb5ff;border-radius:50%;background:radial-gradient(circle,#7467ed 0 3%,transparent 4%),linear-gradient(145deg,#7467ed,#ff937c);clip-path:polygon(35% 0,100% 24%,79% 100%,7% 84%,0 22%);opacity:.92}.float-card{position:absolute;background:#fff;border:1px solid var(--line);padding:1rem 1.2rem;border-radius:16px;box-shadow:var(--shadow);display:flex;flex-direction:column}.float-card small{color:var(--muted)}.float-card.one{top:20px;right:0}.float-card.two{bottom:20px;left:-15px}.float-card.three{right:-10px;bottom:105px}.section{padding:6rem max(7vw,32px)}.section h2{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.04em;margin:.4rem 0 2.4rem}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}.grid3 article,.panel{background:#fff;padding:2rem;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow)}.grid3 article>b{color:var(--coral)}.grid3 p,.split p{color:var(--muted)}.split{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;background:#171a31;color:#fff}.panel{color:var(--ink)}.metric{display:flex;justify-content:space-between}.metric b{font-size:2rem}.progress{height:9px;background:#ebeaf4;border-radius:20px;overflow:hidden;margin:1rem 0}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--coral));border-radius:20px}.mini-chart,.chart{height:170px;display:flex;align-items:end;gap:8px}.mini-chart i,.chart i{height:var(--h,50%);flex:1;background:linear-gradient(#8f84f2,#6558e8);border-radius:6px 6px 2px 2px}.mini-chart i:nth-child(1){height:35%}.mini-chart i:nth-child(2){height:54%}.mini-chart i:nth-child(3){height:48%}.mini-chart i:nth-child(4){height:73%}.mini-chart i:nth-child(5){height:62%}.mini-chart i:nth-child(6){height:90%}.mini-chart i:nth-child(7){height:79%}footer{display:flex;align-items:center;justify-content:space-between;padding:2rem max(7vw,32px);background:#0f1223;color:#d7d9e6}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:#171a31;color:#cfd2e5;padding:1.5rem;z-index:20;display:flex;flex-direction:column}.sidebar .brand{color:#fff;margin-bottom:2rem}.sidebar nav{display:flex;flex-direction:column;gap:.35rem}.sidebar nav a{padding:.7rem .8rem;border-radius:10px;font-size:.92rem}.sidebar nav a:hover,.sidebar nav a.active{background:#2a2d4c;color:#fff}.sidebar hr{border:0;border-top:1px solid #323653;width:100%;margin:1rem 0}.sidebar-user{margin-top:auto;padding-top:1rem;border-top:1px solid #323653;display:grid}.sidebar-user small{color:#9a909c}.link-btn{background:none;border:0;color:#ff9b8b;padding:.4rem 0;text-align:left}.app-main{margin-left:250px;padding:2.2rem clamp(1.2rem,3vw,3.3rem);min-height:100vh}.mobile-toggle{display:none}.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.8rem}.page-head h1{font-size:2.15rem;margin:.25rem 0 0;letter-spacing:-.035em}.page-head p{margin:.2rem 0;color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1.5rem}.metrics article{background:#fff;border:1px solid var(--line);padding:1.25rem;border-radius:17px}.metrics span,.metrics small{display:block;color:var(--muted);font-size:.84rem}.metrics strong{display:block;font-size:1.65rem;margin:.3rem 0}.content-block{background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.5rem;margin:1.3rem 0}.section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.section-head h2,.content-block h2{margin:.1rem 0}.section-head p{margin:.2rem 0;color:var(--muted)}.tabs{display:flex;gap:.35rem;overflow:auto}.tabs button,.rank-tabs button{border:0;background:#f1f2f7;padding:.55rem .85rem;border-radius:9px;white-space:nowrap}.tabs button.active,.rank-tabs button.active{background:#ece9ff;color:var(--primary);font-weight:750}.table-wrap{overflow:auto;margin-top:1rem}table{width:100%;border-collapse:collapse;min-width:620px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:.85rem;font-size:.9rem}th{color:var(--muted);font-weight:650}.badge{display:inline-flex;border-radius:99px;padding:.25rem .55rem;font-size:.75rem;background:#eef0f5}.badge.approved,.badge.active{background:#e3f7ef;color:var(--ok)}.badge.pending{background:#fff3d8;color:var(--warn)}.badge.rejected{background:#ffe8ec;color:var(--bad)}.empty{text-align:center;padding:3rem;color:var(--muted);border:1px dashed #d9dbe6;border-radius:16px;margin-top:1rem}.empty b{display:block;color:var(--ink);font-size:1.05rem}.empty.compact{padding:1.2rem}.campaign-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.2rem}.campaign-card{overflow:hidden;border:1px solid var(--line);border-radius:17px;background:#fff}.campaign-card>div:last-child{padding:1rem}.campaign-cover{height:125px;padding:.8rem;background:linear-gradient(135deg,#6558e8,#9188ed);display:flex;align-items:start}.campaign-cover.c1{background:linear-gradient(135deg,#5648d9,#8b80ed)}.campaign-cover.c2{background:linear-gradient(135deg,#ff765e,#ffb07d)}.campaign-cover.c3{background:linear-gradient(135deg,#146d78,#52c4b0)}.campaign-cover.c0{background:linear-gradient(135deg,#293a65,#6b7ea9)}.campaign-cover span{background:#fff;color:var(--ink);font-size:.7rem;font-weight:800;padding:.3rem .5rem;border-radius:6px}.campaign-card h3{margin:.3rem 0;line-height:1.25}.campaign-card p{font-size:.86rem;color:var(--muted);height:2.7em;overflow:hidden}.campaign-card small{color:var(--muted)}.campaign-meta{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin:1rem 0;font-size:.82rem}.campaign-meta b{color:var(--primary)}.campaign-meta b small{font-weight:500}.filter-bar{display:grid;grid-template-columns:2fr repeat(4,1fr) auto;gap:.65rem;margin-bottom:1.3rem}.filter-bar input,.filter-bar select,input,select,textarea{border:1px solid #dfe1ea;border-radius:11px;background:#fff;padding:.75rem .8rem;outline:none;width:100%}input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #eeecff}.back{display:inline-block;margin-bottom:1rem}.detail-hero{display:grid;grid-template-columns:1.5fr .7fr;gap:1.2rem;background:linear-gradient(135deg,#242848,#383e67);color:#fff;padding:2rem;border-radius:24px}.detail-hero h1{font-size:2.4rem;line-height:1.1}.detail-hero p{color:#ccd0e4}.detail-hero aside{background:#fff;color:var(--ink);padding:1.3rem;border-radius:16px;height:max-content}.detail-hero aside>span,.detail-hero aside>strong{display:block}.detail-hero aside>strong{font-size:1.6rem}.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.steps li{padding:1rem;background:#f7f7fb;border-radius:13px}.steps span{display:block;color:var(--muted);font-size:.86rem}.form-card{background:#fff;border:1px solid var(--line);padding:1.3rem;border-radius:16px}.form-card.max{max-width:900px}.form-card label{display:block;font-weight:650;margin:.8rem 0}.form-card label small{display:block;font-weight:400;color:var(--muted)}.form-grid,.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.chart{height:240px;padding-top:1rem;border-bottom:1px solid var(--line)}.rank-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem;margin-top:1rem}.rank-grid article{padding:1rem;background:#f7f7fb;border-radius:14px;border:1px solid var(--line)}.rank-grid article.current{background:#ece9ff;border-color:#a9a1ff}.rank-grid span,.rank-grid small{display:block;font-size:.72rem;color:var(--muted)}.rank-grid b{font-size:1.1rem}.leader-list>div,.list>div,.status-card>div{display:flex;gap:1rem;align-items:center;padding:.85rem;border-bottom:1px solid var(--line)}.leader-list strong,.list span{flex:1}.avatar{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#ece9ff;color:var(--primary)}.notification-list article{display:flex;gap:1rem;padding:1rem;border-bottom:1px solid var(--line)}.notification-list article.unread{background:#f7f5ff}.notification-list article>span{width:34px;height:34px;border-radius:10px;background:#ece9ff;color:var(--primary);display:grid;place-items:center;font-weight:800}.notification-list p{margin:.15rem 0;color:var(--muted)}.prose{max-width:760px}.status-card{background:#f7f7fb;padding:1.2rem;border-radius:16px}.status-card>div span{flex:1}.auth-page{min-height:100vh;display:grid;place-items:center;padding:4rem 1rem;background:radial-gradient(circle at 20% 10%,#d6d2da,transparent 30%),radial-gradient(circle at 80% 90%,#ffd8d0,transparent 28%)}.auth-page>.brand{position:absolute;top:2rem;left:3rem}.auth-card{width:min(460px,100%);background:#fff;padding:2rem;border-radius:22px;box-shadow:var(--shadow)}.auth-card h1{margin:.3rem 0}.auth-card>p{color:var(--muted)}.auth-card label{display:block;font-weight:650;margin:.9rem 0}.auth-card label small{font-weight:400;color:var(--muted)}.auth-foot{text-align:center;font-size:.9rem}.auth-foot a,.between a{color:var(--primary);font-weight:700}.between{text-align:right;font-size:.85rem}.role-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.role-picker label{margin:0}.role-picker input{position:absolute;opacity:0}.role-picker span{display:block;text-align:center;padding:.6rem;border:1px solid var(--line);border-radius:10px}.role-picker input:checked+span{border-color:var(--primary);background:#eeecff;color:var(--primary);font-weight:750}.alert{padding:.7rem .8rem;border-radius:10px;margin:.8rem 0;font-size:.88rem}.alert.error{background:#ffe8ec;color:var(--bad)}.alert.success{background:#e3f7ef;color:var(--ok)}.error-page{min-height:80vh;display:grid;place-content:center;text-align:center}.error-page>span{font-size:6rem;font-weight:900;color:#d6d2da}.error-page h1{margin:0}.mobile-toggle{position:fixed;top:14px;left:14px;z-index:25;border:0;background:#171a31;color:#fff;width:42px;height:42px;border-radius:10px}@media(max-width:1100px){.campaign-grid{grid-template-columns:repeat(2,1fr)}.metrics{grid-template-columns:repeat(2,1fr)}.filter-bar{grid-template-columns:2fr 1fr 1fr}.rank-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.sidebar{transform:translateX(-105%);transition:.22s}.sidebar.open{transform:translateX(0)}.mobile-toggle{display:block}.app-main{margin-left:0;padding-top:4.5rem}.hero{grid-template-columns:1fr;min-height:auto}.hero-art{height:330px}.grid3,.split{grid-template-columns:1fr}.public-nav nav>a:not(.btn){display:none}.detail-hero{grid-template-columns:1fr}.steps{grid-template-columns:1fr}}@media(max-width:650px){.hero{padding:5rem 1.2rem}.hero h1{font-size:3rem}.section{padding:4rem 1.2rem}.hero-art{height:260px}.float-card{font-size:.78rem}.campaign-grid,.metrics,.form-grid,.two-col,.rank-grid{grid-template-columns:1fr}.filter-bar{grid-template-columns:1fr}.page-head{align-items:start;gap:1rem}.content-block{padding:1rem}.section-head{align-items:start;flex-direction:column}.detail-hero h1{font-size:1.8rem}.public-nav{padding:0 1rem}.public-nav .btn{padding:.6rem .8rem}footer{align-items:start;flex-direction:column;gap:1rem}.auth-page>.brand{left:1.2rem}.role-picker{grid-template-columns:1fr 1fr 1fr}}

.pricing{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.pricing article{padding:1.5rem;border:1px solid var(--line);border-radius:18px}.pricing article.featured{border-color:var(--primary);background:#f7f5ff}.pricing h2 small{font-size:.8rem;color:var(--muted)}.inline{display:inline-block;margin:.1rem}@media(max-width:650px){.pricing{grid-template-columns:1fr}}

.views-input{width:92px;display:inline-block;padding:.35rem .45rem;margin-right:.3rem}
/* Brand workspace — based on the audited Konten.com information architecture, with Clypora styling */
.brand-head{padding:.3rem 0}.brand-mode{display:flex;gap:.45rem;margin:-.7rem 0 1.35rem}.brand-mode button,.brand-mode a{border:0;border-radius:10px;padding:.62rem 1rem;background:#eef0f5;color:var(--muted);font-weight:750}.brand-mode .active{background:#171a31;color:#fff}.brand-metrics article{position:relative;overflow:hidden}.brand-metrics article:before{content:"";position:absolute;width:70px;height:70px;border-radius:50%;right:-22px;top:-22px;background:#eeecff}.brand-metrics article:nth-child(2):before{background:#fff2df}.brand-metrics article:nth-child(3):before{background:#e5f6f0}.brand-metrics article:nth-child(4):before{background:#ffe9e4}.count-pill{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 .5rem;border-radius:99px;background:#ece9ff;color:var(--primary);font-size:.8rem;vertical-align:middle}.brand-filters{display:flex;gap:.6rem}.brand-filters select{min-width:145px}.budget-line{height:7px;background:#edecf4;border-radius:20px;overflow:hidden;margin:.9rem 0 .45rem}.budget-line i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--coral));border-radius:20px}.brand-analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}.brand-analytics-grid .content-block{margin:0}.distribution{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:1rem .2rem}.distribution span{color:var(--muted)}.budget-summary{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:1rem}.budget-summary article{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.35rem}.budget-summary span,.budget-summary small{display:block;color:var(--muted)}.budget-summary strong{display:block;font-size:1.7rem;margin:.35rem 0 1rem}.budget-summary .btn{margin:.3rem .35rem 0 0}.appeal-filter{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.7rem}.settings-grid{display:grid;grid-template-columns:.75fr 1.25fr 1fr;gap:1rem;margin-top:1.2rem}.brand-profile-card{background:linear-gradient(145deg,#171a31,#303556);color:#fff;border-radius:18px;padding:1.5rem;min-height:250px}.brand-profile-card p,.brand-profile-card small{color:#bfc4dc}.brand-avatar{display:grid;place-items:center;width:65px;height:65px;border-radius:20px;background:linear-gradient(135deg,var(--primary),var(--coral));font-size:1.6rem;font-weight:900}.scheme-switch{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:900px;margin-bottom:1.2rem}.scheme-switch a{display:flex;flex-direction:column;padding:1.2rem;border:1px solid var(--line);background:#fff;border-radius:16px}.scheme-switch a.active{border:2px solid var(--primary);background:#f8f7ff}.scheme-switch small{color:var(--muted);margin-top:.25rem}.campaign-wizard{max-width:900px}.wizard-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem;margin-bottom:1.8rem}.wizard-steps b{display:flex;align-items:center;gap:.5rem;border-bottom:3px solid #e6e7ef;padding:.7rem;color:var(--muted)}.wizard-steps b:first-child{border-color:var(--primary);color:var(--primary)}.wizard-steps small{font-weight:600}.wizard-actions{display:flex;justify-content:space-between;margin-top:1.4rem}
@media(max-width:1100px){.settings-grid{grid-template-columns:1fr 1fr}.brand-profile-card{grid-column:1/-1;min-height:auto}.budget-summary{grid-template-columns:1fr 1fr}.budget-summary article:first-child{grid-column:1/-1}}
@media(max-width:700px){.brand-head{align-items:flex-start;flex-direction:column}.brand-head .btn{width:100%;margin-top:.75rem}.brand-mode{margin-top:.2rem}.brand-mode>*{flex:1;text-align:center}.brand-filters,.appeal-filter{display:grid;grid-template-columns:1fr;width:100%}.brand-analytics-grid,.budget-summary,.settings-grid,.scheme-switch{grid-template-columns:1fr}.budget-summary article:first-child,.brand-profile-card{grid-column:auto}.wizard-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:.2rem}.wizard-steps b{display:grid;justify-items:center;font-size:.8rem;padding:.45rem .1rem}.wizard-steps small{font-size:.62rem}.wizard-actions{gap:.7rem}.wizard-actions>*{flex:1}}
.security-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.2rem}dialog{border:0;border-radius:20px;padding:0;box-shadow:var(--shadow);width:min(520px,calc(100% - 2rem))}dialog::backdrop{background:rgba(15,18,35,.55)}.dialog-card{position:relative;border:0;padding:1.7rem}.dialog-close{position:absolute;right:1rem;top:.8rem;border:0;background:none;font-size:1.7rem;color:var(--muted)}button:disabled{cursor:not-allowed;opacity:.55}@media(max-width:700px){.security-grid{grid-template-columns:1fr}}
/* Clypora identity */
.brand .brand-mark{display:block;width:38px;height:38px;object-fit:contain;flex:0 0 38px}.sidebar .brand .brand-mark{width:40px;height:40px;flex-basis:40px}.public-nav .brand,.auth-page>.brand,footer .brand{letter-spacing:-.025em}.public-nav .brand .brand-mark,footer .brand .brand-mark{width:42px;height:42px;flex-basis:42px}
/* Keep the shared mobile dashboard trigger clear of the Clypora mark. */
@media(max-width:900px){.sidebar{padding-top:1.25rem}.sidebar .brand{margin-left:54px;min-height:44px}.mobile-toggle{top:18px;left:16px;width:42px;height:42px;background:#242844;border:1px solid #343957;box-shadow:0 6px 16px rgba(0,0,0,.2)}}
/* Unified dashboard navigation icons and precision-aligned mobile identity. */
.sidebar nav a{display:flex;align-items:center;gap:.72rem}.nav-icon{display:inline-grid;place-items:center;width:20px;height:20px;flex:0 0 20px;color:#9ca5c9;font-size:1.05rem;line-height:1;font-weight:600}.sidebar nav a.active .nav-icon,.sidebar nav a:hover .nav-icon{color:#fff}
@media(max-width:900px){.sidebar{padding-top:1.25rem}.mobile-toggle{top:20px;left:16px;height:42px}.sidebar .brand{margin-left:54px;min-height:42px;gap:.36rem;align-items:center}.sidebar .brand .brand-mark{width:34px;height:34px;flex-basis:34px}.sidebar .brand{transform:translateY(0)}}
/* Professional sidebar icon system */
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}.sidebar nav{min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#343957 transparent}.sidebar nav a{min-height:43px;gap:.78rem}.nav-icon{display:block;width:21px;height:21px;flex:0 0 21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:#a09aa8;font-size:0}.sidebar nav a:hover .nav-icon,.sidebar nav a.active .nav-icon{color:#fff}.nav-help{margin-top:1rem;padding-top:1rem;border-top:1px solid #323653}.nav-help>strong{display:block;margin:.15rem .8rem .45rem;color:#fff;font-size:.82rem;letter-spacing:.01em}.nav-help a{margin-top:.1rem}.sidebar-user form{margin-top:.2rem}.sidebar-user .link-btn{display:flex;align-items:center;gap:.78rem;width:100%;font-size:.92rem}.sidebar-user .link-btn .nav-icon{color:#ff9b8b}
/* Compact authenticated breadcrumbs */
.page-crumb{display:flex;align-items:center;gap:.5rem;font-size:.8rem;line-height:1;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:650}.page-crumb b{color:#a3a8b6;font-weight:500}.page-crumb strong{color:var(--ink);font-weight:800}.topup-instructions{margin:.6rem 0 1.1rem;color:var(--muted);font-size:.92rem}.topup-instructions p{margin:.7rem 0}.topup-instructions>p:first-child strong{color:var(--ink);font-size:1rem}.bank-account{display:grid;gap:.12rem;background:#f6f7fb;border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem}.bank-account span{color:var(--muted);font-size:.78rem;font-weight:800}.bank-account strong{color:var(--ink);font-size:1.25rem;letter-spacing:.025em}.bank-account small{color:var(--muted)}.wa-link{display:inline-flex;color:var(--primary);font-weight:800;margin:.1rem 0}.wa-link:hover{text-decoration:underline}.topup-note{padding-top:.7rem;border-top:1px solid var(--line);font-size:.82rem}
@media(max-width:900px){body:has(.app-main):before{content:"";position:fixed;inset:0 0 auto;height:82px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 5px 18px rgba(34,39,84,.06);z-index:23}.page-head .page-crumb{position:fixed;z-index:24;top:20px;left:78px;height:42px;max-width:calc(100vw - 96px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:transparent}.app-main{padding-top:6.5rem}.page-head{padding-top:0}.mobile-toggle{z-index:25}}
/* CMEDIA dark dashboard theme — scoped to authenticated workspaces. */
body:has(.app-main){--ink:#f5f8ff;--muted:#929bb7;--bg:#000000;--card:#0c0c11;--primary:#e0107a;--primary2:#8f04c4;--coral:#ff7fb0;--line:#22222c;--ok:#39d8a0;--warn:#ffc55c;--bad:#ff7188;--shadow:0 18px 50px rgba(0,0,0,.32);background:radial-gradient(circle at 90% 0,rgba(114,2,255,.12),transparent 32%),#000000;color:var(--ink);color-scheme:dark}
body:has(.app-main) .sidebar{background:#050507;border-right:1px solid #272846}
body:has(.app-main) .sidebar nav a:hover,body:has(.app-main) .sidebar nav a.active{background:linear-gradient(105deg,rgba(180,5,137,.28),rgba(255,79,128,.10));box-shadow:inset 3px 0 #ff2e6a;color:#fff}
body:has(.app-main) .sidebar-user,body:has(.app-main) .sidebar hr,body:has(.app-main) .nav-help{border-color:#22222c}
body:has(.app-main) .page-head h1,body:has(.app-main) .section-head h2,body:has(.app-main) .content-block h2,body:has(.app-main) h3{color:#f7f9ff}
body:has(.app-main) .page-crumb strong{color:#f7f9ff}body:has(.app-main) .page-crumb span,body:has(.app-main) .page-crumb b{color:#8a8490}
body:has(.app-main) .content-block,body:has(.app-main) .metrics article,body:has(.app-main) .campaign-card,body:has(.app-main) .budget-summary article,body:has(.app-main) .form-card,body:has(.app-main) .panel,body:has(.app-main) dialog{background:#0c0c11;border-color:#22222c;color:#f5f8ff;box-shadow:var(--shadow)}
body:has(.app-main) .metrics article,body:has(.app-main) .budget-summary article{background:linear-gradient(145deg,#111117,#08080c)}
body:has(.app-main) .btn{background:linear-gradient(110deg,#a3059b,#ff2e6a);color:#fff;box-shadow:0 9px 24px rgba(200,21,112,.24)}body:has(.app-main) .btn:hover{background:linear-gradient(110deg,#8a04b8,#ff7fb0)}
body:has(.app-main) .btn.secondary{background:#121218;color:#ff7fb0;border-color:#343754;box-shadow:none}
body:has(.app-main) input,body:has(.app-main) select,body:has(.app-main) textarea{background:#08080c;border-color:#30324e;color:#f5f8ff}body:has(.app-main) input::placeholder,body:has(.app-main) textarea::placeholder{color:#737c99}body:has(.app-main) input:focus,body:has(.app-main) select:focus,body:has(.app-main) textarea:focus{border-color:#ff2e6a;box-shadow:0 0 0 3px rgba(255,46,106,.16)}
body:has(.app-main) .tabs button,body:has(.app-main) .rank-tabs button,body:has(.app-main) .brand-mode button,body:has(.app-main) .brand-mode a{background:#121218;color:#b0a9b8}body:has(.app-main) .tabs button.active,body:has(.app-main) .rank-tabs button.active,body:has(.app-main) .brand-mode .active{background:linear-gradient(105deg,#a3059b,#ff2e6a);color:#fff}
body:has(.app-main) th,body:has(.app-main) td,body:has(.app-main) .notification-list article,body:has(.app-main) .leader-list>div,body:has(.app-main) .list>div,body:has(.app-main) .status-card>div,body:has(.app-main) .distribution{border-color:#22222c}body:has(.app-main) th{color:#929bb7}body:has(.app-main) td{color:#e9edf8}
body:has(.app-main) .empty{border-color:#343754;color:#929bb7}body:has(.app-main) .empty b{color:#f5f8ff}
body:has(.app-main) .status-card,body:has(.app-main) .rank-grid article,body:has(.app-main) .bank-account{background:#08080c;border-color:#22222c}body:has(.app-main) .rank-grid article.current{background:#2a0a1f;border-color:#ff2e6a}
body:has(.app-main) .notification-list article.unread{background:#1d0d1c}body:has(.app-main) .notification-list article>span,body:has(.app-main) .avatar,body:has(.app-main) .count-pill{background:#2e0a26;color:#ff7fb0}
body:has(.app-main) .progress,body:has(.app-main) .budget-line{background:#1b1b24}body:has(.app-main) .progress i,body:has(.app-main) .budget-line i,body:has(.app-main) .chart i{background:linear-gradient(180deg,#ff7fb0,#a3059b)}
body:has(.app-main) .badge{background:#1b1b24;color:#cbd1e2}body:has(.app-main) .badge.approved,body:has(.app-main) .badge.active{background:rgba(57,216,160,.14);color:#54e9b3}body:has(.app-main) .badge.pending{background:rgba(255,197,92,.14);color:#ffd276}body:has(.app-main) .badge.rejected{background:rgba(255,113,136,.14);color:#ff8ca0}
body:has(.app-main) .scheme-switch a{background:#0c0c11;border-color:#22222c}body:has(.app-main) .scheme-switch a.active{background:#2a0a1f;border-color:#ff2e6a}body:has(.app-main) .wizard-steps b{border-color:#22222c}body:has(.app-main) .wizard-steps b:first-child{border-color:#ff2e6a;color:#ff7fb0}
body:has(.app-main) .brand-profile-card,body:has(.app-main) .detail-hero{background:linear-gradient(145deg,#050507,#2e0a26)}body:has(.app-main) dialog::backdrop{background:rgba(2,2,12,.76)}body:has(.app-main) .dialog-close{color:#929bb7}
body:has(.app-main) .campaign-cover.c1{background:linear-gradient(135deg,#6a02cf,#e0107a)}body:has(.app-main) .campaign-cover.c2{background:linear-gradient(135deg,#3d0640,#ff4f80)}body:has(.app-main) .campaign-cover.c3{background:linear-gradient(135deg,#5d0648,#ff4f80)}body:has(.app-main) .campaign-cover.c0{background:linear-gradient(135deg,#12101c,#7202ff)}
@media(max-width:900px){body:has(.app-main):before{background:#050507;border-color:#22222c;box-shadow:0 5px 20px rgba(0,0,0,.32)}body:has(.app-main) .mobile-toggle{background:#15101c;border-color:#3a2036;color:#ff7fb0}body:has(.app-main) .app-main{background:transparent}}
/* Video reference: full-height compact drawer overlays mobile header. */
.nav-backdrop{display:none}.sidebar .brand,.sidebar-user{flex-shrink:0}.sidebar nav{flex:1;min-height:0;overflow:auto}.sidebar-user{margin-top:auto}
@media(max-width:900px){
.sidebar{inset:0 auto 0 0;height:100dvh;width:250px;z-index:40;padding:20px 16px 16px;box-shadow:12px 0 30px #0006}
.sidebar .brand{margin:0 0 24px 54px;min-height:42px;gap:7px;font-size:1.05rem}
.sidebar .brand .brand-mark{width:30px;height:30px;flex-basis:30px}
.sidebar nav a{font-size:.85rem;padding:.6rem .7rem;min-height:40px}
.nav-backdrop:not([hidden]){display:block;position:fixed;inset:0;background:#0009;border:0;z-index:35}
body.nav-open{overflow:hidden}body.nav-open .mobile-toggle{z-index:45}
.app-main{padding-left:16px;padding-right:16px}.page-head{gap:12px}.page-head h1{font-size:1.5rem}.page-head>.btn{width:auto;align-self:flex-end;font-size:.8rem;padding:.6rem .8rem}
.content-block{padding:16px}.metrics{gap:10px}.metrics article{padding:14px}.metrics strong{font-size:1.4rem}
}
/* Keep the compact auth role selector within its card. */
.role-picker{min-width:0}.role-picker label{min-width:0}.role-picker input{width:1px;height:1px;overflow:hidden}.role-picker span{overflow-wrap:anywhere}


/* =========================================================================
   Precision workspace layer — rebuilt to match the supplied walkthrough.
   Scope: authenticated app shell only (body:has(.app-main)).
   ========================================================================= */
body:has(.app-main){--acc:#e0107a;--acc2:#7202ff;--warn2:#ffc55c;--info2:#ff9ec2;--ok2:#3fd9a2;--bad2:#ff7188;--edge:#1b1b24;--surface:#0c0c11;--surface2:#08080c}

/* --- Top bar: hamburger, breadcrumb, bell on one baseline --- */
.topbar{display:none}
body:has(.app-main) .topbar-crumb strong{color:#f7f9ff}
body:has(.app-main) .topbar-crumb span,body:has(.app-main) .topbar-crumb b{color:#8a8490}
.page-head,.page-crumb,.brand-head{display:none}

/* --- Screen heading --- */
.screen-title{font-size:1.32rem;line-height:1.3;letter-spacing:-.02em;margin:0 0 4px;font-weight:800}
.screen-sub{margin:0 0 16px;color:var(--muted);font-size:.85rem;line-height:1.5}
.screen-actions{display:flex;align-items:center;gap:10px;margin:14px 0 16px}

/* --- Segmented control (Approved / All Videos, Settings tabs) --- */
.segmented{display:inline-flex;padding:4px;border-radius:999px;background:#121218;border:1px solid var(--edge);gap:4px}
.segmented a,.segmented button{padding:8px 16px;border-radius:999px;font-size:.82rem;font-weight:650;color:#b0a9b8;border:0;background:none;white-space:nowrap}
.segmented a.active,.segmented button.active{background:linear-gradient(105deg,var(--acc2),var(--acc));color:#fff}
.segmented.full{display:flex;width:100%;margin-bottom:14px}
.segmented.full button{flex:1;text-align:center}
.add-campaign{margin-left:auto;font-size:.82rem;padding:.62rem .95rem;border-radius:12px;white-space:nowrap}

/* --- Hero stat card (Total Views) --- */
.stat-hero{position:relative;overflow:hidden;background:linear-gradient(150deg,#111117,#08080c 62%);border:1px solid var(--edge);border-radius:18px;padding:18px;margin-bottom:12px}
.stat-hero:after{content:"";position:absolute;right:-60px;bottom:-70px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(224,16,122,.30),transparent 68%)}
.stat-hero-head{display:flex;align-items:center;gap:8px;font-size:.84rem;color:#d6d2da;font-weight:600}
.stat-hero-head .nav-icon{width:17px;height:17px;color:#fff}
.stat-hero strong{display:block;margin-top:12px;font-size:2.35rem;line-height:1;font-weight:850;color:var(--acc);letter-spacing:-.03em}
.stat-hero strong small{font-size:.92rem;font-weight:650;color:var(--acc);letter-spacing:0}

/* --- Stat tiles: 3-up / 2-up, never truncated --- */
.stat-trio,.stat-duo{display:grid;gap:10px;margin-bottom:16px}
.stat-trio{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat-duo{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat-trio article,.stat-duo article{background:var(--surface);border:1px solid var(--edge);border-radius:14px;padding:12px 10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.stat-ico{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:#1b1b24}
.stat-ico .nav-icon{width:15px;height:15px}
.stat-trio small,.stat-duo small{color:var(--muted);font-size:.7rem;line-height:1.25;font-weight:600;overflow-wrap:anywhere}
.stat-trio b,.stat-duo b{font-size:1.02rem;font-weight:800;line-height:1.2;overflow-wrap:anywhere}
.stat-trio b i,.stat-duo b i{font-style:normal;font-size:.68rem;font-weight:650;opacity:.85}
.tone-warn .stat-ico .nav-icon{color:var(--warn2)}.tone-warn b{color:var(--warn2)}
.tone-info .stat-ico .nav-icon{color:var(--info2)}.tone-info b{color:var(--info2)}
.tone-ok .stat-ico .nav-icon{color:var(--ok2)}.tone-ok b{color:var(--ok2)}
.tone-brand .stat-ico .nav-icon{color:var(--acc)}.tone-brand b{color:var(--acc)}

/* --- Content blocks --- */
body:has(.app-main) .content-block{background:var(--surface);border:1px solid var(--edge);border-radius:18px;padding:16px;margin:0 0 14px}
.block-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.block-head h2{font-size:1rem;margin:0;font-weight:750;display:flex;align-items:center;gap:8px}
body:has(.app-main) .count-pill{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#2e0a26;color:#ff7fb0;font-size:.74rem;font-weight:750}

/* --- Select rows --- */
.select-row{display:grid;gap:8px;margin-bottom:12px}
.select-row.wide{grid-template-columns:1fr}
.field-select{display:block;position:relative;min-width:0}
.field-select select{width:100%;appearance:none;background:var(--surface2);border:1px solid var(--edge);border-radius:12px;padding:11px 34px 11px 13px;font-size:.82rem;color:#e6ebf8;text-overflow:ellipsis}
.field-select:after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;margin-top:-5px;border-right:2px solid #8b93af;border-bottom:2px solid #8b93af;transform:rotate(45deg);pointer-events:none}

/* --- Platform pills --- */
.pill-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px;scrollbar-width:none}
.pill-row::-webkit-scrollbar{display:none}
.pill{flex:0 0 auto;padding:7px 15px;border-radius:999px;background:#121218;border:1px solid var(--edge);color:#b0a9b8;font-size:.78rem;font-weight:650}
.pill.active{background:linear-gradient(105deg,var(--acc2),var(--acc));border-color:transparent;color:#fff}

/* --- Underline tabs --- */
.underline-tabs{display:flex;gap:4px;border-bottom:1px solid var(--edge);margin-bottom:14px;overflow-x:auto;scrollbar-width:none}
.underline-tabs::-webkit-scrollbar{display:none}
.underline-tabs a{flex:0 0 auto;padding:10px 12px;font-size:.82rem;font-weight:650;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.underline-tabs a.active{color:#f7f9ff;border-bottom-color:var(--acc)}

/* --- Search field --- */
.search-field{display:flex;align-items:center;gap:9px;background:var(--surface2);border:1px solid var(--edge);border-radius:12px;padding:0 13px;margin-bottom:12px;min-width:0}
.search-field .nav-icon{width:16px;height:16px;color:#8a8490;flex:0 0 auto}
.search-field input{flex:1;min-width:0;border:0;background:none;padding:11px 0;font-size:.82rem;outline:none}
.search-field.grow{flex:1 1 100%;margin-bottom:0}

/* --- Empty state line --- */
.empty-line{margin:20px 0;text-align:center;color:var(--muted);font-size:.84rem}

/* --- Analytics: CPM card --- */
.cpm-card{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative;overflow:hidden;background:linear-gradient(150deg,#16142f,#08080c 60%);border:1px solid var(--edge);border-radius:18px;padding:18px;margin-bottom:12px}
.cpm-card:after{content:"";position:absolute;left:-40px;bottom:-80px;width:220px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(123,92,255,.26),transparent 68%)}
.cpm-card span{display:block;font-size:.76rem;color:var(--muted);font-weight:600}
.cpm-card strong{display:block;margin-top:6px;font-size:1.5rem;font-weight:850;color:var(--acc);letter-spacing:-.02em}
.cpm-card strong.alt{color:#a48bff}

/* --- Analytics: metric quad --- */
.metric-quad{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.metric-quad article{background:var(--surface2);border:1px solid var(--edge);border-radius:14px;padding:12px;min-width:0}
.metric-quad article.active{background:linear-gradient(120deg,var(--acc2),var(--acc));border-color:transparent}
.metric-quad span{display:flex;align-items:center;gap:7px;font-size:.74rem;color:var(--muted);font-weight:650}
.metric-quad article.active span{color:#eaf7ff}
.metric-quad .nav-icon{width:15px;height:15px}
.metric-quad b{display:block;margin-top:7px;font-size:1.28rem;font-weight:850;letter-spacing:-.02em}

/* --- Analytics: trend chart with axis --- */
.trend-chart{display:flex;gap:10px;height:164px;margin-bottom:6px}
.trend-axis{display:flex;flex-direction:column;justify-content:space-between;font-size:.65rem;color:#8b8390;text-align:right;flex:0 0 auto;padding:2px 0}
.trend-plot{flex:1;display:flex;align-items:flex-end;gap:6px;border-left:1px solid var(--edge);border-bottom:1px solid var(--edge);padding:0 2px 0 6px;min-width:0}
.trend-plot i{flex:1;min-width:0;height:var(--h,0%);min-height:3px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#ff7fb0,#a3059b)}
.trend-legend{display:flex;justify-content:space-around;font-size:.64rem;color:#8b8390}

/* --- Analytics: pending / rejected split --- */
.status-split{display:grid;gap:10px;margin-bottom:14px}
.status-split article{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--edge);border-radius:14px;padding:13px 14px}
.status-split article>div{flex:1;min-width:0}
.status-split b{display:block;font-size:.86rem;font-weight:700}
.status-split small{color:var(--muted);font-size:.74rem}
.status-split strong{font-size:1.02rem;font-weight:800}
.status-split strong.warn{color:var(--warn2)}
.status-split strong.bad{color:var(--bad2)}
.dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.dot.warn{background:var(--warn2)}.dot.bad{background:var(--bad2)}

/* --- Distribution rows --- */
.dist-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--edge);font-size:.82rem}
.dist-row:last-child{border-bottom:0}
.dist-row>span{flex:0 0 84px;color:var(--muted)}
.dist-bar{flex:1;height:7px;border-radius:999px;background:#1b1b24;overflow:hidden;min-width:0}
.dist-bar i{display:block;height:100%;background:linear-gradient(90deg,#a3059b,#ff7fb0)}
.dist-row b{flex:0 0 auto;font-size:.78rem;font-weight:700}

/* --- Budget hero --- */
.balance-hero{position:relative;overflow:hidden;background:linear-gradient(150deg,#111117,#08080c 62%);border:1px solid var(--edge);border-radius:18px;padding:18px;margin-bottom:12px}
.balance-hero:after{content:"";position:absolute;right:-60px;top:-70px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(63,217,162,.22),transparent 68%)}
.balance-hero>span{font-size:.8rem;color:#d6d2da;font-weight:600}
.balance-hero strong{display:block;margin:9px 0 3px;font-size:2.05rem;font-weight:850;letter-spacing:-.03em;color:var(--ok2)}
.balance-hero small{color:var(--muted);font-size:.74rem}
.balance-actions{display:flex;gap:9px;margin-top:15px;position:relative;z-index:1}
.balance-actions .btn{flex:1;font-size:.8rem;padding:.68rem .6rem}
body:has(.app-main) .balance-actions .btn.secondary:disabled{color:#98a1bd;opacity:1}

/* --- Settings profile hero --- */
.profile-hero{display:flex;align-items:center;gap:13px;background:linear-gradient(145deg,#12122c,#2e0a26);border:1px solid var(--edge);border-radius:18px;padding:16px;margin-bottom:14px}
.profile-avatar{display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;border-radius:50%;background:linear-gradient(135deg,var(--acc2),var(--acc));color:#fff;font-size:1.4rem;font-weight:850}
.profile-hero>div{min-width:0}
.profile-hero strong{display:block;font-size:1rem;font-weight:750;overflow-wrap:anywhere}
.profile-hero small{color:#a09aa8;font-size:.76rem}

/* --- Forms inside workspace --- */
body:has(.app-main) .form-card{background:var(--surface);border:1px solid var(--edge);border-radius:18px;padding:16px;margin:0 0 14px}
body:has(.app-main) .form-card h2{font-size:1rem;margin:0 0 6px}
body:has(.app-main) .form-card p{color:var(--muted);font-size:.82rem;margin:0 0 13px}
body:has(.app-main) .form-card label{display:block;font-size:.8rem;font-weight:650;color:#d6d2da;margin-bottom:13px}
body:has(.app-main) .form-card input,body:has(.app-main) .form-card select,body:has(.app-main) .form-card textarea{width:100%;margin-top:7px;background:var(--surface2);border:1px solid var(--edge);border-radius:12px;padding:11px 13px;font-size:.85rem;font-weight:500}
body:has(.app-main) .btn.wide{width:100%;margin-top:2px}

/* --- Tables --- */
body:has(.app-main) .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
body:has(.app-main) table{width:100%;border-collapse:collapse;font-size:.8rem}
body:has(.app-main) th{text-align:left;padding:10px 12px;background:var(--surface2);color:var(--muted);font-size:.72rem;font-weight:650;white-space:nowrap}
body:has(.app-main) th:first-child{border-radius:10px 0 0 10px}
body:has(.app-main) th:last-child{border-radius:0 10px 10px 0}
body:has(.app-main) td{padding:11px 12px;border-bottom:1px solid var(--edge);white-space:nowrap}

/* --- Sidebar: match drawer from walkthrough --- */
.nav-backdrop{display:none}
.sidebar .brand,.sidebar-user{flex-shrink:0}
.sidebar nav{flex:1;min-height:0;overflow:auto}
.sidebar-user{margin-top:auto}
.nav-help{margin-top:14px;padding-top:14px;border-top:1px solid #22222c}
.nav-help strong{display:block;font-size:.78rem;margin-bottom:7px;color:#e7ecf8}

/* --- Desktop refinements --- */
@media(min-width:901px){
.screen-title{font-size:1.85rem;margin-bottom:6px}
.stat-trio,.stat-duo{gap:14px}
.stat-trio article,.stat-duo article{padding:16px}
.stat-trio small,.stat-duo small{font-size:.8rem}
.stat-trio b,.stat-duo b{font-size:1.35rem}
.stat-hero{padding:24px}
.stat-hero strong{font-size:2.9rem}
.select-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.select-row.wide{grid-template-columns:1fr 1fr auto}
.metric-quad{grid-template-columns:repeat(4,1fr)}
.status-split{grid-template-columns:1fr 1fr}
.cpm-card{padding:24px}
body:has(.app-main) .content-block{padding:22px}
}

/* --- Mobile shell: fixed top bar + drawer --- */
@media(max-width:900px){
body:has(.app-main):before{content:none}
.topbar{display:flex;align-items:center;gap:10px;position:fixed;top:0;left:0;right:0;height:56px;padding:0 12px;background:#050507;border-bottom:1px solid var(--edge);z-index:30}
.mobile-toggle{display:grid;place-items:center;position:static;width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:#15101c;border:1px solid #3a2036;color:#ff7fb0;padding:0}
.mobile-toggle .nav-icon{width:19px;height:19px}
.topbar-crumb{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-crumb strong{font-weight:700}
.topbar-bell{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:11px;color:#dfe5f5}
.topbar-bell .nav-icon{width:20px;height:20px}
.app-main{margin-left:0;padding:70px 16px 28px}
.sidebar{inset:0 auto 0 0;height:100dvh;width:252px;z-index:40;padding:16px 14px;box-shadow:12px 0 30px #0006}
.sidebar .brand{margin:0 0 20px 50px;min-height:38px;gap:8px;font-size:1.02rem}
.sidebar .brand .brand-mark{width:28px;height:28px;flex-basis:28px}
.sidebar nav a{font-size:.85rem;padding:.58rem .7rem;min-height:38px;border-radius:11px}
.nav-backdrop:not([hidden]){display:block;position:fixed;inset:0;background:#0009;border:0;z-index:35}
body.nav-open{overflow:hidden}
body.nav-open .mobile-toggle{z-index:45}
}

/* --- Small phones: keep tiles readable, never clipped --- */
@media(max-width:380px){
.stat-trio{grid-template-columns:1fr 1fr}
.stat-trio article:last-child{grid-column:1/-1}
.add-campaign{padding:.6rem .7rem;font-size:.78rem}
.segmented a,.segmented button{padding:8px 12px;font-size:.78rem}
}

/* Keep the compact auth role selector within its card. */
.role-picker{min-width:0}
.role-picker label{min-width:0}
.role-picker span{overflow-wrap:anywhere}

/* --- Precision QA pass 2: no clipped buttons, no broken numerals --- */
.nowrap{white-space:nowrap}
.screen-actions{flex-wrap:nowrap;min-width:0}
.screen-actions .segmented{min-width:0;flex:0 1 auto;overflow:hidden}
.screen-actions .segmented a{overflow:hidden;text-overflow:ellipsis}
.add-campaign{flex:0 0 auto}
.stat-hero strong,.cpm-card strong,.balance-hero strong,.stat-trio b,.stat-duo b,.metric-quad b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
.stat-trio b i,.stat-duo b i{white-space:nowrap}
.field-select:after{margin-top:-4px}
.select-row.wide .btn{width:100%}
body:has(.app-main) .sidebar nav a,body:has(.app-main) .nav-help a{display:flex;align-items:center;gap:10px}
body:has(.app-main) .sidebar nav a .nav-icon,body:has(.app-main) .nav-help a .nav-icon{width:18px;height:18px;flex:0 0 18px}
body:has(.app-main) .sidebar-user{display:grid;gap:2px;padding-top:12px}
body:has(.app-main) .sidebar-user strong{font-size:.85rem;line-height:1.3}
body:has(.app-main) .sidebar-user small{font-size:.68rem;letter-spacing:.06em}
body:has(.app-main) .sidebar-user .link-btn{display:flex;align-items:center;gap:10px;margin-top:6px;padding:.45rem 0}
body:has(.app-main) .sidebar-user .link-btn .nav-icon{width:18px;height:18px;flex:0 0 18px}
.balance-hero small{color:#a09aa8}

@media(max-width:420px){
.screen-actions{flex-wrap:wrap}
.screen-actions .segmented{flex:1 1 100%}
.screen-actions .segmented a{flex:1;text-align:center}
.add-campaign{width:100%;margin-left:0}
.stat-hero strong{font-size:2rem}
.cpm-card strong{font-size:1.24rem}
.balance-hero strong{font-size:1.72rem}
}

/* --- Pass 3: keep segmented + Add Campaign on one row like the walkthrough --- */
@media(max-width:900px){
.screen-actions{flex-wrap:nowrap;gap:8px}
.screen-actions .segmented{flex:0 1 auto;padding:3px;gap:2px}
.screen-actions .segmented a{padding:7px 11px;font-size:.76rem}
.add-campaign{flex:0 0 auto;width:auto;margin-left:auto;padding:.58rem .72rem;font-size:.76rem;border-radius:11px}
}
@media(max-width:420px){
.screen-actions{flex-wrap:nowrap}
.screen-actions .segmented{flex:0 1 auto}
.screen-actions .segmented a{flex:0 0 auto;padding:7px 9px;font-size:.72rem}
.add-campaign{width:auto;margin-left:auto;padding:.56rem .62rem;font-size:.72rem}
}

/* --- Pass 4: horizontal scroll affordance for tables & pill rows --- */
body:has(.app-main) .table-wrap{margin:0 -16px;padding:0 16px;scrollbar-width:none}
body:has(.app-main) .table-wrap::-webkit-scrollbar{display:none}
body:has(.app-main) .content-block{position:relative}
.pill-row{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
.underline-tabs{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
.scroll-hint{display:none;margin:6px 0 0;font-size:.68rem;color:#8b8390;text-align:right}
.scroll-hint.on{display:block}
@media(min-width:901px){
body:has(.app-main) .table-wrap{margin:0;padding:0}
.pill-row,.underline-tabs{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
}

/* --- Pass 5: desktop keeps breadcrumb + bell instead of hiding the top bar --- */
@media(min-width:901px){
.topbar{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:0}
.topbar .mobile-toggle{display:none}
.topbar-crumb{flex:1;min-width:0;display:flex;align-items:center;gap:7px;font-size:.88rem}
.topbar-bell{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:#0c0c11;border:1px solid var(--edge);color:#dfe5f5}
.topbar-bell .nav-icon{width:20px;height:20px}
}

/* =========================================================================
   Pass 6 — logo alignment + precision layer applied to EVERY dashboard
   (brand, clipper, admin), not brand only.
   ========================================================================= */

/* --- Sidebar logo: align the mark exactly above the Dashboard home icon --- */
body:has(.app-main) .sidebar{padding:16px 14px}
body:has(.app-main) .sidebar .brand{margin:0 0 18px;padding:0 .7rem;gap:10px;min-height:40px;font-size:1.06rem;align-items:center}
body:has(.app-main) .sidebar .brand .brand-mark{width:26px;height:26px;flex:0 0 26px;object-fit:contain}
body:has(.app-main) .sidebar nav a{padding:.58rem .7rem;gap:10px}
body:has(.app-main) .sidebar nav a .nav-icon{width:22px;height:22px;flex:0 0 22px}
body:has(.app-main) .sidebar .brand .brand-mark{margin-left:-2px;width:30px;flex-basis:30px;height:30px}
body:has(.app-main) .nav-help>strong{margin:.15rem .7rem .45rem}
body:has(.app-main) .nav-help a{padding:.58rem .7rem;gap:10px}
body:has(.app-main) .nav-help a .nav-icon{width:22px;height:22px;flex:0 0 22px}
body:has(.app-main) .sidebar-user{padding:12px .7rem 0}
body:has(.app-main) .sidebar-user .link-btn{gap:10px;padding:.5rem 0}
body:has(.app-main) .sidebar-user .link-btn .nav-icon{width:22px;height:22px;flex:0 0 22px}
@media(max-width:900px){
body:has(.app-main) .sidebar .brand{margin:0 0 18px;padding:0 .7rem}
body:has(.app-main) .sidebar .brand .brand-mark{width:30px;height:30px;flex-basis:30px}
}

/* --- Shared screen chrome for clipper/admin templates (page-head based) --- */
body:has(.app-main) .page-head{display:block;margin:0 0 14px}
body:has(.app-main) .page-head .page-crumb{display:none}
body:has(.app-main) .page-head h1{font-size:1.32rem;line-height:1.3;letter-spacing:-.02em;margin:0 0 4px;font-weight:800}
body:has(.app-main) .page-head p{margin:0 0 12px;color:var(--muted);font-size:.85rem;line-height:1.5}
body:has(.app-main) .page-head>.btn{display:inline-flex;font-size:.8rem;padding:.62rem .95rem;border-radius:12px}

/* --- Metric tiles (clipper/admin) get the same precision as brand tiles --- */
body:has(.app-main) .metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
body:has(.app-main) .metrics article{background:var(--surface);border:1px solid var(--edge);border-radius:14px;padding:12px 10px;min-width:0;box-shadow:none}
body:has(.app-main) .metrics article:before{content:none}
body:has(.app-main) .metrics span{color:var(--muted);font-size:.7rem;font-weight:600;line-height:1.25}
body:has(.app-main) .metrics strong{font-size:1.02rem;font-weight:800;margin:6px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:has(.app-main) .metrics small{display:none}

/* --- Section heads, tabs, tables, cards inside clipper/admin --- */
body:has(.app-main) .section-head{margin-bottom:12px;align-items:flex-start}
body:has(.app-main) .section-head h2,body:has(.app-main) .content-block h2{font-size:1rem;font-weight:750;margin:0}
body:has(.app-main) .section-head p{font-size:.78rem;margin:2px 0 0}
body:has(.app-main) .tabs,body:has(.app-main) .rank-tabs{gap:4px;padding:4px;border-radius:999px;background:#121218;border:1px solid var(--edge);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
body:has(.app-main) .tabs::-webkit-scrollbar,body:has(.app-main) .rank-tabs::-webkit-scrollbar{display:none}
body:has(.app-main) .tabs button,body:has(.app-main) .rank-tabs button{padding:8px 15px;border-radius:999px;font-size:.8rem;font-weight:650;white-space:nowrap}
body:has(.app-main) table{min-width:0}
body:has(.app-main) .empty{border:1px dashed var(--edge);border-radius:16px;color:var(--muted);padding:26px 18px}
body:has(.app-main) .empty b{color:#f5f8ff}
body:has(.app-main) .campaign-grid{gap:12px;margin-top:12px}
body:has(.app-main) .campaign-card{border-color:var(--edge);background:var(--surface);border-radius:16px}
body:has(.app-main) .campaign-card h3{font-size:.98rem}
body:has(.app-main) .campaign-card p{font-size:.8rem}
body:has(.app-main) .filter-bar{gap:10px;margin-bottom:14px}
body:has(.app-main) .filter-bar input,body:has(.app-main) .filter-bar select{background:var(--surface2);border:1px solid var(--edge);border-radius:12px;padding:11px 13px;font-size:.82rem}
body:has(.app-main) .chart{height:170px;border-bottom:1px solid var(--edge);gap:6px}
body:has(.app-main) .chart i{background:linear-gradient(180deg,#ff7fb0,#a3059b);border-radius:5px 5px 2px 2px}
body:has(.app-main) .rank-grid{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
body:has(.app-main) .rank-grid article{background:var(--surface);border:1px solid var(--edge);border-radius:14px;padding:12px;min-width:0}
body:has(.app-main) .rank-grid article.current{background:linear-gradient(120deg,var(--acc2),var(--acc));border-color:transparent}
body:has(.app-main) .rank-grid b{font-size:1rem}
body:has(.app-main) .leader-list>div,body:has(.app-main) .list>div,body:has(.app-main) .status-card>div{gap:11px;padding:11px 0;border-bottom:1px solid var(--edge);font-size:.84rem}
body:has(.app-main) .avatar{background:linear-gradient(135deg,var(--acc2),var(--acc));color:#fff;font-weight:800}
body:has(.app-main) .notification-list article{gap:11px;padding:12px 0;border-bottom:1px solid var(--edge)}
body:has(.app-main) .notification-list article.unread{background:transparent;box-shadow:inset 3px 0 var(--acc);padding-left:11px}
body:has(.app-main) .notification-list article>span{background:#2e0a26;color:#ff7fb0;border-radius:11px}
body:has(.app-main) .status-card{background:var(--surface2);border:1px solid var(--edge);border-radius:16px;padding:14px}
body:has(.app-main) .two-col,body:has(.app-main) .form-grid{gap:12px}
body:has(.app-main) .detail-hero{border-radius:20px;padding:18px}
body:has(.app-main) .detail-hero h1{font-size:1.4rem}
body:has(.app-main) .steps{gap:10px}
body:has(.app-main) .steps li{background:var(--surface2);border:1px solid var(--edge);border-radius:13px;padding:12px}

@media(max-width:900px){
body:has(.app-main) .metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
body:has(.app-main) .campaign-grid,body:has(.app-main) .two-col,body:has(.app-main) .form-grid,body:has(.app-main) .brand-analytics-grid{grid-template-columns:1fr}
body:has(.app-main) .filter-bar{grid-template-columns:1fr}
body:has(.app-main) .section-head{flex-direction:column}
}
@media(max-width:380px){
body:has(.app-main) .metrics{grid-template-columns:1fr 1fr}
body:has(.app-main) .metrics article:last-child:nth-child(odd){grid-column:1/-1}
}
@media(min-width:901px){
body:has(.app-main) .page-head h1{font-size:1.85rem}
body:has(.app-main) .metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
body:has(.app-main) .metrics article{padding:16px}
body:has(.app-main) .metrics span{font-size:.8rem}
body:has(.app-main) .metrics strong{font-size:1.35rem}
body:has(.app-main) .rank-grid{grid-template-columns:repeat(5,1fr)}
}

/* --- Pass 7: logo mark centered exactly on the nav icon axis (all roles) --- */
body:has(.app-main) .sidebar .brand .brand-mark{width:30px;height:30px;flex:0 0 30px;margin-left:-4px;margin-right:6px}
body:has(.app-main) .sidebar .brand{gap:0}

/* --- Pass 8: metric grids balance by item count (no orphan tile) --- */
@media(max-width:900px){
body:has(.app-main) .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
body:has(.app-main) .metrics:has(article:nth-child(3)):not(:has(article:nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr))}
body:has(.app-main) .metrics:has(article:nth-child(5)):not(:has(article:nth-child(6))) article:last-child{grid-column:1/-1}
}
@media(max-width:380px){
body:has(.app-main) .metrics,body:has(.app-main) .metrics:has(article:nth-child(3)):not(:has(article:nth-child(4))){grid-template-columns:repeat(2,minmax(0,1fr))}
body:has(.app-main) .metrics:has(article:nth-child(3)):not(:has(article:nth-child(4))) article:last-child{grid-column:1/-1}
}

/* --- Reference pass: Clipper Dashboard only (Konten.com live, 390px) --- */
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .app-main{max-width:none}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .topbar{height:77px;padding:18px 16px;gap:8px;background:#09090b;border-bottom:1px solid #1a1a1a}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .mobile-toggle{width:20px;min-width:20px;max-width:20px;flex:0 0 20px;height:20px;padding:0;border:0;border-radius:0;background:transparent;color:rgba(255,255,255,.6)}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .mobile-toggle .nav-icon{width:20px;height:20px}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .topbar-crumb{flex:1;width:auto;height:20px;padding-left:12px;gap:4px;font-size:14px;color:#fff}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .topbar-crumb strong{font-size:14px;font-weight:400;color:#fff}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .invite-earn{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;gap:3px;width:138.8px;flex:0 0 138.8px;height:38px;padding:6px 8px;border:1px solid #3a2030;border-radius:999px;background:linear-gradient(135deg,#07122a 0%,#0a2440 52%,#063658 100%);box-shadow:inset 0 1px 0 rgba(104,220,255,.25),0 0 12px rgba(255,46,106,.16);color:#ff7fb0;font-family:"Arial Narrow",Inter,sans-serif;font-size:11px;font-weight:800;letter-spacing:0;white-space:nowrap;overflow:hidden;isolation:isolate}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .invite-earn:before{content:"";position:absolute;z-index:-1;inset:-70% -20%;background:linear-gradient(110deg,transparent 35%,rgba(104,220,255,.20) 48%,transparent 61%);animation:invite-shine 4.2s ease-in-out infinite}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .invite-earn:hover{border-color:#ff7fb0;filter:brightness(1.12)}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .invite-mascot{display:grid;place-items:center;width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff7fb0,#a3059b 64%,#064f85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);color:#fff;font-size:14px;font-weight:900;line-height:20px;transform:none;overflow:hidden}
@keyframes invite-shine{0%,62%{transform:translateX(-90%)}85%,100%{transform:translateX(90%)}}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .topbar-bell{position:relative;width:40px;min-width:40px;flex:0 0 40px;height:40px;border-radius:8px;color:#9fa1a8}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .topbar-bell .nav-icon{width:24px;height:24px}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .notification-count{position:absolute;right:0;top:2px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#e3412f;color:#fff;font-size:10px;font-weight:700;line-height:1}
.notification-anchor{position:relative;flex:0 0 auto}
.notification-anchor .topbar-bell{border:0;background:transparent;padding:0}
.notification-popover{position:absolute;z-index:100;top:48px;right:0;width:min(384px,calc(100vw - 84px));max-height:min(520px,calc(100dvh - 86px));overflow:hidden;border:1px solid #1a1a1a;border-radius:12px;background:#0a0a0e;color:#fff;box-shadow:0 25px 50px -12px rgba(0,0,0,.72)}
.notification-popover[hidden]{display:none}
.notification-popover>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 16px 12px;background:#131313}
.notification-popover h3{margin:0;font-size:16px;line-height:20px;font-weight:600}
.notification-popover header p{margin:8px 0 0;color:#71717a;font-size:12px;line-height:15px}
.notification-popover header p b{color:#a1a1aa;font-weight:400}
.notification-popover header form{margin:0}.notification-popover header button{padding:0;border:0;background:none;color:#b8b8b8;font-size:12px;line-height:20px;white-space:nowrap}
.notification-preview-list{overflow:auto;max-height:330px}
.notification-preview-list article{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) 8px;gap:12px;padding:14px 16px;border-bottom:1px solid #1a1a1a}
.notification-preview-icon{display:grid;place-items:center;width:30px;height:30px;border:1px solid #22222c;border-radius:50%;color:#e4e4e7;font-size:15px}
.notification-preview-list article div{min-width:0}.notification-preview-list article b{display:block;font-size:14px;line-height:18px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-preview-list article small{display:block;margin-top:2px;color:#71717a;font-size:10px}.notification-preview-list article p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:8px 0 0;color:#a1a1aa;font-size:12px;line-height:18px}.notification-preview-list article i{align-self:center;width:8px;height:8px;border-radius:50%;background:#fc5810}
.notification-preview-empty{margin:0;padding:28px 16px;text-align:center;color:#71717a;font-size:13px}
.notification-see-all{display:grid;place-items:center;height:50px;background:#171717;color:#fff;font-size:14px;font-weight:500}
.notification-see-all:hover{background:#202020}
@media(max-width:900px){body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .notification-popover{position:fixed;top:66px;right:16px;width:306px;max-width:calc(100vw - 74px)}}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]){background:linear-gradient(180deg,#000000 0%,#050507 45%,#0c0c11 100%)}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .app-main{padding-top:24px;background:linear-gradient(180deg,#000000 0%,#050507 45%,#0c0c11 100%)}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .page-head{margin:0 0 20px}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .page-head h1{font-size:20px;line-height:28px;font-weight:500;letter-spacing:-.02em;margin:8px 0 0;color:#fff}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-rank-pill{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:4px 8px;gap:6px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:linear-gradient(#000 58%,#311401 128%);box-shadow:inset 0 0 4px rgba(176,156,118,.5);font-size:12px;line-height:16.8px;color:#ddd}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-rank-pill i{font-size:9px;color:#9b632f;font-style:normal}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 20px}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-metrics article{position:relative;height:89px;padding:12px;border-radius:12px;border:1px solid transparent;background:#030303;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-metrics .metric-1{grid-column:1/-1;height:176px;padding:24px 20px;background:linear-gradient(135deg,#171717,#0a0a0e);border-color:#1c1c1c}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-metrics .metric-2{background:linear-gradient(180deg,#030303 55%,#001d08);border-color:#102416}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-metrics .metric-3{background:linear-gradient(180deg,#030303 55%,#1b0800);border-color:#28150d}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-metrics .metric-4{background:linear-gradient(180deg,#030303 55%,#00121e);border-color:#0b2534}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-metrics article>span{font-size:12px;line-height:12px;font-weight:500;color:#bbb}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-metrics .metric-1>span{font-size:16px;line-height:20px}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-metrics article>strong{font-size:16px;line-height:20px;font-weight:500;margin:0;color:#fff;overflow:visible}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-metrics .metric-1>strong{font-size:30px;line-height:36px;font-weight:400}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-metrics .metric-2>strong{color:#45ff72}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-metrics .metric-3>strong{color:#ff2e6a}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-metrics .metric-4>strong{color:#ff7fb0}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-metrics article em{position:absolute;left:30px;bottom:12px;color:inherit;font-size:10px;line-height:20px;font-style:normal}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-metrics .metric-3 em{color:#ff2e6a}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-metrics .metric-4 em{color:#ff7fb0}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .metric-info{display:inline-grid;place-items:center;width:14px;height:14px;border:1px solid #999;border-radius:50%;font-size:9px;font-style:normal;margin-left:4px}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-videos{padding:20px;background:linear-gradient(#0a0a0e,#0c0c11);border:1px solid #1a1a1a;border-radius:12px;box-shadow:none;display:flex;flex-direction:column;gap:20px}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .video-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .video-head h2{font-size:18px;line-height:28px;font-weight:500;margin:0;color:#fff}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) details summary{list-style:none}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) details summary::-webkit-details-marker{display:none}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .refresh-control{position:relative;width:280px}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .refresh-control>summary{height:38px;padding:8px 12px;border:1px solid #22222c;border-radius:20px;background:#0c0c11;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;line-height:20px;color:#b8b8b8}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .refresh-control>summary>b{color:#ffd52f;font-size:22px;font-weight:400}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .refresh-control>summary>span{flex:1;text-align:center;white-space:nowrap}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .refresh-control>summary strong{color:#fff;font-weight:500}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .refresh-control>summary>i{font-style:normal;color:#b8b8b8}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .refresh-popover{position:absolute;z-index:8;top:46px;left:0;width:280px;padding:14px;border:1px solid #22222c;border-radius:12px;background:#0c0c11;box-shadow:0 14px 35px #000;color:#b8b8b8;font-size:12px;line-height:17px}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .refresh-popover p{margin:0 0 10px}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .refresh-popover a{color:#fff;text-decoration:underline}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .refresh-popover small{display:block;margin-top:12px}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .refresh-popover>strong{display:block;color:#fff;font-size:16px}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .submission-tabs{display:flex;align-items:center;gap:32px;overflow-x:auto;overflow-y:hidden;padding-top:4px;margin:0}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .submission-tabs button{position:relative;flex:0 0 auto;border:0;background:transparent;color:#555;font-size:14px;line-height:20px;font-weight:500;padding:2px 12px 12px;border-radius:0}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .submission-tabs button.active{color:#fff}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .submission-tabs button.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:12px;background:linear-gradient(to top,rgba(255,46,106,.46),transparent);border-bottom:1px solid #ff2e6a}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .video-rule{height:1px;background:#1a1a1a;margin-top:-21px}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .video-filters{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .video-select{position:relative}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .video-select>summary{height:38px;padding:8px 12px;border:1px solid #1a1a1a;border-radius:10px;background:#0c0c11;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;color:#fff;font-size:14px;font-weight:500}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .video-select>summary i{font-style:normal;color:#b8b8b8}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .video-select:first-child>summary{width:151px}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .video-select:nth-child(2)>summary{width:124px}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .video-select>div{position:absolute;z-index:7;top:44px;left:0;min-width:190px;padding:6px;border:1px solid #22222c;border-radius:10px;background:#0c0c11;box-shadow:0 14px 35px #000}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .video-select button{display:block;width:100%;padding:8px 10px;border:0;border-radius:7px;background:transparent;color:#fff;text-align:left;font-size:13px}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .video-select button:hover{background:#1a1a1a}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .video-empty{min-height:76px;border:1px dashed #1a1a1a;border-radius:10px;display:grid;place-items:center;color:#b8b8b8;font-size:14px;line-height:20px;text-align:center}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-active-campaigns{margin-top:20px}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-active-campaigns>h2{font-size:16px;line-height:24px;font-weight:500;margin:0 0 20px;color:#e6e6e6}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-filter-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 20px;position:relative}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-filter-row::-webkit-scrollbar{display:none}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cfilter{position:relative;flex:0 0 109px}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cfilter>summary{height:36px;padding:0 12px;border:1px solid #2a2430;border-radius:10px;background:#0c0c11;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;color:#fff;font-size:12px;white-space:nowrap}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cfilter[open]>summary{border-color:#ff2e6a;box-shadow:0 0 0 2px rgba(255,46,106,.10)}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cfilter>summary i{font-style:normal;color:#ff7fb0;font-size:14px}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cfilter>div{position:fixed;z-index:120;min-width:120px;width:max-content;max-width:calc(100vw - 40px);padding:6px;border:1px solid #22222c;border-radius:10px;background:#0c0c11;box-shadow:0 14px 35px #000}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cfilter:last-child>div{left:auto!important;right:8px!important}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cfilter :is(a,button){display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:#fff;font-size:14px;line-height:20px;text-align:left;white-space:nowrap}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cfilter :is(a,button):hover,body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cfilter :is(a,button).on:not(.check){background:#12233d}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cfilter .check b{font-weight:400;color:#ff7fb0;width:16px;text-align:center}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cfilter .check em{margin-left:auto;font-style:normal;color:#ff2e6a;opacity:0}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cfilter .check.on em{opacity:1}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-campaign-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-campaign-card{display:flex;flex-direction:column;overflow:hidden;color:inherit;border-radius:6px;background:#000;outline:.5px solid #1a1a1a;text-decoration:none;transition:.3s}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-campaign-card:hover{outline-color:#333;transform:scale(1.01);filter:brightness(1.1)}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .ccover{position:relative;aspect-ratio:16/9;background:#111}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .ccover.c0{background:linear-gradient(135deg,#2b2b2b,#0a0a0e)}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .ccover.c1{background:linear-gradient(135deg,#3a1d0e,#0a0a0e)}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .ccover.c2{background:linear-gradient(135deg,#0e2a3a,#0a0a0e)}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .ccover.c3{background:linear-gradient(135deg,#25123a,#0a0a0e)}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .ccover:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.6) 40%,#000)}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cbadge{position:absolute;z-index:1;top:6px;right:6px;padding:2px 6px;border-radius:999px;background:rgba(0,0,0,.6);outline:.5px solid rgba(255,255,255,.1);color:#b8b8b8;font-size:7px;line-height:10px}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cbody{padding:8px 8px 12px;display:flex;flex-direction:column;gap:12px;margin-top:-1px;background:#000}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cbrand{display:flex;justify-content:space-between;align-items:center;gap:6px;height:14px}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cbrand span{display:flex;align-items:center;gap:6px;min-width:0;font-size:10px;line-height:12px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cbrand span i{flex:0 0 12px;width:12px;height:12px;border-radius:50%;background:#18181b;border:.3px solid #27272a}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cbrand em{flex:0 0 auto;padding:2px 6px;border-radius:999px;background:linear-gradient(#000,#262626);outline:.5px solid rgba(255,255,255,.1);color:#b8b8b8;font-size:7px;line-height:9.8px;font-style:normal;text-transform:uppercase}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-campaign-card h3{margin:0 0 -8px;font-size:12px;line-height:12px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .crate{display:flex;align-items:center;gap:4px;margin-top:0}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .crate b{font-size:12px;line-height:16px;font-weight:700;color:#fff}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .crate small{font-size:8px;line-height:9.3px;color:#b8b8b8}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cmeta{display:flex;align-items:center;gap:4px;height:14px;margin-top:-4px;overflow:hidden}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cplat{font-size:9px;color:#b8b8b8;letter-spacing:2px}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cmeta em,body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cmeta small{padding:2px 6px;border-radius:999px;background:#0c0c11;outline:.5px solid rgba(255,255,255,.1);color:#b8b8b8;font-size:7px;line-height:9.8px;font-style:normal;text-transform:uppercase;white-space:nowrap}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cmeta small{margin-left:auto}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cbudget{display:flex;justify-content:space-between;font-size:8px;line-height:9.3px;color:#b8b8b8;margin-top:0}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cbudget b{color:#fff;font-weight:400}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cbar{height:4px;border-radius:999px;background:#172039;margin-top:-8px;overflow:hidden}body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cbar i{display:block;height:100%;background:linear-gradient(90deg,#a3059b,#ff2e6a);border-radius:999px}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .cjoin{height:36px;border-radius:8px;background:linear-gradient(110deg,#a3059b,#ff2e6a);outline:1px solid #ff7fb0;box-shadow:inset 0 4px 5.5px rgba(255,255,255,.15),inset 0 -3px 5.5px rgba(0,0,0,.25),0 7px 18px rgba(8,121,201,.18);display:grid;place-items:center;color:#fff;font-size:11px;font-weight:500;margin-top:-4px}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .campaign-empty{grid-column:1/-1;min-height:76px;border:1px dashed #1a1a1a;border-radius:10px;display:grid;place-items:center;color:#b8b8b8;font-size:14px;margin:0}
.learning-dialog{width:min(360px,calc(100% - 28px));border:1px solid #37394d;border-radius:10px;padding:10px;background:#090a12;color:#fff;text-align:center}.learning-dialog::backdrop{background:rgba(0,0,0,.8)}.learning-visual{height:120px;border-radius:8px;background:radial-gradient(circle at 50% 100%,#39200c,#05070c 65%);display:grid;place-content:center}.learning-visual small{font-size:.55rem}.learning-visual b{font-size:2rem}.learning-dialog h2{font-size:1rem;margin:12px 0 5px}.learning-dialog p{font-size:.72rem;color:#b2b5c2;line-height:1.45;margin:0 auto 12px;max-width:270px}.learning-dialog>div:last-child{display:grid;grid-template-columns:1fr 2fr;gap:7px}.learning-dialog .btn{font-size:.7rem;padding:8px}
@media(min-width:901px){body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-campaign-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .app-main{margin-top:77px}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .page-head,body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-metrics,body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-videos,body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .clipper-active-campaigns{width:calc(100% - 10px)}
}

/* Clipper Campaigns — matched to observed reference */
body[data-path="/clipper/campaigns"] .app-main{padding-left:16px;padding-right:16px;padding-bottom:48px}
body[data-path="/clipper/campaigns"] .campaign-featured{position:relative;height:498px;margin:-24px -16px 24px;overflow:hidden;background:#0c0c11}
body[data-path="/clipper/campaigns"] .campaign-featured .featured-image{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.15)),radial-gradient(circle at 75% 28%,#67492c 0%,#211b18 30%,#060606 72%)}
body[data-path="/clipper/campaigns"] .campaign-featured .featured-image:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 48%,#000 94%)}
body[data-path="/clipper/campaigns"] .campaign-featured .featured-image>span{display:none}
body[data-path="/clipper/campaigns"] .featured-copy{position:absolute;z-index:2;left:16px;right:16px;bottom:44px;color:#fff}
body[data-path="/clipper/campaigns"] .featured-copy>small{color:#ff2e6a;font-size:10px;line-height:14px;font-weight:600}
body[data-path="/clipper/campaigns"] .featured-copy h1{max-width:320px;margin:5px 0 8px;font-size:20px;line-height:24px;font-weight:500;letter-spacing:-.02em}
body[data-path="/clipper/campaigns"] .featured-copy p{margin:0 0 17px;color:#b8b8b8;font-size:10px;text-transform:none}.featured-copy p i{margin:0 6px;color:#666}
body[data-path="/clipper/campaigns"] .featured-copy>div{display:flex;align-items:baseline;gap:5px;margin-bottom:13px}.featured-copy>div b{font-size:20px}.featured-copy>div span{color:#b8b8b8;font-size:10px}
body[data-path="/clipper/campaigns"] .featured-copy>a{height:36px;border-radius:7px;background:linear-gradient(110deg,#a3059b,#ff2e6a);outline:1px solid #ff7fb0;box-shadow:inset 0 3px 4px rgba(255,255,255,.14),0 8px 20px rgba(8,121,201,.2);display:grid;place-items:center;color:#fff;font-size:11px}
body[data-path="/clipper/campaigns"] .campaign-featured>nav{position:absolute;z-index:3;left:0;right:0;bottom:15px;display:flex;justify-content:center;gap:6px}.campaign-featured>nav i{width:8px;height:3px;border-radius:9px;background:#2a2430}.campaign-featured>nav i.on{width:22px;background:#ff2e6a}
body[data-path="/clipper/campaigns"] .campaign-explore h2{margin:0 0 16px;font-size:16px;line-height:24px;font-weight:500}
body[data-path="/clipper/campaigns"] .campaign-search{position:relative;height:38px;margin-bottom:14px}.campaign-search span{position:absolute;z-index:1;left:12px;top:7px;color:#8b8b8b;font-size:17px}.campaign-search input{height:38px;padding:8px 12px 8px 38px;border:1px solid #1a1a1a;border-radius:9px;background:#0c0c11;color:#fff;font-size:12px}
body[data-path="/clipper/campaigns"] .clipper-filter-row{margin-bottom:16px}
body[data-path="/clipper/campaigns"] .campaign-empty{grid-column:1/-1;min-height:110px;border:1px dashed #252525;border-radius:10px;display:grid;place-content:center;text-align:center;color:#777}.campaign-empty b{color:#ddd;font-size:13px}.campaign-empty span{font-size:11px;margin-top:5px}
@media(min-width:901px){body[data-path="/clipper/campaigns"] .app-main{padding-left:clamp(24px,3vw,52px);padding-right:clamp(24px,3vw,52px)}body[data-path="/clipper/campaigns"] .campaign-featured{height:430px;margin:0 0 32px;border-radius:14px}.campaign-featured .featured-copy{max-width:520px;left:36px;bottom:45px}body[data-path="/clipper/campaigns"] .clipper-campaign-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Clipper analytics — matched to observed mobile reference, CMEDIA palette */
body[data-path="/clipper/analytics"]{background:linear-gradient(180deg,#000000,#111027)}
body[data-path="/clipper/analytics"] .app-main{padding:24px 16px 42px;background:linear-gradient(180deg,#000000,#111027)}
.clipper-analytics{display:flex;flex-direction:column;gap:24px;max-width:1180px;margin:auto}.analytics-title{height:38px;padding:2px 6px;display:flex;align-items:center;justify-content:space-between}.analytics-title h1{margin:0;font-size:20px;line-height:28px;font-weight:500}.analytics-title>button{width:34px;height:34px;border:1px solid #2a2430;border-radius:10px;background:#0c0c11;color:#ff7fb0;font-size:20px}
.analytics-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.analytics-stats article{height:89px;padding:13px;border:1px solid #2a2430;border-radius:12px;background:linear-gradient(180deg,#0c0c11,#080d1d);display:flex;flex-direction:column;justify-content:space-between;min-width:0}.analytics-stats .analytics-main-stat{grid-column:1/-1;height:176px;padding:24px 20px;background:linear-gradient(170deg,#0a0510,#080408 68%,#1a0d18);border-color:#3a2030}.analytics-stats span{color:#bbb;font-size:12px;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.analytics-stats .analytics-main-stat span{font-size:16px;line-height:24px}.analytics-stats span i{display:inline-grid;place-items:center;width:14px;height:14px;margin-left:4px;border:1px solid #57728d;border-radius:50%;font-size:9px;font-style:normal}.analytics-stats strong{color:#fff;font-size:24px;line-height:28px}.analytics-stats .analytics-main-stat strong{font-size:48px;line-height:52px;color:#ff7fb0}.analytics-stats small{color:#ff7fb0;font-size:12px}
.analytics-chart-card{min-height:392px;padding:16px;border:1px solid #2a2430;border-radius:12px;background:linear-gradient(#071225,#050913);display:flex;flex-direction:column;gap:20px}.analytics-chart-card>header{display:flex;flex-direction:column;gap:16px}.analytics-chart-card h2{margin:0;font-size:18px;line-height:28px;font-weight:500}.analytics-chart-card header small{color:#ff7fb0;font-size:12px}.analytics-controls{display:flex;align-items:center;justify-content:space-between;gap:10px}.analytics-switch{display:flex}.analytics-switch button{height:28px;padding:4px 12px;border:0;border-radius:4px;background:transparent;color:#9fa6b8;font-size:14px}.analytics-switch button.active{background:linear-gradient(105deg,#a3059b,#ff2e6a);color:#fff}.analytics-range{position:relative}.analytics-range summary{width:158px;height:40px;padding:10px 12px;border:1px solid #2a2430;border-radius:10px;background:#0c0c11;display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}.analytics-range summary span{color:#ff7fb0}.analytics-range summary b{flex:1;font-weight:500;white-space:nowrap}.analytics-range summary i{font-style:normal}.analytics-range>div{position:absolute;z-index:20;top:46px;right:0;width:158px;padding:6px;border:1px solid #2a2430;border-radius:10px;background:#0c0c11;box-shadow:0 16px 35px #000}.analytics-range button{display:block;width:100%;padding:9px;border:0;border-radius:7px;background:transparent;color:#dce7f5;text-align:left;font-size:12px}.analytics-range button:hover,.analytics-range button.active{background:#123354;color:#ff7fb0}
.analytics-plot{height:256px;display:grid;grid-template-columns:28px 1fr;gap:8px}.y-axis{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;padding-bottom:22px;color:#8a8490;font-size:9px}.plot-area{position:relative;height:234px}.plot-area>i{display:block;position:absolute;left:0;right:0;height:1px;background:#1a2940}.plot-area>i:nth-child(1){top:0}.plot-area>i:nth-child(2){top:20%}.plot-area>i:nth-child(3){top:40%}.plot-area>i:nth-child(4){top:60%}.plot-area>i:nth-child(5){top:80%}.plot-area>i:nth-child(6){top:100%}.plot-area svg{position:absolute;inset:0 0 22px;width:100%;height:212px}.plot-area .area{fill:url(#chartFill)}.plot-area .line{fill:none;stroke:#ff2e6a;stroke-width:2}.x-axis{position:absolute;left:0;right:0;bottom:-2px;display:flex;justify-content:space-between;color:#8a8490;font-size:8px}
@media(min-width:901px){body[data-path="/clipper/analytics"] .app-main{padding:24px clamp(24px,3vw,52px)}.analytics-stats{grid-template-columns:repeat(4,1fr)}.analytics-stats .analytics-main-stat{grid-column:auto;height:192px}.analytics-stats article{height:192px;padding:24px}.analytics-chart-card>header{flex-direction:row;align-items:center;justify-content:space-between}.analytics-controls{min-width:390px}.analytics-plot{height:320px}.plot-area{height:298px}.plot-area svg{height:276px}.analytics-chart-card{min-height:480px;padding:24px}}
.analytics-title>button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.analytics-stats span{display:flex;align-items:center;gap:4px}.analytics-stats span>svg{width:12px;height:12px;flex:0 0 12px;fill:#bbb;stroke:none}.analytics-stats .analytics-main-stat span>svg{width:18px;height:18px;flex-basis:18px;fill:none;stroke:#ff7fb0;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.analytics-range summary span,.analytics-range summary i{display:grid;place-items:center;flex:0 0 auto}.analytics-range summary span svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.analytics-range summary i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Clipper earnings — reference layout with CMEDIA accents */
body[data-path="/clipper/earnings"]{background:linear-gradient(180deg,#000000,#111027)}body[data-path="/clipper/earnings"] .app-main{padding:24px 16px 48px;background:linear-gradient(180deg,#000000,#111027)}.clipper-earnings{max-width:1180px;margin:auto;display:flex;flex-direction:column;gap:24px}.earnings-title{height:34px;display:flex;align-items:center;justify-content:space-between}.earnings-title h1{margin:0;font-size:20px;line-height:28px;font-weight:500}.earnings-title>div{display:flex;gap:10px}.earning-export,.earning-withdraw{height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:7px;color:#fff}.earning-export{width:34px;border:1px solid #2a2430;background:#0c0c11}.earning-export span{display:none}.earning-export svg,.earning-withdraw svg{width:16px;height:16px;fill:currentColor}.earning-withdraw{padding:0 12px;border:1px solid #ff7fb0;background:linear-gradient(105deg,#a3059b,#ff2e6a);font-size:14px;font-weight:500}.earning-withdraw svg{display:none}.earning-stats{display:flex;flex-direction:column;gap:12px}.earning-stats article{height:89px;padding:14px;border:1px solid #2a2430;border-radius:12px;background:linear-gradient(180deg,#0c0c11,#080d1d);display:flex;flex-direction:column;justify-content:space-between}.earning-stats .earning-main{height:176px;padding:24px 20px;background:linear-gradient(170deg,#0a0510,#080408 68%,#1a0d18);border-color:#3a2030}.earning-stats span{color:#bbb;font-size:12px}.earning-main span{font-size:16px}.earning-stats strong{font-size:24px}.earning-main strong{font-size:48px;line-height:52px;color:#ff7fb0}.earning-stats article:not(.earning-main){width:calc(50% - 5px)}.earning-stats article:nth-child(3){align-self:flex-end;margin-top:-101px}.earning-chart-card,.earning-activity,.payment-methods{padding:16px;border:1px solid #2a2430;border-radius:12px;background:linear-gradient(#071225,#050913)}.earning-chart-card{height:392px;display:flex;flex-direction:column;gap:20px}.earning-chart-card>header{display:flex;flex-direction:column;gap:16px}.earning-chart-card h2,.earning-activity h2,.payment-methods h2{margin:0;font-size:18px;font-weight:500}.earning-chart-card small{color:#ff7fb0}.earning-controls{display:flex;align-items:center;justify-content:space-between;gap:8px}.earning-switch{display:flex}.earning-switch button{height:28px;padding:4px 12px;border:0;border-radius:4px;background:transparent;color:#9fa6b8;font-size:14px}.earning-switch button.active{background:linear-gradient(105deg,#a3059b,#ff2e6a);color:white}.earning-range{position:relative}.earning-range summary{width:158px;height:40px;padding:10px 12px;border:1px solid #2a2430;border-radius:10px;background:#0c0c11;display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}.earning-range summary span,.earning-range summary i{display:grid;place-items:center;color:#ff7fb0}.earning-range summary b{flex:1;font-weight:500;white-space:nowrap}.earning-range svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.earning-range summary i svg{width:20px;height:20px}.earning-range>div{position:absolute;z-index:20;top:46px;right:0;width:158px;padding:6px;border:1px solid #2a2430;border-radius:10px;background:#0c0c11}.earning-range>div button{display:block;width:100%;padding:9px;border:0;border-radius:7px;background:transparent;color:#dce7f5;text-align:left}.earning-range>div button.active{background:#123354;color:#ff7fb0}.earning-plot{height:256px;display:grid;grid-template-columns:43px 1fr;gap:7px}.money-y{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;padding-bottom:22px;color:#8a8490;font-size:9px}.money-plot{position:relative;height:234px}.money-plot>i{position:absolute;left:0;right:0;height:1px;background:#1a2940}.money-plot>i:nth-child(1){top:0}.money-plot>i:nth-child(2){top:25%}.money-plot>i:nth-child(3){top:50%}.money-plot>i:nth-child(4){top:75%}.money-plot>i:nth-child(5){top:100%}.money-plot svg{position:absolute;inset:0 0 22px;width:100%;height:212px}.money-plot .area{fill:url(#earningFill)}.money-plot .line{fill:none;stroke:#ff2e6a;stroke-width:2}.money-x{position:absolute;left:0;right:0;bottom:-2px;display:flex;justify-content:space-between;color:#8a8490;font-size:8px}.earning-activity{min-height:477px;display:flex;flex-direction:column;gap:20px;background:linear-gradient(#071225,#0b1323)}.activity-tabs{display:flex;justify-content:space-between;border-bottom:1px solid #18253a}.activity-tabs button{position:relative;padding:0 12px 12px;border:0;background:transparent;color:#778094;font-size:16px}.activity-tabs button.active{color:#fff}.activity-tabs button.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#ff2e6a;box-shadow:0 -5px 14px #3a2030}.activity-status{display:flex;gap:12px}.activity-status button{padding:8px 16px;border:1px solid #2a2430;border-radius:20px;background:#0c0c11;color:#b8b8b8;font-size:16px}.activity-status button.active{border-color:#ff2e6a;color:#ff7fb0;background:#102a43}.activity-list{min-height:280px}.activity-list article{display:none;padding:14px 0;border-bottom:1px solid #1b2940;grid-template-columns:1fr auto;gap:3px}.activity-list article.show{display:grid}.activity-list article small{color:#7f8aa1}.activity-empty{height:280px;display:grid;place-items:center;color:#a9b1bf;font-size:14px;text-align:center}.payment-methods{height:320px;display:flex;flex-direction:column;gap:20px}.payment-empty{flex:1;display:grid;place-items:center}.payment-empty button{width:284px;height:72px;padding:12px 30px;border:1px solid #2a2430;border-radius:8px;background:linear-gradient(#071225,#0c0c11);color:#fff;font-size:16px;font-weight:500;box-shadow:0 11px 22px #0008;display:flex;align-items:center;justify-content:center;gap:8px}.payment-empty svg{width:20px;height:20px;fill:none;stroke:#ff2e6a;stroke-width:2.5;stroke-linecap:round}.dialog-card{position:relative;min-width:min(420px,calc(100vw - 32px));background:#0a0510;border:1px solid #2a2430;color:#fff}.dialog-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#9facbd;font-size:24px}dialog{border:0;padding:0;background:transparent}dialog::backdrop{background:#01040bd9}
@media(min-width:901px){body[data-path="/clipper/earnings"] .app-main{padding:24px clamp(24px,3vw,52px)}.earnings-title{height:44px}.earning-export{width:auto;padding:0 16px}.earning-export span{display:inline}.earning-withdraw{height:44px;padding:0 32px;font-size:16px}.earning-withdraw svg{display:block;width:20px;height:20px}.earning-stats{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}.earning-stats article,.earning-stats .earning-main{width:auto!important;height:176px;margin:0!important;padding:24px}.earning-chart-card{height:460px;padding:20px}.earning-chart-card>header{flex-direction:row;align-items:center;justify-content:space-between}.earning-controls{min-width:390px}.earning-plot{height:300px}.money-plot{height:278px}.money-plot svg{height:256px}.earning-activity{min-height:380px;padding:20px}.activity-tabs{justify-content:flex-start;gap:40px}.payment-methods{height:260px;padding:20px}}
/* Clipper earnings */
body[data-path="/clipper/earnings"]{background:linear-gradient(180deg,#000000,#111027)}body[data-path="/clipper/earnings"] .app-main{padding:24px 16px 42px;background:linear-gradient(180deg,#000000,#111027)}.clipper-earnings{max-width:1180px;margin:auto;display:flex;flex-direction:column;gap:24px}.earnings-title{display:flex;align-items:center;justify-content:space-between;height:34px}.earnings-title h1{margin:0;font-size:20px;font-weight:500}.earnings-title>div{display:flex;gap:10px}.earnings-title button{height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center}.earning-export{width:34px;border:1px solid #2a2430;background:#090f20;color:#ff7fb0}.earning-export svg{width:17px;height:17px;fill:currentColor}.earning-export span{display:none}.earning-withdraw{padding:0 13px;border:1px solid #ff2e6a;background:linear-gradient(105deg,#a3059b,#ff2e6a);color:#fff;font-weight:600}.earning-withdraw svg{display:none;width:20px;height:20px;fill:currentColor}.earning-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px}.earning-stats article{height:89px;padding:13px;border:1px solid #2a2430;border-radius:12px;background:linear-gradient(180deg,#0c0c11,#080d1d);display:flex;flex-direction:column;justify-content:space-between}.earning-stats .earning-main{grid-column:1/-1;height:176px;padding:24px 20px;background:linear-gradient(145deg,#0a0510,#080408 65%,#1a0d18);border-color:#3a2030}.earning-stats span{color:#bbb;font-size:12px}.earning-stats .earning-main span{font-size:16px}.earning-stats strong{font-size:24px}.earning-stats .earning-main strong{font-size:48px;color:#ff7fb0}.earning-chart-card,.earning-activity,.payment-methods{padding:16px;border:1px solid #2a2430;border-radius:12px;background:linear-gradient(180deg,#071225,#050913)}.earning-chart-card{height:392px;display:flex;flex-direction:column;gap:20px}.earning-chart-card>header{display:flex;flex-direction:column;gap:16px}.earning-chart-card h2,.earning-activity h2,.payment-methods h2{margin:0;font-size:18px;font-weight:500}.earning-chart-card header small{font-size:12px;color:#ff7fb0}.earning-controls{display:flex;align-items:center;justify-content:space-between;gap:10px}.earning-switch{display:flex}.earning-switch button{height:28px;padding:4px 12px;border:0;border-radius:4px;background:transparent;color:#9fa6b8}.earning-switch button.active{background:linear-gradient(105deg,#a3059b,#ff2e6a);color:#fff}.earning-range{position:relative}.earning-range summary{width:158px;height:40px;padding:10px 12px;border:1px solid #2a2430;border-radius:10px;background:#0c0c11;display:flex;align-items:center;gap:8px;cursor:pointer}.earning-range summary b{flex:1;font-size:14px;font-weight:500;white-space:nowrap}.earning-range summary span,.earning-range summary i{display:grid;place-items:center;color:#ff7fb0}.earning-range svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.earning-range summary i svg{width:20px;height:20px}.earning-range>div{position:absolute;z-index:20;top:46px;right:0;width:158px;padding:6px;border:1px solid #2a2430;border-radius:10px;background:#0c0c11}.earning-range>div button{display:block;width:100%;padding:9px;border:0;border-radius:7px;background:transparent;color:#dce7f5;text-align:left}.earning-range>div button.active{background:#123354;color:#ff7fb0}.earning-plot{height:256px;display:grid;grid-template-columns:44px 1fr;gap:8px}.money-y{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;padding-bottom:22px;color:#8a8490;font-size:9px}.money-plot{position:relative;height:234px}.money-plot>i{position:absolute;left:0;right:0;height:1px;background:#1a2940}.money-plot>i:nth-child(1){top:0}.money-plot>i:nth-child(2){top:25%}.money-plot>i:nth-child(3){top:50%}.money-plot>i:nth-child(4){top:75%}.money-plot>i:nth-child(5){top:100%}.money-plot svg{position:absolute;inset:0 0 22px;width:100%;height:212px}.money-plot .area{fill:url(#earningFill)}.money-plot .line{fill:none;stroke:#ff2e6a;stroke-width:2}.money-x{position:absolute;left:0;right:0;bottom:-2px;display:flex;justify-content:space-between;color:#8a8490;font-size:8px}.earning-activity{min-height:477px;display:flex;flex-direction:column;gap:20px}.activity-tabs{display:flex;justify-content:space-around;border-bottom:1px solid #202a3e}.activity-tabs button{position:relative;padding:0 12px 12px;border:0;background:transparent;color:#80798a;font-size:16px}.activity-tabs button.active{color:#fff}.activity-tabs button.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#ff2e6a;box-shadow:0 -5px 12px #a3059b}.activity-status{display:flex;gap:12px}.activity-status button{padding:8px 16px;border:1px solid #2a2430;border-radius:20px;background:#0c0c11;color:#b8b8b8}.activity-status button.active{border-color:#3a2030;color:#ff7fb0;background:#1a0d18}.activity-list{min-height:280px;display:flex;flex-direction:column;gap:10px}.activity-list article{padding:12px;border:1px solid #2a2430;border-radius:10px;display:grid;grid-template-columns:1fr auto}.activity-list article small{color:#8a8490}.activity-empty{margin:auto;text-align:center;color:#b8b8b8;font-size:14px}.payment-methods{min-height:320px;display:flex;flex-direction:column;gap:20px}.payment-empty{flex:1;display:grid;place-items:center}.payment-empty button{width:284px;min-height:72px;padding:12px 25px;border:1px solid #2a2430;border-radius:8px;background:linear-gradient(#071225,#0c0c11);color:#fff;font-size:16px;font-weight:500;box-shadow:0 11px 18px #0008}.payment-empty svg{width:20px;height:20px;margin-left:7px;vertical-align:middle;fill:none;stroke:#ff2e6a;stroke-width:2.5;stroke-linecap:round}.dialog-card{position:relative;min-width:min(420px,calc(100vw - 32px));background:#0c0c11;color:#fff}.dialog-close{position:absolute;right:12px;top:10px;border:0;background:none;color:#fff;font-size:26px}
@media(min-width:901px){body[data-path="/clipper/earnings"] .app-main{padding:24px clamp(24px,3vw,52px)}.earnings-title{height:44px}.earning-export{width:auto;padding:0 16px;gap:7px}.earning-export span,.earning-withdraw svg{display:block}.earning-withdraw{height:44px!important;padding:0 28px}.earning-stats{grid-template-columns:2fr 1fr 1fr}.earning-stats .earning-main{grid-column:auto}.earning-stats article,.earning-stats .earning-main{height:176px;padding:24px}.earning-chart-card{height:432px;padding:20px}.earning-chart-card>header{flex-direction:row;align-items:center;justify-content:space-between}.earning-controls{min-width:390px}.earning-plot{height:300px}.money-plot{height:278px}.money-plot svg{height:256px}.earning-activity,.payment-methods{padding:20px}}
/* Clipper Rank & Rewards */
body[data-path="/clipper/rank"]{background:linear-gradient(180deg,#000000,#111027)}body[data-path="/clipper/rank"] .app-main{padding:24px 16px 42px;background:linear-gradient(180deg,#000000,#111027)}.clipper-rank{position:relative;max-width:1180px;margin:auto;display:flex;flex-direction:column;gap:24px}.clipper-rank>h1{margin:0;font-size:20px;font-weight:500}.rank-role{position:absolute;top:44px;left:50%;transform:translateX(-50%);display:flex;padding:3px;border:1px solid #2a2430;border-radius:20px;background:#080d1d}.rank-role button{padding:6px 15px;border:0;border-radius:16px;background:none;color:#6f788b;font-size:11px;font-weight:700;letter-spacing:.8px}.rank-role button.active{background:linear-gradient(105deg,#a3059b,#ff2e6a);color:#fff}.rank-hero{height:296px;padding-top:58px;display:flex;flex-direction:column;align-items:center;gap:20px}.rank-medal{width:142px;height:142px;padding:10px;border-radius:50%;background:conic-gradient(#ff2e6a,#a3059b,#d9f8ff,#ff2e6a);box-shadow:0 0 35px #a3059b77}.rank-medal:before{content:"";position:absolute}.rank-medal span{display:grid;place-items:center;width:100%;height:100%;border:8px solid #000000;border-radius:50%;background:radial-gradient(circle at 40% 30%,#ff2e6a,#a3059b 62%,#092448);font-size:58px;font-weight:900;color:#fff;text-shadow:0 3px 8px #000}.rank-level{text-align:center;display:flex;flex-direction:column;gap:2px}.rank-level small,.rank-level span{color:#ff7fb0}.rank-level strong{font-size:24px}.rank-track{overflow-x:auto;padding-bottom:8px}.rank-track-line,.rank-track-labels{width:680px}.rank-track-line{position:relative;height:24px;display:flex;justify-content:space-between;align-items:center}.rank-track-line:before{content:"";position:absolute;left:10px;right:10px;height:3px;background:#2a2430}.rank-track-line i{position:relative;width:18px;height:18px;border:4px solid #2a2430;border-radius:50%;background:#000000}.rank-track-line i.active{border-color:#ff2e6a;box-shadow:0 0 12px #ff2e6a}.rank-track-labels{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.rank-track-labels article{display:flex;flex-direction:column;align-items:center;text-align:center}.rank-track-labels b{font-size:13px}.rank-track-labels small{height:34px;color:#8a8490;font-size:10px}.rank-track-labels span{font-size:11px;color:#ff7fb0}.rank-review{padding:16px;border:1px solid #2a2430;border-radius:16px;background:linear-gradient(180deg,#071225,#050913);display:flex;align-items:center;justify-content:space-between;gap:10px}.rank-review>div:first-child{display:flex;flex-direction:column}.rank-review b{font-size:13px}.rank-review small{color:#8a8490;font-size:10px}.rank-countdown{display:flex;gap:7px}.rank-countdown strong{min-width:42px;padding:6px;border:1px solid #3a2030;border-radius:8px;background:#1a0d18;text-align:center;color:#ff7fb0;font-size:18px}.rank-countdown small{display:block;font-size:8px;color:#aebed2}.rank-mid-grid{display:grid;gap:24px}.reward-card,.verified-card,.all-ranks{border:1px solid #2a2430;border-radius:16px;background:linear-gradient(180deg,#071225,#050913)}.reward-card{height:124px;padding:20px 24px}.reward-card h2,.verified-card h2,.all-ranks h2{margin:0 0 14px;font-size:16px;font-weight:500}.reward-card>div{display:flex;align-items:flex-end;justify-content:space-between}.reward-card p{margin:0;display:flex;flex-direction:column}.reward-card p:first-child b{color:#ff7fb0}.reward-card p small{color:#8a8490;font-size:9px}.reward-card p strong{font-size:24px}.reward-card p span{font-size:10px}.verified-card{height:170px;padding:16px 16px 32px}.verified-card header,.verified-card>div{display:flex;align-items:center;justify-content:space-between}.verified-card header b{padding:3px 8px;border-radius:10px;background:#1a0d18;color:#ff7fb0;font-size:10px}.verified-card>div{font-size:13px}.verified-card>i{display:block;height:7px;margin:14px 0 5px;border-radius:5px;background:#1d2940;overflow:hidden}.verified-card>i span{display:block;height:100%;background:linear-gradient(90deg,#a3059b,#ff2e6a)}.verified-card>small{color:#8a8490;font-size:9px}.all-ranks{height:303px;padding:16px;overflow:hidden}.all-ranks>div{display:flex;align-items:stretch;gap:12px;width:max-content}.all-ranks article{position:relative;width:126px;height:213px;padding:15px 10px;border:1px solid #2a2430;border-radius:12px;background:#080d1d;display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px}.all-ranks article.current{border-color:#ff2e6a;background:linear-gradient(#1a0d18,#080d1d)}.mini-medal{display:grid;place-items:center;width:42px;height:42px;border:3px solid #3a2030;border-radius:50%;background:#1a0d18;color:#ff7fb0;font-size:20px;font-weight:800}.all-ranks article>b{font-size:12px}.all-ranks article>strong{font-size:20px;color:#ff7fb0}.all-ranks article>small{color:#8490a4;font-size:10px}.all-ranks article>em{margin-top:auto;color:#ff7fb0;font-size:9px;font-style:normal}
@media(min-width:901px){body[data-path="/clipper/rank"] .app-main{padding:24px clamp(24px,3vw,52px)}.rank-role{top:0}.rank-hero{height:330px}.rank-track-line,.rank-track-labels{width:100%}.rank-mid-grid{grid-template-columns:340px 1fr}.all-ranks{height:auto}.all-ranks>div{display:grid;grid-template-columns:repeat(5,1fr);width:100%;gap:16px}.all-ranks article{width:auto}}
.activity-list article[hidden]{display:none!important}
/* Rank mobile alignment correction after live visual comparison */
.rank-head{height:36px;display:flex;align-items:center;justify-content:space-between;gap:10px}.rank-head h1{margin:0;font-size:20px;font-weight:500}.rank-role{position:static;transform:none;flex:0 0 auto}.rank-hero{height:320px;padding-top:28px;gap:16px}.rank-medal{width:194px;height:194px;padding:12px}.rank-level strong i,.verified-card i[data-role-word],.all-ranks i[data-role-word],.verified-card i[data-role-action]{font-style:normal}.rank-track{height:111px;overflow:hidden;padding:0}.rank-track-line,.rank-track-labels{width:100%}.rank-track-line i{width:14px;height:14px;border-width:3px}.rank-track-labels{gap:2px}.rank-track-labels b{font-size:10px;white-space:nowrap}.rank-track-labels small{height:30px;font-size:8px;line-height:11px}.rank-track-labels span{font-size:9px}.rank-review{height:62px}.rank-review>div:first-child{max-width:150px}.rank-countdown strong{min-width:39px}.all-ranks{overflow-x:auto}.all-ranks>div{padding-bottom:4px}.all-ranks article b i{display:block}.earning-plot.growth .line{stroke-dasharray:5 4}.earning-plot.growth .area{opacity:.45}
@media(max-width:900px){body[data-path="/clipper/earnings"] .app-main,body[data-path="/clipper/rank"] .app-main{padding-top:101px}.clipper-rank,.clipper-earnings{margin-top:0}}
@media(min-width:901px){.rank-head{height:44px}.rank-role{position:static;transform:none}.rank-hero{height:330px}.rank-track{height:auto;overflow:visible}.rank-medal{width:194px;height:194px}}
/* Exact rank artwork and compact header from reference */
.rank-head h1{font-size:19px;white-space:nowrap}.rank-medal{width:194px;height:194px;padding:0;background:none;box-shadow:none}.rank-medal img{display:block;width:100%;height:100%;object-fit:contain}.rank-track-line{height:60px}.rank-track-line:before{top:29px}.rank-track-line i,.rank-track-line i.active{width:53px;height:53px;border:0;background:none;box-shadow:none}.rank-track-line i img{display:block;width:100%;height:100%;object-fit:contain;filter:grayscale(.75) brightness(.6)}.rank-track-line i.active img{filter:none}.mini-medal{width:62px;height:70px;border:0;border-radius:0;background:none}.mini-medal img{width:100%;height:100%;object-fit:contain}.all-ranks article.current .mini-medal{filter:drop-shadow(0 0 8px #ff2e6a)}
@media(max-width:400px){.rank-head h1{font-size:18px}.rank-role button{padding:6px 12px}.rank-role{max-width:174px}.rank-track-labels b{font-size:9px}}
@media(max-width:900px){body[data-path="/clipper/rank"] .topbar-crumb{display:none}body[data-path="/clipper/rank"] .topbar{justify-content:flex-end}body[data-path="/clipper/rank"] .mobile-toggle{margin-right:auto}body[data-path="/clipper/rank"] .invite-earn{margin-left:auto}}

/* Rank & Rewards precision pass — reference-aligned */
body[data-path="/clipper/rank"] .reward-card,
body[data-path="/clipper/rank"] .verified-card,
body[data-path="/clipper/rank"] .all-ranks{border-color:#262633;background:linear-gradient(180deg,#0d0d12,#07070b)}
body[data-path="/clipper/rank"] .reward-card{height:124px;padding:18px 20px}
body[data-path="/clipper/rank"] .reward-card h2{display:flex;align-items:center}
body[data-path="/clipper/rank"] .reward-info{width:17px;height:17px;margin-left:5px;padding:0;border:1px solid #74747d;border-radius:50%;background:transparent;color:#aaaab3;font:600 10px/15px serif;vertical-align:2px}
body[data-path="/clipper/rank"] .reward-card>div{display:grid;grid-template-columns:1fr 1fr;align-items:center}
body[data-path="/clipper/rank"] .reward-card p{min-width:0;margin:0;display:flex;flex-direction:column}
body[data-path="/clipper/rank"] .reward-card p+p{padding-left:20px;border-left:1px solid #292933}
body[data-path="/clipper/rank"] .reward-card p:first-child b{color:#f0d89d}
body[data-path="/clipper/rank"] .reward-card p span{font-size:10px;color:#b6b6bd}
body[data-path="/clipper/rank"] .reward-card p strong{font-size:24px;line-height:1.15;color:#fff}
body[data-path="/clipper/rank"] .reward-card p small{color:#777b87;font-size:9px}
body[data-path="/clipper/rank"] .verified-card header b{background:#242019;color:#ead18f}
body[data-path="/clipper/rank"] .verified-card>i{background:#27272f}
body[data-path="/clipper/rank"] .verified-card>i span{background:linear-gradient(90deg,#8e6f2f,#efd994)}
body[data-path="/clipper/rank"] .all-ranks{height:auto;overflow:hidden}
body[data-path="/clipper/rank"] .all-ranks>div{display:flex;align-items:stretch;gap:12px;width:max-content;overflow:visible}
body[data-path="/clipper/rank"] .rank-card{position:relative;width:128px;height:213px;padding:12px;border:1px solid #292933;border-radius:12px;background:#050507;color:#fff;display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;opacity:.62;transition:transform .18s,border-color .18s,opacity .18s,background .18s}
body[data-path="/clipper/rank"] .rank-card:hover,
body[data-path="/clipper/rank"] .rank-card:focus-visible,
body[data-path="/clipper/rank"] .rank-card.selected{transform:translateY(-2px);border-color:#80704b;opacity:1;outline:0}
body[data-path="/clipper/rank"] .rank-card.current{opacity:1;border-color:#5f5337;background:linear-gradient(180deg,#14120d,#070709);box-shadow:0 0 12px #000}
body[data-path="/clipper/rank"] .rank-name{min-height:30px;font-size:12px;line-height:15px}
body[data-path="/clipper/rank"] .rank-name i{display:block;font-style:normal}
body[data-path="/clipper/rank"] .rank-card .mini-medal{display:grid;place-items:center;width:62px;height:70px;border:0;border-radius:0;background:none}
body[data-path="/clipper/rank"] .rank-card .mini-medal img{width:100%;height:100%;object-fit:contain}
body[data-path="/clipper/rank"] .rank-card>strong{font-size:20px;line-height:1;color:#f0d89d}
body[data-path="/clipper/rank"] .rank-card>small{color:#92929c;font-size:10px}
body[data-path="/clipper/rank"] .rank-card>em{margin-top:auto;color:#d7c185;font-size:9px;font-style:normal}
body[data-path="/clipper/rank"] .rank-detail{display:none;margin-top:12px;padding:10px 12px;border:1px solid #292933;border-radius:10px;background:#08080c;font-size:11px}
body[data-path="/clipper/rank"] .rank-detail.visible{display:flex;align-items:center;justify-content:space-between;gap:12px}
body[data-path="/clipper/rank"] .rank-detail strong i{font-style:normal}
body[data-path="/clipper/rank"] .rank-detail span{color:#9696a0;text-align:right}
@media(min-width:901px){body[data-path="/clipper/rank"] .all-ranks>div{display:grid;grid-template-columns:repeat(5,1fr);width:100%;gap:16px}body[data-path="/clipper/rank"] .rank-card{width:auto}}
@media(max-width:420px){body[data-path="/clipper/rank"] .reward-card{padding:16px}body[data-path="/clipper/rank"] .reward-card p+p{padding-left:14px}body[data-path="/clipper/rank"] .rank-detail.visible{align-items:flex-start;flex-direction:column}body[data-path="/clipper/rank"] .rank-detail span{text-align:left}}
/* Rank & Rewards final visual QC */
body[data-path="/clipper/rank"] .clipper-rank:before{content:"";position:absolute;z-index:-1;top:72px;left:50%;width:min(700px,100%);height:430px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(116,69,23,.24),rgba(46,28,17,.1) 40%,transparent 72%);pointer-events:none}
body[data-path="/clipper/rank"] .rank-level small,
body[data-path="/clipper/rank"] .rank-level span{color:#d7bd7c}
body[data-path="/clipper/rank"] .rank-track-line:before{background:#403827}
body[data-path="/clipper/rank"] .rank-track-labels article{line-height:1.3;gap:2px}
body[data-path="/clipper/rank"] .rank-track-labels b{color:#e7e0d3}
body[data-path="/clipper/rank"] .rank-track-labels span{color:#d7bd7c}


body[data-path="/clipper/rank"] .reward-card p strong{color:#f1b24b}
body[data-path="/clipper/rank"] .verified-card>i{height:8px}
body[data-path="/clipper/rank"] .rank-card.current>em{font-weight:700;color:#f3d888}
body[data-path="/clipper/rank"] .all-ranks{position:relative}
body[data-path="/clipper/rank"] .all-ranks:after{content:"Geser untuk melihat semua →";display:none;margin-top:8px;color:#777b87;font-size:9px;text-align:right}
body[data-path="/clipper/rank"] .rank-detail{padding:12px 14px}
@media(max-width:900px){body[data-path="/clipper/rank"] .all-ranks{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#4d432e transparent}body[data-path="/clipper/rank"] .all-ranks:after{display:block;position:sticky;left:0}.rank-track-labels b{font-size:11px!important}.rank-track-labels small{height:34px!important;font-size:9px!important;line-height:13px!important}.rank-track-labels span{font-size:10px!important}.rank-track{height:120px!important}}

/* Corrective parity pass: match the supplied Rank & Rewards reference */
body[data-path="/clipper/rank"]{background:#000}
body[data-path="/clipper/rank"] .app-main{background:linear-gradient(180deg,#000000 0%,#050507 45%,#0c0c11 100%);padding-left:16px;padding-right:16px}
body[data-path="/clipper/rank"] .topbar{background:#0c0c11;border-bottom-color:#171717}
body[data-path="/clipper/rank"] .invite-earn{border-color:#5a431c;background:linear-gradient(135deg,#020202,#100e09 52%,#3b2c08);color:#ffc928;box-shadow:inset 0 1px 2px rgba(255,255,255,.08)}
body[data-path="/clipper/rank"] .invite-mascot{background:transparent;color:#ffba18}
body[data-path="/clipper/rank"] .clipper-rank{max-width:1180px;gap:24px}
body[data-path="/clipper/rank"] .clipper-rank:before{display:none}
body[data-path="/clipper/rank"] .rank-role{background:#0c0c11;border-color:#2a2929;padding:3px}
body[data-path="/clipper/rank"] .rank-role button.active{background:linear-gradient(#4b4b4b,#22222c);box-shadow:inset 0 0 0 1px #6b6b6b;color:#fff}
body[data-path="/clipper/rank"] .rank-hero{border-bottom:1px solid #171717}
body[data-path="/clipper/rank"] .rank-level small{color:#c9b6c6}
body[data-path="/clipper/rank"] .rank-level span{display:inline-flex;align-self:center;margin-top:6px;padding:7px 11px;border:1px solid #1f1f1f;border-radius:8px;background:#0a0a0e;color:#fff}
body[data-path="/clipper/rank"] .rank-track-line:before{display:none}
body[data-path="/clipper/rank"] .rank-track-line i img{filter:none;opacity:.42}
body[data-path="/clipper/rank"] .rank-track-line i.active img{opacity:1}
body[data-path="/clipper/rank"] .rank-track-labels b,
body[data-path="/clipper/rank"] .rank-track-labels small{display:none}
body[data-path="/clipper/rank"] .rank-track-labels span{color:#777;font-size:11px}
body[data-path="/clipper/rank"] .rank-track-labels article:first-child span{color:#fff}
body[data-path="/clipper/rank"] .rank-review{border-color:#222;background:linear-gradient(#101010,#090909)}
body[data-path="/clipper/rank"] .rank-countdown strong{min-width:36px;padding:0;border:0;border-radius:0;background:transparent;color:#fff;font-size:16px}
body[data-path="/clipper/rank"] .rank-countdown small{color:#bdbdbd;font-size:8px}
body[data-path="/clipper/rank"] .reward-card,
body[data-path="/clipper/rank"] .verified-card,
body[data-path="/clipper/rank"] .all-ranks{border-color:#22222c;background:linear-gradient(180deg,#101010,#090909)}
body[data-path="/clipper/rank"] .reward-card{height:117px;padding:18px 12px}
body[data-path="/clipper/rank"] .reward-card h2{position:absolute;width:calc(50% - 12px);justify-content:center;margin:2px 0 0;font-size:16px}
body[data-path="/clipper/rank"] .reward-card>div{height:100%;grid-template-columns:1fr 1fr;align-items:end}
body[data-path="/clipper/rank"] .reward-card p{align-items:center;text-align:center}
body[data-path="/clipper/rank"] .reward-card p+p{padding-left:12px;border-left:1px solid #292929}
body[data-path="/clipper/rank"] .reward-card p:first-child b{color:#fff;font-size:21px;line-height:1.2}
body[data-path="/clipper/rank"] .reward-card p strong{color:#ff3900;font-size:23px}
body[data-path="/clipper/rank"] .reward-card p span{font-size:16px;color:#fff}
body[data-path="/clipper/rank"] .reward-card p small{margin-top:6px;color:#aaa;font-size:10px}


body[data-path="/clipper/rank"] .rank-card{background:#0c0c11;border-color:#22222c;opacity:.58}
body[data-path="/clipper/rank"] .rank-card.current{background:linear-gradient(#0d0a05,#0a0a0e);border-color:#78622e}
body[data-path="/clipper/rank"] .rank-card>strong{color:#f0d89d}
body[data-path="/clipper/rank"] .all-ranks:after{display:none!important}
body[data-path="/clipper/rank"] .rank-detail{display:none!important}
@media(max-width:900px){
 body[data-path="/clipper/rank"] .app-main{padding-top:88px}
 body[data-path="/clipper/rank"] .clipper-rank{gap:24px}
 body[data-path="/clipper/rank"] .rank-head{height:40px}
 body[data-path="/clipper/rank"] .rank-head h1{font-size:19px}
 body[data-path="/clipper/rank"] .rank-hero{height:352px;padding-top:34px;gap:13px}
 body[data-path="/clipper/rank"] .rank-medal{width:174px;height:174px}
 body[data-path="/clipper/rank"] .rank-level strong{font-size:28px;font-weight:500;color:#b9aaa4}
 body[data-path="/clipper/rank"] .rank-track{height:78px!important;overflow:hidden}
 body[data-path="/clipper/rank"] .rank-track-line{height:51px}
 body[data-path="/clipper/rank"] .rank-track-line i,
 body[data-path="/clipper/rank"] .rank-track-line i.active{width:43px;height:43px}
 body[data-path="/clipper/rank"] .rank-track-labels{margin-top:0}
 body[data-path="/clipper/rank"] .rank-track-labels span{font-size:10px!important}
 body[data-path="/clipper/rank"] .rank-review{height:62px;padding:10px 12px}
 body[data-path="/clipper/rank"] .rank-review>div:first-child{max-width:205px}
 body[data-path="/clipper/rank"] .rank-review b{font-size:12px}
 body[data-path="/clipper/rank"] .rank-review small{font-size:9px}
 body[data-path="/clipper/rank"] .rank-countdown{gap:4px}
 body[data-path="/clipper/rank"] .rank-countdown strong{min-width:32px}
 body[data-path="/clipper/rank"] .rank-mid-grid{gap:24px}
 body[data-path="/clipper/rank"] .all-ranks{padding:16px;overflow-x:auto}
}

/* Admin Operations precision alignment to docs/shots/admin-ops.png */
body:has(.app-main) .admin-campaigns .campaign-cover{
  height: 140px;
  background: linear-gradient(135deg, #1886cb 0%, #0d5c94 100%);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 12px;
  display: flex;
  align-items: flex-start;
}
body:has(.app-main) .admin-campaigns .campaign-cover span{
  background: rgba(255, 255, 255, 0.9);
  color: #0b1120 !important; font-weight: 900 !important;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 6px;
}
body:has(.app-main) .admin-campaigns .campaign-card{
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: none;
}
body:has(.app-main) .admin-campaigns .campaign-card > div:last-child{
  padding: 16px 18px 20px;
}
body:has(.app-main) .admin-campaigns .campaign-card small{
  color: #94a3b8;
  font-size: 0.82rem;
}
body:has(.app-main) .admin-campaigns .campaign-card h3{
  font-size: 1.15rem;
  font-weight: 750;
  color: #fff;
  margin: 6px 0;
}
body:has(.app-main) .admin-campaigns .campaign-card p{
  color: #94a3b8;
  font-size: 0.88rem;
  margin: 0 0 14px;
}
body:has(.app-main) .admin-campaigns .campaign-card .campaign-meta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
body:has(.app-main) .admin-campaigns .campaign-card .campaign-meta b{
  color: #38bdf8;
  font-size: 1.05rem;
  font-weight: 750;
}
body:has(.app-main) .admin-campaigns .campaign-card .campaign-meta b small{
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 500;
}
body:has(.app-main) .admin-campaigns .campaign-card .campaign-meta span{
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
}
body:has(.app-main) .admin-campaigns .campaign-card .btn{
  background: #1992c9;
  color: #fff;
  padding: 8px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.86rem;
  box-shadow: 0 4px 14px rgba(25, 146, 201, 0.35);
  border: 0;
  display: inline-flex;
}

/* Rank Detail Modal — Exact Replica of Konten.com */
.rank-modal-dialog {
  border: 0;
  border-radius: 20px;
  padding: 0;
  background: transparent;
  width: min(420px, calc(100vw - 32px));
  max-height: 90vh;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85);
  color: #fff;
  overflow: visible;
}
.rank-modal-dialog::backdrop {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rank-modal-box {
  position: relative;
  background: linear-gradient(180deg, #0a0a0e 0%, #0c0c11 100%);
  border: 1px solid #22222c;
  border-radius: 20px;
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 88vh;
  overflow-y: auto;
}
.rank-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: 0;
  color: #a1a1aa;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  transition: color 0.15s;
}
.rank-modal-close:hover {
  color: #fff;
}
.rank-modal-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.rank-modal-badge {
  position: relative;
  width: 90px;
  height: 100px;
}
.rank-modal-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.6));
}
.rank-modal-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rank-modal-titles span {
  font-size: 13px;
  color: #a1a1aa;
  font-weight: 500;
}
.rank-modal-titles strong {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}
.rank-modal-bonus {
  text-align: center;
  margin-top: -6px;
}
.rank-modal-bonus span {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(90deg, #ff8400, #ff0004);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  margin-right: 4px;
}
.rank-modal-bonus small {
  font-size: 13px;
  color: #a1a1aa;
}
.rank-modal-hr {
  height: 1px;
  background: #22222c;
  margin: 4px 0;
}
.rank-modal-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.rank-modal-benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rank-benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #e4e4e7;
}
.rank-benefit-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #22c55e;
  color: #000;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}
.rank-modal-syarat-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #22222c;
  border-radius: 14px;
  padding: 16px;
  background: #0d0d0d;
}
.rank-modal-syarat-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rank-syarat-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.rank-syarat-bullet {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #71717a;
  background: #18181b;
  flex-shrink: 0;
  margin-top: 2px;
}
.rank-syarat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rank-syarat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}
.rank-syarat-header small {
  color: #a1a1aa;
  font-size: 11px;
}
.rank-syarat-bar {
  width: 100%;
  height: 6px;
  background: #270d02;
  border-radius: 6px;
  overflow: hidden;
}
.rank-syarat-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff8400, #ff0004);
  border-radius: 6px;
}
.rank-syarat-sub {
  font-size: 11px;
  color: #71717a;
  line-height: 1.4;
}
.rank-syarat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 6px;
  background: #ea580c;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border: 0;
  opacity: 0.5;
  cursor: not-allowed;
  margin-top: 6px;
  width: fit-content;
}

/* =========================================================================
   Leaderboard — Exact Replica of Konten.com
   ========================================================================= */
body[data-path="/clipper/leaderboard"] {
  background: #000;
}
body[data-path="/clipper/leaderboard"] .app-main {
  background:linear-gradient(180deg,#000000 0%,#050507 45%,#0c0c11 100%);
  padding: 24px 16px 64px;
  min-height: 100vh;
}
.clipper-leaderboard {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  color: #fff;
}
/* Period Toggle Pill */
.leaderboard-period-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
.leaderboard-period-pill {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: #0d0d0d;
  border: 1px solid #29241d;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
  gap: 4px;
}
.leaderboard-period-pill button {
  padding: 8px 22px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #a1a1aa;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.leaderboard-period-pill button.active {
  background: linear-gradient(180deg, #d4cfba 0%, #e1d094 50%, #9b8233 100%);
  color: #000;
  font-weight: 750;
  box-shadow: inset -2px -2px 4px rgba(0,0,0,0.2), 0 2px 8px rgba(225,208,148,0.25);
}

/* Header & Timer */
.leaderboard-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.leaderboard-hero h1 {
  margin: 0;
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 900;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #ffffff 30%, #d7c9ad 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.leaderboard-countdown-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.leaderboard-countdown-box > span {
  font-size: 13px;
  color: #a1a1aa;
  font-weight: 500;
}
.leaderboard-timer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.timer-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
}
.timer-segment strong {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.timer-segment small {
  font-size: 10px;
  color: #71717a;
  margin-top: 3px;
}
.timer-sep {
  font-size: 20px;
  font-weight: 700;
  color: #71717a;
  margin-top: -12px;
}

/* Top 3 Podium */
.leaderboard-podium-wrap {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end;
  gap: 10px;
  width: 100%;
  max-width: 680px;
  margin-top: 14px;
}
.podium-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.podium-avatar-wrap {
  margin-bottom: 8px;
}
.podium-avatar-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #c0c0c0, #71717a);
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
}
.podium-avatar-circle.gold-ring {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #ffd700, #b8860b);
  box-shadow: 0 6px 20px rgba(255,215,0,0.3);
}
.podium-avatar-circle.bronze-ring {
  background: linear-gradient(135deg, #cd7f32, #8b4513);
}
.avatar-silhouette {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #3f3f46, #18181b 70%);
  border: 1px solid #000;
}
.podium-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #d4d4d8;
  margin-bottom: 4px;
  white-space: nowrap;
}
.podium-badge i {
  font-style: normal;
  font-size: 11px;
}
.podium-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  margin-bottom: 4px;
}
.rank-1 .podium-name {
  font-size: 15px;
  max-width: 140px;
}
.podium-payout {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.podium-payout small {
  font-size: 10px;
  color: #a1a1aa;
}
.podium-payout strong {
  font-size: 12px;
  font-weight: 800;
  color: #22c55e;
}
.rank-1 .podium-payout strong {
  font-size: 13px;
}
.podium-prize-pill {
  background: #0d0d11;
  border: 1px solid #3f3f46;
  border-radius: 999px;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  margin-bottom: 8px;
  z-index: 2;
}
.podium-prize-pill span {
  font-size: 10px;
  color: #a1a1aa;
}
.podium-prize-pill strong {
  font-size: 11px;
  font-weight: 750;
  color: #e4e4e7;
}
.podium-prize-pill.gold {
  border-color: #856a28;
  background: linear-gradient(180deg, #18140c 0%, #0d0b06 100%);
}
.podium-prize-pill.gold strong {
  color: #fbbf24;
}
.podium-prize-pill.bronze {
  border-color: #633a1e;
}
.podium-prize-pill.bronze strong {
  color: #fca5a5;
}

/* 3D Stands */
.podium-stand {
  width: 100%;
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 14px;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.2), 0 8px 24px rgba(0,0,0,0.8);
  border: 1px solid rgba(255,255,255,0.1);
  border-bottom: 0;
}
.stand-1 {
  height: 140px;
  background: linear-gradient(180deg, #423214 0%, #1f1707 60%, #0d0a03 100%);
  border-color: #92752c;
}
.stand-2 {
  height: 105px;
  background: linear-gradient(180deg, #2d3036 0%, #17181c 60%, #090a0c 100%);
  border-color: #64748b;
}
.stand-3 {
  height: 80px;
  background: linear-gradient(180deg, #382218 0%, #1a0e08 60%, #0a0503 100%);
  border-color: #7c4826;
}
.stand-number {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.25);
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.stand-1 .stand-number {
  color: rgba(251, 191, 36, 0.4);
  font-size: 40px;
}

/* Table Card */
.leaderboard-table-card {
  width: 100%;
  max-width: 780px;
  background: #0d0b0a;
  border: 1px solid #26211d;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,0.7);
  margin-top: -2px;
}
.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
}
.leaderboard-table thead {
  background: #191614;
  border-bottom: 1px solid #2a2420;
}
.leaderboard-table th {
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #a1a1aa;
}
.leaderboard-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #1a1714;
  font-size: 13px;
}
.col-rank {
  width: 60px;
  text-align: center;
}
.col-rank strong {
  font-size: 14px;
  font-weight: 750;
  color: #fff;
}
.col-user {
  text-align: left;
}
.user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mini-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #ff8400, #3a1505 80%);
  border: 1px solid rgba(255,255,255,0.2);
  flex-shrink: 0;
}
.user-cell span {
  font-weight: 600;
  color: #fff;
}
.col-tier {
  text-align: left;
}
.tier-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a1a1aa;
  font-size: 12px;
}
.tier-cell img {
  width: 18px;
  height: 20px;
  object-fit: contain;
}
.col-payout {
  text-align: right;
}
.payout-val {
  color: #22c55e;
  font-weight: 750;
  font-size: 13px;
}
.col-prize {
  text-align: right;
  width: 120px;
}
.prize-val {
  color: #f6b687;
  font-weight: 750;
  font-size: 13px;
}
.no-prize {
  color: #52525b;
}

/* Cutoff Divider */
.cutoff-divider-row td {
  padding: 0;
  border-top: 1px solid #33271c;
  border-bottom: 1px solid #33271c;
  background: linear-gradient(90deg, #16120e 0%, #241a12 50%, #16120e 100%);
}
.cutoff-divider-content {
  padding: 10px 16px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #e4d5b7;
  letter-spacing: 0.02em;
}


/* Top padding on mobile so topbar doesn't cover pill */
@media(max-width: 900px) {
  body[data-path="/clipper/leaderboard"] .app-main {
    padding-top: 88px;
  }
  .leaderboard-period-wrap {
    margin-top: 8px;
  }
}

.cutoff-divider-content {
  padding: 12px 16px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #e4d5b7;
  letter-spacing: 0.02em;
  white-space: normal;
  line-height: 1.4;
}

@media(max-width: 600px) {
  .leaderboard-podium-wrap {
    gap: 6px;
  }
  .podium-avatar-circle {
    width: 44px;
    height: 44px;
  }
  .podium-avatar-circle.gold-ring {
    width: 54px;
    height: 54px;
  }
  .podium-name {
    font-size: 11px;
    max-width: 85px;
  }
  .rank-1 .podium-name {
    font-size: 12px;
    max-width: 100px;
  }
  .podium-payout strong {
    font-size: 11px;
  }
  .podium-prize-pill {
    padding: 3px 8px;
  }
  .podium-prize-pill strong {
    font-size: 10px;
  }
  .stand-number {
    font-size: 26px;
  }
  .stand-1 .stand-number {
    font-size: 32px;
  }
  /* Hide Rank/Tier column on mobile, exact Konten.com behavior */
  .col-tier {
    display: none !important;
  }
  .leaderboard-table {
    table-layout: fixed;
    width: 100%;
  }
  .col-rank {
    width: 44px;
    padding: 12px 6px 12px 12px !important;
  }
  .col-user {
    width: auto;
    padding: 12px 6px !important;
  }
  .user-cell {
    gap: 6px;
  }
  .user-cell span {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mini-avatar {
    width: 24px;
    height: 24px;
  }
  .col-payout {
    width: 95px;
    padding: 12px 6px !important;
  }
  .col-prize {
    width: 85px;
    padding: 12px 12px 12px 6px !important;
  }
  .payout-val, .prize-val {
    font-size: 11.5px;
    white-space: nowrap;
  }
  .leaderboard-table th {
    padding: 10px 8px;
    font-size: 11px;
  }
  .leaderboard-table th.col-user {
    text-align: left;
    padding-right: 12px;
  }
  .leaderboard-table th.col-payout {
    text-align: right;
    padding-left: 12px;
  }
  .leaderboard-table th.col-rank {
    padding-left: 12px;
  }
  .leaderboard-table th.col-prize {
    padding-right: 12px;
  }
}

/* =========================================================================
   LANDING PAGE — Dark Theme (Konten.com visual language)
   Primary: #FC5810 (orange), BG: #090909/#0c0c11, Text: #fff/#b8b8b8
   Font: system (Neue Montreal not available as web font, using Inter fallback)
   ========================================================================= */

/* ---- LP ROOT VARS ---- */
.lp-hero,.lp-section,.lp-cta,.lp-footer,.pub-nav,.lp-marquee{
  --lp-bg:#090909;--lp-bg2:#0c0c11;--lp-bg3:#141414;--lp-text:#fff;
  --lp-muted:#b8b8b8;--lp-accent:#FC5810;--lp-accent2:#ff8400;
  --lp-border:rgba(255,255,255,.08);--lp-glass:rgba(255,255,255,.04);
  --lp-glass2:rgba(255,255,255,.08);--lp-shadow:rgba(0,0,0,.4);
  color:var(--lp-text);font-family:Inter,system-ui,-apple-system,sans-serif;
}

/* ---- SCROLL REVEAL ---- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(.32,.72,0,1),transform .65s cubic-bezier(.32,.72,0,1)}
[data-reveal].revealed{opacity:1;transform:translateY(0)}

/* ---- PUBLIC NAV ---- */
.pub-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:.9rem max(5vw,24px);background:rgba(9,9,9,.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--lp-border)}
.pub-logo{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.15rem;color:#fff;text-decoration:none}
.pub-logo-img{width:28px;height:28px;border-radius:6px}
.pub-links{display:flex;align-items:center;gap:1.6rem}
.pub-links a{color:var(--lp-muted);font-size:.88rem;font-weight:500;text-decoration:none;transition:color .2s}
.pub-links a:hover{color:#fff}
.pub-nav-login{color:var(--lp-muted)!important}
.pub-btn-signup{background:var(--lp-accent);color:#fff!important;padding:.45rem 1.1rem;border-radius:99px;font-weight:700;font-size:.82rem!important;transition:background .2s,transform .15s}
.pub-btn-signup:hover{background:var(--lp-accent2);transform:scale(1.03)}

/* Hamburger */
.pub-hamburger{display:none;border:0;background:none;cursor:pointer;padding:.5rem;flex-direction:column;gap:5px;z-index:101}
.pub-hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .2s}
.pub-hamburger.active span:first-child{transform:rotate(45deg) translate(5px,5px)}
.pub-hamburger.active span:nth-child(2){opacity:0}
.pub-hamburger.active span:last-child{transform:rotate(-45deg) translate(5px,-5px)}

/* ---- LP BUTTONS ---- */
.lp-btn-primary{display:inline-block;background:var(--lp-accent);color:#fff;padding:.75rem 1.8rem;border-radius:99px;font-weight:700;font-size:.92rem;text-decoration:none;transition:background .2s,transform .2s,box-shadow .3s;box-shadow:0 0 0 0 rgba(252,88,16,0)}
.lp-btn-primary:hover{background:var(--lp-accent2);transform:translateY(-2px);box-shadow:0 8px 32px rgba(252,88,16,.3)}
.lp-btn-secondary{display:inline-block;background:var(--lp-glass2);color:#fff;padding:.7rem 1.6rem;border-radius:99px;font-weight:600;font-size:.88rem;text-decoration:none;border:1px solid var(--lp-border);transition:background .2s,border-color .2s}
.lp-btn-secondary:hover{background:var(--lp-glass);border-color:rgba(255,255,255,.2)}
.lp-accent{color:var(--lp-accent)}
.lp-eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--lp-accent);margin-bottom:.6rem}
.lp-center{text-align:center;margin-top:2rem}

/* ---- HERO ---- */
.lp-hero{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;min-height:100vh;padding:7rem max(5vw,24px) 4rem;background:linear-gradient(135deg,#090909 0% 66%,#0c0c11 100%);position:relative;overflow:hidden}
.lp-hero-content{position:relative;z-index:2}
.lp-hero-h1{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.1;letter-spacing:-.04em;font-weight:800;margin:.5rem 0 1.2rem}
.lp-hero-sub{color:var(--lp-muted);font-size:1rem;max-width:460px;line-height:1.6;margin-bottom:1.5rem}
.lp-hero-cta{display:flex;gap:1rem;flex-wrap:wrap}
.lp-hero-stat{margin-top:2rem;display:flex;align-items:baseline;gap:.3rem;flex-wrap:wrap}
.lp-hero-stat b{font-size:2.4rem;font-weight:800;color:var(--lp-accent)}
.lp-hero-stat span{font-size:1.8rem;font-weight:800;color:var(--lp-accent)}
.lp-hero-stat small{display:block;width:100%;color:var(--lp-muted);font-size:.85rem;margin-top:.2rem}

/* Hero visual */
.lp-hero-visual{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center}
.lp-hero-glow{position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(252,88,16,.12) 0,transparent 65%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}

/* Float animation */
@keyframes float-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.float-anim{animation:float-bob 4s ease-in-out infinite}

/* Video cards (hero) */
.lp-vcard{position:absolute;background:var(--lp-bg3);border:1px solid var(--lp-border);border-radius:14px;padding:1rem 1.1rem;width:220px;z-index:3;backdrop-filter:blur(12px);box-shadow:0 12px 40px var(--lp-shadow)}
.lp-vcard-1{top:10%;right:10%}
.lp-vcard-2{bottom:15%;right:25%}
.lp-vcard-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.lp-vcard-av{width:28px;height:28px;border-radius:6px}
.lp-vcard-head b{font-size:.82rem;display:block}
.lp-vcard-head small{font-size:.7rem;color:var(--lp-muted)}
.lp-vcard-row{display:flex;justify-content:space-between;align-items:center;padding:.3rem 0;border-top:1px solid var(--lp-border)}
.lp-vcard-row span{font-size:.72rem;color:var(--lp-muted)}
.lp-vcard-row b{font-size:.82rem}
.lp-payout{color:var(--lp-accent)}

/* Rank float badges (hero) */
.lp-rank-float{position:absolute;display:flex;align-items:center;gap:.6rem;background:var(--lp-bg3);border:1px solid var(--lp-border);border-radius:12px;padding:.6rem .9rem;z-index:3;backdrop-filter:blur(12px);box-shadow:0 8px 28px var(--lp-shadow)}
.lp-rf-1{top:5%;left:5%}
.lp-rf-2{bottom:10%;left:15%}
.lp-rank-float b{font-size:.82rem;display:block}
.lp-rank-float small{font-size:.7rem;color:var(--lp-muted)}

/* ---- SECTIONS ---- */
.lp-section{padding:5rem max(5vw,24px);background:var(--lp-bg);position:relative}
.lp-section-head{margin-bottom:3rem}
.lp-section-head h2{font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.15;letter-spacing:-.03em;font-weight:800}
.lp-section-sub{color:var(--lp-muted);font-size:.95rem;margin-top:.6rem;max-width:540px;line-height:1.6}

/* ---- CAMPAIGN CARDS ---- */
.lp-campaign-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.lp-campaign-card{background:var(--lp-bg3);border:1px solid var(--lp-border);border-radius:18px;overflow:hidden;transition:transform .4s cubic-bezier(.34,1.56,.64,1),border-color .3s}
.lp-campaign-card:hover{transform:translateY(-6px);border-color:rgba(252,88,16,.3)}
.lp-cc-cover{height:130px;display:flex;align-items:flex-end;padding:.8rem;position:relative}
.lp-cc-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent)}
.cc-1{background:linear-gradient(135deg,#fc5810,#ff0004)}
.cc-2{background:linear-gradient(135deg,#1e3a5f,#06b6d4)}
.cc-3{background:linear-gradient(135deg,#2d1b69,#f59e0b)}
.lp-cc-tag{position:relative;z-index:1;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);color:#fff;padding:.2rem .6rem;border-radius:6px;font-size:.68rem;font-weight:700;letter-spacing:.06em}
.lp-cc-body{padding:1rem 1.1rem}
.lp-cc-brand{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.lp-cc-av{width:20px;height:20px;border-radius:5px}
.lp-cc-brand span{font-size:.75rem;color:var(--lp-muted)}
.lp-campaign-card h3{font-size:.95rem;margin:0 0 .6rem;line-height:1.3}
.lp-cc-meta{display:flex;justify-content:space-between;font-size:.75rem;color:var(--lp-muted)}
.lp-cc-meta span:first-child{color:var(--lp-accent);font-weight:700}

.lp-campaign-stats{display:flex;gap:3rem;justify-content:center;margin-top:2.5rem;padding:1.5rem;background:var(--lp-glass);border:1px solid var(--lp-border);border-radius:14px}
.lp-campaign-stats>div{text-align:center}
.lp-campaign-stats b{font-size:1.5rem;font-weight:800;display:block;color:var(--lp-accent)}
.lp-campaign-stats small{font-size:.78rem;color:var(--lp-muted)}

/* ---- 4 STEPS ---- */
.lp-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.lp-step{background:var(--lp-bg2);border:1px solid var(--lp-border);border-radius:20px;padding:1.8rem;transition:border-color .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.lp-step:hover{border-color:rgba(252,88,16,.25);transform:translateY(-4px)}
.lp-step-num{font-size:2rem;font-weight:900;color:var(--lp-accent);margin-bottom:.5rem;line-height:1}
.lp-step h3{font-size:1.1rem;margin:.3rem 0 .5rem}
.lp-step>p{font-size:.86rem;color:var(--lp-muted);line-height:1.55;margin-bottom:1rem}

/* Step mockups */
.lp-step-mock{background:var(--lp-bg);border:1px solid var(--lp-border);border-radius:12px;padding:.8rem;margin-top:.5rem}
.lp-mock-input{background:var(--lp-glass);border:1px solid var(--lp-border);border-radius:8px;padding:.6rem .8rem;margin-bottom:.5rem}
.lp-mock-input small{color:var(--lp-muted);font-size:.75rem}
.lp-mock-btn{background:var(--lp-accent);color:#fff;text-align:center;padding:.55rem;border-radius:8px;font-size:.78rem;font-weight:700;margin-top:.4rem}
.lp-mock-campaign{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;margin-bottom:.3rem}
.lp-mock-tag{background:rgba(252,88,16,.15);color:var(--lp-accent);padding:.15rem .5rem;border-radius:5px;font-size:.68rem;font-weight:700}
.lp-mock-campaign b{font-size:.78rem;color:var(--lp-muted)}
.lp-mock-social{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;background:var(--lp-glass);border:1px solid var(--lp-border);border-radius:8px;margin-bottom:.4rem;font-size:.8rem;color:var(--lp-muted)}
.lp-mock-video{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.4rem;margin-bottom:.4rem}
.lp-mock-thumb{background:var(--lp-glass2);border-radius:6px;aspect-ratio:16/9}

/* ---- RANK SECTION ---- */
.lp-section-rank{background:linear-gradient(#090909 0%,#0c0c11 50%,#141414 100%)}
.lp-rank-track{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;margin-top:2rem}
.lp-rank-item{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1.2rem 1rem;border-radius:16px;transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .3s;cursor:pointer;min-width:120px}
.lp-rank-item:hover{transform:translateY(-6px);background:var(--lp-glass2)}
.lp-rank-item img{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.lp-rank-item:hover img{transform:scale(1.15)}
.lp-rank-item b{font-size:.82rem;text-align:center}
.lp-rank-active{background:rgba(252,88,16,.1);border:1px solid rgba(252,88,16,.25)}
.lp-rank-active b{color:var(--lp-accent)}
.lp-rank-connector{width:40px;height:2px;background:linear-gradient(90deg,var(--lp-border),rgba(252,88,16,.3),var(--lp-border))}

.lp-rank-detail{display:flex;justify-content:center;margin-top:2rem}
.lp-rank-detail-card{background:var(--lp-bg3);border:1px solid var(--lp-border);border-radius:18px;padding:1.8rem;max-width:380px;width:100%}
.lp-rank-detail-card h3{font-size:1.1rem;margin:0 0 .8rem}
.lp-rank-bonus{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;padding:.8rem;background:rgba(252,88,16,.08);border:1px solid rgba(252,88,16,.15);border-radius:10px}
.lp-rank-bonus b{font-size:1.6rem;color:var(--lp-accent);font-weight:800}
.lp-rank-bonus small{font-size:.82rem;color:var(--lp-muted)}
.lp-rank-detail-card ul{list-style:none;padding:0;margin:0}
.lp-rank-detail-card li{padding:.4rem 0;font-size:.88rem;color:var(--lp-muted);border-bottom:1px solid var(--lp-border)}
.lp-rank-detail-card li::before{content:"✓ ";color:var(--lp-accent);font-weight:700}
.lp-rank-detail-card li:last-child{border:0}

/* ---- PORTFOLIO ---- */
.lp-portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.lp-portfolio-features{display:flex;flex-direction:column;gap:1rem}
.lp-pf-item{background:var(--lp-bg2);border:1px solid var(--lp-border);border-radius:14px;padding:1.3rem;transition:border-color .3s}
.lp-pf-item:hover{border-color:rgba(252,88,16,.2)}
.lp-pf-item b{display:block;margin-bottom:.3rem;font-size:.95rem}
.lp-pf-item p{font-size:.84rem;color:var(--lp-muted);margin:0;line-height:1.5}

.lp-profile-card{background:var(--lp-bg3);border:1px solid var(--lp-border);border-radius:18px;padding:1.5rem;box-shadow:0 16px 48px var(--lp-shadow)}
.lp-profile-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.lp-avatar-lg{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--lp-accent),#ff8400);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;flex-shrink:0}
.lp-profile-head b{display:block;font-size:1rem}
.lp-profile-head small{color:var(--lp-accent);font-size:.78rem}
.lp-profile-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8rem;margin-bottom:1.2rem}
.lp-profile-stats>div{text-align:center;padding:.7rem;background:var(--lp-glass);border-radius:10px}
.lp-profile-stats small{display:block;font-size:.7rem;color:var(--lp-muted);margin-bottom:.2rem}
.lp-profile-stats b{font-size:.95rem}
.lp-profile-videos{display:flex;flex-direction:column;gap:.6rem}
.lp-pv-item{display:flex;align-items:center;gap:.7rem;padding:.6rem;background:var(--lp-glass);border-radius:10px}
.lp-pv-bar{width:36px;height:48px;background:var(--lp-glass2);border-radius:6px;flex-shrink:0}
.lp-pv-item small{font-size:.72rem;color:var(--lp-muted);display:block}
.lp-pv-item b{font-size:.85rem;display:block}
.lp-badge-ok{font-size:.65rem;background:rgba(34,197,94,.15);color:#22c55e;padding:.15rem .4rem;border-radius:4px;font-weight:700}
.lp-badge-wait{font-size:.65rem;background:rgba(245,158,11,.15);color:#f59e0b;padding:.15rem .4rem;border-radius:4px;font-weight:700}

/* ---- MARQUEE LEADERBOARD ---- */
.lp-marquee{overflow:hidden;padding:.8rem 0;border-top:1px solid var(--lp-border);border-bottom:1px solid var(--lp-border);background:var(--lp-bg)}
.lp-marquee-track{display:flex;gap:1rem;width:max-content;animation:lp-marquee 35s linear infinite}
.lp-marquee-track-reverse{animation-direction:reverse;animation-duration:40s}
@keyframes lp-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.lp-leader-chip{display:flex;align-items:center;gap:.6rem;background:var(--lp-glass);border:1px solid var(--lp-border);border-radius:99px;padding:.4rem 1rem .4rem .4rem;white-space:nowrap;flex-shrink:0}
.lp-avatar-sm{width:32px;height:32px;border-radius:50%;background:var(--lp-glass2);color:var(--lp-muted);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}
.lp-leader-chip b{font-size:.82rem;display:block}
.lp-leader-chip small{font-size:.72rem;color:var(--lp-muted)}

/* ---- CTA FINAL ---- */
.lp-cta{text-align:center;padding:6rem max(5vw,24px);background:linear-gradient(#0c0c11 0% 50%,#290e03 100%);position:relative;overflow:hidden}
.lp-cta-glow{position:absolute;bottom:-100px;left:50%;width:600px;height:300px;background:radial-gradient(ellipse,rgba(252,88,16,.15) 0,transparent 70%);transform:translateX(-50%);pointer-events:none}
.lp-cta h2{font-size:clamp(2rem,4.5vw,3rem);line-height:1.15;letter-spacing:-.03em;font-weight:800;margin-bottom:1rem}
.lp-cta>p{color:var(--lp-muted);font-size:.95rem;max-width:500px;margin:0 auto 2rem;line-height:1.6}

/* ---- FAQ ---- */
.lp-faq-list{max-width:700px;margin:0 auto}
.lp-faq{background:var(--lp-bg2);border:1px solid var(--lp-border);border-radius:14px;margin-bottom:.6rem;overflow:hidden;transition:border-color .3s}
.lp-faq:hover{border-color:rgba(252,88,16,.2)}
.lp-faq summary{padding:1.1rem 1.3rem;font-weight:700;font-size:.95rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;color:#fff;transition:color .2s}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq-icon{width:24px;height:24px;border-radius:50%;background:var(--lp-glass2);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;transition:transform .3s cubic-bezier(.32,.72,0,1),background .3s}
.lp-faq-icon::before,.lp-faq-icon::after{content:'';position:absolute;background:var(--lp-muted);border-radius:1px;transition:transform .3s}
.lp-faq-icon::before{width:10px;height:1.5px}
.lp-faq-icon::after{width:1.5px;height:10px}
.lp-faq[open] .lp-faq-icon{transform:rotate(45deg);background:rgba(252,88,16,.15)}
.lp-faq[open] .lp-faq-icon::before,.lp-faq[open] .lp-faq-icon::after{background:var(--lp-accent)}
.lp-faq p{padding:0 1.3rem 1.2rem;color:var(--lp-muted);font-size:.88rem;line-height:1.65}
.lp-faq a{color:var(--lp-accent);text-decoration:none;font-weight:600}
.lp-faq a:hover{text-decoration:underline}

/* ---- FOOTER ---- */
.lp-footer{background:var(--lp-bg);border-top:1px solid var(--lp-border);padding:0}
.lp-footer-inner{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;padding:3rem max(5vw,24px)}
.lp-footer-brand{display:flex;flex-direction:column;gap:.5rem}
.lp-footer-brand a{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.1rem;color:#fff;text-decoration:none}
.lp-footer-brand p{color:var(--lp-muted);font-size:.84rem;max-width:260px;line-height:1.5}
.lp-footer h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--lp-muted);margin-bottom:.8rem}
.lp-footer a{display:block;color:#b8b8b8;font-size:.84rem;padding:.22rem 0;text-decoration:none;transition:color .2s}
.lp-footer a:hover{color:#fff}
.lp-footer-bottom{border-top:1px solid var(--lp-border);padding:1.2rem max(5vw,24px);text-align:center}
.lp-footer-bottom p{color:#666;font-size:.78rem;margin:0}

/* ---- RESPONSIVE ---- */
@media(max-width:900px){
.lp-hero{grid-template-columns:1fr;min-height:auto;padding:6rem max(5vw,20px) 3rem}
.lp-hero-visual{display:none}
.lp-campaign-grid{grid-template-columns:1fr}
.lp-steps{grid-template-columns:1fr}
.lp-portfolio-grid{grid-template-columns:1fr}
.lp-rank-connector{width:20px}
.lp-rank-item{min-width:80px;padding:.8rem .5rem}
.lp-rank-item b{font-size:.72rem}
.lp-footer-inner{grid-template-columns:1fr 1fr}
.pub-hamburger{display:flex}
.pub-links{position:fixed;top:0;right:-100%;width:280px;height:100vh;background:var(--lp-bg2);flex-direction:column;padding:5rem 2rem 2rem;gap:1.2rem;box-shadow:-4px 0 24px rgba(0,0,0,.5);transition:right .35s cubic-bezier(.32,.72,0,1);z-index:100}
.pub-links.open{right:0}
.pub-links a{font-size:1.05rem;color:#fff}
.lp-campaign-stats{flex-direction:column;gap:1rem}
}
@media(max-width:650px){
.lp-hero-h1{font-size:2rem}
.lp-section{padding:3.5rem max(4vw,16px)}
.lp-section-head h2{font-size:1.6rem}
.lp-rank-track{gap:.3rem}
.lp-rank-item{min-width:60px;padding:.6rem .3rem}
.lp-rank-item img{width:40px;height:44px}
.lp-rank-item b{font-size:.65rem}
.lp-rank-connector{width:10px}
.lp-footer-inner{grid-template-columns:1fr}
.lp-profile-stats{grid-template-columns:1fr}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
[data-reveal]{opacity:1;transform:none;transition:none}
.float-anim,.lp-marquee-track{animation:none!important}
}

/* =========================================================================
   LEGAL PAGES — Terms & Privacy
   ========================================================================= */
.legal-page{max-width:820px;margin:0 auto;padding:2rem 1.5rem 4rem}
.legal-header{text-align:center;margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:1px solid var(--line,#e5e7eb)}
.legal-badge{display:inline-block;background:linear-gradient(135deg,#ff043e,#8f04c4);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .9rem;border-radius:20px;margin-bottom:1rem}
.legal-header h1{font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.03em;margin:.5rem 0}
.legal-updated{color:var(--muted);font-size:.88rem}
.legal-toc{background:#f8f9fc;border:1px solid var(--line,#e5e7eb);border-radius:14px;padding:1.5rem 1.8rem;margin-bottom:2.5rem}
.legal-toc b{display:block;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.8rem}
.legal-toc ol{margin:0;padding-left:1.4rem}
.legal-toc li{margin:.35rem 0}
.legal-toc a{color:var(--primary,#6558e8);font-size:.92rem;text-decoration:none;font-weight:500;transition:color .15s}
.legal-toc a:hover{text-decoration:underline}
.legal-body{line-height:1.7}
.legal-body article{margin-bottom:2.5rem;scroll-margin-top:2rem}
.legal-body h2{font-size:1.2rem;margin-bottom:.8rem;padding-bottom:.5rem;border-bottom:1px solid var(--line,#e5e7eb)}
.legal-body p{font-size:.92rem;color:var(--muted);margin:.5rem 0}
.legal-body ul,.legal-body ol{font-size:.92rem;color:var(--muted);padding-left:1.3rem;margin:.6rem 0}
.legal-body li{margin:.4rem 0;line-height:1.6}
.legal-body li strong{color:var(--text,#1a1a2e)}
.legal-body a{color:var(--primary,#6558e8);font-weight:600;text-decoration:none}
.legal-body a:hover{text-decoration:underline}
.legal-def-grid{display:grid;gap:.6rem;margin:.8rem 0}
.legal-def{background:#f8f9fc;border:1px solid var(--line,#e5e7eb);border-radius:10px;padding:.8rem 1.1rem}
.legal-def dt{font-weight:700;font-size:.9rem;color:var(--text,#1a1a2e);margin-bottom:.2rem}
.legal-def dd{font-size:.88rem;color:var(--muted);margin:0}
.legal-data-table{display:grid;gap:.6rem;margin:.8rem 0}
.legal-data-row{background:#f8f9fc;border:1px solid var(--line,#e5e7eb);border-radius:10px;padding:.8rem 1.1rem}
.legal-data-row b{display:block;font-size:.9rem;color:var(--text,#1a1a2e);margin-bottom:.2rem}
.legal-data-row p{font-size:.88rem;color:var(--muted);margin:0}
.legal-footer{border-top:1px solid var(--line,#e5e7eb);padding-top:2rem;margin-top:1rem;text-align:center}
.legal-footer p{font-size:.85rem;color:var(--muted);margin:.3rem 0}
.legal-footer a{color:var(--primary,#6558e8);font-weight:600;text-decoration:none}
.legal-footer a:hover{text-decoration:underline}
@media(max-width:650px){.legal-page{padding:1.5rem 1rem 3rem}.legal-toc{padding:1.2rem 1.3rem}}


.stand-emblem-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 4px;
}
.stand-emblem-img {
  width: 74px;
  height: auto;
  max-height: 68px;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8));
}
.stand-1 .stand-emblem-img {
  width: 86px;
  max-height: 80px;
}

/* =========================================================================
   HERO TRACK VIDEO CARDS — Konten.com style video preview cards
   ========================================================================= */

/* Track video card (hero) */
.lp-track-card{position:absolute;background:var(--lp-bg3,#141414);border:1px solid var(--lp-border,rgba(255,255,255,.08));border-radius:16px;overflow:hidden;width:240px;z-index:3;box-shadow:0 16px 48px rgba(0,0,0,.5);backdrop-filter:blur(12px);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.lp-track-card:hover{transform:translateY(-6px) scale(1.02)}
.lp-tc-1{top:5%;right:5%}
.lp-tc-2{bottom:8%;right:30%}

/* Thumbnail area */
.lp-tc-thumb{position:relative;width:100%;aspect-ratio:9/12;overflow:hidden;background:#0a0a0e}
.lp-tc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lp-tc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#fff;cursor:pointer;transition:background .2s,transform .2s}
.lp-tc-play:hover{background:rgba(252,88,16,.5);transform:translate(-50%,-50%) scale(1.1)}
.lp-tc-platform{position:absolute;top:.6rem;right:.6rem;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);color:#fff;padding:.2rem .5rem;border-radius:5px;font-size:.6rem;font-weight:700;letter-spacing:.04em}

/* Info area below thumb */
.lp-tc-info{padding:.8rem .9rem}
.lp-tc-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}
.lp-tc-logo{width:18px;height:18px;border-radius:4px}
.lp-tc-header b{font-size:.72rem;color:var(--lp-muted,#b8b8b8)}

.lp-tc-creator{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem}
.lp-tc-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}
.lp-tc-creator b{font-size:.8rem;display:block}
.lp-tc-creator small{font-size:.65rem;color:var(--lp-muted,#b8b8b8)}

.lp-tc-stats{display:flex;flex-direction:column;gap:.35rem}
.lp-tc-stats>div{display:flex;justify-content:space-between;align-items:center;padding:.25rem 0;border-top:1px solid var(--lp-border,rgba(255,255,255,.08))}
.lp-tc-stats span{font-size:.68rem;color:var(--lp-muted,#b8b8b8)}
.lp-tc-stats b{font-size:.8rem}
.lp-payout{color:var(--lp-accent,#FC5810)!important}

/* Mini badge (small floating stat) */
.lp-mini-badge{position:absolute;display:flex;align-items:center;gap:.5rem;background:var(--lp-bg3,#141414);border:1px solid var(--lp-border,rgba(255,255,255,.08));border-radius:10px;padding:.5rem .8rem;z-index:3;backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.lp-mb-1{bottom:35%;left:2%}
.lp-mb-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.5);animation:pulse-glow 1.5s ease-out infinite}
@keyframes pulse-glow{0%{box-shadow:0 0 6px rgba(34,197,94,.5)}50%{box-shadow:0 0 14px rgba(34,197,94,.7)}100%{box-shadow:0 0 6px rgba(34,197,94,.5)}}
.lp-mini-badge small{font-size:.65rem;color:var(--lp-muted,#b8b8b8);display:block}
.lp-mini-badge b{font-size:.82rem;color:#22c55e;display:block}

/* Responsive — hide hero visual on mobile */
@media(max-width:900px){
.lp-track-card,.lp-mini-badge{display:none}
}


/* Responsive Podium & Safe Fit for Mobile 390px */
.leaderboard-podium-wrap {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 4px;
  overflow: visible;
  box-sizing: border-box;
}
.podium-card {
  min-width: 0;
  flex: 1 1 0;
  box-sizing: border-box;
}
.podium-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podium-payout strong {
  font-size: 13px !important;
  white-space: nowrap;
}
.podium-stand {
  overflow: hidden;
}
@media (max-width: 420px) {
  .leaderboard-podium-wrap {
    gap: 6px;
    padding: 0 2px;
  }
  .podium-payout strong {
    font-size: 11.5px !important;
  }
  .podium-prize-pill strong {
    font-size: 11px !important;
  }
  .podium-badge span {
    font-size: 10px;
  }
  .stand-emblem-img {
    width: 62px;
    max-height: 56px;
  }
  .stand-1 .stand-emblem-img {
    width: 72px;
    max-height: 66px;
  }
}
/* === Metallic Pillar Podium (match konten.com reference) === */
/* Pilar logam mengkilap: gold / chrome / bronze, tegak & reflektif */
body[data-path="/clipper/leaderboard"] .podium-stand{
  width:100%;
  border-radius:4px 4px 0 0;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:18px;
  position:relative;
  overflow:hidden;
  border:0;
  box-shadow:0 18px 40px rgba(0,0,0,.75);
}
/* highlight vertikal khas permukaan logam */
body[data-path="/clipper/leaderboard"] .podium-stand::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(0,0,0,.42) 0%,
    rgba(255,255,255,.34) 12%,
    rgba(255,255,255,.06) 30%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.05) 70%,
    rgba(255,255,255,.26) 88%,
    rgba(0,0,0,.48) 100%);
  mix-blend-mode:screen;opacity:.55;
}
/* GOLD */
body[data-path="/clipper/leaderboard"] .stand-1{
  height:180px;
  background:linear-gradient(90deg,#6b5011 0%,#c9a43c 10%,#f6e6a4 24%,#c9a238 42%,#fff6cf 52%,#c59c2f 64%,#e6cd7a 82%,#5d440d 100%);
}
/* CHROME / SILVER */
body[data-path="/clipper/leaderboard"] .stand-2{
  height:140px;
  background:linear-gradient(90deg,#4e555e 0%,#aab3bd 10%,#eef2f6 24%,#98a1ab 42%,#ffffff 52%,#949da7 64%,#ccd3da 82%,#454b53 100%);
}
/* BRONZE / COPPER */
body[data-path="/clipper/leaderboard"] .stand-3{
  height:112px;
  background:linear-gradient(90deg,#54290c 0%,#a9622c 10%,#e2a069 24%,#9d5726 42%,#f3c295 52%,#9b5524 64%,#c47c42 82%,#4a230a 100%);
}
/* emblem terukir menyatu dengan logam */
body[data-path="/clipper/leaderboard"] .stand-emblem-wrap{
  display:flex;justify-content:center;align-items:flex-start;width:100%;position:relative;z-index:2;
}
body[data-path="/clipper/leaderboard"] .stand-emblem-img{
  display:block;width:78%;max-width:104px;height:auto;
  opacity:.92;mix-blend-mode:normal;filter:none;
}
body[data-path="/clipper/leaderboard"] .stand-1 .stand-emblem-img{width:80%;max-width:112px}
body[data-path="/clipper/leaderboard"] .stand-3 .stand-emblem-img{width:74%;max-width:96px}
/* kartu podium lebih rapat ke pilar (juara berdiri di atas pilar) */
body[data-path="/clipper/leaderboard"] .podium-prize-pill{margin-bottom:10px}
@media(max-width:420px){
  body[data-path="/clipper/leaderboard"] .stand-1{height:150px}
  body[data-path="/clipper/leaderboard"] .stand-2{height:118px}
  body[data-path="/clipper/leaderboard"] .stand-3{height:94px}
  body[data-path="/clipper/leaderboard"] .stand-emblem-img{max-width:84px}
  body[data-path="/clipper/leaderboard"] .stand-1 .stand-emblem-img{max-width:90px}
}
/* === Pillar polish: top cap + prize spacing + bronze contrast === */
/* tutup atas pilar (top cap) supaya terasa 3D, bukan pelat pipih */
body[data-path="/clipper/leaderboard"] .podium-stand::before{
  content:"";position:absolute;left:0;right:0;top:0;height:11px;z-index:1;
  border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.12) 55%,rgba(0,0,0,.30));
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.45);
}
body[data-path="/clipper/leaderboard"] .podium-stand{padding-top:24px}
/* prize pill tidak menimpa tepi pilar */
body[data-path="/clipper/leaderboard"] .podium-prize-pill{margin-bottom:14px}
/* kontras angka bronze dinaikkan */
body[data-path="/clipper/leaderboard"] .stand-3 .stand-emblem-img{opacity:1;filter:contrast(1.18) saturate(1.1) brightness(1.06)}
body[data-path="/clipper/leaderboard"] .stand-1 .stand-emblem-img,
body[data-path="/clipper/leaderboard"] .stand-2 .stand-emblem-img{opacity:.96}
@media(max-width:420px){
  body[data-path="/clipper/leaderboard"] .podium-stand{padding-top:20px}
  body[data-path="/clipper/leaderboard"] .podium-prize-pill{margin-bottom:11px}
}
/* === Ingot pillar v2 (flat metal bar, beveled edges) === */
body[data-path="/clipper/leaderboard"] .podium-stand{
  border-radius:3px 3px 0 0;padding-top:20px;overflow:hidden;position:relative;
  box-shadow:0 20px 44px rgba(0,0,0,.78);
}
/* bevel tepi kiri-kanan + permukaan datar (bukan silinder) */
body[data-path="/clipper/leaderboard"] .podium-stand::after{
  content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:
    linear-gradient(90deg,rgba(255,255,255,.85) 0 2px,transparent 2px),
    linear-gradient(270deg,rgba(255,255,255,.55) 0 2px,transparent 2px),
    linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(255,255,255,.30) 7%,rgba(255,255,255,.02) 26%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.02) 66%,rgba(255,255,255,.22) 90%,rgba(0,0,0,.55) 100%);
}
/* top cap datar perspektif */
body[data-path="/clipper/leaderboard"] .podium-stand::before{
  content:"";position:absolute;left:0;right:0;top:0;height:9px;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.22) 45%,rgba(0,0,0,.42));
  box-shadow:inset 0 -2px 2px rgba(0,0,0,.55);
}
body[data-path="/clipper/leaderboard"] .stand-1{height:184px;
  background:linear-gradient(90deg,#5b430c 0%,#b8932f 8%,#e9d28a 22%,#b99327 44%,#f0dda2 54%,#b08d24 68%,#d8bd64 88%,#4e390a 100%)}
body[data-path="/clipper/leaderboard"] .stand-2{height:143px;
  background:linear-gradient(90deg,#464d55 0%,#9fa8b3 8%,#e4e9ef 22%,#8f98a3 44%,#f2f5f8 54%,#8a939e 68%,#c3cad2 88%,#3d434a 100%)}
body[data-path="/clipper/leaderboard"] .stand-3{height:114px;
  background:linear-gradient(90deg,#4a220a 0%,#9c5726 8%,#d99459 22%,#8f4e21 44%,#e8b183 54%,#8c4b1f 68%,#b96f38 88%,#401d08 100%)}
/* emblem lebih besar & megah */
body[data-path="/clipper/leaderboard"] .stand-emblem-wrap{display:flex;justify-content:center;width:100%;position:relative;z-index:2}
body[data-path="/clipper/leaderboard"] .stand-emblem-img{display:block;width:88%;max-width:120px;height:auto;filter:none}
body[data-path="/clipper/leaderboard"] .stand-1 .stand-emblem-img{max-width:128px;opacity:.97}
body[data-path="/clipper/leaderboard"] .stand-2 .stand-emblem-img{max-width:112px;opacity:.97}
body[data-path="/clipper/leaderboard"] .stand-3 .stand-emblem-img{max-width:100px;opacity:1;filter:contrast(1.15) brightness(1.05)}
body[data-path="/clipper/leaderboard"] .podium-prize-pill{margin-bottom:13px}
@media(max-width:420px){
  body[data-path="/clipper/leaderboard"] .stand-1{height:152px}
  body[data-path="/clipper/leaderboard"] .stand-2{height:120px}
  body[data-path="/clipper/leaderboard"] .stand-3{height:96px}
  body[data-path="/clipper/leaderboard"] .stand-emblem-img{max-width:92px}
  body[data-path="/clipper/leaderboard"] .stand-1 .stand-emblem-img{max-width:100px}
  body[data-path="/clipper/leaderboard"] .stand-3 .stand-emblem-img{max-width:80px}
}
/* === Ingot gloss v3: sharp specular + chamfer === */
body[data-path="/clipper/leaderboard"] .podium-stand::after{
  content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.62;
  background:
    linear-gradient(90deg,rgba(255,255,255,.95) 0 2.5px,transparent 2.5px),
    linear-gradient(270deg,rgba(255,255,255,.7) 0 2.5px,transparent 2.5px),
    linear-gradient(90deg,
      rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 5%,
      rgba(255,255,255,.92) 9%, rgba(255,255,255,.05) 15%,
      rgba(0,0,0,.28) 30%,
      rgba(255,255,255,.98) 50%, rgba(255,255,255,.10) 57%,
      rgba(0,0,0,.30) 72%,
      rgba(255,255,255,.80) 88%, rgba(0,0,0,.20) 94%,
      rgba(0,0,0,.66) 100%);
}
/* chamfer atas: bidang miring tegas */
body[data-path="/clipper/leaderboard"] .podium-stand::before{
  content:"";position:absolute;left:0;right:0;top:0;height:10px;z-index:1;border-radius:0;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.30) 40%,rgba(0,0,0,.55));
  box-shadow:inset 0 -2px 2px rgba(0,0,0,.6);
}
body[data-path="/clipper/leaderboard"] .podium-stand{border-radius:2px 2px 0 0}
/* === Pillar v5: slimmer bars + emblem upper-third === */
/* pilar lebih ramping & jenjang seperti referensi */
body[data-path="/clipper/leaderboard"] .podium-stand{
  width:78%;margin:0 auto;padding-top:0;
  display:block;position:relative;border-radius:2px 2px 0 0;
}
body[data-path="/clipper/leaderboard"] .stand-1{width:74%;height:196px}
body[data-path="/clipper/leaderboard"] .stand-2{width:78%;height:152px}
body[data-path="/clipper/leaderboard"] .stand-3{width:78%;height:120px}
/* emblem di sepertiga atas pilar */
body[data-path="/clipper/leaderboard"] .stand-emblem-wrap{
  position:absolute;left:0;right:0;top:14%;display:flex;justify-content:center;z-index:2;
}
body[data-path="/clipper/leaderboard"] .stand-emblem-img{display:block;width:80%;max-width:96px;height:auto}
body[data-path="/clipper/leaderboard"] .stand-1 .stand-emblem-img{max-width:104px}
body[data-path="/clipper/leaderboard"] .stand-3 .stand-emblem-img{max-width:88px}
@media(max-width:420px){
  body[data-path="/clipper/leaderboard"] .stand-1{height:162px}
  body[data-path="/clipper/leaderboard"] .stand-2{height:126px}
  body[data-path="/clipper/leaderboard"] .stand-3{height:100px}
  body[data-path="/clipper/leaderboard"] .stand-emblem-img{max-width:78px}
  body[data-path="/clipper/leaderboard"] .stand-1 .stand-emblem-img{max-width:86px}
  body[data-path="/clipper/leaderboard"] .stand-3 .stand-emblem-img{max-width:70px}
}
/* === Pillar v6: flat ingot top + emblem upper-third all + taller bronze === */
/* tutup atas rata (ingot), bukan lengkung silinder */
body[data-path="/clipper/leaderboard"] .podium-stand{border-radius:2px 2px 0 0}
body[data-path="/clipper/leaderboard"] .podium-stand::before{
  content:"";position:absolute;left:0;right:0;top:0;height:8px;z-index:1;border-radius:0;
  background:linear-gradient(180deg,rgba(255,255,255,.96) 0 2px,rgba(255,255,255,.34) 45%,rgba(0,0,0,.6) 100%);
  box-shadow:inset 0 -2px 2px rgba(0,0,0,.62);
}
/* pilar 3 dipanjangkan, proporsi lebih jenjang */
body[data-path="/clipper/leaderboard"] .stand-1{height:198px}
body[data-path="/clipper/leaderboard"] .stand-2{height:158px}
body[data-path="/clipper/leaderboard"] .stand-3{height:138px}
/* emblem seragam di sepertiga atas untuk 1,2,3 */
body[data-path="/clipper/leaderboard"] .stand-emblem-wrap{position:absolute;left:0;right:0;top:13%;display:flex;justify-content:center;z-index:2}
body[data-path="/clipper/leaderboard"] .stand-2 .stand-emblem-wrap{top:12%}
body[data-path="/clipper/leaderboard"] .stand-3 .stand-emblem-wrap{top:11%}
@media(max-width:420px){
  body[data-path="/clipper/leaderboard"] .stand-1{height:164px}
  body[data-path="/clipper/leaderboard"] .stand-2{height:131px}
  body[data-path="/clipper/leaderboard"] .stand-3{height:114px}
}
/* === Pillar v7: hard beveled ingot, bigger emblem, prize gap === */
body[data-path="/clipper/leaderboard"] .podium-stand{border-radius:0;overflow:hidden;position:relative}
/* TOP BEVEL: garis lurus tegas, bukan lengkung silinder */
body[data-path="/clipper/leaderboard"] .podium-stand::before{
  content:"";position:absolute;left:0;right:0;top:0;height:7px;z-index:1;border-radius:0;
  background:linear-gradient(180deg,
     rgba(255,255,255,.98) 0 1.5px,
     rgba(255,255,255,.55) 1.5px 3px,
     rgba(0,0,0,.30) 3px 5px,
     rgba(0,0,0,.62) 5px 7px);
  box-shadow:none;
}
/* SIDE BEVEL + specular tegas khas batangan logam */
body[data-path="/clipper/leaderboard"] .podium-stand::after{
  content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.60;border-radius:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.98) 0 2px,transparent 2px),
    linear-gradient(270deg,rgba(255,255,255,.72) 0 2px,transparent 2px),
    linear-gradient(90deg,
      rgba(0,0,0,.70) 0%, rgba(0,0,0,.24) 4%,
      rgba(255,255,255,1) 8%, rgba(255,255,255,.08) 14%,
      rgba(0,0,0,.34) 28%,
      rgba(255,255,255,1) 49%, rgba(255,255,255,.10) 56%,
      rgba(0,0,0,.36) 70%,
      rgba(255,255,255,.88) 87%, rgba(0,0,0,.26) 93%,
      rgba(0,0,0,.74) 100%);
}
/* koreksi warna logam: gold lebih murni, chrome lebih dingin, bronze lebih tegas */
body[data-path="/clipper/leaderboard"] .stand-1{
  background:linear-gradient(90deg,#4a3607 0%,#b08d1f 8%,#f0dc95 22%,#bb941f 44%,#fff4c4 53%,#b08c1c 68%,#e0c76b 88%,#3e2d05 100%)}
body[data-path="/clipper/leaderboard"] .stand-2{
  background:linear-gradient(90deg,#3b434d 0%,#98a4b2 8%,#e8eef5 22%,#8793a1 44%,#ffffff 53%,#8390a0 68%,#c2ccd8 88%,#333a43 100%)}
body[data-path="/clipper/leaderboard"] .stand-3{
  background:linear-gradient(90deg,#3d1b06 0%,#94501f 8%,#dc9155 22%,#894819 44%,#f0b98a 53%,#864517 68%,#b96c33 88%,#341605 100%)}
/* emblem diperbesar ~1.25x */
body[data-path="/clipper/leaderboard"] .stand-emblem-img{width:92%;max-width:122px}
body[data-path="/clipper/leaderboard"] .stand-1 .stand-emblem-img{max-width:132px}
body[data-path="/clipper/leaderboard"] .stand-2 .stand-emblem-img{max-width:118px}
body[data-path="/clipper/leaderboard"] .stand-3 .stand-emblem-img{max-width:110px}
/* jarak badge Prize ke bibir pilar */
body[data-path="/clipper/leaderboard"] .podium-prize-pill{margin-bottom:18px}
@media(max-width:420px){
  body[data-path="/clipper/leaderboard"] .stand-emblem-img{max-width:96px}
  body[data-path="/clipper/leaderboard"] .stand-1 .stand-emblem-img{max-width:104px}
  body[data-path="/clipper/leaderboard"] .stand-2 .stand-emblem-img{max-width:92px}
  body[data-path="/clipper/leaderboard"] .stand-3 .stand-emblem-img{max-width:86px}
  body[data-path="/clipper/leaderboard"] .podium-prize-pill{margin-bottom:14px}
}
/* === Pillar v8: FLAT brushed face, bevel only at edges (kill cylinder look) === */
body[data-path="/clipper/leaderboard"] .podium-stand{border-radius:0;overflow:hidden;position:relative}
/* permukaan DEPAN datar: tanpa highlight tengah yang bikin kesan silinder */
body[data-path="/clipper/leaderboard"] .podium-stand::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:0;opacity:1;mix-blend-mode:normal;
  background:
    /* bevel kiri */
    linear-gradient(90deg,rgba(0,0,0,.55) 0 1px,rgba(255,255,255,.95) 1px 4px,rgba(255,255,255,.18) 4px 8px,transparent 8px),
    /* bevel kanan */
    linear-gradient(270deg,rgba(0,0,0,.6) 0 1px,rgba(255,255,255,.7) 1px 4px,rgba(0,0,0,.28) 4px 9px,transparent 9px),
    /* ambient shading tepi saja, tengah rata */
    linear-gradient(90deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 78%,rgba(0,0,0,.40) 100%);
}
/* TOP FACE: bidang atas balok (perspektif tipis), bukan bibir kaleng */
body[data-path="/clipper/leaderboard"] .podium-stand::before{
  content:"";position:absolute;left:0;right:0;top:0;height:9px;z-index:1;border-radius:0;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.22) 62%,rgba(0,0,0,.55) 100%);
  border-bottom:1px solid rgba(0,0,0,.55);
}
/* warna logam brushed rata (tanpa pita terang berulang) */
body[data-path="/clipper/leaderboard"] .stand-1{
  background:linear-gradient(100deg,#8a6a12 0%,#d7b243 26%,#f6e6a8 48%,#cfa72f 68%,#8a6a12 100%)}
body[data-path="/clipper/leaderboard"] .stand-2{
  background:linear-gradient(100deg,#6d7681 0%,#b9c3ce 26%,#eef3f8 48%,#a6b0bc 68%,#68717c 100%)}
body[data-path="/clipper/leaderboard"] .stand-3{
  background:linear-gradient(100deg,#78411a 0%,#b5703a 26%,#e6a874 48%,#a9612c 68%,#6e3a15 100%)}
/* emblem besar & di sepertiga atas */
body[data-path="/clipper/leaderboard"] .stand-emblem-wrap{position:absolute;left:0;right:0;top:11%;display:flex;justify-content:center;z-index:2}
body[data-path="/clipper/leaderboard"] .stand-emblem-img{width:94%;max-width:126px;opacity:.95}
body[data-path="/clipper/leaderboard"] .stand-1 .stand-emblem-img{max-width:136px}
body[data-path="/clipper/leaderboard"] .stand-2 .stand-emblem-img{max-width:122px}
body[data-path="/clipper/leaderboard"] .stand-3 .stand-emblem-img{max-width:114px}
@media(max-width:420px){
  body[data-path="/clipper/leaderboard"] .stand-emblem-img{max-width:100px}
  body[data-path="/clipper/leaderboard"] .stand-1 .stand-emblem-img{max-width:108px}
  body[data-path="/clipper/leaderboard"] .stand-2 .stand-emblem-img{max-width:96px}
  body[data-path="/clipper/leaderboard"] .stand-3 .stand-emblem-img{max-width:90px}
}
/* === Pillar v9: kill can-look, readable emblem, no text overlap === */
/* 1) HAPUS tutup atas ala kaleng */
body[data-path="/clipper/leaderboard"] .podium-stand::before{content:none!important;display:none!important}
/* 2) Permukaan datar: shading hanya di tepi, tanpa highlight kolom tengah */
body[data-path="/clipper/leaderboard"] .podium-stand{
  border-radius:0;overflow:hidden;position:relative;
  border-top:2px solid rgba(255,255,255,.55);
  box-shadow:0 18px 40px rgba(0,0,0,.8);
}
body[data-path="/clipper/leaderboard"] .podium-stand::after{
  content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:normal;opacity:1;border-radius:0;
  background:linear-gradient(90deg,
    rgba(0,0,0,.45) 0%, rgba(0,0,0,.10) 6%,
    rgba(0,0,0,0) 24%, rgba(0,0,0,0) 76%,
    rgba(0,0,0,.16) 94%, rgba(0,0,0,.52) 100%);
}
/* 3) Brushed metal diagonal halus (bukan pita vertikal silinder) */
body[data-path="/clipper/leaderboard"] .stand-1{
  background:linear-gradient(108deg,#9b7817 0%,#d9b544 30%,#f2df9b 50%,#caa32c 72%,#8a6910 100%)}
body[data-path="/clipper/leaderboard"] .stand-2{
  background:linear-gradient(108deg,#737c88 0%,#bcc6d1 30%,#eaf0f6 50%,#a3adb9 72%,#6a737e 100%)}
body[data-path="/clipper/leaderboard"] .stand-3{
  background:linear-gradient(108deg,#7d451c 0%,#b8743d 30%,#e3a570 50%,#a55e2a 72%,#6f3a16 100%)}
/* 4) Emblem HARUS terbaca: kontras naik, ukir gelap tegas */
body[data-path="/clipper/leaderboard"] .stand-emblem-wrap{
  position:absolute;left:0;right:0;top:12%;display:flex;justify-content:center;z-index:2}
body[data-path="/clipper/leaderboard"] .stand-emblem-img{
  width:92%;max-width:128px;opacity:1;
  filter:contrast(1.45) saturate(1.15) drop-shadow(0 2px 3px rgba(0,0,0,.55));}
body[data-path="/clipper/leaderboard"] .stand-1 .stand-emblem-img{max-width:136px}
body[data-path="/clipper/leaderboard"] .stand-2 .stand-emblem-img{max-width:122px}
body[data-path="/clipper/leaderboard"] .stand-3 .stand-emblem-img{max-width:112px}
/* 5) Cegah teks payout/prize saling tumpuk antar kolom */
body[data-path="/clipper/leaderboard"] .leaderboard-podium-wrap{gap:14px}
body[data-path="/clipper/leaderboard"] .podium-payout{flex-wrap:nowrap;white-space:nowrap;max-width:100%}
body[data-path="/clipper/leaderboard"] .podium-payout strong{font-size:11.5px}
body[data-path="/clipper/leaderboard"] .rank-1 .podium-payout strong{font-size:12.5px}
body[data-path="/clipper/leaderboard"] .podium-prize-pill{margin-bottom:14px;white-space:nowrap}
body[data-path="/clipper/leaderboard"] .podium-badge{font-size:9.5px}
@media(max-width:420px){
  body[data-path="/clipper/leaderboard"] .leaderboard-podium-wrap{gap:8px}
  body[data-path="/clipper/leaderboard"] .podium-payout strong{font-size:10px}
  body[data-path="/clipper/leaderboard"] .rank-1 .podium-payout strong{font-size:11px}
  body[data-path="/clipper/leaderboard"] .podium-payout small{font-size:8.5px}
  body[data-path="/clipper/leaderboard"] .podium-prize-pill{padding:3px 8px;margin-bottom:10px}
  body[data-path="/clipper/leaderboard"] .podium-prize-pill span{font-size:8.5px}
  body[data-path="/clipper/leaderboard"] .podium-prize-pill strong{font-size:9.5px}
  body[data-path="/clipper/leaderboard"] .podium-badge{font-size:8.5px}
  body[data-path="/clipper/leaderboard"] .stand-emblem-img{max-width:98px}
  body[data-path="/clipper/leaderboard"] .stand-1 .stand-emblem-img{max-width:104px}
  body[data-path="/clipper/leaderboard"] .stand-2 .stand-emblem-img{max-width:92px}
  body[data-path="/clipper/leaderboard"] .stand-3 .stand-emblem-img{max-width:86px}
}
/* === Podium v10: no text collision between columns === */
/* tiap kolom dikurung, dilarang meluber ke kolom tetangga */
body[data-path="/clipper/leaderboard"] .podium-card{min-width:0;overflow:hidden}
body[data-path="/clipper/leaderboard"] .podium-badge,
body[data-path="/clipper/leaderboard"] .podium-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* payout jadi 2 baris supaya muat di kolom sempit */
body[data-path="/clipper/leaderboard"] .podium-payout{
  flex-direction:column;align-items:center;gap:0;max-width:100%;white-space:nowrap}
@media(max-width:430px){
  body[data-path="/clipper/leaderboard"] .leaderboard-podium-wrap{gap:6px}
  body[data-path="/clipper/leaderboard"] .podium-payout small{font-size:8px;line-height:1.1}
  body[data-path="/clipper/leaderboard"] .podium-payout strong{font-size:10.5px;line-height:1.2}
  body[data-path="/clipper/leaderboard"] .rank-1 .podium-payout strong{font-size:11.5px}
  body[data-path="/clipper/leaderboard"] .podium-badge{font-size:8px}
  body[data-path="/clipper/leaderboard"] .podium-name{font-size:11px}
  body[data-path="/clipper/leaderboard"] .rank-1 .podium-name{font-size:12px}
  body[data-path="/clipper/leaderboard"] .podium-prize-pill{padding:3px 7px}
  body[data-path="/clipper/leaderboard"] .podium-prize-pill span{font-size:8px}
  body[data-path="/clipper/leaderboard"] .podium-prize-pill strong{font-size:9px}
  body[data-path="/clipper/leaderboard"] .podium-avatar-circle{width:44px;height:44px}
  body[data-path="/clipper/leaderboard"] .podium-avatar-circle.gold-ring{width:54px;height:54px}
}

/* =========================================================================
   LEADERBOARD — PRESISI REFERENSI (konten.com) 16 Sep 2026
   Diukur dari screenshot referensi: viewport 393px, DPR 3.
   Warna diambil sampling piksel, bukan perkiraan.
   ========================================================================= */

body[data-path="/clipper/leaderboard"] .app-main{
  
  padding:20px 0 56px !important;
}
.clipper-leaderboard{
  max-width:520px;margin:0 auto;padding:0;gap:0;
  display:flex;flex-direction:column;align-items:center;color:#fff;
}

/* ---------- Toggle 7 Hari / All Time ---------- */
.clipper-leaderboard .leaderboard-period-wrap{margin:0 0 18px;width:100%;display:flex;justify-content:center}
.clipper-leaderboard .leaderboard-period-pill{
  display:inline-flex;padding:4px;gap:0;border-radius:999px;
  background:#0b0a08;border:1px solid #8b7433;box-shadow:none;
}
.clipper-leaderboard .leaderboard-period-pill a{
  display:block;padding:9px 26px;border-radius:999px;border:0;
  background:transparent;color:#e7e5e4;font-size:14px;font-weight:600;
  text-decoration:none;line-height:1;transition:none;
}
.clipper-leaderboard .leaderboard-period-pill a.active{
  background:linear-gradient(180deg,#efe8d2 0%,#dbcfa9 48%,#bfae7c 100%);
  color:#12100c;font-weight:700;
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* ---------- Judul ---------- */
.clipper-leaderboard .leaderboard-hero{gap:0;margin:0;width:100%}
.clipper-leaderboard .leaderboard-hero h1{
  font-size:40px;font-weight:800;letter-spacing:.005em;line-height:1.1;
  margin:0 0 14px;
  background:none;-webkit-text-fill-color:currentColor;color:#e6dcc4;
}

/* ---------- Countdown (mode 7 Hari) ---------- */
.clipper-leaderboard .leaderboard-countdown-box{gap:10px;margin-bottom:22px}
.clipper-leaderboard .leaderboard-countdown-box>span{font-size:15px;color:#e5e5e5;font-weight:400}
.clipper-leaderboard .leaderboard-timer{gap:14px}
.clipper-leaderboard .timer-segment{min-width:46px}
.clipper-leaderboard .timer-segment strong{font-size:30px;font-weight:700;color:#fff;letter-spacing:.01em}
.clipper-leaderboard .timer-segment small{font-size:12px;color:#8e8e93;margin-top:5px}
.clipper-leaderboard .timer-sep{font-size:26px;font-weight:400;color:#8e8e93;margin-top:-14px}

/* ---------- Tombol "Semua Waktu" (mode All Time) ---------- */
.clipper-leaderboard .leaderboard-scope-btn{
  display:inline-flex;align-items:center;gap:12px;
  background:#171614;border:0;border-radius:14px;
  padding:15px 22px;margin-bottom:24px;cursor:pointer;
  font-size:17px;font-weight:600;color:#fff;
}
.clipper-leaderboard .leaderboard-scope-btn svg{width:20px;height:20px;color:#fff;flex-shrink:0}

/* ---------- Podium ---------- */
.clipper-leaderboard .leaderboard-podium-wrap{
  display:grid;grid-template-columns:1fr 1.06fr 1fr;
  align-items:end;gap:4px;width:100%;max-width:393px;
  margin:0;padding:0 6px;box-sizing:border-box;
}
.clipper-leaderboard .podium-card{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.clipper-leaderboard .podium-avatar-wrap{margin-bottom:7px}
.clipper-leaderboard .podium-avatar-circle{
  width:52px;height:52px;border-radius:50%;padding:0;
  background:radial-gradient(circle at 50% 35%,#2a2a2e,#141416 75%);
  border:1px solid #3a3a3d;box-shadow:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.clipper-leaderboard .rank-1 .podium-avatar-circle{
  width:58px;height:58px;background:transparent;border:1px solid #4a4a4d;
}
.clipper-leaderboard .avatar-initial{
  font-size:13px;font-weight:600;color:#cfcfcf;line-height:1;
  letter-spacing:.06em;padding:0 4px;
  white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:100%;
}
.clipper-leaderboard .rank-1 .avatar-initial{font-size:8px;letter-spacing:.14em;color:#e3e3e3}
.clipper-leaderboard .podium-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;color:#e9e9e9;margin-bottom:5px;white-space:nowrap;font-weight:400;
}
.clipper-leaderboard .podium-badge img{width:13px;height:14px;object-fit:contain;flex-shrink:0}
.clipper-leaderboard .podium-name{
  font-size:15px;font-weight:500;color:#fff;margin-bottom:5px;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.clipper-leaderboard .rank-1 .podium-name{font-size:17px;font-weight:500}
.clipper-leaderboard .podium-payout{gap:6px;margin-bottom:9px;justify-content:center;flex-wrap:nowrap}
.clipper-leaderboard .podium-payout small{font-size:12px;color:#9a9a9e;font-weight:400}
.clipper-leaderboard .podium-payout strong{font-size:13px !important;font-weight:700;color:#32fd27;white-space:nowrap}
.clipper-leaderboard .rank-1 .podium-payout strong{font-size:14px !important}

.clipper-leaderboard .podium-prize-pill{
  background:#0e0d0c;border:1px solid #2f2b26;border-radius:999px;
  padding:7px 14px;display:inline-flex;align-items:center;gap:7px;
  margin-bottom:0;box-shadow:0 4px 14px rgba(0,0,0,.6);z-index:3;max-width:100%;
}
.clipper-leaderboard .podium-prize-pill span{font-size:12px;color:#9a9a9e;font-weight:400}
.clipper-leaderboard .podium-prize-pill strong{font-size:13px !important;font-weight:700;white-space:nowrap}
.clipper-leaderboard .rank-2 .podium-prize-pill strong{color:#dfe6ee}
.clipper-leaderboard .rank-1 .podium-prize-pill{border-color:#6e5a20;padding:9px 16px}
.clipper-leaderboard .rank-1 .podium-prize-pill strong{color:#f5c23c;font-size:15px !important}
.clipper-leaderboard .rank-3 .podium-prize-pill strong{color:#ffab6b}

/* Pilar — tinggi bertingkat sesuai referensi */
body[data-path="/clipper/leaderboard"] .clipper-leaderboard .podium-stand{
  margin-top:-4px;border-radius:3px 3px 0 0;padding-top:16px;
  align-items:flex-start;justify-content:center;
}
body[data-path="/clipper/leaderboard"] .clipper-leaderboard .stand-1{height:196px}
body[data-path="/clipper/leaderboard"] .clipper-leaderboard .stand-2{height:178px}
body[data-path="/clipper/leaderboard"] .clipper-leaderboard .stand-3{height:150px}
.clipper-leaderboard .stand-emblem-img{width:78px !important;max-height:74px !important;margin:0 auto}
.clipper-leaderboard .stand-1 .stand-emblem-img{width:86px !important;max-height:82px !important}

/* ---------- Kartu Tabel ---------- */
.clipper-leaderboard .leaderboard-table-card{
  width:calc(100% - 26px);max-width:393px;margin:0 auto;
  background:#0c0704;border:0;border-radius:18px;overflow:hidden;
  box-shadow:none;
}
.clipper-leaderboard.is-weekly .leaderboard-table-card{margin-top:0;position:relative;z-index:4}
.clipper-leaderboard .leaderboard-table{width:100%;border-collapse:collapse;table-layout:fixed}
.clipper-leaderboard .leaderboard-table thead{background:#131313;border:0}
.clipper-leaderboard .leaderboard-table th{
  padding:17px 0;font-size:16px;font-weight:400;color:#fff;border:0;
}
.clipper-leaderboard .leaderboard-table td{
  padding:14px 0;border-bottom:0;font-size:15px;vertical-align:middle;
}
.clipper-leaderboard .leaderboard-table tbody tr+tr:not(.cutoff-divider-row) td{
  border-top:1px solid rgba(255,255,255,.05);
}

/* Kolom */
.clipper-leaderboard .col-rank{width:58px;text-align:center;padding-left:6px !important}
.clipper-leaderboard .col-rank strong{font-size:19px;font-weight:700;color:#fff}
.clipper-leaderboard .col-user{text-align:left;padding-left:4px !important}
.clipper-leaderboard th.col-user{text-align:left;padding-left:18px !important}
.clipper-leaderboard .col-payout{text-align:right}
.clipper-leaderboard .col-prize{text-align:right;width:104px;padding-right:16px !important}
.clipper-leaderboard.is-weekly .col-payout{width:112px}
.clipper-leaderboard.is-alltime .col-payout{width:128px;padding-right:16px !important}
.clipper-leaderboard.is-alltime th.col-payout{padding-right:16px !important}

.clipper-leaderboard .user-cell{display:flex;align-items:center;gap:10px;min-width:0}
.clipper-leaderboard .mini-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 50% 35%,#3a3a3f,#141416 78%);
  border:1px solid #4a4a4d;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:#d4d4d8;
}
.clipper-leaderboard .user-name{
  font-size:15px;font-weight:400;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.clipper-leaderboard .payout-val{color:#32fd27;font-weight:700;font-size:15px;white-space:nowrap}
.clipper-leaderboard .prize-val{color:#ffab6b;font-weight:700;font-size:15px;white-space:nowrap}
.clipper-leaderboard .no-prize{color:#52525b}

/* Baris juara #1 pada All Time — emas penuh */
.clipper-leaderboard .row-champion td{
  background:linear-gradient(180deg,#fde14a 0%,#fdd945 46%,#feb938 100%);
  border-top:2px solid #ffd95a !important;border-bottom:2px solid #e8ae2c;
  padding-top:16px;padding-bottom:16px;
}
.clipper-leaderboard .row-champion .col-rank strong{color:#120d00;font-size:21px}
.clipper-leaderboard .row-champion .user-name{color:#140f00;font-weight:600}
.clipper-leaderboard .row-champion .mini-avatar{border-color:rgba(0,0,0,.45)}
.clipper-leaderboard .row-champion .payout-val{color:#069100}

/* Pembatas hadiah */
.clipper-leaderboard .cutoff-divider-row td{
  padding:0;border-top:1px solid #33271c !important;border-bottom:1px solid #33271c;
  background:linear-gradient(90deg,#16120e 0%,#241a12 50%,#16120e 100%);
}
.clipper-leaderboard .cutoff-divider-content{
  padding:11px 16px;text-align:center;font-size:13px;color:#e4d5b7;line-height:1.4;
}

@media(max-width:380px){
  .clipper-leaderboard .leaderboard-hero h1{font-size:35px}
  .clipper-leaderboard .timer-segment strong{font-size:26px}
  .clipper-leaderboard .leaderboard-table th{font-size:15px}
  .clipper-leaderboard .user-name,
  .clipper-leaderboard .payout-val,
  .clipper-leaderboard .prize-val{font-size:14px}
  .clipper-leaderboard .col-rank{width:50px}
  .clipper-leaderboard .col-prize{width:96px}
}

/* --- Perbaikan pasca-QA 16 Sep: pill ketutup topbar + nama kepotong --- */
body[data-path="/clipper/leaderboard"] .app-main{padding-top:76px !important}
@media(max-width:900px){
  body[data-path="/clipper/leaderboard"] .app-main{padding-top:76px !important}
}
.clipper-leaderboard.is-weekly .col-payout{width:104px}
.clipper-leaderboard.is-weekly .col-prize{width:94px;padding-right:12px !important}
.clipper-leaderboard.is-weekly .payout-val,
.clipper-leaderboard.is-weekly .prize-val{font-size:13.5px}
.clipper-leaderboard.is-weekly .col-rank{width:50px}
.clipper-leaderboard.is-weekly th.col-user{padding-left:12px !important}
.clipper-leaderboard.is-weekly .mini-avatar{width:30px;height:30px;font-size:12px}
.clipper-leaderboard.is-weekly .user-name{font-size:14px}

/* --- QA2: pill Prize juara-1 kepotong + nama podium kesempitan --- */
.clipper-leaderboard .leaderboard-podium-wrap{overflow:visible}
.clipper-leaderboard .podium-card{overflow:visible;position:relative}
.clipper-leaderboard .podium-prize-pill{
  position:relative;z-index:6;width:max-content;max-width:none;
  margin-left:auto;margin-right:auto;
}
.clipper-leaderboard .rank-1 .podium-prize-pill{padding:9px 14px}
.clipper-leaderboard .rank-2 .podium-prize-pill,
.clipper-leaderboard .rank-3 .podium-prize-pill{padding:7px 11px}
.clipper-leaderboard .podium-payout{width:100%;min-width:0}
.clipper-leaderboard .podium-name{max-width:132px}
.clipper-leaderboard .rank-1 .podium-name{max-width:142px}

/* --- QA3 (akar masalah terukur): rank-1 kena overflow:hidden dari aturan lama
       (line ~2251) sehingga pill Prize kepotong. Override eksplisit + tahan
       pill rank-3 supaya tidak melewati tepi layar. --- */
body[data-path="/clipper/leaderboard"] .clipper-leaderboard .podium-card,
body[data-path="/clipper/leaderboard"] .clipper-leaderboard .podium-card.rank-1,
body[data-path="/clipper/leaderboard"] .clipper-leaderboard .podium-card.rank-2,
body[data-path="/clipper/leaderboard"] .clipper-leaderboard .podium-card.rank-3{
  overflow:visible !important;
}
/* pilar tetap terpotong rapi, hanya kartunya yang dibebaskan */
body[data-path="/clipper/leaderboard"] .clipper-leaderboard .podium-stand{overflow:hidden}
/* jaga pill tetap di dalam viewport */
.clipper-leaderboard .rank-3 .podium-prize-pill{transform:translateX(-6px)}
.clipper-leaderboard .rank-2 .podium-prize-pill{transform:translateX(4px)}

/* --- Dropdown rentang waktu (mode All Time) — presisi referensi konten.com --- */
.clipper-leaderboard .leaderboard-scope{position:relative;display:inline-block;margin-bottom:24px;z-index:40}
.clipper-leaderboard .leaderboard-scope-btn{
  display:inline-flex;align-items:center;gap:12px;
  background:#303030;border:0;border-radius:14px;
  padding:15px 22px;cursor:pointer;
  font-size:17px;font-weight:600;color:#fff;font-family:inherit;line-height:1;
  margin-bottom:0;
}
.clipper-leaderboard .leaderboard-scope-btn svg{width:20px;height:20px;color:#fff;flex-shrink:0;transition:transform .18s ease}
.clipper-leaderboard .leaderboard-scope-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

.clipper-leaderboard .leaderboard-scope-menu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  width:325px;max-width:calc(100vw - 44px);
  background:#0a0a0e;border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.85);
  display:flex;flex-direction:column;z-index:60;
}
.clipper-leaderboard .leaderboard-scope-menu[hidden]{display:none}
.clipper-leaderboard .scope-option{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:19px 22px;text-decoration:none;
  font-size:17px;font-weight:400;color:#f1f1f1;line-height:1.2;
  background:transparent;text-align:left;
}
.clipper-leaderboard .scope-option svg{width:20px;height:20px;color:#f1f1f1;flex-shrink:0}
.clipper-leaderboard .scope-option.is-selected{background:#19181a;color:#e3c878}
.clipper-leaderboard .scope-option.is-selected svg{color:#e3c878}
.clipper-leaderboard .scope-option:active{background:#161616}

@media(max-width:380px){
  .clipper-leaderboard .scope-option{font-size:16px;padding:17px 18px}
  .clipper-leaderboard .leaderboard-scope-btn{font-size:16px;padding:14px 20px}
}

/* ============================================================
   PENDAPATAN (/clipper/earnings) — perbaikan presisi 16 Sep 2026
   Akar masalah terukur lewat DOM probe:
   - Ada DUA blok CSS .earning-stats (line 577 & 580) yang saling
     bertabrakan: blok lama pakai flex + margin-top:-101px +
     width:calc(50% - 5px), blok baru pakai grid. Hasilnya kartu
     "Bisa Dicairkan"/"Sedang Diproses" jadi 82.75px (harusnya ~175px)
     dan yang kanan naik -101px -> terlihat kotak-kotak tak sejajar.
   Perbaikan: kunci grid 2 kolom, netralkan sisa aturan flex lama.
   ============================================================ */
body[data-path="/clipper/earnings"] .earning-stats{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:12px 11px !important;
  align-items:stretch !important;
}
body[data-path="/clipper/earnings"] .earning-stats > article{
  width:auto !important;
  margin:0 !important;
  align-self:auto !important;
  min-width:0;
}
body[data-path="/clipper/earnings"] .earning-stats > .earning-main{
  grid-column:1 / -1 !important;
  height:176px !important;
}
/* dua kartu kecil: tinggi sama, label 1 baris, angka tidak kepotong */
body[data-path="/clipper/earnings"] .earning-stats > article:not(.earning-main){
  height:104px !important;
  padding:14px 14px 15px !important;
  display:flex;flex-direction:column;justify-content:space-between;gap:6px;
}
body[data-path="/clipper/earnings"] .earning-stats > article:not(.earning-main) span{
  font-size:13px;line-height:18px;color:#c3c9d6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body[data-path="/clipper/earnings"] .earning-stats > article:not(.earning-main) strong{
  font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
}
/* ikon info kecil di samping "Total Pendapatan" (sesuai referensi) */
body[data-path="/clipper/earnings"] .earning-main-label{
  display:inline-flex;align-items:center;gap:7px;
}
body[data-path="/clipper/earnings"] .earning-info{
  display:inline-grid;place-items:center;width:15px;height:15px;flex:0 0 15px;
  color:#a99aa6;
}
body[data-path="/clipper/earnings"] .earning-info svg{
  width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
@media(min-width:901px){
  body[data-path="/clipper/earnings"] .earning-stats{
    grid-template-columns:2fr 1fr 1fr !important;
  }
  body[data-path="/clipper/earnings"] .earning-stats > .earning-main{grid-column:auto !important}
  body[data-path="/clipper/earnings"] .earning-stats > article:not(.earning-main){
    height:176px !important;padding:24px !important;
  }
}

/* --- Badge notifikasi: angka 1/2/3 digit presisi di dalam lonceng --- */
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .topbar-bell{
  overflow:visible;
}
body:is([data-path="/clipper/dashboard"],[data-path="/clipper/campaigns"],[data-path="/clipper/analytics"],[data-path="/clipper/earnings"],[data-path="/clipper/rank"],[data-path="/clipper/leaderboard"]) .notification-count{
  right:-2px;top:-1px;
  min-width:20px;height:20px;
  padding:0 5px;
  font-size:11px;line-height:20px;font-weight:700;
  letter-spacing:0;
  box-sizing:border-box;
  border:1.5px solid #05070f;
  display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   PENDAPATAN (/clipper/earnings) — IKON + METODE PEMBAYARAN
   16 Sep 2026. Temuan DOM probe sebelum perubahan:
   - .earning-withdraw svg computed display:none (mobile) -> tombol kosong
   - kartu "Bisa Dicairkan"/"Sedang Diproses": svg count = 0 (belum ada ikon)
   - h2 "Analitik Pendapatan": svg count = 0 (belum ada ikon)
   - .payment-methods: tidak pernah merender daftar metode tersimpan
   Perubahan CSS di-append (blok lama tidak dihapus).
   ============================================================ */
body[data-path="/clipper/earnings"] .earning-withdraw{
  gap:7px;
}
body[data-path="/clipper/earnings"] .earning-withdraw .earning-withdraw-icon{
  display:block !important;
  width:17px;height:17px;flex:0 0 17px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
@media(min-width:901px){
  body[data-path="/clipper/earnings"] .earning-withdraw .earning-withdraw-icon{
    width:20px;height:20px;flex:0 0 20px;
  }
}

/* ikon kecil di kartu Bisa Dicairkan / Sedang Diproses */
body[data-path="/clipper/earnings"] .earning-stats > article:not(.earning-main) span{
  display:flex;align-items:center;gap:7px;
}
body[data-path="/clipper/earnings"] .earning-stat-icon{
  display:inline-grid;place-items:center;
  width:22px;height:22px;flex:0 0 22px;
  border-radius:7px;
}
body[data-path="/clipper/earnings"] .earning-stat-icon svg{
  width:14px;height:14px;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
body[data-path="/clipper/earnings"] .earning-stat-icon.is-ready{
  color:#ff7fb0;background:#1a0d18;box-shadow:inset 0 0 0 1px #3a2030;
}
body[data-path="/clipper/earnings"] .earning-stat-icon.is-processing{
  color:#f5b551;background:#33240d;box-shadow:inset 0 0 0 1px #6d4c13;
}

/* ikon judul kartu (Analitik Pendapatan, Metode Pembayaran) */
body[data-path="/clipper/earnings"] .earning-chart-card h2,
body[data-path="/clipper/earnings"] .payment-methods h2{
  display:flex;align-items:center;gap:9px;
}
body[data-path="/clipper/earnings"] .earning-head-icon{
  display:inline-grid;place-items:center;
  width:28px;height:28px;flex:0 0 28px;
  border-radius:9px;color:#ff7fb0;
  background:linear-gradient(145deg,#0d2742,#0a1930);
  box-shadow:inset 0 0 0 1px #3a2030;
}
body[data-path="/clipper/earnings"] .earning-head-icon svg{
  width:16px;height:16px;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---- Metode Pembayaran: header, daftar tersimpan, tombol tambah ---- */
body[data-path="/clipper/earnings"] .payment-methods{
  height:auto !important;min-height:0 !important;gap:16px;
}
body[data-path="/clipper/earnings"] .pm-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
body[data-path="/clipper/earnings"] .pm-count{
  padding:4px 10px;border-radius:20px;
  border:1px solid #3a2030;background:#140a14;
  color:#ff7fb0;font-size:12px;white-space:nowrap;
}
body[data-path="/clipper/earnings"] .pm-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:10px;
}
body[data-path="/clipper/earnings"] .pm-item{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:12px 13px;border:1px solid #2a2430;border-radius:11px;
  background:linear-gradient(180deg,#0c0c11,#080d1d);
}
body[data-path="/clipper/earnings"] .pm-item-icon{
  display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;
  border-radius:10px;color:#ff7fb0;
  background:linear-gradient(145deg,#0d2742,#0a1930);
  box-shadow:inset 0 0 0 1px #3a2030;
}
body[data-path="/clipper/earnings"] .pm-item-icon svg{
  width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
body[data-path="/clipper/earnings"] .pm-item-body{min-width:0;display:flex;flex-direction:column;gap:3px}
body[data-path="/clipper/earnings"] .pm-item-body b{
  font-size:15px;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body[data-path="/clipper/earnings"] .pm-item-body small{
  font-size:12.5px;color:#93a0b6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body[data-path="/clipper/earnings"] .pm-item-del{margin:0;display:flex}
body[data-path="/clipper/earnings"] .pm-item-del button{
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid #3a2431;border-radius:10px;background:#1b1020;color:#ff8ba0;
}
body[data-path="/clipper/earnings"] .pm-item-del svg{
  width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
body[data-path="/clipper/earnings"] .pm-add-row{display:flex}
body[data-path="/clipper/earnings"] .pm-add{
  width:100%;min-height:52px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 18px;border:1px dashed #2d5e86;border-radius:10px;
  background:#08101f;color:#ff7fb0;font-size:15px;font-weight:500;
}
body[data-path="/clipper/earnings"] .pm-add svg{
  width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;
  stroke-linecap:round;
}
body[data-path="/clipper/earnings"] .payment-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:6px 0 2px;
}
body[data-path="/clipper/earnings"] .pm-empty-text{
  margin:0;max-width:300px;text-align:center;
  color:#a09aa8;font-size:13.5px;line-height:19px;
}
body[data-path="/clipper/earnings"] .payment-empty button{
  display:flex;align-items:center;justify-content:center;gap:8px;
}
body[data-path="/clipper/earnings"] .payment-empty button svg{
  margin-left:0 !important;
}
body[data-path="/clipper/earnings"] .dialog-hint{
  margin:-6px 0 4px;color:#93a0b6;font-size:13px;line-height:18px;
}
@media(min-width:901px){
  body[data-path="/clipper/earnings"] .pm-list{
    display:grid;grid-template-columns:1fr 1fr;gap:12px;
  }
  body[data-path="/clipper/earnings"] .pm-add{width:auto;min-width:300px}
  body[data-path="/clipper/earnings"] .pm-add-row{justify-content:flex-start}
}