:root{--ink:#17203a;--muted:#6f7890;--bg:#f6f7fb;--card:#fff;--primary:#6558e8;--primary2:#4b3ccc;--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%,#ddd9ff 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:#868dab}.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%,#ddd9ff,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:#ddd9ff}.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:#9aa1b9;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:#070617;--card:#111127;--primary:#28b8f2;--primary2:#078fd4;--coral:#68dcff;--line:#292b46;--ok:#39d8a0;--warn:#ffc55c;--bad:#ff7188;--shadow:0 18px 50px rgba(0,0,0,.32);background:radial-gradient(circle at 90% 0,rgba(16,121,193,.12),transparent 32%),#070617;color:var(--ink);color-scheme:dark}
body:has(.app-main) .sidebar{background:#09072f;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(22,142,213,.28),rgba(77,207,250,.10));box-shadow:inset 3px 0 #36c8fa;color:#fff}
body:has(.app-main) .sidebar-user,body:has(.app-main) .sidebar hr,body:has(.app-main) .nav-help{border-color:#292b4b}
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:#858eaa}
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:#111127;border-color:#292b46;color:#f5f8ff;box-shadow:var(--shadow)}
body:has(.app-main) .metrics article,body:has(.app-main) .budget-summary article{background:linear-gradient(145deg,#14142d,#0e0e22)}
body:has(.app-main) .btn{background:linear-gradient(110deg,#0879c9,#35c8f4);color:#fff;box-shadow:0 9px 24px rgba(16,155,220,.24)}body:has(.app-main) .btn:hover{background:linear-gradient(110deg,#086eb7,#62dcff)}
body:has(.app-main) .btn.secondary{background:#191a34;color:#68dcff;border-color:#343754;box-shadow:none}
body:has(.app-main) input,body:has(.app-main) select,body:has(.app-main) textarea{background:#0b0b1e;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:#35c8f4;box-shadow:0 0 0 3px rgba(53,200,244,.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:#191a34;color:#aab2ca}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,#0879c9,#35c8f4);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:#292b46}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:#0b0b1e;border-color:#292b46}body:has(.app-main) .rank-grid article.current{background:#102f49;border-color:#35c8f4}
body:has(.app-main) .notification-list article.unread{background:#111f38}body:has(.app-main) .notification-list article>span,body:has(.app-main) .avatar,body:has(.app-main) .count-pill{background:#123b57;color:#68dcff}
body:has(.app-main) .progress,body:has(.app-main) .budget-line{background:#242640}body:has(.app-main) .progress i,body:has(.app-main) .budget-line i,body:has(.app-main) .chart i{background:linear-gradient(180deg,#68dcff,#0879c9)}
body:has(.app-main) .badge{background:#23253d;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:#111127;border-color:#292b46}body:has(.app-main) .scheme-switch a.active{background:#102b42;border-color:#35c8f4}body:has(.app-main) .wizard-steps b{border-color:#292b46}body:has(.app-main) .wizard-steps b:first-child{border-color:#35c8f4;color:#68dcff}
body:has(.app-main) .brand-profile-card,body:has(.app-main) .detail-hero{background:linear-gradient(145deg,#09072f,#123b57)}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,#07558e,#25b8ef)}body:has(.app-main) .campaign-cover.c2{background:linear-gradient(135deg,#123d75,#4bcff7)}body:has(.app-main) .campaign-cover.c3{background:linear-gradient(135deg,#075e6d,#37d1d2)}body:has(.app-main) .campaign-cover.c0{background:linear-gradient(135deg,#15183d,#287bb5)}
@media(max-width:900px){body:has(.app-main):before{background:#09072f;border-color:#292b46;box-shadow:0 5px 20px rgba(0,0,0,.32)}body:has(.app-main) .mobile-toggle{background:#11163a;border-color:#31506d;color:#68dcff}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:#2fb6f5;--acc2:#0a7fd0;--warn2:#ffc55c;--info2:#5aa9ff;--ok2:#3fd9a2;--bad2:#ff7188;--edge:#242640;--surface:#111127;--surface2:#0c0c1e}

/* --- 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:#858eaa}
.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:#191a34;border:1px solid var(--edge);gap:4px}
.segmented a,.segmented button{padding:8px 16px;border-radius:999px;font-size:.82rem;font-weight:650;color:#aab2ca;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,#14142f,#0d0d22 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(47,182,245,.30),transparent 68%)}
.stat-hero-head{display:flex;align-items:center;gap:8px;font-size:.84rem;color:#c8cfe4;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:#1a1c36}
.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:#123b57;color:#68dcff;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:#191a34;border:1px solid var(--edge);color:#aab2ca;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:#7d86a3;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,#0d0d22 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:#6f7794;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,#68dcff,#0879c9)}
.trend-legend{display:flex;justify-content:space-around;font-size:.64rem;color:#6f7794}

/* --- 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:#242640;overflow:hidden;min-width:0}
.dist-bar i{display:block;height:100%;background:linear-gradient(90deg,#0879c9,#68dcff)}
.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,#14142f,#0d0d22 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:#c8cfe4;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,#123b57);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:#b3bcd4;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:#c3cadf;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 #292b4b}
.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:#09072f;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:#11163a;border:1px solid #31506d;color:#68dcff;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:#9aa3bd}

@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:#6f7794;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:#111127;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:#191a34;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,#68dcff,#0879c9);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:#123b57;color:#68dcff;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[data-path="/clipper/dashboard"] .app-main{max-width:none}
body[data-path="/clipper/dashboard"] .topbar{height:77px;padding:18px 16px;gap:8px;background:#09090b;border-bottom:1px solid #1a1a1a}
body[data-path="/clipper/dashboard"] .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[data-path="/clipper/dashboard"] .mobile-toggle .nav-icon{width:20px;height:20px}
body[data-path="/clipper/dashboard"] .topbar-crumb{flex:1;width:auto;height:20px;padding-left:12px;gap:4px;font-size:14px;color:#fff}
body[data-path="/clipper/dashboard"] .topbar-crumb strong{font-size:14px;font-weight:400;color:#fff}
body[data-path="/clipper/dashboard"] .invite-earn{display:inline-flex;align-items:center;justify-content:flex-end;width:138.8px;flex:0 0 138.8px;height:38px;padding:6px 12px;border-radius:999px;color:#f4dd70;font-size:16px;font-weight:400;white-space:nowrap}
body[data-path="/clipper/dashboard"] .topbar-bell{position:relative;width:40px;min-width:40px;flex:0 0 40px;height:40px;border-radius:8px;color:#9fa1a8}
body[data-path="/clipper/dashboard"] .topbar-bell .nav-icon{width:24px;height:24px}
body[data-path="/clipper/dashboard"] .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}
body[data-path="/clipper/dashboard"] .app-main{padding-top:24px;background:#000}
body[data-path="/clipper/dashboard"] .page-head{margin:0 0 20px}
body[data-path="/clipper/dashboard"] .page-head h1{font-size:20px;line-height:28px;font-weight:500;letter-spacing:-.02em;margin:8px 0 0;color:#fff}
body[data-path="/clipper/dashboard"] .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[data-path="/clipper/dashboard"] .clipper-rank-pill i{font-size:9px;color:#9b632f;font-style:normal}
body[data-path="/clipper/dashboard"] .clipper-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 20px}
body[data-path="/clipper/dashboard"] .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[data-path="/clipper/dashboard"] .clipper-metrics .metric-1{grid-column:1/-1;height:176px;padding:24px 20px;background:linear-gradient(135deg,#171717,#080808);border-color:#1c1c1c}
body[data-path="/clipper/dashboard"] .clipper-metrics .metric-2{background:linear-gradient(180deg,#030303 55%,#001d08);border-color:#102416}
body[data-path="/clipper/dashboard"] .clipper-metrics .metric-3{background:linear-gradient(180deg,#030303 55%,#1b0800);border-color:#28150d}
body[data-path="/clipper/dashboard"] .clipper-metrics .metric-4{background:linear-gradient(180deg,#030303 55%,#00121e);border-color:#0b2534}
body[data-path="/clipper/dashboard"] .clipper-metrics article>span{font-size:12px;line-height:12px;font-weight:500;color:#bbb}
body[data-path="/clipper/dashboard"] .clipper-metrics .metric-1>span{font-size:16px;line-height:20px}
body[data-path="/clipper/dashboard"] .clipper-metrics article>strong{font-size:16px;line-height:20px;font-weight:500;margin:0;color:#fff;overflow:visible}
body[data-path="/clipper/dashboard"] .clipper-metrics .metric-1>strong{font-size:30px;line-height:36px;font-weight:400}
body[data-path="/clipper/dashboard"] .clipper-metrics .metric-2>strong{color:#45ff72}
body[data-path="/clipper/dashboard"] .clipper-metrics .metric-3>strong{color:#ff4c17}
body[data-path="/clipper/dashboard"] .clipper-metrics .metric-4>strong{color:#3bbcff}
body[data-path="/clipper/dashboard"] .clipper-metrics article em{position:absolute;left:30px;bottom:12px;color:inherit;font-size:10px;line-height:20px;font-style:normal}
body[data-path="/clipper/dashboard"] .clipper-metrics .metric-3 em{color:#ff4c17}body[data-path="/clipper/dashboard"] .clipper-metrics .metric-4 em{color:#3bbcff}
body[data-path="/clipper/dashboard"] .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[data-path="/clipper/dashboard"] .clipper-videos{padding:0;background:transparent;border:0}
body[data-path="/clipper/dashboard"] .clipper-videos .section-head{margin-bottom:8px}
body[data-path="/clipper/dashboard"] .clipper-videos .section-head p{font-size:.72rem}
body[data-path="/clipper/dashboard"] .submission-tabs{display:flex;width:100%;border-radius:8px;background:transparent;border:0;padding:0;gap:4px;overflow-x:auto}
body[data-path="/clipper/dashboard"] .submission-tabs a{flex:0 0 auto;color:var(--muted);font-size:.72rem;padding:7px 10px;border-radius:6px;border:1px solid var(--edge);font-weight:650}
body[data-path="/clipper/dashboard"] .submission-tabs a.active{color:#fff;background:#242445;border-color:#393b5e}
body[data-path="/clipper/dashboard"] .clipper-videos .empty{margin-top:10px;border-radius:8px;padding:22px 10px;font-size:.72rem;text-align:center}
body[data-path="/clipper/dashboard"] .clipper-active-campaigns{margin-top:18px}
body[data-path="/clipper/dashboard"] .clipper-active-campaigns>h2{font-size:.95rem;margin:0 0 10px}
body[data-path="/clipper/dashboard"] .clipper-filter-row{display:grid;grid-template-columns:repeat(4,minmax(90px,1fr));gap:7px;overflow-x:auto;padding-bottom:4px}
body[data-path="/clipper/dashboard"] .clipper-filter-row label{display:block;min-width:90px}
body[data-path="/clipper/dashboard"] .clipper-filter-row label>span{display:block;font-size:.62rem;color:#fff;margin:0 0 4px}
body[data-path="/clipper/dashboard"] .clipper-filter-row select{width:100%;height:32px;border-radius:6px;padding:0 22px 0 8px;font-size:.65rem;background:#101123;color:#dfe5f8;border:1px solid var(--edge)}
body[data-path="/clipper/dashboard"] .clipper-campaign-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
body[data-path="/clipper/dashboard"] .clipper-campaign-card{display:block;overflow:hidden;color:inherit;border-radius:7px;background:#090b18;border:1px solid #20243a;text-decoration:none}
body[data-path="/clipper/dashboard"] .clipper-campaign-card .campaign-cover{height:104px;border-radius:0;padding:7px;display:flex;align-items:flex-start;justify-content:space-between}
body[data-path="/clipper/dashboard"] .clipper-campaign-card .campaign-cover small,body[data-path="/clipper/dashboard"] .clipper-campaign-card .campaign-cover span{font-size:.5rem;background:rgba(0,0,0,.62);padding:3px 5px;border-radius:999px;color:#fff}
body[data-path="/clipper/dashboard"] .clipper-campaign-card>div:last-child{padding:8px}
body[data-path="/clipper/dashboard"] .clipper-campaign-card h3{font-size:.7rem;line-height:1.35;margin:4px 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:1.9em}
body[data-path="/clipper/dashboard"] .clipper-campaign-card>div>small{font-size:.54rem;color:var(--muted)}
body[data-path="/clipper/dashboard"] .clipper-campaign-card .campaign-meta{display:block;margin:0}
body[data-path="/clipper/dashboard"] .clipper-campaign-card .campaign-meta b{display:block;font-size:.72rem;color:#fff}
body[data-path="/clipper/dashboard"] .clipper-campaign-card .campaign-meta small{font-size:.52rem}
body[data-path="/clipper/dashboard"] .clipper-campaign-card .campaign-meta>span{display:inline-block;font-size:.5rem;color:#cad1e6;margin-top:4px}
body[data-path="/clipper/dashboard"] .clipper-campaign-card .budget-line{height:3px;margin:7px 0 5px;background:#24263a}
body[data-path="/clipper/dashboard"] .clipper-campaign-card .budget-line i{display:block;height:100%;background:#ff5d2f}
body[data-path="/clipper/dashboard"] .clipper-campaign-card>div:last-child>small:last-child{display:flex;justify-content:space-between}
body[data-path="/clipper/dashboard"] .campaign-empty{grid-column:1/-1}
.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[data-path="/clipper/dashboard"] .clipper-campaign-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){
body[data-path="/clipper/dashboard"] .app-main{margin-top:77px}
body[data-path="/clipper/dashboard"] .page-head,body[data-path="/clipper/dashboard"] .clipper-metrics,body[data-path="/clipper/dashboard"] .clipper-videos,body[data-path="/clipper/dashboard"] .clipper-active-campaigns{width:calc(100% - 10px)}
}