:root{--ink:#20213e;--muted:#85879a;--line:#ebebf1;--purple:#6b57df;--purple-dark:#4d3eb2;--pink:#f65180;--bg:#f8f8fc;--panel:#fff;--green:#21a278;font-family:"Plus Jakarta Sans",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input{font:inherit}button{cursor:pointer;border:0}.app-shell{min-height:100vh;display:flex}.sidebar{width:256px;background:#24233f;color:#f9f9ff;padding:27px 16px 17px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:3}.brand{display:flex;align-items:center;gap:11px;color:white;text-decoration:none;padding:0 12px 32px}.brand-mark{width:38px;height:38px;padding:7px;border-radius:12px;background:white;display:grid;place-items:center}.brand-mark img{width:100%;height:100%;object-fit:contain}.brand strong{font:700 19px Outfit,sans-serif;display:block;letter-spacing:.1px}.brand small{display:block;font-size:9px;color:#bab7d7;letter-spacing:2px;font-weight:700;margin-top:1px}.side-nav{display:grid;gap:6px}.nav-item{background:transparent;color:#aaaac3;border-radius:10px;height:47px;padding:0 13px;display:flex;align-items:center;gap:15px;text-align:left;font-weight:600;font-size:13px}.nav-item i{width:17px;text-align:center;font-size:15px}.nav-item.active{color:white;background:linear-gradient(90deg,#6553cf,#7a66e8);box-shadow:0 8px 18px #11102a55}.nav-item b{font-size:10px;margin-left:auto;background:#f6537f;color:white;padding:3px 7px;border-radius:20px}.sidebar-bottom{margin-top:auto}.help-card{border:1px solid #484664;border-radius:11px;padding:11px;display:flex;align-items:center;gap:9px;color:#e2e1ed;margin:0 5px 16px}.help-card i{color:#b6aaff}.help-card strong,.help-card span{display:block;font-size:10px}.help-card span{font-size:9px;color:#aaaac3;margin-top:2px}.profile{padding:13px 9px 4px;background:none;color:#fff;width:100%;display:flex;align-items:center;gap:9px;text-align:left}.profile strong,.profile small{display:block;font-size:11px}.profile small{font-size:9px;color:#aaaac3;margin-top:2px}.profile>i:last-child{margin-left:auto;color:#aaaac3}.avatar{width:31px;height:31px;border-radius:50%;display:inline-grid;place-items:center;font-size:11px;font-style:normal;color:#fff;flex:0 0 auto}.violet{background:#7c67e5}.pink{background:#ec779d}.blue{background:#6598d8}.green{background:#62aa91}.main-content{margin-left:256px;width:calc(100% - 256px);min-width:0}.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 39px;justify-content:space-between}.crumb{font-size:12px;color:#9695a4;display:flex;gap:10px;align-items:center}.studio-crumb{border:0;background:transparent;color:#9695a4;padding:0;cursor:pointer;font:inherit}.studio-crumb:hover{color:#5f4dcc}.crumb i{font-size:9px}.crumb strong{color:#504e65}.top-actions{display:flex;gap:18px;align-items:center}.icon-button{position:relative;color:#77758d;background:transparent;font-size:17px}.icon-button em{position:absolute;width:6px;height:6px;background:#f65180;border:1px solid white;border-radius:100%;top:0;right:0}.view-platform{font-size:11px;font-weight:700;text-decoration:none;color:#5f4dcc;border:1px solid #e1ddfa;padding:9px 12px;border-radius:7px}.view-platform i{margin-right:6px}.menu-toggle{display:none}.dashboard-view{display:none;padding:35px 39px 48px;max-width:1500px;margin:auto}.dashboard-view.active{display:block}.title-row,.messages-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.eyebrow{font-size:10px;letter-spacing:1.4px;font-weight:800;color:#8075dc;margin:0 0 7px}.title-row h1,.messages-heading h1{font:700 27px Outfit,sans-serif;margin:0;color:#27253e}.title-row h1 span{color:#6f5cdf;font-size:19px}.subtitle{font-size:12px;color:#8d8b9a;margin:7px 0 0}.period-button{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:11px;font-weight:600;color:#5f5e71;display:flex;gap:9px;align-items:center}.period-button .fa-chevron-down{font-size:8px;color:#9a9aa8}.connection-banner{background:linear-gradient(100deg,#f0efff,#faf9ff);min-height:58px;padding:10px 17px;border:1px solid #e4e0ff;border-radius:10px;display:flex;align-items:center;gap:11px;margin-bottom:24px}.connection-icon{width:32px;height:32px;border-radius:8px;color:#6956d7;background:#ded9ff;display:grid;place-items:center;font-size:13px}.connection-banner div{display:grid;gap:2px}.connection-banner strong{font-size:11px}.connection-banner span{font-size:10px;color:#7c798d}.connection-banner .online{margin-left:auto;color:#31966f;font-weight:600}.online i{font-size:7px;margin-right:4px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:21px}.metric-card{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:16px;min-height:166px;position:relative}.metric-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;margin-bottom:18px;font-size:14px}.metric-icon.pink{background:#ffecf2;color:#f4507c}.metric-icon.purple{background:#efedff;color:#705ee0}.metric-icon.orange{background:#fff3e7;color:#ee963c}.metric-icon.green{background:#e8f8f2;color:#23a479}.metric-heading{display:flex;align-items:center;justify-content:space-between;color:#858393;font-size:10px}.metric-heading button{color:#c4c3cc;background:none}.metric-card>strong{font:700 20px Outfit,sans-serif;display:block;margin:5px 0 6px}.positive{font-size:10px;color:#18a075;margin:0;font-weight:700}.positive span,.muted-note{color:#aaa9b5;font-weight:500;margin-left:3px}.muted-note{font-size:10px;margin:9px 0}.content-grid{display:grid;grid-template-columns:1.25fr .95fr;gap:20px;margin-bottom:20px}.panel{background:#fff;border:1px solid var(--line);border-radius:11px;padding:19px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start}.panel h2{font:700 14px Outfit,sans-serif;margin:0}.panel-head p{font-size:10px;color:#9694a2;margin:4px 0}.text-button,.more-button{background:none;color:#6958d3;font-size:10px;font-weight:700;padding:1px}.text-button i{margin-left:6px}.more-button{color:#9694a2;font-size:15px}.chart-summary{display:flex;align-items:center;gap:10px;margin-top:15px}.chart-summary strong{font:700 19px Outfit,sans-serif}.bar-chart{height:180px;display:flex;align-items:flex-end;justify-content:space-around;gap:10px;padding:30px 14px 20px;position:relative;margin-top:3px}.chart-line{position:absolute;left:0;right:0;border-top:1px dashed #ebeaf1}.line-1{top:33px}.line-2{top:80px}.line-3{top:127px}.bar-wrap{height:100%;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;gap:8px;z-index:1;width:23px}.bar{display:block;width:23px;background:#dbd8f8;border-radius:5px 5px 2px 2px;position:relative;min-height:8px}.bar.current{background:linear-gradient(#7d6ae8,#6451d3)}.bar b{position:absolute;font-size:8px;white-space:nowrap;font-weight:600;color:#fff;background:#3f3966;border-radius:4px;padding:4px 5px;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%)}.bar b:after{content:"";position:absolute;bottom:-3px;left:50%;width:6px;height:6px;background:#3f3966;transform:translateX(-50%) rotate(45deg)}.bar-wrap small{font-size:9px;color:#9d9ba9}.drama-list{margin-top:11px}.drama-item{display:grid;grid-template-columns:22px 37px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #f0eff4}.drama-item:last-child{border-bottom:0}.rank{font:700 10px Outfit;color:#aaa8b7}.poster{height:38px;border-radius:6px;display:grid;place-items:center;font:700 10px Outfit;color:#fff}.poster-one{background:linear-gradient(145deg,#7e1e43,#e07e9c)}.poster-two{background:linear-gradient(145deg,#736091,#e8b2b8)}.poster-three{background:linear-gradient(145deg,#39687a,#a5d0d5)}.drama-item div{min-width:0}.drama-item strong{font-size:10px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drama-item small{font-size:8px;color:#94929f;display:block;margin:3px 0}.drama-item>b{font-size:10px;align-self:start;color:#464359}.progress{height:3px;background:#eeeeF3;display:block;border-radius:4px}.progress i{height:100%;display:block;background:#826fe5;border-radius:inherit}.transactions-panel{padding-bottom:6px}.transaction-table{margin:14px -2px 0}.table-row{display:grid;grid-template-columns:1.55fr 1.45fr 1fr .8fr .65fr;gap:8px;align-items:center;padding:11px 8px;border-top:1px solid #f0eff4;font-size:10px;color:#676578}.table-header{border-top:0;color:#aaa8b5;font-size:9px;padding-top:0}.customer{display:flex;gap:8px;align-items:center;color:#49475d}.customer b{font-size:10px}.customer small{display:block;color:#a7a5b1;font-weight:500;font-size:8px;margin-top:2px}.table-row>strong{font-size:10px;color:#454358}.status{font-size:9px;font-weight:700;border-radius:20px;padding:5px 8px;width:max-content}.paid{background:#eaf9f4;color:#1b9b72}.processing{background:#fff5df;color:#c8881d}.inactive{background:#fdeceb;color:#d1483f}.placeholder-view{text-align:center;padding:150px 20px}.placeholder-view>i{font-size:38px;color:#7563dc}.placeholder-view h1{font:700 26px Outfit;margin:15px 0 4px}.placeholder-view p{color:#8d8b9a;font-size:13px}.primary-button{margin-top:20px;background:#6957d7;color:white;padding:10px 15px;border-radius:7px;font-size:12px;font-weight:700}.messages-heading{margin-bottom:25px}.messenger{height:620px;display:grid;grid-template-columns:300px minmax(0,1fr);background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.conversation-list{border-right:1px solid var(--line);overflow:auto}.search-conversations{margin:14px;display:flex;align-items:center;gap:8px;background:#f6f5fa;border-radius:7px;padding:9px 10px;color:#aaa9b6;font-size:11px}.search-conversations input{border:0;outline:0;background:transparent;width:100%;font-size:11px;color:var(--ink)}.inbox-label{font-size:9px;font-weight:800;letter-spacing:1px;color:#aaa8b6;padding:2px 15px 7px;margin:0}.inbox-label span{float:right;background:#f6537f;color:#fff;border-radius:20px;padding:2px 6px;font-size:8px;letter-spacing:0}.conversation{width:100%;border:0;border-top:1px solid #f3f2f6;background:#fff;text-align:left;padding:13px 14px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;align-items:center}.conversation.active{background:#f3f1ff}.conversation .preview{min-width:0}.conversation strong{font-size:11px;display:block}.conversation p{font-size:9px;color:#9694a1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:3px 0 0}.conversation time{font-size:8px;color:#aaa8b5;align-self:start}.unread-dot{height:7px;width:7px;border-radius:50%;background:#f6537f;display:block;margin:5px 2px}.chat-panel{min-width:0;display:grid;grid-template-rows:65px 1fr 59px}.chat-head{border-bottom:1px solid var(--line);padding:13px 18px;display:flex;align-items:center;gap:10px}.chat-head strong{font-size:12px;display:block}.chat-head small{font-size:9px;color:#20a178}.chat-head .chat-actions{margin-left:auto;display:flex;gap:15px;color:#8e8b9b;font-size:14px}.chat-body{padding:20px;overflow:auto;background:#fcfcfe;display:flex;flex-direction:column;gap:12px}.message{max-width:69%;font-size:11px;line-height:1.55;padding:9px 11px;border-radius:10px;border-bottom-left-radius:2px;background:#f0eff6;color:#535164;align-self:flex-start}.message.mine{align-self:flex-end;background:#6c58d9;color:#fff;border-bottom-left-radius:10px;border-bottom-right-radius:2px}.message time{display:block;color:#9d9aaa;font-size:8px;margin-top:4px}.message.mine time{color:#d8d2ff;text-align:right}.chat-compose{border-top:1px solid var(--line);display:flex;align-items:center;padding:10px 14px;gap:9px}.chat-compose button{background:none;color:#9290a0;font-size:15px}.chat-compose input{flex:1;border:0;outline:0;font-size:11px}.chat-compose .send-button{background:#6c58d9;color:#fff;height:31px;width:33px;border-radius:7px;font-size:12px}.toast{position:fixed;right:25px;bottom:25px;transform:translateY(100px);opacity:0;background:#28263e;color:#fff;padding:12px 15px;border-radius:8px;box-shadow:0 10px 30px #22213533;font-size:11px;transition:.25s;z-index:5}.toast.show{transform:translateY(0);opacity:1}.toast i{color:#58d7a0;margin-right:7px}@media(max-width:1100px){.metrics{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}.sidebar{width:220px}.main-content{margin-left:220px;width:calc(100% - 220px)}}@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.main-content{margin:0;width:100%}.topbar{padding:0 18px;height:62px}.menu-toggle{display:block;background:none;color:#5d5b70;font-size:17px}.crumb{display:none}.view-platform{font-size:10px;padding:8px}.top-actions{gap:14px}.dashboard-view{padding:25px 18px}.title-row,.messages-heading{align-items:flex-start;gap:16px;flex-direction:column}.metrics{grid-template-columns:1fr 1fr;gap:10px}.metric-card{padding:13px;min-height:145px}.metric-card>strong{font-size:17px}.connection-banner .online{display:none}.period-button{font-size:10px}.transaction-table{overflow:auto}.table-row{min-width:700px}.transactions-panel{overflow:hidden}.messenger{grid-template-columns:1fr;height:650px}.conversation-list{display:none}.chat-panel{grid-column:1}.messages-heading .period-button{display:none}}@media(max-width:430px){.metrics{grid-template-columns:1fr}.top-actions .icon-button{display:none}.title-row h1,.messages-heading h1{font-size:24px}}.monitoring-toggle .nav-chevron{margin-left:0;font-size:9px;color:#aaaac3;transition:transform .2s}.monitoring-toggle[aria-expanded="false"] .nav-chevron{transform:rotate(-90deg)}.monitoring-submenu{display:grid;gap:2px;overflow:hidden;max-height:250px;transition:max-height .2s ease,opacity .2s ease}.monitoring-submenu.collapsed{max-height:0;opacity:0}.monitoring-submenu .nav-subitem{height:38px;padding-left:45px;font-size:11px;gap:11px;color:#9292b0}.nav-subitem i{font-size:12px;width:15px}.nav-subitem.active{background:linear-gradient(90deg,#5949bd,#6d5bd4)}.version-grid{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);gap:20px;margin-bottom:20px}.version-current-card{display:flex;flex-direction:column;align-items:flex-start;min-height:250px}.version-product-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:17px;margin-bottom:19px}.version-product-icon.purple{background:#efedff;color:#705ee0}.version-product-icon.pink{background:#ffecf2;color:#f4507c}.version-label{font-size:9px;letter-spacing:1.3px;color:#9694a2;font-weight:800;margin:0 0 7px}.version-number{font:700 31px Outfit,sans-serif;color:#27253e}.version-status{font-size:10px;color:#21a278;font-weight:700;margin-top:9px}.version-status i{font-size:9px;margin-right:4px}.version-description{font-size:10px;color:#8d8b9a;line-height:1.5;margin:18px 0 0;max-width:310px}.version-live-badge{font-size:10px;color:#21a278;background:#e8f8f2;border-radius:20px;padding:8px 11px;font-weight:700}.version-live-badge i{font-size:6px;margin-right:5px}.version-details{display:grid;grid-template-columns:1fr auto;gap:17px 12px;margin:22px 0 0}.version-details dt{font-size:10px;color:#9694a2}.version-details dd{font-size:10px;font-weight:700;color:#444359;margin:0}.version-chip{display:inline-block;color:#21a278;background:#e8f8f2;border-radius:5px;padding:4px 7px;font-size:9px}.version-chip.muted{color:#9694a2;background:#f1f1f5}.text-success{color:#21a278!important}.version-history-card{margin-bottom:20px}.version-history{margin-top:14px}.version-history-row{display:grid;grid-template-columns:25px 150px 1fr auto;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #f0eff4;font-size:10px}.version-history-row:last-child{border-bottom:0}.version-history-icon{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:#f1f1f5;color:#9694a2;font-size:9px}.version-history-icon.current{background:#e8f8f2;color:#21a278}.version-history-row b,.version-history-row small{display:block}.version-history-row small{font-size:9px;color:#9694a2;margin-top:3px}.version-history-row strong{font-size:10px;font-weight:600;color:#55536a}@media(max-width:760px){.version-grid{grid-template-columns:1fr}.version-history-row{grid-template-columns:25px 1fr auto}.version-history-row strong{grid-column:2 / -1;grid-row:2}.version-history-row .version-chip{grid-column:3;grid-row:1}}

/* Perbaikan responsif & aksesibilitas */
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(107,87,223,.28);outline-offset:2px}
.preview-actions{flex-wrap:wrap}
.public-site-url{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
@media(max-width:980px){.public-site-layout{grid-template-columns:1fr}.public-site-side{grid-template-columns:repeat(2,minmax(0,1fr))}.public-frame-wrap,.public-frame-wrap iframe{min-height:520px;height:520px}}
@media(max-width:760px){.public-site-toolbar{align-items:flex-start;gap:12px;flex-direction:column}.public-site-url{width:100%}.public-site-side{grid-template-columns:1fr}.public-frame-wrap,.public-frame-wrap iframe{min-height:460px;height:460px}.preview-actions{width:100%}.preview-actions .period-button{flex:1;justify-content:center}.sidebar{box-shadow:18px 0 45px rgba(31,29,55,.18)}.sidebar-scrim{position:fixed;inset:0;background:rgba(22,20,40,.34);z-index:2;opacity:0;pointer-events:none;transition:opacity .2s}.sidebar-scrim.show{opacity:1;pointer-events:auto}}
@media(max-width:430px){.preview-actions{display:grid;grid-template-columns:1fr}.preview-actions .period-button{width:100%}.public-frame-wrap,.public-frame-wrap iframe{min-height:410px;height:410px}}