:root{--ink:#211b1b;--muted:#746b6b;--line:#e9e2e2;--panel:#fff;--green:#f01818;--green2:#d80808;--lime:#ff4b43;--soft:#fff1f1;--red:#e20d0d}
body{background:#f8f6f6;color:var(--ink)}
.sidebar{background:linear-gradient(180deg,#270707 0%,#170505 100%)}
.brand-logo{width:36px;height:36px;object-fit:cover;border-radius:10px;background:#fff}
.brand small,.sidebar-foot small{color:#c7aaaa}.nav-label{color:#966b6b}.nav-item{color:#d2bcbc}.nav-item i{color:#9f7373}.nav-item:hover,.nav-item.active{background:#4b1010}.nav-item.active i{color:#ff4b43}.nav-item b{background:#661515}.sidebar-foot{border-color:#4b1717}.status-dot,.source-pill>span{background:#ff3028;box-shadow:0 0 0 4px #5f1616}
.btn.primary{background:linear-gradient(135deg,#ff2424,#d90000);border-color:#df0808;box-shadow:0 7px 18px #e10b0b1c}.btn.primary:hover{filter:brightness(.96)}
.link-btn{color:#db0b0b}.segmented button.active{background:#ffe9e9;color:#c80707}.kpi{position:relative;overflow:hidden}.kpi:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#ff2828,transparent)}
select:focus,input:focus,textarea:focus{border-color:#f05a5a;box-shadow:0 0 0 2px #ffe1e1}.table tbody tr.clickable:hover{background:#fff6f6}.metric-primary{color:#c90808}.score-bar i{background:#f01818}
.login-screen{position:fixed;inset:0;z-index:200;background:radial-gradient(circle at 20% 10%,#ff3b3b 0,#cc0808 30%,#620909 74%,#250404 100%);display:grid;place-items:center;padding:24px}.login-screen.hidden{display:none}.login-screen:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 35%,#fff1 35.2%,transparent 35.5%),linear-gradient(45deg,transparent 65%,#0002 65.2%,transparent 65.5%);background-size:160px 160px}.login-card{position:relative;width:min(430px,100%);padding:34px;background:#fff;border-radius:22px;box-shadow:0 28px 80px #24000080}.login-logo{width:68px;height:68px;object-fit:cover;border-radius:16px;margin-bottom:16px}.login-kicker{font-size:9px;font-weight:800;letter-spacing:.16em;color:#e20d0d}.login-card h1{font-size:25px;margin:8px 0 6px}.login-card p{margin-bottom:20px}.login-card label{font-weight:700;color:#433}.login-submit{width:100%;padding:11px;margin-top:8px}.login-error{display:block;min-height:18px;color:#d00;margin-top:10px}.login-foot{border-top:1px solid #eee2e2;margin-top:14px;padding-top:14px;font-size:9px;color:#8a7777;display:flex;align-items:center;gap:7px}.login-foot span{width:6px;height:6px;background:#ff1d1d;border-radius:50%}
.user-menu{display:flex;align-items:center;gap:8px;padding-left:8px;border-left:1px solid var(--line)}.user-menu b,.user-menu small{display:block}.user-menu b{font-size:10px}.user-menu small{font-size:8px;color:var(--muted)}.btn.icon{padding:7px 9px}
.funnel{display:grid;gap:8px}.funnel-step{position:relative;margin:auto;background:linear-gradient(90deg,#ffeded,#ffd4d4);border:1px solid #ffcaca;padding:10px 14px;text-align:center;border-radius:8px}.funnel-step:nth-child(1){width:100%}.funnel-step:nth-child(2){width:78%}.funnel-step:nth-child(3){width:58%}.funnel-step:nth-child(4){width:42%;background:#ef1717;color:#fff;border-color:#ef1717}.funnel-step b,.funnel-step span{display:block}.funnel-step b{font-size:15px}.funnel-step span{font-size:9px;opacity:.76}.mix-bar{height:18px;background:#eee;border-radius:20px;overflow:hidden;display:flex;margin:22px 0 12px}.mix-bar i{display:block;height:100%}.mix-organic{background:#2a2222}.mix-marketing{background:#ef1717}.mix-legend{display:grid;gap:8px}.mix-legend div{display:flex;justify-content:space-between;font-size:10px}.recommend-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.danger-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#ffe5e5;color:#d00;font-size:20px;font-weight:800}.confirm-dialog form{padding:24px}.confirm-dialog h3{font-size:17px;margin:14px 0 6px}.btn.danger{background:#e20d0d;color:#fff!important;border-color:#e20d0d!important}
@media(max-width:900px){.recommend-grid{grid-template-columns:1fr}.user-menu>div{display:none}}

@font-face{font-family:Manrope;src:url('/fonts/manrope-latin.woff2') format('woff2');font-style:normal;font-weight:400 800;font-display:swap}
:root,html,body,button,input,select,textarea,table{font-family:Manrope,sans-serif!important}
body{overflow-x:hidden}.sidebar{width:244px;padding:14px 12px;transition:width .22s ease}.sidebar+main{margin-left:244px;max-width:none;transition:margin-left .22s ease}.brand{padding:2px 5px 14px;min-height:48px}.brand>div{min-width:0}.sidebar-toggle{margin-left:auto;border:1px solid #653232;background:#3d1010;color:#fff;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;cursor:pointer;font:700 18px Manrope}.sidebar-toggle:hover{background:#5a1515}.nav-icon{width:20px!important;height:20px;display:grid;place-items:center;flex:none}.nav-icon svg{width:18px;height:18px;fill:currentColor}.nav-item{min-height:40px;padding:9px 10px;position:relative;font-weight:600}.nav-item span{white-space:nowrap}.nav-item em{font-style:normal;font-size:12px;margin-left:auto;transition:transform .18s}.nav-group.open>.nav-item em{transform:rotate(180deg)}.nav-submenu{display:none;margin:3px 0 7px 31px;padding-left:10px;border-left:1px solid #602323}.nav-group.open>.nav-submenu{display:grid;gap:2px}.nav-submenu button{border:0;background:transparent;color:#bfa9a9;text-align:left;border-radius:7px;padding:8px 10px;min-height:34px;font:600 10px Manrope;cursor:pointer;width:100%}.nav-submenu button:hover,.nav-submenu button.active{background:#4b1010;color:#fff}.sidebar.collapsed{width:72px}.sidebar.collapsed+main{margin-left:72px}.sidebar.collapsed .brand>div,.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-item span,.sidebar.collapsed .nav-item b,.sidebar.collapsed .nav-item em,.sidebar.collapsed .nav-submenu,.sidebar.collapsed .sidebar-foot>div{display:none}.sidebar.collapsed .brand{justify-content:center;padding-inline:0}.sidebar.collapsed .brand-logo{width:34px;height:34px}.sidebar.collapsed .sidebar-toggle{position:absolute;top:58px;left:22px;width:28px}.sidebar.collapsed nav{margin-top:36px}.sidebar.collapsed .nav-item{justify-content:center;padding:9px}.sidebar.collapsed .nav-item::after{content:attr(data-tooltip);position:absolute;left:54px;top:50%;transform:translateY(-50%);background:#241010;color:#fff;padding:7px 10px;border-radius:7px;white-space:nowrap;font:600 10px Manrope;opacity:0;pointer-events:none;transition:.15s;box-shadow:0 8px 24px #0003;z-index:30}.sidebar.collapsed .nav-item:hover::after{opacity:1}.sidebar.collapsed .sidebar-toggle span{transform:rotate(180deg)}
main{padding:0 clamp(14px,2vw,30px) 48px}.topbar{min-height:74px;height:auto;padding:10px 0;gap:16px}.top-actions{justify-content:flex-end;flex-wrap:wrap}.section-bar>div:first-child{max-width:720px}.section-bar h2{font-size:17px}.section-bar p{font-size:10px}.layout-2-1.single{grid-template-columns:1fr}.panel[hidden]{display:none!important}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%236e6262' d='m7 9 5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px!important}
.date-range-control{position:relative}.date-range-button{display:flex;align-items:center;gap:8px;min-width:168px;justify-content:flex-start}.date-range-button svg{width:15px;height:15px;fill:#c90b0b}.date-range-button span{flex:1;text-align:left}.date-range-button i{font-style:normal;margin-left:8px}.date-range-popover{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:45;width:390px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 55px #36111124;padding:14px}.date-range-popover.open{display:block}.range-presets{display:flex;gap:6px;margin-bottom:12px}.range-presets button{border:1px solid #eadede;background:#fff;border-radius:7px;padding:7px 10px;font:600 10px Manrope;cursor:pointer}.range-presets button.active{background:#ffe9e9;color:#c80707;border-color:#ffcaca}.range-fields{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:end}.range-fields label{margin:0}.range-fields>span{font-size:9px;color:var(--muted);padding-bottom:9px}.range-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.range-footer small{color:var(--muted);font-size:9px}
.toast-stack{position:fixed;right:20px;top:20px;z-index:200;display:grid;gap:8px;width:min(360px,calc(100vw - 40px))}.toast{background:#241010;color:#fff;border-radius:11px;padding:12px 14px;box-shadow:0 16px 45px #0003;display:flex;gap:10px;align-items:flex-start;animation:toastIn .2s ease}.toast:before{content:"";width:8px;height:8px;border-radius:50%;background:#43c981;margin-top:5px;flex:none}.toast.error:before{background:#ff3b30}.toast b{display:block;font-size:11px}.toast p{color:#d9caca;font-size:9px;margin-top:2px}.toast.hide{opacity:0;transform:translateY(-8px);transition:.2s}@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}}
.table-wrap{max-width:100%}.table{table-layout:fixed}.table th,.table td{overflow:hidden;text-overflow:ellipsis}.recommend-grid{align-items:start}.source-pill{min-width:128px}.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.kpi-grid.compact{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
@media(max-width:1180px){.topbar{align-items:flex-start}.top-actions{max-width:70%}.source-pill{display:none}.layout-2-1,.layout-1-1{grid-template-columns:1fr}}
@media(max-width:820px){.sidebar:not(.collapsed){width:224px}.sidebar:not(.collapsed)+main{margin-left:224px}.topbar{display:block}.top-actions{max-width:none;justify-content:flex-start;margin-top:10px}.date-range-popover{left:0;right:auto;width:min(390px,calc(100vw - 105px))}}

/* Light Qutby navigation */
.sidebar{background:linear-gradient(180deg,#fffaf9 0%,#fff4f2 100%);color:#332020;border-right:1px solid #efd9d6;box-shadow:8px 0 28px rgba(113,37,30,.05)}
.brand strong{color:#2c1a1a}.brand small{color:#9a7572}.brand-logo{box-shadow:0 5px 16px rgba(206,25,18,.13)}
.sidebar-toggle{background:#fff;border-color:#edcbc7;color:#d51a14}.sidebar-toggle:hover{background:#ffe8e5;border-color:#e8aaa4}
.nav-label{color:#b28b87}.nav-item{color:#684b48}.nav-item i{color:#ae7772}.nav-item:hover{background:#ffebe8;color:#b60d09}.nav-item.active{background:linear-gradient(135deg,#ff332b,#e20d08);color:#fff;box-shadow:0 7px 18px rgba(226,13,8,.18)}.nav-item.active i{color:#fff}.nav-item b{background:#ffe0dd;color:#c31510}.nav-item.active b{background:rgba(255,255,255,.2);color:#fff}.nav-item em{color:#b3817d}.nav-item.active em{color:#fff}
.nav-submenu{border-left-color:#e8c5c1}.nav-submenu button{color:#82615e}.nav-submenu button:hover,.nav-submenu button.active{background:#ffe5e2;color:#c81610}.nav-submenu button.active{font-weight:750}
.sidebar-foot{border-top-color:#ead2ce}.sidebar-foot strong{color:#5a3835}.sidebar-foot small{color:#9d7773}.status-dot{background:#ef3129;box-shadow:0 0 0 4px #ffe0dd}
.sidebar.collapsed .nav-item::after{background:#fff;color:#4e2f2d;border:1px solid #eed6d3;box-shadow:0 10px 28px rgba(88,35,31,.15)}

@media(max-width:820px){
  .sidebar:not(.collapsed){width:236px!important;z-index:90;box-shadow:20px 0 50px rgba(75,28,24,.18)}
  .sidebar:not(.collapsed)+main{margin-left:72px!important}
  .sidebar.collapsed{width:72px!important}
  .sidebar.collapsed+main{margin-left:72px!important}
  .sidebar:not(.collapsed) .brand>div,.sidebar:not(.collapsed) .nav-label,.sidebar:not(.collapsed) .nav-item span,.sidebar:not(.collapsed) .nav-item b,.sidebar:not(.collapsed) .nav-item em,.sidebar:not(.collapsed) .sidebar-foot>div{display:block!important}
  .sidebar:not(.collapsed) .brand{justify-content:flex-start!important;padding:2px 5px 14px!important}
  .sidebar:not(.collapsed) .nav-item{justify-content:flex-start!important;padding:9px 10px!important}
  .sidebar:not(.collapsed) .nav-item i{width:20px!important}
  .sidebar:not(.collapsed) .nav-group.open>.nav-submenu{display:grid!important}
  .sidebar:not(.collapsed) nav{margin-top:0!important}
}

.legacy-sync{display:none!important}.admin-actions{display:flex;gap:7px;align-items:center}.date-range-button{min-width:210px;padding:7px 11px}.date-range-button>span{display:grid;gap:1px}.date-range-button>span small{font-size:8px;color:#9a7a77;font-weight:600}.date-range-button>span b{font-size:10px;color:#34211f}.date-range-button>i{width:18px;height:18px;display:grid;place-items:center;margin-left:10px}.date-range-button>i svg{width:15px;height:15px;fill:#78615f}.range-title{display:grid;gap:3px;padding-bottom:12px}.range-title b{font-size:12px}.range-title small{font-size:9px;color:var(--muted)}input[type=date]{appearance:none;position:relative;padding-right:34px}input[type=date]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer;width:16px;height:16px;margin:0}.range-fields input{width:100%;min-height:38px}.admin-actions .btn{min-height:34px}
@media(max-width:820px){.admin-actions{display:grid;grid-template-columns:1fr;width:100%}.date-range-button{min-width:0}}

/* Contextual workspace navigation */
.sidebar{background:#f5f7fb;border-right:1px solid #dfe3ea;box-shadow:none;color:#242832;overflow-y:auto;overflow-x:visible}
.sidebar{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain;scroll-behavior:smooth}
.sidebar::-webkit-scrollbar{width:0;height:0;display:none}
.brand{position:relative;padding-right:38px}.brand strong{color:#20242d}.brand small{color:#7b8492}.sidebar-toggle{position:absolute;right:4px;top:5px;z-index:120;background:#fff;border-color:#d7dce4;color:#383e49;box-shadow:0 2px 8px #25304412}.sidebar-toggle:hover{background:#eef1f6;border-color:#c6ccd6}
.sidebar-search{height:46px;margin:4px 3px 14px;border:1px solid #d8dde5;background:#fff;border-radius:13px;display:flex;align-items:center;gap:9px;padding:0 12px}.sidebar-search svg{width:18px;height:18px;fill:#7a8492;flex:none}.sidebar-search input{border:0!important;box-shadow:none!important;background:transparent;padding:0;min-width:0;width:100%;font-size:12px}
.shop-context{margin:0 3px 8px}.shop-context label{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 5px;color:#7b8492}.shop-context select{width:100%;min-height:36px;border-color:#d8dde5;background-color:#fff;font-size:9px}
.nav-label{color:#737c89;padding-top:14px}.nav-item{color:#303640;border:1px solid transparent;border-radius:10px}.nav-item i{color:#4d5664}.nav-item:hover{background:#f0f2f5;color:#1e232b}.nav-item.active{background:#eef1f5;color:#20242c;border-color:#e3e6eb;box-shadow:none}.nav-item.active i{color:#e51b16}.nav-item b{background:#e9edf3;color:#596270}.nav-item.active b{background:#f8ddda;color:#c8231e}.nav-item em{color:#626b78}.nav-item.active em{color:#59616d}.nav-submenu{border-left-color:#e0e4ea;margin:5px 0 9px 20px;padding:3px 0 3px 15px;gap:4px}.nav-submenu button{color:#596270;padding:9px 11px;border-radius:8px}.nav-submenu button:hover{background:#f0f2f5;color:#20252d}.nav-submenu button.active{background:#f8eceb;color:#b92a25}.sidebar-foot{border-top-color:#dfe3ea}.sidebar-foot strong{color:#333944}.sidebar-foot small{color:#7c8592}

*,*::before,*::after{font-family:Manrope,Arial,sans-serif!important}
.sidebar.collapsed .sidebar-search,.sidebar.collapsed .shop-context{display:none}.sidebar.collapsed .sidebar-toggle{position:absolute;top:58px;left:22px;right:auto}.sidebar.collapsed .nav-item::after{background:#fff;color:#313741;border-color:#dfe3e9}
.action-toolbar{flex-wrap:wrap}.action-toolbar #actionCampaign{min-width:260px}.selection-count{font-size:9px;color:#6f7885;background:#f1f3f6;border-radius:7px;padding:7px 9px}.material-check{width:15px;height:15px;accent-color:#e51b16;cursor:pointer}.table .check-cell{text-align:center}.table tr.selected{background:#fff4f3}.legacy-sync{display:none!important}
@media(max-width:820px){.sidebar:not(.collapsed) .sidebar-search,.sidebar:not(.collapsed) .shop-context{display:flex!important}.sidebar:not(.collapsed) .shop-context{display:block!important}}

/* Sidebar and workspace share one responsive grid */
.sidebar+main{width:calc(100% - 244px);min-width:0;transition:margin-left .22s ease,width .22s ease}
.sidebar.collapsed+main{margin-left:72px;width:calc(100% - 72px)}
.sidebar.collapsed{width:72px!important}.sidebar.collapsed+main{margin-left:72px!important;width:calc(100% - 72px)!important}.sidebar.collapsed .brand{padding-right:0!important}
main>*,.view,.subview,.panel,.layout-2-1,.layout-1-1,.recommend-grid{min-width:0}
@media(max-width:820px){
  .sidebar:not(.collapsed)+main{margin-left:72px!important;width:calc(100% - 72px)!important}
  .sidebar.collapsed+main{margin-left:72px!important;width:calc(100% - 72px)!important}
  main{padding-inline:12px}
  .top-actions{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .top-actions>*{max-width:100%;min-width:0}
  .top-actions select,.top-actions .btn{width:100%}
}
.user-avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#fee2e0;color:#c9221c;font-weight:800;font-size:11px;flex:none}.sidebar-account{margin-left:auto;border:0;background:transparent;color:#68717e;cursor:pointer;border-radius:7px;width:28px;height:28px}.sidebar-account:hover{background:#e9edf3;color:#d91c16}.sidebar.collapsed .user-avatar,.sidebar.collapsed .sidebar-account{display:none}
#syncAdvRange,#syncMaterials,#syncVideoRange,#syncLiveSessions,#syncLiveSessionsList,#syncShopPerformance,#syncPromotions,[data-action="marketing"],[data-action="products"],[data-action="videos"]{display:none!important}
body.range-missing #affDashboard::before,body.range-missing #affPerformance::before,body.range-missing #affCreators::before{content:"Data video untuk rentang ini belum tersedia di database. Sistem tidak mengganti dengan data dari periode lain.";display:block;background:#fff6df;border:1px solid #ead49b;color:#765b18;border-radius:9px;padding:10px 12px;margin-bottom:11px;font-size:10px}
@media(max-width:820px){.sidebar:not(.collapsed){width:236px!important;box-shadow:20px 0 50px rgba(36,40,50,.18)}.sidebar:not(.collapsed)+main{margin-left:72px!important;width:calc(100% - 72px)!important}.date-range-popover{width:min(360px,calc(100vw - 92px))}.user-menu{display:none}}
@media(max-width:470px){main{padding-inline:9px}.topbar h1{font-size:16px}.panel{padding:10px}.date-range-popover{position:fixed;left:81px!important;right:10px!important;top:76px;width:auto!important}.range-fields{grid-template-columns:1fr}.range-fields>span{display:none}.table-wrap{border-radius:8px}.kpi strong{font-size:18px}}

/* HRIS-equivalent date range control (kept local to Qutby Workspace). */
.date-range-control{position:relative;display:grid;gap:6px;min-width:250px}.date-range-caption{font-size:10px;font-weight:750;color:#4e5869}.date-trigger{width:100%;min-width:250px;height:42px;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:9px;background:#fff;color:var(--ink);border:1px solid #dfe3eb;border-radius:11px;box-shadow:none;text-align:left;font-size:12px;font-weight:550;white-space:nowrap;cursor:pointer}.date-trigger:hover,.date-trigger:focus-visible{border-color:var(--red);outline:2px solid #ff1f2d20}.date-trigger span{overflow:hidden;text-overflow:ellipsis}.date-trigger>i{flex:none;width:7px;height:7px;border-right:1.5px solid #657081;border-bottom:1.5px solid #657081;transform:rotate(45deg) translateY(-2px);margin-right:7px}.date-range-popover{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:2000;width:440px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;padding:13px;background:#fff;border:1px solid #e0e3e9;border-radius:16px 16px 14px 14px;box-shadow:0 18px 54px #1d27302b;color:#253041}.date-range-popover.open{display:block}.calendar-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.calendar-month{min-width:0}.calendar-title{display:block;text-align:center;margin-bottom:8px;font-size:12px}.calendar-head{display:grid;grid-template-columns:minmax(0,1fr) 28px 28px;gap:8px;align-items:center;margin-bottom:12px}.calendar-head .calendar-period-trigger{height:30px;padding:2px 7px;display:flex;align-items:center;justify-content:flex-start;background:#fff;color:#263142;border:0;box-shadow:none;font-size:12px;font-weight:650;cursor:default}.calendar-period-trigger i{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid #6f7784;margin-left:8px}.calendar-head .calendar-nav{height:28px;padding:0;background:transparent;color:#263142;border:0;box-shadow:none;font-size:26px;font-weight:400;line-height:1;cursor:pointer}.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;text-align:center;gap:2px}.calendar-weekdays{border-bottom:1px solid #e6e7ea;margin-bottom:5px;padding-bottom:6px;color:#7b8189;font-size:10px}.calendar-days button,.calendar-days>span{width:27px;height:27px;max-width:100%;margin:auto;padding:0;border:0;border-radius:50%;background:transparent;color:#303944;box-shadow:none;font-size:12px;font-weight:500;line-height:1}.calendar-days button{cursor:pointer}.calendar-days button:hover{background:#ecf2ff}.calendar-days button.today{outline:1px solid #7b8493;outline-offset:-2px}.calendar-days button.in-range{border-radius:4px;background:#eaf0fc}.calendar-days button.selected{background:#1163d8;color:#fff;outline:0}.calendar-days button:disabled{opacity:.3;cursor:not-allowed}.calendar-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.calendar-footer button{min-height:28px;padding:7px 12px;border:0;border-radius:8px;background:transparent;color:#283342;box-shadow:none;font-size:12px;font-weight:600;cursor:pointer}.calendar-footer button:hover{background:#f1f3f6}.calendar-footer button:last-child{background:#1163d8;color:#fff}.calendar-footer button:last-child:hover{background:#0d55ba}
@media(max-width:640px){.date-range-control,.date-trigger{min-width:0}.date-range-popover{position:fixed;left:80px!important;right:8px!important;top:76px!important;width:auto!important;padding:11px}.calendar-panels{gap:8px}.calendar-title{font-size:10px}.calendar-head{grid-template-columns:minmax(0,1fr) 20px 20px;gap:4px}.calendar-head .calendar-period-trigger{font-size:10px;padding:0}.calendar-head .calendar-nav{width:20px;height:25px;font-size:20px}.calendar-weekdays{font-size:8px}.calendar-days button,.calendar-days>span{width:min(25px,calc((100vw - 76px)/14));height:min(25px,calc((100vw - 76px)/14));font-size:10px}}

/* Prevent controls and content from escaping their card. */
.panel,.layout-1-1,.layout-2-1,.table-wrap,.data-toolbar>*{min-width:0}input,select,textarea{max-width:100%;box-sizing:border-box}

.platform-context{margin:4px 0 10px}.platform-context label,.shop-context label{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 5px;color:#7b8492}.platform-context select{width:100%;min-height:40px;border-color:#d8dde5;background-color:#fff;font-size:11px}.sidebar.collapsed .platform-context{display:block!important;width:100%!important}

/* Fully interactive month/year selection for both performance and posting ranges. */
.calendar-head .calendar-period-trigger{cursor:pointer}.calendar-head .calendar-period-trigger:hover{background:#f1f4f8!important;border-radius:7px}.calendar-period-trigger[aria-expanded="true"] i{transform:rotate(180deg)}.calendar-period-picker{min-height:205px}.calendar-year-switch{display:grid;grid-template-columns:28px minmax(0,1fr) 28px;align-items:center;gap:7px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid #e6e7ea;text-align:center}.calendar-year-switch strong{font-size:11px}.calendar-year-switch button{width:28px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;color:#303944;font-size:22px;cursor:pointer}.calendar-year-switch button:hover{background:#ecf2ff}.calendar-year-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px 5px;margin-bottom:10px}.calendar-year-grid button{min-height:27px;padding:3px 2px;border:0;border-radius:99px;background:transparent;color:#303944;font-size:10px;cursor:pointer}.calendar-year-grid button:hover{background:#ecf2ff}.calendar-year-grid button.selected{background:#1163d8;color:#fff}.calendar-month-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.calendar-month-grid button{padding:7px 3px;border:1px solid #e4e7ed;border-radius:8px;background:#fff;color:#303944;font-size:10px;cursor:pointer}.calendar-month-grid button:hover{border-color:#a8bde2;background:#f3f7ff}.calendar-month-grid button.selected{background:#1163d8;color:#fff;border-color:#1163d8}.calendar-draft-range{margin-top:12px;padding:8px 10px;border:1px solid #e0e6ee;border-radius:9px;background:#f7f9fc;color:#344054;text-align:center;font-size:10px;font-weight:650;font-variant-numeric:tabular-nums}

/* Unified type scale */
html{font-size:13px}.topbar h1{font-size:18px;line-height:1.25}.topbar p,.section-bar p,.panel-head p,.callout p,.note{font-size:10.5px;line-height:1.5}.section-bar h2{font-size:17px;line-height:1.3}.panel h3,.panel-head h3{font-size:13px;line-height:1.35}.nav-label{font-size:9px}.nav-item,.nav-submenu button{font-size:11px}.sidebar-search input,.shop-context select{font-size:11px}.btn,select,input,textarea,label{font-size:10.5px}.table{font-size:10.5px}.table th{font-size:9.5px;line-height:1.35;text-transform:none;letter-spacing:.01em}.table td{font-size:10.5px;line-height:1.45}.table .sub{font-size:9.5px;line-height:1.4}.badge{font-size:9px;text-transform:none;letter-spacing:0}.kpi-top{font-size:9.5px;text-transform:none;letter-spacing:.01em}.kpi strong{font-size:19px}.kpi small{font-size:9.5px}.date-range-button>span small{font-size:9px}.date-range-button>span b{font-size:10.5px}.range-title b{font-size:12px}.range-title small,.range-footer small{font-size:9.5px}.range-fields label{font-size:9.5px}.health-row b,.rule-list b{font-size:10.5px}.health-row small,.rule-list span{font-size:9.5px}.pager,.selection-count{font-size:9.5px}.detail small{font-size:9px;text-transform:none;letter-spacing:.02em}.detail strong{font-size:10.5px}.login-kicker,.drawer-head small,.dialog-head small{font-size:9px}.login-card label{font-size:10.5px}

/* Stable application canvas and analytics charts */
html{overflow-y:scroll;scrollbar-gutter:stable}
body,main,.view,.subview{width:100%;max-width:100%;box-sizing:border-box}
main{overflow-x:hidden}.view,.subview{contain:inline-size}
.section-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.section-actions select{min-width:210px}
.data-toolbar>*{flex:0 1 auto}.data-toolbar .search{min-width:210px;flex:1 1 260px}
.inline-link{display:inline-flex;margin-top:4px;color:#c9231d;font-size:9px;font-weight:700;text-decoration:none}.inline-link:hover{text-decoration:underline}
.btn.danger{background:#fff;color:#c6211b!important;border-color:#e6aaa6!important}.btn.danger:hover{background:#fff0ef}
.metric-chart{min-height:210px;display:grid;align-content:end}.bar-chart{height:180px;display:flex;align-items:flex-end;gap:7px;padding:12px 8px 0;border-bottom:1px solid #dfe3e8;overflow-x:auto}.bar-group{height:100%;min-width:34px;display:grid;grid-template-rows:1fr 22px;gap:4px;align-items:end}.bars{height:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px}.bar{display:block;width:7px;min-height:2px;border-radius:4px 4px 1px 1px;transition:height .25s ease}.bar.impressions,.chart-legend i.impressions{background:#f0524b}.bar.clicks,.chart-legend i.clicks{background:#667085}.bar.orders,.chart-legend i.orders{background:#31a36f}.bar-group>b{text-align:center;font-size:8.5px;color:#6e7682;font-weight:600;white-space:nowrap}.chart-legend{display:flex;gap:15px;justify-content:flex-end;padding-top:9px;font-size:9px;color:#69717d}.chart-legend span{display:flex;align-items:center;gap:5px}.chart-legend i{width:8px;height:8px;border-radius:2px}.drawer-section .bar-chart{height:150px}
body.range-missing #affDashboard::before,body.range-missing #affPerformance::before,body.range-missing #affCreators::before{content:"Data tersimpan belum menutup seluruh rentang ini. Sistem tidak memanggil API dan tidak mengganti dengan periode lain."}
body.range-fallback #affDashboard::before,body.range-fallback #affPerformance::before,body.range-fallback #affCreators::before{content:"Rentang persis belum tersedia sebagai fact harian. Tampilan memakai snapshot PostgreSQL terkecil yang mencakup tanggal pilihan; tanggal sumber sebenarnya tercantum di bawah judul.";display:block;background:#eef6ff;border:1px solid #bed8f4;color:#315d86;border-radius:9px;padding:10px 12px;margin-bottom:11px;font-size:10px}
@media(max-width:820px){.section-actions{width:100%}.section-actions>*{width:100%}.section-actions select{min-width:0}.bar-chart{gap:4px}.bar-group{min-width:30px}}

/* Fixed navigation: always expanded, submenu is indented without resizing the rail. */
:root{--workspace-sidebar-width:276px}
.sidebar,.sidebar:not(.collapsed),.sidebar.collapsed{width:var(--workspace-sidebar-width)!important;min-width:var(--workspace-sidebar-width)!important;max-width:var(--workspace-sidebar-width)!important;padding:14px 14px!important}
.sidebar+main,.sidebar:not(.collapsed)+main,.sidebar.collapsed+main{margin-left:var(--workspace-sidebar-width)!important;width:calc(100% - var(--workspace-sidebar-width))!important}
.sidebar-toggle{display:none!important}
.sidebar .brand,.sidebar.collapsed .brand{justify-content:flex-start!important;padding:2px 5px 14px!important;padding-right:5px!important}
.sidebar .brand>div,.sidebar .nav-label,.sidebar .nav-item span,.sidebar .nav-item b,.sidebar .nav-item em,.sidebar .sidebar-foot>div,.sidebar.collapsed .brand>div,.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-item span,.sidebar.collapsed .nav-item b,.sidebar.collapsed .nav-item em,.sidebar.collapsed .sidebar-foot>div{display:block!important}
.sidebar .brand-logo,.sidebar.collapsed .brand-logo{width:42px!important;height:42px!important}
.sidebar nav,.sidebar.collapsed nav{margin-top:0!important;width:100%}
.sidebar .nav-item,.sidebar.collapsed .nav-item{justify-content:flex-start!important;padding:9px 10px!important;width:100%!important}
.sidebar .nav-item i,.sidebar.collapsed .nav-item i{width:20px!important}
.sidebar-search,.sidebar.collapsed .sidebar-search{display:flex!important;width:100%!important;min-width:0!important;flex:0 0 46px;margin:4px 0 14px!important}
.shop-context,.sidebar.collapsed .shop-context{display:block!important;width:100%!important;margin:0 0 8px!important}
.shop-context select{width:100%!important}
.sidebar .nav-group.open>.nav-submenu,.sidebar.collapsed .nav-group.open>.nav-submenu{display:grid!important}
.sidebar .nav-submenu{width:calc(100% - 20px);margin-left:20px!important}
@media(max-width:820px){.sidebar,.sidebar:not(.collapsed),.sidebar.collapsed{width:var(--workspace-sidebar-width)!important;min-width:var(--workspace-sidebar-width)!important;max-width:var(--workspace-sidebar-width)!important}.sidebar+main,.sidebar:not(.collapsed)+main,.sidebar.collapsed+main{margin-left:var(--workspace-sidebar-width)!important;width:calc(100% - var(--workspace-sidebar-width))!important}}

/* Permanent section navigation: section names are labels, leaf pages are the actions. */
.nav-section{margin-top:7px}
.sidebar .legacy-division-label{display:none!important}
.nav-section-title{display:flex!important;align-items:center;justify-content:space-between;padding:14px 8px 6px!important;color:#737c89!important;font-size:9px!important;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.nav-section-title b{display:inline-flex!important;align-items:center;justify-content:center;min-width:24px;height:18px;padding:0 6px;border-radius:999px;background:#e9edf3;color:#596270;font-size:9px;letter-spacing:0}
.nav-section-trigger{display:none!important}
.sidebar .nav-section>.nav-submenu,.sidebar .nav-section.open>.nav-submenu,.sidebar.collapsed .nav-section>.nav-submenu,.sidebar.collapsed .nav-section.open>.nav-submenu{display:grid!important;width:100%!important;margin:0!important;padding:0!important;border:0!important;gap:2px!important}
.nav-submenu .nav-leaf{display:flex;align-items:center;gap:11px;min-height:40px;width:100%;padding:9px 10px!important;border:1px solid transparent;border-radius:10px;color:#303640;font-size:11px;font-weight:600;line-height:1.25}
.nav-submenu .nav-leaf:hover{background:#f0f2f5;color:#1e232b}
.nav-submenu .nav-leaf.active{background:#eef1f5;color:#20242c;border-color:#e3e6eb;font-weight:700;box-shadow:none}
.nav-leaf-icon{width:19px;height:19px;display:grid;place-items:center;flex:0 0 19px;color:#4d5664}
.nav-leaf-icon svg{width:18px;height:18px;fill:currentColor}
.nav-submenu .nav-leaf.active .nav-leaf-icon{color:#e51b16}
.nav-section[hidden],.nav-leaf[hidden]{display:none!important}