:root{--bg:#f6f7fb;--card:#fff;--text:#0f172a;--muted:#54657a;--line:#e2e8f0;--brand:#2563eb;--link:#1d4ed8;--side:#0f172a;--ok:#15803d;--ok-bg:#15803d;--warn:#d97706;--warn-text:#b45309;--bad:#dc2626;--bad-bg:#dc2626}
@media (prefers-color-scheme:dark){:root{--bg:#0b1020;--card:#141b2e;--text:#e5e7eb;--muted:#94a3b8;--line:#243049;--side:#070b17;--link:#7db3ff;--ok:#4ade80;--warn-text:#fbbf24;--bad:#f87171}}
*{box-sizing:border-box}body{margin:0;font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}h1{font-size:1.6rem;margin:.2em 0 .8em}h3{margin:.1em 0 .5em}h4{margin:1em 0 .4em}
.muted{color:var(--muted)}.right{text-align:right}.nowrap{white-space:nowrap}.pad{padding:40px 16px}.wrap{max-width:1100px;margin:0 auto;padding:0 16px}.narrow{max-width:560px}
.row{display:flex;gap:10px;align-items:center}.between{justify-content:space-between}
.btn{display:inline-block;background:var(--brand);color:#fff;border:1px solid var(--brand);border-radius:8px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{text-decoration:none;filter:brightness(1.08)}.btn.ghost{background:transparent;color:var(--link)}.btn.sm{padding:4px 10px;font-size:13px}.btn.big{padding:13px 24px;font-size:16px}.btn.danger{background:var(--bad-bg);border-color:var(--bad-bg);color:#fff}.btn[disabled]{opacity:.5;cursor:not-allowed}
button.link{background:none;border:0;color:#94a3b8;cursor:pointer;font:inherit;padding:8px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin:0 0 16px}.card.hl{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand) inset}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}.cols.wide{grid-template-columns:2fr 1fr}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
@media(max-width:800px){.cols.wide{grid-template-columns:1fr}}
.price{font-size:1.7rem;font-weight:800;margin:.2em 0}.price small{font-size:.9rem;color:var(--muted);font-weight:400}
.ticks{padding-left:0;list-style:none}.ticks li:before{content:"✓ ";color:var(--ok)}.ticks.small{font-size:13px;columns:1}
.pub-head,.site-head{background:var(--card);border-bottom:1px solid var(--line)}.pub-head .wrap,.site-head .wrap{height:60px}.logo{font-weight:800;font-size:1.15rem;color:var(--text)}
.pub-nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.pub-nav a{color:var(--text)}.pub-nav .btn{color:#fff}
.hero{padding:70px 16px;text-align:center;background:linear-gradient(180deg,rgba(37,99,235,.12),transparent)}.hero h1{font-size:2.3rem;max-width:760px;margin:0 auto .4em}.hero p{max-width:640px;margin:.5em auto;color:var(--muted)}
.sitehero{background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 16%,transparent),transparent)}.site .btn{background:var(--brand);border-color:var(--brand)}.site .btn.ghost{background:transparent;color:var(--brand)}.site .price{color:var(--brand)}
.pub-foot{text-align:center;color:var(--muted);padding:30px 0;font-size:13px}
.tbl{width:100%;border-collapse:collapse}.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.tbl th{font-size:12px;text-transform:uppercase;color:var(--muted)}
.card>.tbl{margin:0}table{max-width:100%}.card{overflow-x:auto}
.form label{display:block;margin:0 0 12px;font-weight:600;font-size:14px}.form input,.form select,.form textarea,input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;margin-top:4px}
.form .chk,.chk{font-weight:400;display:flex;gap:8px;align-items:center}.chk input{width:auto;margin:0}.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 12px;margin-bottom:12px}
.inline{display:inline;margin:0}.inline select{width:auto;padding:4px 8px}.row input{margin-top:0}
.flash{background:#dbeafe;color:#1e3a8a;border-radius:8px;padding:10px 14px;margin:0 0 16px}.flash.err{background:#fee2e2;color:#7f1d1d}
@media (prefers-color-scheme:dark){.flash{background:#172554;color:#bfdbfe}.flash.err{background:#450a0a;color:#fecaca}}
.badge{display:inline-block;padding:1px 9px;border-radius:99px;font-size:12px;font-weight:700;background:var(--line);color:var(--text)}
.badge.live,.badge.paid{background:#dcfce7;color:#166534}.badge.setup,.badge.human{background:#fef3c7;color:#92400e}.badge.suspended{background:#fee2e2;color:#991b1b}
.badge.p-starter{background:#e0f2fe;color:#075985}.badge.p-pro{background:#ede9fe;color:#5b21b6}.badge.p-enterprise{background:#fce7f3;color:#9d174d}
.bar{height:10px;background:var(--line);border-radius:99px;overflow:hidden}.bar b{display:block;height:100%;background:var(--brand);border-radius:99px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:16px}.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.stat span{display:block;font-size:11px;letter-spacing:.06em;color:var(--muted);font-weight:700}.stat b{font-size:1.5rem}.stat small{display:block;color:var(--muted)}
/* panel */
.panel{display:flex;min-height:100vh}.side{width:240px;flex:none;background:var(--side);color:#cbd5e1;padding:18px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .logo{color:#fff;margin-bottom:18px}.side .logo small{display:block;font-size:10px;letter-spacing:.1em;color:#94a3b8;font-weight:600}
.side nav{flex:1}.side nav a{display:flex;gap:10px;padding:8px 10px;border-radius:8px;color:#cbd5e1}.side nav a span{width:18px;text-align:center}.side nav a:hover{background:#1e293b;text-decoration:none}.side nav a.on{background:var(--brand);color:#fff}
.main{flex:1;padding:24px 28px;min-width:0}.admin .side .logo{color:#fbbf24}
.client.plan-enterprise .side{background:#1e1b4b}.client.plan-pro .side{background:#1e1b3a}
.setup-mini{display:block;background:#1e293b;border-radius:8px;padding:8px 10px;margin:8px 0;color:#fff;font-size:13px}.setup-mini i{display:block;height:5px;background:#334155;border-radius:9px;margin-top:5px;overflow:hidden}.setup-mini b{display:block;height:100%;background:#22c55e}
.imp{background:#fef3c7;color:#78350f;padding:8px 14px;border-radius:8px;margin-bottom:14px}
@media(max-width:820px){.panel{display:block}.side{width:auto;height:auto;position:static}.side nav{display:flex;flex-wrap:wrap;gap:2px}.main{padding:16px}}
.lead{font-size:1.1rem}.cta{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,#ede9fe,#dbeafe);color:#1e1b4b}
.steps{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0;font-size:14px}.steps a{color:var(--muted)}.steps a.done{color:var(--ok)}
.wiz{list-style:none;padding:0}.wiz li{display:flex;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:8px}.wiz li.done{border-color:var(--ok)}.wiz li b{color:var(--muted);margin-right:8px}
.bp{display:grid;grid-template-columns:110px 1fr 140px;gap:12px;align-items:center;margin:8px 0}
.tasks{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.task{background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:3px 12px;font-size:13px}
.inbox{display:grid;grid-template-columns:320px 1fr;gap:16px}@media(max-width:820px){.inbox{grid-template-columns:1fr}}
.conv{display:block;padding:10px;border-bottom:1px solid var(--line);color:var(--text)}.conv.on{background:var(--bg)}.conv small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmsgs{height:340px;overflow-y:auto;padding:8px;background:var(--bg);border-radius:10px;margin-bottom:10px}
.m{max-width:80%;padding:8px 12px;border-radius:12px;margin:6px 0;white-space:pre-wrap;word-wrap:break-word}.m.me{background:var(--brand);color:#fff;margin-left:auto}.m.bot{background:var(--card);border:1px solid var(--line)}.m small{display:block;opacity:.7;font-size:11px}
.chatbox{margin:12px 0}.chatdemo{background:var(--bg);padding:12px;border-radius:10px;margin:10px 0}.loginbox{max-width:380px;margin:12vh auto}.bare{display:block}
code{background:var(--bg);padding:2px 6px;border-radius:6px;word-break:break-all}
/* widget */
#cw{position:fixed;right:18px;bottom:18px;z-index:50}#cw.left{right:auto;left:18px}#cw-btn{width:56px;height:56px;border-radius:50%;border:0;background:var(--brand);color:#fff;font-size:24px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.25)}
#cw-box{position:absolute;bottom:68px;right:0;width:330px;max-width:calc(100vw - 36px);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);overflow:hidden}#cw.left #cw-box{right:auto;left:0}
.cw-h{background:var(--brand);color:#fff;padding:12px 14px;font-weight:700}#cw-msgs{height:300px;overflow-y:auto;padding:10px;background:var(--bg)}#cw-f{display:flex;gap:6px;padding:8px}#cw-f input{margin:0}#cw-f button{background:var(--brand);color:#fff;border:0;border-radius:8px;padding:0 14px;cursor:pointer}
/* monitoring */
.health.ok{border-color:var(--ok)}.health.warn{border-color:var(--warn)}.health.bad{border-color:var(--bad)}
.alerts{list-style:none;padding:0;margin:8px 0 0}.alerts li{padding:4px 0}
.stat.ok b{color:var(--ok)}.stat.warn b{color:var(--warn-text)}.stat.bad b{color:var(--bad)}
.bar.warn b{background:var(--warn)}.bar.bad b{background:var(--bad)}
.pill{display:inline-block;border-radius:99px;padding:1px 9px;font-size:12px;font-weight:600}.pill.warn{background:#fef3c7;color:#92400e}.pill.bad{background:#fee2e2;color:#991b1b}
.spark{display:flex;align-items:flex-end;gap:2px;height:70px;margin:6px 0}.spark i{flex:1;background:var(--brand);border-radius:2px 2px 0 0;min-height:2px;opacity:.85}
.txt-warn{color:var(--warn-text);font-weight:700}
.code{background:#0f172a;color:#e2e8f0;padding:12px;border-radius:8px;overflow-x:auto;font-size:13px;white-space:pre}

/* bantuan per halaman */
.help{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:10px;padding:10px 16px;margin:0 0 18px}
.help summary{cursor:pointer;font-weight:700;list-style:none}.help summary::-webkit-details-marker{display:none}
.help p{margin:8px 0}.help ol{margin:6px 0 8px;padding-left:20px}.help li{margin:3px 0}.help .tip{color:var(--muted);font-size:14px}
.side nav a{white-space:nowrap}
.center{text-align:center}.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.step b{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;align-items:center;justify-content:center;margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.chip{background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:99px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}.chip:hover{border-color:var(--brand)}
details.card summary{cursor:pointer;font-weight:600}
.guide-list{list-style:none;padding:0;margin:14px 0 0}.guide-list li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.gn{flex:none;width:30px;height:30px;border-radius:50%;background:var(--line);display:flex;align-items:center;justify-content:center;font-weight:700}
.guide-list .done .gn{background:var(--ok-bg);color:#fff}.guide-list .done .gt b{color:var(--muted);text-decoration:line-through}.guide-list .todo .gn{background:var(--brand);color:#fff}
.gt p{margin:2px 0 8px;color:var(--muted);font-size:14px}.gt .gb{color:var(--warn-text);font-weight:600}

.pipe{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin-top:10px}.pipe i{align-self:center;color:var(--muted);font-size:24px;font-style:normal}
.pstep{flex:1;min-width:150px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 14px;color:var(--text)}.pstep:hover{text-decoration:none;border-color:var(--brand)}
.pstep b{font-size:1.6rem;display:block}.pstep span{font-weight:600}.pstep small{display:block;color:var(--muted)}
.ready{list-style:none;padding:0;margin:12px 0 0}.ready li{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line)}.ready p{margin:2px 0;color:var(--muted);font-size:14px}.ready .fix{color:var(--text)}

.nbadge{margin-left:auto;background:#ef4444;color:#fff;border-radius:99px;padding:0 7px;font-size:12px;font-style:normal;font-weight:700}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}.toolbar form{display:flex;gap:6px}.toolbar input{margin:0;width:220px}
.pager{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:12px;color:var(--muted)}
.thumb{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--line);vertical-align:middle;margin-right:8px;background:var(--bg)}
.reply-needed{color:var(--bad);font-weight:700;font-size:12px}

.chart{display:flex;align-items:flex-end;gap:6px;height:150px;padding:8px 0}.cbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:11px;color:var(--muted)}
.cbar i{display:block;width:100%;background:var(--brand);border-radius:4px 4px 0 0;opacity:.85}.cbar:hover i{opacity:1}
/* tabel lebar di ponsel: gulir horizontal di dalam tabel, bukan seluruh halaman */
@media(max-width:820px){.main>table.tbl,.main>.tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.main{overflow-x:hidden}.toolbar input{width:100%}.cols.wide{grid-template-columns:1fr}}

.tabs{display:flex;gap:6px;flex-wrap:wrap}.tabs a{padding:5px 12px;border:1px solid var(--line);border-radius:99px;color:var(--text);font-size:14px;background:var(--card)}.tabs a.on{background:var(--brand);color:#fff;border-color:var(--brand);text-decoration:none}.tabs a b{margin-left:4px}
.m.note{background:#fef3c7;color:#78350f;border:1px dashed #f59e0b;max-width:92%}

.navtoggle{display:none;background:#1e293b;color:#fff;border:0;border-radius:8px;padding:9px 14px;font:inherit;font-weight:600;cursor:pointer;width:100%;text-align:left;margin-bottom:8px}
@media(max-width:820px){.navtoggle{display:block}.side nav{display:none}.side.open nav{display:flex}.side .logo{margin-bottom:8px}}

/* aksesibilitas: fokus keyboard jelas & tautan lewati navigasi */
:focus-visible{outline:3px solid var(--link);outline-offset:2px;border-radius:4px}
.side :focus-visible{outline-color:#93c5fd}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:0}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#0f172a;padding:8px 14px;border-radius:8px;z-index:100;font-weight:700}.skip:focus{left:8px}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}