:root{--ink:#172029;--muted:#75808d;--line:#e8edf1;--canvas:#f5f7f9;--white:#fff;--teal:#00a7a0;--teal-dark:#007d79;--navy:#122a34;--orange:#ff7a45;--red:#d94242;--shadow:0 12px 38px rgba(18,42,52,.07)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--canvas)}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.app{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:252px;background:#fff;border-right:1px solid var(--line);padding:25px 17px 17px;display:flex;flex-direction:column;z-index:30}.brand{display:flex;align-items:center;gap:11px;font-weight:800;line-height:.9;letter-spacing:-.02em;padding:0 8px 24px}.brand small{font-size:8px;letter-spacing:.18em;color:#8b979e}.brand-mark{width:39px;height:39px;border-radius:12px;background:linear-gradient(145deg,var(--teal),#006f6c);display:grid;place-items:center;color:#fff;font-size:21px;box-shadow:0 8px 20px rgba(0,167,160,.22)}nav{display:flex;flex-direction:column;gap:4px}.nav-label{font-size:9px;font-weight:800;letter-spacing:.16em;color:#a4acb3;padding:20px 13px 7px}.nav-item{border:0;background:transparent;border-radius:11px;padding:11px 12px;display:flex;align-items:center;gap:12px;color:#66727e;text-align:left;font-size:13px;font-weight:600}.nav-item i{font-style:normal;font-size:17px;width:19px;text-align:center}.nav-item b{margin-left:auto;background:#ecf4f3;color:var(--teal-dark);border-radius:20px;padding:2px 7px;font-size:10px}.nav-item:hover{background:#f3f8f7;color:var(--teal-dark)}.nav-item.active{background:#eaf7f6;color:var(--teal-dark);box-shadow:inset 3px 0 var(--teal)}.sidebar-user{margin-top:auto;border-top:1px solid var(--line);padding:16px 5px 2px;display:flex;align-items:center;gap:10px}.avatar{width:35px;height:35px;border-radius:10px;background:#dff3f1;color:var(--teal-dark);display:grid;place-items:center;font-size:11px;font-weight:800}.sidebar-user div:nth-child(2){min-width:0;display:flex;flex-direction:column}.sidebar-user strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user small{font-size:9px;color:var(--muted);margin-top:3px}.sidebar-user button{border:0;background:transparent;margin-left:auto;color:#9aa3aa;font-size:17px}main{margin-left:252px;padding:0 34px 50px;min-height:100vh}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between}.topbar>div:first-of-type{display:flex;flex-direction:column;gap:4px}.topbar span#breadcrumb{font-size:10px;color:#97a1a9}.topbar h1{font-size:23px;margin:0;letter-spacing:-.04em}.top-actions{display:flex;align-items:center;gap:10px}.live-pill{font-size:10px;font-weight:700;background:#fff;border:1px solid var(--line);border-radius:30px;padding:9px 12px;display:flex;align-items:center;gap:7px}.live-pill span{width:7px;height:7px;border-radius:50%;background:#30b876;box-shadow:0 0 0 4px #e7f7ee}.icon-btn{width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#59636c}.mobile{display:none}.view{display:none;animation:fade .2s ease}.view.active{display:block}@keyframes fade{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}.hero{position:relative;overflow:hidden;border-radius:20px;padding:30px 33px;background:linear-gradient(115deg,#0c7774,#00aaa3 60%,#39c1b6);color:#fff;display:flex;align-items:center;justify-content:space-between;box-shadow:0 16px 42px rgba(0,126,121,.16)}.hero:after{content:"";position:absolute;width:300px;height:300px;border:45px solid rgba(255,255,255,.08);border-radius:50%;right:110px;top:-150px}.hero h2{font-size:26px;margin:8px 0 7px;letter-spacing:-.04em}.hero p{margin:0;color:#d6f6f4;font-size:12px}.hero-date{z-index:1;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);padding:13px 16px;border-radius:13px;display:flex;flex-direction:column;gap:4px;min-width:135px}.hero-date small{font-size:9px;opacity:.72}.hero-date strong{font-size:12px}.eyebrow{font-size:9px;font-weight:800;letter-spacing:.16em;opacity:.76}.eyebrow.teal{color:var(--teal-dark);opacity:1}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:18px 0}.metric-grid.compact{grid-template-columns:repeat(3,1fr)}.metric{background:#fff;border:1px solid var(--line);padding:18px;border-radius:15px;box-shadow:var(--shadow);position:relative;overflow:hidden}.metric:after{content:"";position:absolute;width:56px;height:56px;border-radius:50%;right:-15px;top:-17px;background:var(--metric-soft,#e9f6f5)}.metric-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--metric-soft,#e9f6f5);color:var(--metric-color,var(--teal-dark));font-weight:800;margin-bottom:15px}.metric small{font-size:10px;color:var(--muted);display:block;margin-bottom:6px}.metric strong{font-size:21px;letter-spacing:-.04em}.metric footer{margin-top:8px;font-size:9px;color:#939ca3}.grid{display:grid;gap:17px;margin:17px 0}.grid.two-one{grid-template-columns:1.55fr 1fr}.grid.equal{grid-template-columns:1fr 1fr}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow)}.card.flush{padding:0;overflow:hidden}.card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:17px}.card h3{margin:5px 0 0;font-size:14px}.text-btn{border:0;background:transparent;color:var(--teal-dark);font-size:10px;font-weight:700}.tier-chart{display:flex;align-items:end;gap:10px;height:140px;padding:10px 4px 0}.tier-bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:7px}.tier-bar .bar{width:100%;min-height:5px;border-radius:7px 7px 3px 3px;background:linear-gradient(#20b9b1,#078d88);position:relative}.tier-bar:nth-child(2) .bar{background:linear-gradient(#ffb06e,#ff7a45)}.tier-bar:nth-child(3) .bar{background:linear-gradient(#788da0,#294654)}.tier-bar span{font-size:9px;color:var(--muted)}.tier-bar b{font-size:10px;position:absolute;top:-20px;left:0;right:0;text-align:center;color:var(--ink)}.summary-list{display:flex;flex-direction:column;gap:10px}.summary-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #f1f3f4}.summary-row:last-child{border:0}.summary-dot{width:9px;height:9px;border-radius:50%}.summary-row div{display:flex;flex:1;flex-direction:column;gap:2px}.summary-row span{font-size:10px;color:var(--muted)}.summary-row strong{font-size:11px}.summary-row>b{font-size:16px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;min-width:720px}th{text-align:left;padding:12px 15px;background:#fafbfc;color:#919aa2;font-size:8px;letter-spacing:.11em;text-transform:uppercase;border-bottom:1px solid var(--line)}td{padding:13px 15px;border-bottom:1px solid #f0f3f5;font-size:10px;color:#56616b}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fbfdfd}.user-cell{display:flex;align-items:center;gap:10px}.user-cell .avatar{flex:none}.user-cell div{display:flex;flex-direction:column;gap:3px}.user-cell strong{font-size:10px;color:var(--ink)}.user-cell small{font-size:8px;color:#9aa3aa}.badge{display:inline-flex;align-items:center;border-radius:20px;padding:4px 8px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.badge.free,.badge.draft,.badge.pending{background:#f0f2f4;color:#75808a}.badge.agent,.badge.bronze,.badge.upcoming{background:#fff1e8;color:#bc602d}.badge.partner,.badge.platinum{background:#e7f5f4;color:#007e79}.badge.active,.badge.paid,.badge.completed{background:#e9f8ef;color:#278052}.badge.closed,.badge.failed,.badge.banned{background:#ffeded;color:#b63a3a}.badge.suspended,.badge.waiting_flashsale,.badge.tracking,.badge.processing{background:#fff6dc;color:#a87900}.section-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.section-toolbar p{font-size:11px;color:var(--muted);margin:0}.primary,.secondary,.danger{border:0;border-radius:10px;padding:10px 15px;font-size:10px;font-weight:700;transition:.15s}.primary{background:var(--teal);color:#fff;box-shadow:0 8px 20px rgba(0,167,160,.17)}.primary:hover{background:var(--teal-dark)}.secondary{background:#fff;border:1px solid var(--line);color:#56616b}.secondary:hover{border-color:#b7c3ca}.danger{background:#fff0f0;color:var(--red);border:1px solid #ffd1d1}.wide{width:100%;display:block}.filters{display:flex;align-items:center;gap:10px;margin-bottom:14px}.filters select,.filters input{height:38px}.search{width:260px;position:relative}.search.grow{flex:1}.search span{position:absolute;left:12px;top:9px;color:#9aa3aa}.search input{width:100%;padding-left:33px}.row-action{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 9px;color:#65717a;font-size:9px;font-weight:700}.row-action:hover{border-color:var(--teal);color:var(--teal-dark)}input,select,textarea{width:100%;border:1px solid #dfe5e9;background:#fff;border-radius:9px;padding:10px 11px;color:var(--ink);font-size:11px;outline:none;transition:.15s}input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,167,160,.09)}label{font-size:9px;color:#68737d;font-weight:700;display:flex;flex-direction:column;gap:7px}.ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:17px}.ladder-item{background:#f5f9f8;border-radius:9px;padding:10px;text-align:center}.ladder-item small{display:block;font-size:7px;color:var(--muted)}.ladder-item b{font-size:10px;color:var(--teal-dark)}.muted{font-size:10px!important;line-height:1.7;color:var(--muted)}.inline-actions{display:flex;gap:8px;margin-top:15px}.inline-actions>*{flex:1}.result-box{margin-top:14px;background:#f3f8f7;border:1px solid #dceceb;border-radius:10px;padding:12px;font-size:9px;line-height:1.7;white-space:pre-wrap}.callout{background:#f1f8f7;border-left:3px solid var(--teal);padding:10px;border-radius:7px;font-size:9px;color:#607078;line-height:1.6}.login-screen{min-height:100vh;display:grid;grid-template-columns:1.25fr .75fr;background:#fff}.login-art{background:linear-gradient(135deg,#082f39,#075f60 60%,#079e97);position:relative;overflow:hidden;padding:40px 50px;color:#fff;display:flex;flex-direction:column}.brand-light small{color:#c0e6e3}.login-copy{margin:auto 0;max-width:600px;position:relative;z-index:2}.login-copy h1{font-size:48px;line-height:1.08;letter-spacing:-.055em;margin:17px 0}.login-copy p{font-size:14px;max-width:510px;color:#b8dedc;line-height:1.7}.orb{position:absolute;border-radius:50%;filter:blur(2px)}.orb-a{width:480px;height:480px;background:rgba(0,212,202,.12);right:-160px;top:-150px;border:80px solid rgba(255,255,255,.04)}.orb-b{width:280px;height:280px;background:rgba(255,151,82,.1);left:-120px;bottom:-120px}.login-panel{max-width:430px;width:100%;align-self:center;justify-self:center;padding:45px}.login-panel h2{font-size:30px;margin:9px 0 8px;letter-spacing:-.045em}.login-panel>p{color:var(--muted);font-size:11px;margin:0 0 28px}.login-panel label{margin:16px 0}.login-panel input{padding:13px}.password-wrap{position:relative}.password-wrap button{position:absolute;right:7px;top:6px;border:0;background:#f2f5f6;border-radius:6px;padding:6px 8px;font-size:8px;color:#66717a}.login-panel .primary{padding:13px;margin-top:8px}.form-error{color:#b83030;background:#fff0f0;border:1px solid #ffd6d6;border-radius:8px;padding:9px;font-size:9px;margin-top:12px}.security-note{display:block;text-align:center;color:#a2aab0;font-size:8px;margin-top:18px}.mobile-brand{display:none}.modal-backdrop{position:fixed;inset:0;background:rgba(7,24,31,.54);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;padding:25px}.modal{background:#fff;width:min(760px,95vw);max-height:92vh;overflow:auto;border-radius:18px;padding:23px;box-shadow:0 35px 90px rgba(0,0,0,.25)}.modal.small{width:min(450px,95vw)}.modal-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:20px}.modal-head h2{font-size:18px;margin:5px 0}.modal-close{border:0;background:#f1f4f5;color:#68727a;width:30px;height:30px;border-radius:8px;font-size:18px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.span-2{grid-column:span 2}.check{flex-direction:row;align-items:center;padding-top:24px}.check input{width:auto}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.user-summary{background:#f3f8f7;border-radius:10px;padding:12px;margin-bottom:15px;font-size:10px}.modal.small form>label{margin:13px 0}#toast-host{position:fixed;right:24px;top:80px;z-index:200;display:flex;flex-direction:column;gap:8px}.toast{background:#172d35;color:#fff;border-radius:10px;padding:11px 14px;box-shadow:0 14px 35px rgba(0,0,0,.18);font-size:10px;min-width:220px;animation:toastin .2s ease}.toast.error{background:#b83b3b}.toast.success{background:#087f79}@keyframes toastin{from{opacity:0;transform:translateX(10px)}}.empty{text-align:center;color:#9aa3aa!important;padding:30px!important}.skeleton-grid:empty:after{content:"Memuat data dashboard…";grid-column:1/-1;background:#fff;border-radius:15px;padding:24px;color:#a0a8ae;font-size:10px}
@media(max-width:1000px){.metric-grid{grid-template-columns:repeat(2,1fr)}.grid.two-one{grid-template-columns:1fr}.login-copy h1{font-size:39px}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none;box-shadow:20px 0 60px rgba(0,0,0,.14)}main{margin-left:0;padding:0 16px 35px}.mobile{display:block}.topbar{height:76px}.live-pill{display:none}.hero{padding:23px}.hero-date{display:none}.metric-grid,.metric-grid.compact,.grid.equal{grid-template-columns:1fr}.filters{align-items:stretch;flex-wrap:wrap}.search{width:100%}.filters select{flex:1}.login-screen{grid-template-columns:1fr}.login-art{display:none}.login-panel{padding:28px}.mobile-brand{display:flex;padding-left:0}.form-grid{grid-template-columns:1fr}.span-2{grid-column:span 1}.ladder{grid-template-columns:repeat(2,1fr)}}