:root { --bg:#f6f7f9; --fg:#1d2330; --muted:#6b7280; --line:#e3e6eb; --accent:#2563eb; --ok:#15803d; --err:#b91c1c; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; align-items:center; gap:.5rem; padding:.75rem 1.5rem; background:#fff; border-bottom:1px solid var(--line); }
header .right { margin-left:auto; }
main { max-width:1100px; margin:1.5rem auto; padding:0 1rem; }
.card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:1rem 1.25rem; margin-bottom:1rem; }
.narrow { max-width:360px; margin:3rem auto; }
h2 { margin:.2rem 0 .8rem; font-size:1.1rem; }
label { display:block; margin-bottom:.7rem; }
label input { display:block; width:100%; margin-top:.2rem; }
input { padding:.4rem .5rem; border:1px solid var(--line); border-radius:6px; font:inherit; }
button { padding:.4rem .8rem; border:0; border-radius:6px; background:var(--accent); color:#fff; font:inherit; cursor:pointer; }
button.small { padding:.2rem .5rem; font-size:.85rem; }
button.danger { background:var(--err); }
button.link { background:none; color:var(--accent); padding:0; }
button[disabled] { opacity:.5; cursor:wait; }
.inline { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin-top:.4rem; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; vertical-align:top; padding:.6rem .5rem; border-top:1px solid var(--line); }
.muted { color:var(--muted); }
.badge { display:inline-block; font-size:.75rem; padding:0 .4rem; border-radius:4px; background:var(--line); }
.badge.ok { background:#dcfce7; color:var(--ok); }
.badge.warn { background:#fef3c7; color:#92400e; }
.err { color:var(--err); }
.okbox { border-color:#86efac; background:#f0fdf4; }
.errbox { border-color:#fca5a5; background:#fef2f2; }
pre { background:#111827; color:#e5e7eb; padding:.75rem; border-radius:6px; overflow:auto; }
button.warn { background:#d97706; }
.actions { display:flex; gap:.4rem; flex-wrap:wrap; }
tr.suspended td { background:#fffbeb; }
.qr { background:#fff; padding:.5rem; border:1px solid var(--line); border-radius:6px; }
textarea { width:100%; padding:.4rem .5rem; border:1px solid var(--line); border-radius:6px; font:12px/1.4 ui-monospace, monospace; margin:.4rem 0; }
meter { width:10rem; vertical-align:middle; }
.maildom { border-top:1px solid var(--line); padding:.6rem 0; }
.maildom h3 { font-size:1rem; margin:.2rem 0 .4rem; display:flex; gap:.5rem; align-items:center; }
code.wrap { word-break:break-all; white-space:normal; }
table.dns td { font-size:.85rem; }
pre.wrap { white-space:pre-wrap; word-break:break-all; font-size:.8rem; } .dnssec { margin:.6rem 0; }
.crumbs { font-family: ui-monospace, monospace; }
table.files td { padding:.35rem .5rem; }
textarea.editor { font:13px/1.45 ui-monospace, monospace; min-height:60vh; white-space:pre; tab-size:4; }
pre.log { background:#0b1020; color:#d1d5db; font-size:12px; max-height:60vh; overflow:auto; white-space:pre-wrap; word-break:break-all; }
.badge.danger { background:#fee2e2; color:var(--err); }

/* ===== Tema mirip cPanel (Jupiter) ===== */
body.cp { background:#eef1f5; }
.topbar { display:flex; align-items:center; gap:1rem; padding:0 1.25rem; height:56px; background:#1f2d3d; color:#fff; position:sticky; top:0; z-index:5; }
.topbar a { color:#fff; text-decoration:none; }
.topbar .logo { font-weight:700; font-size:1.15rem; letter-spacing:.3px; }
.topbar .logo span { color:#ff6c2c; }
.topbar .search { flex:1; max-width:520px; margin:0 auto; }
.topbar .search input { width:100%; border:0; border-radius:4px; padding:.5rem .75rem; }
.topbar .who { display:flex; align-items:center; gap:.75rem; font-size:.9rem; }
.topbar .who form { margin:0; }
.topbar .who button { background:transparent; border:1px solid #6b7c8f; color:#fff; padding:.25rem .6rem; }
.wrap { max-width:1280px; margin:1.25rem auto; padding:0 1rem; }
.home { display:grid; grid-template-columns: 1fr 320px; gap:1.25rem; align-items:start; }
@media (max-width: 900px) { .home { grid-template-columns: 1fr; } }
.ic.blue{background:#dbeafe} .ic.green{background:#dcfce7} .ic.orange{background:#ffedd5} .ic.purple{background:#ede9fe}
.ic.red{background:#fee2e2} .ic.teal{background:#ccfbf1} .ic.gray{background:#e5e7eb} .ic.yellow{background:#fef9c3}
.side .box { background:#fff; border:1px solid #dde3ea; border-radius:6px; margin-bottom:1rem; }
.side .box h3 { margin:0; padding:.7rem 1rem; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:#475569; border-bottom:1px solid #e8edf2; }
.side dl { margin:0; padding:.6rem 1rem; display:grid; grid-template-columns: auto 1fr; gap:.35rem .75rem; font-size:.88rem; }
.side dt { color:#64748b; } .side dd { margin:0; word-break:break-all; }
.stat { padding:.55rem 1rem; border-top:1px solid #f1f4f7; font-size:.88rem; }
.stat .row { display:flex; justify-content:space-between; margin-bottom:.25rem; }
progress.bar { width:100%; height:7px; border:0; border-radius:4px; background:#e5e9f0; appearance:none; overflow:hidden; }
progress.bar::-webkit-progress-bar { background:#e5e9f0; }
progress.bar::-webkit-progress-value { background:#3b82f6; } progress.bar::-moz-progress-bar { background:#3b82f6; }
progress.bar.warn::-webkit-progress-value { background:#f59e0b; } progress.bar.warn::-moz-progress-bar { background:#f59e0b; }
progress.bar.full::-webkit-progress-value { background:#dc2626; } progress.bar.full::-moz-progress-bar { background:#dc2626; }
.crumb { font-size:.9rem; color:#64748b; margin-bottom:.75rem; }
.crumb a { color:#1a56db; text-decoration:none; }
.page-title { display:flex; align-items:center; gap:.7rem; margin:0 0 1rem; }
.page-title .ic { width:44px; height:44px; border-radius:9px; display:grid; place-items:center; font-size:1.4rem; }
.page-title h1 { margin:0; font-size:1.45rem; font-weight:600; }
/* WHM: menu kiri */
.whm { display:grid; grid-template-columns: 240px 1fr; min-height:calc(100vh - 56px); }
.whm nav { background:#263445; color:#cbd5e1; padding:.75rem 0; }
.whm nav h4 { margin:.9rem 1rem .3rem; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#8ea0b5; }
.whm nav a { display:block; padding:.45rem 1rem .45rem 1.25rem; color:#e2e8f0; text-decoration:none; font-size:.92rem; }
.whm nav a:hover, .whm nav a.on { background:#1a2533; color:#fff; border-left:3px solid #ff6c2c; padding-left:calc(1.25rem - 3px); }
/* menu kiri gaya WHM: grup <details> dengan chevron di kiri, item menjorok tanpa ikon */
.whm nav { background:#1b2a3d; }
.whm nav .nav-search { display:block; width:calc(100% - 1.5rem); margin:0 .75rem .5rem; padding:.42rem .6rem; border:1px solid #34475f;
  border-radius:4px; background:#14202f; color:#e2e8f0; font-size:.88rem; }
.whm nav .nav-search::placeholder { color:#8ea0b5; }
.whm nav a.top { padding:.5rem 1rem; font-size:.95rem; }
.whm nav .nav-grp > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:.55rem; padding:.42rem 1rem;
  font-size:.95rem; color:#f1f5f9; user-select:none; }
.whm nav .nav-grp > summary::-webkit-details-marker { display:none; }
.whm nav .nav-grp > summary::before { content:""; width:.42rem; height:.42rem; border-right:1.5px solid #cbd5e1; border-bottom:1.5px solid #cbd5e1;
  transform:rotate(-45deg); transition:transform .15s; flex:none; margin-right:.15rem; }
.whm nav .nav-grp[open] > summary::before { transform:rotate(45deg); }
.whm nav .nav-grp > summary:hover { background:#24364d; }
.whm nav .nav-grp > summary:focus-visible { outline:1px dotted #cbd5e1; outline-offset:-2px; }
.whm nav .nav-grp > a { padding:.3rem 1rem .3rem 2.05rem; font-size:.9rem; color:#d6dee8; line-height:1.3; }
.whm nav .nav-grp > a:hover { background:#24364d; color:#fff; text-decoration:underline; border-left:0; padding-left:2.05rem; }
/* menu yang sedang dibuka: titik putih di kiri (gaya WHM, permintaan Asep 20 Okt) */
.whm nav .nav-grp > a.on { position:relative; background:#0f1b29; color:#fff; font-weight:600; text-decoration:none; border-left:0; padding-left:2.05rem; }
.whm nav .nav-grp > a.on::before { content:""; position:absolute; left:1.05rem; top:calc(.3rem + .65em - .22rem); width:.44rem; height:.44rem;
  border-radius:50%; background:#fff; }
.whm nav .nav-grp:last-child { margin-bottom:.5rem; }
.whm nav .nav-grp[hidden], .whm nav a[hidden] { display:none; }
.whm .main { padding:1.25rem 1.5rem; }
@media (max-width: 800px) { .whm { grid-template-columns: 1fr; } }
a.btn { display:inline-block; padding:.45rem .9rem; background:var(--accent); color:#fff; border-radius:6px; text-decoration:none; }
a.btn:hover { background:#1d4ed8; }

/* ===== Halaman alat gaya cPanel ===== */
.page-desc { color:#475569; margin:-.4rem 0 1.1rem; max-width:900px; }
.cp-section { background:#fff; border:1px solid #dde3ea; border-radius:6px; padding:1rem 1.25rem 1.1rem; margin-bottom:1.1rem; }
.cp-section > h2 { font-size:1.08rem; font-weight:600; margin:0 0 .85rem; padding-bottom:.55rem; border-bottom:1px solid #e8edf2; color:#1f2d3d; }
.cp-section > h2 .muted { font-weight:400; font-size:.9rem; }
.cp-form { display:grid; gap:.75rem; max-width:560px; }
.cp-form label { display:block; margin:0; font-weight:600; font-size:.9rem; color:#334155; }
.cp-form label .hint { font-weight:400; color:#64748b; font-size:.82rem; }
.cp-form input, .cp-form select, .cp-form textarea { display:block; width:100%; margin-top:.3rem; }
.cp-form .grp { display:flex; align-items:stretch; margin-top:.3rem; }
.cp-form .grp > span { background:#f1f5f9; border:1px solid var(--line); border-right:0; border-radius:6px 0 0 6px; padding:.4rem .6rem; color:#475569; white-space:nowrap; }
.cp-form .grp > input { margin-top:0; border-radius:0 6px 6px 0; }
.cp-form .grp > input:first-child { border-radius:6px 0 0 6px; }
.cp-form .grp > span:last-child { border-left:0; border-right:1px solid var(--line); border-radius:0 6px 6px 0; }
.cp-form .row5 { display:grid; grid-template-columns: repeat(5, 1fr); gap:.5rem; }
.cp-actions-bar { display:flex; gap:.5rem; flex-wrap:wrap; margin:.25rem 0 .9rem; }
button.secondary, a.btn.secondary { background:#fff; color:#1f2d3d; border:1px solid #cbd5e1; }
button.secondary:hover, a.btn.secondary:hover { background:#f1f5f9; }
table.cp { width:100%; border-collapse:collapse; font-size:.92rem; }
table.cp th { background:#f4f6f9; color:#334155; font-weight:600; text-align:left; padding:.55rem .6rem; border-bottom:1px solid #dde3ea; }
table.cp td { padding:.55rem .6rem; border-top:1px solid #edf1f5; vertical-align:middle; }
table.cp tr:nth-child(even) td { background:#fafbfc; }
table.cp td.act { white-space:nowrap; text-align:right; }
table.cp .act button, table.cp .act a { margin-left:.15rem; }
.lnk { background:none !important; border:0; color:#1a56db !important; padding:.1rem .3rem; font-size:.88rem; cursor:pointer; text-decoration:none; }
.lnk:hover { text-decoration:underline; }
.lnk.del { color:#b91c1c !important; }
.empty { color:#64748b; padding:.75rem .2rem; }
.kv { display:grid; grid-template-columns: max-content 1fr; gap:.35rem 1rem; font-size:.92rem; }
.kv dt { color:#64748b; } .kv dd { margin:0; }
/* File manager gaya cPanel */
.fm-toolbar { display:flex; gap:.35rem; flex-wrap:wrap; background:#fff; border:1px solid #dde3ea; border-radius:6px 6px 0 0; padding:.5rem; }
.fm-toolbar button, .fm-toolbar a.btn { font-size:.85rem; padding:.3rem .65rem; }
.fm-pathbar { display:flex; gap:.5rem; align-items:center; background:#f4f6f9; border:1px solid #dde3ea; border-top:0; padding:.45rem .6rem; font-family:ui-monospace, monospace; font-size:.88rem; }
.fm-pathbar a { color:#1a56db; text-decoration:none; }
.fm-body { display:grid; grid-template-columns: 230px 1fr; border:1px solid #dde3ea; border-top:0; border-radius:0 0 6px 6px; background:#fff; min-height:420px; }
.fm-tree { border-right:1px solid #e8edf2; padding:.6rem .4rem; font-size:.9rem; }
.fm-tree a { display:block; padding:.25rem .5rem; border-radius:4px; color:#1f2d3d; text-decoration:none; word-break:break-all; }
.fm-tree a:hover, .fm-tree a.on { background:#e8f0fe; color:#1a56db; }
.fm-tree .sub { padding-left:1rem; font-size:.86rem; }
.fm-files { overflow:auto; }
.fm-panel { display:none; padding:.75rem; border:1px solid #dde3ea; border-top:0; background:#fbfcfe; }
.fm-panel.open { display:block; }
.fm-progress { flex-basis:100%; display:flex; align-items:center; gap:.5rem; margin-top:.5rem; }
.fm-progress[hidden] { display:none; }
.fm-progress progress.bar { flex:1; max-width:28rem; height:10px; }
@media (max-width: 800px) { .fm-body { grid-template-columns: 1fr; } .fm-tree { border-right:0; border-bottom:1px solid #e8edf2; } }
.editor-head { display:flex; align-items:center; gap:.75rem; justify-content:space-between; background:#1f2d3d; color:#fff; padding:.6rem .9rem; border-radius:6px 6px 0 0; }
.editor-head code { color:#fff; background:transparent; }
textarea.editor { border-radius:0 0 6px 6px; margin:0; }
td.nopad { padding:0 !important; border-top:0 !important; background:transparent !important; }
.cp-form.wide { max-width:none; }
.dnsrow { display:grid; grid-template-columns: 1.2fr .8fr .6fr 2.4fr auto; gap:.5rem; align-items:end; }
.dnsrow .dnsbtn button { white-space:nowrap; }
.row5.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .dnsrow, .cp-form .row5 { grid-template-columns: 1fr 1fr; } }
/* rapikan: select senada input, user di kanan, tautan tabel tanpa garis bawah */
select { padding:.4rem .5rem; border:1px solid var(--line); border-radius:6px; font:inherit; background:#fff; color:inherit; }
.cp-form .grp > select { margin-top:0; border-radius:0 6px 6px 0; min-width:160px; }
.cp-form .grp > span + select { border-left:0; }
.cp-form .grp > input + span { border-radius:0; border-right:0; border-left:0; }
.topbar .who { margin-left:auto; }
.topbar .search + .who { margin-left:0; }
table.cp a { text-decoration:none; }
table.cp a:hover { text-decoration:underline; }
/* WHM: daftar akun gaya "List Accounts" */
.whm-search { display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; }
.whm-search input { flex:1; max-width:420px; }
table.acc td.disk { min-width:150px; font-size:.86rem; }
table.acc td.disk progress.bar { display:block; margin-top:.25rem; }
table.acc tr.suspended td { background:#fffbeb; }
button.lnk.expand { font-size:1rem; width:1.6rem; }
button.lnk.expand[aria-expanded="true"] { transform:rotate(90deg); }
tr.acc-detail > td { background:#f8fafc !important; border-top:0; padding:.9rem 1rem 1.1rem; }
.acc-grid { display:grid; grid-template-columns: 1.3fr 1fr .9fr; gap:1.5rem; }
.acc-grid h4 { margin:.2rem 0 .5rem; font-size:.78rem; letter-spacing:.07em; text-transform:uppercase; color:#475569; }
.acc-grid .li { display:flex; align-items:center; gap:.4rem; padding:.15rem 0; }
.acc-grid form.inline { margin:.35rem 0 .9rem; }
form.limits { display:grid; grid-template-columns: repeat(4, 1fr); gap:.4rem; align-items:end; margin:.6rem 0 .3rem; }
form.limits label { font-size:.78rem; color:#475569; }
form.limits input { width:100%; display:block; margin-top:.15rem; }
form.limits button { grid-column: 1 / -1; justify-self:start; }
.btn-col { display:grid; gap:.4rem; }
.btn-col button { text-align:left; }
@media (max-width: 1000px) { .acc-grid { grid-template-columns: 1fr; } }
.cp-form fieldset { border:0; padding:0; margin:0 0 .4rem; display:grid; gap:.75rem; }
.cp-form legend { font-size:.78rem; letter-spacing:.07em; text-transform:uppercase; color:#475569; font-weight:600; margin-bottom:.4rem; }
table.acc td:nth-child(5) { white-space:nowrap; }
h2.sect { font-size:1.15rem; margin:1.4rem 0 .7rem; }

/* WHM paket: catatan biru + tabel Resources gaya "Add a Package" */
.note { background:#e0f2fe; border:1px solid #7dd3fc; color:#075985; border-radius:6px; padding:.6rem .9rem; margin-bottom:1rem; font-size:.9rem; }
.pkg-form { max-width:760px; }
table.pkg-res { width:100%; border-collapse:collapse; }
table.pkg-res th, table.pkg-res td { padding:.6rem .5rem; border-bottom:1px solid var(--line); vertical-align:middle; text-align:left; }
table.pkg-res tr:last-child th, table.pkg-res tr:last-child td { border-bottom:0; }
table.pkg-res th { width:42%; font-size:.9rem; color:#334155; }
table.pkg-res th .hint, table.pkg-res td .hint { display:block; font-weight:400; color:#64748b; font-size:.8rem; }
table.pkg-res label.opt { display:inline-flex; align-items:center; gap:.45rem; font-weight:400; white-space:nowrap; }
table.pkg-res input[type=number] { width:9rem; }
table.pkg-res input[type=number]:disabled { background:#f1f5f9; color:#94a3b8; }
table.pkg-res #pkgname { width:100%; max-width:320px; }
.btn-row { display:flex; align-items:center; gap:1rem; }
.whm-search a.btn { margin-left:auto; }

/* Beranda panel user gaya cPanel Jupiter "Tools": grup bisa dilipat, ikon garis + aksen oranye */
.tools-title { font-size:1.9rem; font-weight:400; color:#1d2330; margin:.2rem 0 1rem; }
.tool-group { background:#fff; border:1px solid #dde3ea; border-radius:4px; margin-bottom:1rem; box-shadow:0 1px 2px rgba(15,23,42,.06); }
.tool-group > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:.65rem; padding:.75rem 1rem;
  font-size:.95rem; color:#1d2330; border-bottom:1px solid #e8edf2; user-select:none; }
.tool-group > summary::-webkit-details-marker { display:none; }
.tool-group > summary::after { content:"⌃"; margin-left:auto; color:#64748b; font-size:1rem; transform:translateY(3px); }
.tool-group:not([open]) > summary { border-bottom:0; }
.tool-group:not([open]) > summary::after { transform:rotate(180deg) translateY(3px); }
.tools { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:.15rem 1rem; padding:.75rem 1rem; }
@media (max-width: 900px) { .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tools { grid-template-columns: 1fr; } }
.tool { display:flex; align-items:center; gap:.75rem; padding:.55rem .4rem; border-radius:4px; color:#1a4f8b; text-decoration:none; font-size:.92rem; line-height:1.25; }
.tool:hover { background:#f1f6fd; text-decoration:underline; }
svg.cpi { width:38px; height:38px; flex:0 0 38px; fill:none; stroke:#2b3542; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
svg.cpi .o { stroke:#ff6c2c; }
svg.cpi .of { fill:#ff6c2c; stroke:#ff6c2c; }
svg.cpi.gi { width:26px; height:26px; flex-basis:26px; }

/* Alat tambahan panel user: statistik, autoresponder, proteksi folder */
.row5.two { grid-template-columns: repeat(2, 1fr); }
.acc-grid.two { grid-template-columns: 1fr 1fr; gap:1rem; }
.stat-cards { display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; margin-bottom:1rem; }
.stat-cards .card { background:#fff; border:1px solid #dde3ea; border-radius:6px; padding:.8rem 1rem; display:grid; gap:.2rem; }
.stat-cards .card strong { font-size:1.35rem; color:#1d2330; }
@media (max-width: 800px) { .stat-cards, .acc-grid.two { grid-template-columns: 1fr 1fr; } }
td .li { display:flex; align-items:center; gap:.4rem; padding:.1rem 0; }
.cp-section.hl { border-color:#ff6c2c; box-shadow:0 0 0 1px #ff6c2c40; }
textarea.pem { width:100%; min-height:9rem; font:12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
fieldset.radios { border:0; padding:0; margin:0; display:grid; gap:.25rem; }
fieldset.radios legend { font-weight:600; font-size:.9rem; color:#334155; margin-bottom:.2rem; }
fieldset.radios label { font-weight:400; display:flex; gap:.4rem; align-items:center; }
.cp-form fieldset.radios input[type=radio], .xfer input[type=checkbox] { display:inline-block; width:auto; margin:0; flex:none; }
fieldset.radios label { justify-content:flex-start; }
.xfer [hidden], .cp-form [hidden] { display:none !important; }
.xfer .note label { display:flex; gap:.4rem; align-items:center; font-weight:600; margin-bottom:.35rem; }
/* indikator htmx (gaya bawaan htmx dimatikan di base.html): tampil hanya selama request berjalan */
.htmx-indicator { display:none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display:inline; }
/* Transfer Tool: progres & log live */
.xfer-total { margin:.5rem 0 1rem; }
.xfer-head { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:.35rem; }
.xfer-pct { margin-left:auto; font-size:1.25rem; font-weight:600; }
progress.bar.big { height:14px; border-radius:7px; }
.xfer-items tr.cur { background:#f8fafc; }
.xfer-items .xfer-ipct { font-weight:600; }
.small { font-size:.8rem; }
ol.xfer-steps { display:flex; gap:.35rem; list-style:none; margin:0 0 .3rem; padding:0; font-size:.72rem; }
ol.xfer-steps li { padding:0 .45rem; border-radius:9px; background:#e5e9f0; color:var(--muted); }
ol.xfer-steps li.ok { background:#dcfce7; color:var(--ok); }
ol.xfer-steps li.now { background:#dbeafe; color:#1d4ed8; animation:xferpulse 1.5s ease-in-out infinite; }
ol.xfer-steps li.bad { background:#fee2e2; color:var(--err); }
@keyframes xferpulse { 50% { opacity:.55; } }
.xfer-log { margin-top:1rem; }
.xfer-log pre.log { max-height:420px; min-height:120px; }
pre.log .h { color:#93c5fd; font-weight:600; } pre.log .e { color:#fca5a5; } pre.log .w { color:#fcd34d; } pre.log .o { color:#86efac; }
.xfer-head label { display:inline-flex; align-items:center; gap:.3rem; margin:0; }
.xfer-head label input { display:inline-block; width:auto; margin:0; }
/* WHM › List Accounts (gaya WHM) */
.whm-search-box { display:inline-block; background:#f1f2f4; border:1px solid #c9ccd1; padding:.9rem 1.2rem; margin:.4rem 0 1rem; }
.whm-search-box .row { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin:.35rem 0; }
.whm-search-box .lbl { width:6.5rem; text-align:right; font-weight:600; }
.whm-search-box label { display:inline-flex; align-items:center; gap:.3rem; margin:0; font-size:.9rem; }
.whm-search-box label input { display:inline-block; width:auto; margin:0; }
.whm-search-box input[type=search] { width:14rem; }
.whm-search-box button, .whm-acc-panel button, .whm-acc-btns a.btn { background:#2f78c4; border:1px solid #255f9c; border-radius:3px; padding:.35rem .75rem; font-size:.88rem; }
.whm-pager { display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; font-size:.85rem; margin:.4rem 0; }
.whm-pager .pg { padding:0 .3rem; border:1px solid #c9ccd1; color:#2f78c4; text-decoration:none; background:#fff; }
.whm-pager .pg.on { background:#2f78c4; color:#fff; border-color:#255f9c; }
.whm-pager .pg.off { color:#9ca3af; }
.whm-pager form { margin:0 .4rem; }
.whm-pager .pg-sel { margin-left:auto; }
.whm-pager .pg-sel a { color:#2f78c4; }
.whm-pager label { display:inline; margin:0; }
.whm-pager label input { display:inline-block; width:3.2rem; padding:.1rem .3rem; margin:0; }
.whm-pager .sus-note { background:#f6c1c1; padding:0 .2rem; }
.whm-pager select { padding:.05rem .2rem; border:1px solid #c9ccd1; border-radius:3px; font:inherit; }
.whm-pager.pager-bottom { margin-top:.5rem; }
.tbl-scroll { overflow-x:auto; }
table.whm-acc { font-size:.83rem; border:1px solid #c9ccd1; }
table.whm-acc th { background:#e9eaed; text-align:center; white-space:nowrap; }
table.whm-acc th a { color:inherit; text-decoration:none; }
table.whm-acc td { text-align:center; border-bottom:1px solid #e3e6eb; }
table.whm-acc tr.acc.suspended > td { background:#f6c1c1; }
table.whm-acc td.over { color:var(--err); font-weight:600; }
.nowrap { white-space:nowrap; }
button.cp-logo { background:none; border:0; padding:0 .2rem; color:#ff6c2c; font:italic 800 1.15rem/1 Arial, sans-serif; letter-spacing:-.06em; }
button.cp-logo:hover { color:#e2521a; }
form.ql-form { display:inline; margin:0; }
.lnkish { color:#2f78c4; }
button.lnk.expand[aria-expanded="true"] { transform:none; }
table.whm-acc tr.acc-detail > td { text-align:left; background:#f4f5f7 !important; border:1px solid #c9ccd1; }
.whm-acc-panel { position:relative; }
.whm-acc-panel h5 { margin:.1rem 0 .4rem; font-size:.9rem; }
.whm-acc-panel button.close { position:absolute; right:0; top:0; background:#c4c7cc; border:0; border-radius:50%; width:1.3rem; height:1.3rem; padding:0; font-size:.7rem; line-height:1.3rem; color:#fff; }
.whm-acc-top { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0; border-bottom:1px solid #d8dbe0; padding-bottom:.8rem; margin:0 2rem .7rem 0; }
.whm-acc-top > * { padding:0 1.2rem; border-left:1px solid #d8dbe0; }
.whm-acc-top > :first-child { padding-left:0; border-left:0; }
.whm-acc-top .inline { display:flex; gap:.3rem; }
.whm-acc-top .inline input { flex:1; min-width:0; margin:0; border-radius:3px; }
.whm-acc-panel label.chk { display:flex; align-items:center; gap:.35rem; margin:.45rem 0 0; font-size:.85rem; }
.whm-acc-panel label.chk input { display:inline-block; width:auto; margin:0; }
.whm-acc-panel .help { display:inline-block; width:1rem; height:1rem; border-radius:50%; background:#3d4451; color:#fff; font-size:.7rem; text-align:center; line-height:1rem; cursor:help; }
.whm-acc-btns { display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.5rem; }
.whm-acc-btns button[disabled] { cursor:not-allowed; }
.whm-acc-btns button.on { background:#1d5592; }
.whm-acc-btns button.danger { background:#2f78c4; }
.whm-acc-btns.extra button, .whm-acc-btns.extra a.btn { background:#fff; color:#1f2d3d; border-color:#c9ccd1; font-size:.8rem; padding:.25rem .6rem; }
.whm-acc-sub { background:#fff; border:1px solid #d8dbe0; border-radius:4px; padding:.7rem .9rem; margin-top:.4rem; }
.whm-acc-sub label.inline input, .whm-acc-sub label.inline select { display:inline-block; width:auto; margin:0 .3rem; }
.whm-acc-sub .acc-grid { grid-template-columns:1fr 1fr; }
@media (max-width: 900px) { .whm-acc-top { grid-template-columns:1fr; } .whm-acc-top > * { border-left:0; padding:0 0 .7rem; } }
/* List Accounts memakai lebar penuh seperti WHM (tabel 14 kolom) */
.whm main.main { min-width:0; }
.whm main.main:has(#acclist) { max-width:none; margin-left:0; margin-right:0; }
table.whm-acc th, table.whm-acc td { padding:.4rem .3rem; }
table.whm-acc th { font-size:.82rem; }
/* Transfer Tool: versi PHP server lama */
.xfer-php { border:1px solid #dde3ea; border-radius:6px; padding:.6rem .9rem; margin:.6rem 0 1rem; background:#fbfcfd; }
.xfer-php h3 { margin:.1rem 0 .4rem; font-size:1rem; }
.xfer-pkgs > summary { cursor:pointer; margin:1rem 0 .4rem; }
.xfer-ttl { border:1px solid #fcd34d; background:#fffbeb; border-radius:6px; padding:.55rem .8rem; margin:.6rem 0; line-height:1.6; }
.xfer-ttl label.inline input { display:inline-block; width:6rem; margin:0 .3rem; }
.xfer-pkgs > summary h3 { display:inline; margin:0; }
.xfer-pkgs label.chk { display:flex; align-items:center; gap:.4rem; margin:.4rem 0 .6rem; }
.xfer-pkgs label.chk input { display:inline-block; width:auto; margin:0; }
.xfer-php .warn-box { background:#fef3c7; border:1px solid #fcd34d; border-radius:4px; padding:.45rem .6rem; }
/* Transfer Tool: pager 10/25/50 & akun suspended berwarna merah */
.pager { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.5rem 0 .8rem; font-size:.9rem; }
.pager label { display:inline-flex; align-items:center; gap:.35rem; margin:0; }
.pager select { padding:.2rem .3rem; border:1px solid var(--line); border-radius:4px; font:inherit; }
.pager .pager-info { color:var(--muted); margin-left:auto; }
.pager button:disabled { opacity:.45; cursor:default; }
table.cp tr.acc.susp > td { background:#f6c1c1; }
table.cp tr.acc.susp > td:first-child { box-shadow:inset 4px 0 0 var(--err); }
.susp-note { color:var(--err); font-weight:600; }
.xfer-php p.ok { color:var(--ok); }
.php-inst-list { display:flex; flex-direction:column; gap:.4rem; margin:.5rem 0 .2rem; }
.php-inst pre.small-log { max-height:160px; font-size:11px; margin:.35rem 0 0; }
/* whmsoft — pemasang aplikasi (panel user & WHM) */
img.cpi { width:38px; height:38px; flex:0 0 38px; object-fit:contain; }
img.cpi.gi { width:26px; height:26px; flex-basis:26px; }
.page-title .ic-img { width:44px; height:44px; }
.soft-bar { display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; justify-content:space-between; margin:0 0 1rem; }
.soft-cats { display:flex; flex-wrap:wrap; gap:.35rem; }
.soft-cats a { padding:.3rem .7rem; border:1px solid #dde3ea; border-radius:999px; background:#fff; color:#1a4f8b; text-decoration:none; font-size:.88rem; }
.soft-cats a.on { background:#1a4f8b; border-color:#1a4f8b; color:#fff; }
.soft-cats a.on .muted { color:#dbeafe; }
.soft-bar input[type=search] { min-width:220px; }
.soft-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:.8rem; margin-bottom:1.5rem; }
.soft-card { display:flex; gap:.8rem; align-items:flex-start; background:#fff; border:1px solid #dde3ea; border-radius:6px; padding:.85rem;
  color:inherit; text-decoration:none; box-shadow:0 1px 2px rgba(15,23,42,.05); }
.soft-card:hover { border-color:#1a4f8b; box-shadow:0 2px 8px rgba(26,79,139,.15); }
.soft-card img { flex:0 0 56px; }
.soft-card strong { color:#1a4f8b; }
.soft-card p { margin:.3rem 0 .45rem; color:#475569; }
.soft-detail { display:flex; gap:1.5rem; align-items:flex-start; margin-bottom:1rem; }
.soft-form select, .soft-form input { max-width:520px; }
img.soft-ic { vertical-align:middle; }
.soft-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:.8rem; margin-bottom:1rem; }
.soft-stats div { background:#fff; border:1px solid #dde3ea; border-radius:6px; padding:.8rem 1rem; }
.soft-stats b { display:block; font-size:1.6rem; font-weight:500; color:#1d2330; }
/* Backup Configuration (gaya WHM) */
.bkcfg label.chk { display:flex; gap:.45rem; align-items:center; font-weight:600; margin:.25rem 0; }
.bkcfg label.chk input { display:inline-block; width:auto; margin:0; flex:none; }
.bkcfg label.chk a.btn { margin-left:.5rem; font-weight:400; }
.bkcfg .sub { margin:.1rem 0 .6rem 1.6rem; display:grid; gap:.15rem; }
.bkcfg .sub label.chk { font-weight:400; }
.bkcfg .grp.short { max-width:320px; }
.bkcfg .hint { display:block; font-weight:400; color:#64748b; font-size:.82rem; margin:.1rem 0 .5rem; }
.bkcfg label.off { color:#94a3b8; }
.bkcfg select { max-width:320px; }

/* Plugins › WHMReseller: tab gaya v5 + menu Action per reseller */
.wr-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:.5rem; border-bottom:1px solid #dde3ea; margin-bottom:1rem; }
.wr-tabs { display:flex; flex-wrap:wrap; gap:.15rem; }
.wr-tab { padding:.5rem .9rem; border:1px solid transparent; border-bottom:none; border-radius:4px 4px 0 0; color:#1d6fd6; text-decoration:none; margin-bottom:-1px; }
.wr-tab.on { background:#fff; border-color:#dde3ea; color:#334155; }
.wr-tab.off { color:#94a3b8; cursor:not-allowed; }
.wr-add { display:flex; gap:.3rem; padding-bottom:.35rem; }
.wr-tools li { margin:.35rem 0; }
details.menu { position:relative; display:inline-block; text-align:left; }
details.menu > summary { list-style:none; cursor:pointer; }
details.menu > summary::-webkit-details-marker { display:none; }
details.menu .menu-list { position:absolute; right:0; z-index:20; min-width:11rem; background:#fff; border:1px solid #dde3ea;
  border-radius:4px; box-shadow:0 4px 14px rgba(15,23,42,.12); padding:.25rem 0; }
details.menu .menu-list > * { display:block; width:100%; margin:0; padding:.4rem .8rem; background:none; border:none;
  text-align:left; color:#334155; font:inherit; text-decoration:none; cursor:pointer; }
table.cp .act details.menu .menu-list > * { margin-left:0; }
details.menu .menu-list > *:hover:not([disabled]) { background:#f1f5f9; }
details.menu .menu-list > [disabled] { color:#94a3b8; cursor:not-allowed; }
details.menu .menu-list > .del:not([disabled]) { color:#b91c1c; }

/* Tabel lebar (Semua instalasi whmsoft, Daftar subdomain, Change Ownership, …) tidak boleh keluar dari kartu putih:
   halaman bertabel boleh lebih lebar, dan sisanya digulir di dalam kartu. Menu Action (details.menu) butuh overflow terlihat. */
.whm main.main:has(table.cp):not(:has(#acclist)) { max-width:1440px; }
.whm .cp-section { overflow-x:auto; }
.whm .cp-section:has(details.menu) { overflow:visible; }
table.cp td code, table.cp td .path { overflow-wrap:anywhere; }
/* WHM › Show Reseller Accounts: baris kelompok per reseller & jumlah akun (gaya cPanel) */
table.rsacc tr.grp th { background:var(--line); text-align:left; font-weight:600; }
table.rsacc tr.grp a { color:inherit; }
table.rsacc tr.grp-total td { background:var(--line); color:var(--muted, #555); }
table.rsacc tbody + tbody tr.grp th { border-top:.6rem solid transparent; background-clip:padding-box; }

/* MultiPHP INI Editor (WHM & cPanel) */
.phpini .note-box { background:#e8f4fb; border-left:4px solid #2f78c4; padding:.6rem .9rem; margin:.5rem 0 1rem; font-size:.88rem; }
.phpini .tabs { display:flex; gap:0; border-bottom:1px solid #d0d7de; margin-bottom:.8rem; }
.phpini .tabs a { padding:.45rem .9rem; color:#2f78c4; text-decoration:none; border:1px solid transparent; border-bottom:0; margin-bottom:-1px; }
.phpini .tabs a.on { color:#1f2937; background:#fff; border-color:#d0d7de; border-radius:4px 4px 0 0; }
.phpini select { min-width:18rem; margin-bottom:.8rem; }
.phpini-basic td:first-child { white-space:nowrap; }
.phpini-basic td:nth-child(2) { max-width:28rem; font-size:.85rem; }
.phpini .switch { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; }
.phpini .switch input { width:2.2rem; height:1.1rem; accent-color:#2f78c4; }
.phpini .phpini-bar { display:flex; justify-content:space-between; align-items:center; margin:.3rem 0; }
.phpini textarea.code { width:100%; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.82rem; line-height:1.35;
  tab-size:4; white-space:pre; overflow:auto; }

/* Server Contacts › Edit System Mail Preferences */
.note-box { background:#e8f4fb; border-left:4px solid #2f78c4; padding:.6rem .9rem; margin:.5rem 0 1rem; font-size:.88rem; }
.sysmail-note ul { margin:.3rem 0 0 1.1rem; padding:0; }
.sysmail-box { border:1px solid #d0d7de; border-radius:4px; margin:0 0 1rem; max-width:52rem; }
.sysmail-box h3 { margin:0; padding:.6rem .9rem; background:#f6f8fa; border-bottom:1px solid #d0d7de; font-size:.95rem; font-weight:normal; }
.sysmail-box form { padding:.8rem .9rem; }
.sysmail-box input[name=dest] { display:block; width:100%; max-width:40rem; margin:.4rem 0 .2rem; }
/* tombol bahasa ID | EN */
.topbar .langsw { display:flex; gap:0; margin:0 0 0 .75rem; }
.topbar .langsw button { background:transparent; border:1px solid #6b7c8f; color:#cfd8e3; padding:.2rem .45rem; font-size:.75rem; border-radius:0; }
.topbar .langsw button:first-of-type { border-radius:4px 0 0 4px; }
.topbar .langsw button:last-of-type { border-radius:0 4px 4px 0; border-left:0; }
.topbar .langsw button.on { background:#6b7c8f; color:#fff; }
.topbar .langsw:only-child, .topbar .logo + .langsw, .topbar .search + .langsw { margin-left:auto; }
/* Shield Dashboard (Ronin fase 1) — token sendiri agar tema gelap hanya berlaku di dashboard */
.sdash { --d-bg:transparent; --d-card:#fff; --d-fg:#1d2330; --d-muted:#6b7280; --d-line:#dde3ea; --d-track:#e5e7eb;
  --d-ok:#15803d; --d-warn:#d97706; --d-err:#dc2626; background:var(--d-bg); color:var(--d-fg); border-radius:8px; }
.sdash[data-theme="dark"] { --d-bg:#0f172a; --d-card:#1e293b; --d-fg:#e2e8f0; --d-muted:#94a3b8; --d-line:#334155; --d-track:#334155;
  --d-ok:#22c55e; --d-warn:#f59e0b; --d-err:#f87171; padding:.75rem; }
@media (prefers-color-scheme: dark) {
  .sdash[data-theme="auto"] { --d-bg:#0f172a; --d-card:#1e293b; --d-fg:#e2e8f0; --d-muted:#94a3b8; --d-line:#334155; --d-track:#334155;
    --d-ok:#22c55e; --d-warn:#f59e0b; --d-err:#f87171; padding:.75rem; }
}
.sdash .muted { color:var(--d-muted); }
.sdash .cp-section, .sdash .dcard { background:var(--d-card); color:var(--d-fg); border:1px solid var(--d-line); }
.sdash[data-theme="dark"] .cp-section table, .sdash[data-theme="dark"] .cp-section th { color:var(--d-fg); background:transparent; }
.dash-bar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:1rem; }
.dash-menu { position:relative; }
.dash-menu summary { cursor:pointer; list-style:none; border:1px solid var(--d-line); border-radius:6px; padding:.25rem .6rem; background:var(--d-card); }
.dash-menu > div { position:absolute; z-index:20; margin-top:.25rem; background:var(--d-card); border:1px solid var(--d-line); border-radius:6px;
  padding:.5rem .75rem; display:grid; gap:.3rem; min-width:220px; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.dash-kpi { display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; margin-bottom:1rem; }
.dcard { display:grid; gap:.25rem; align-content:start; border-radius:8px; padding:.8rem 1rem; text-decoration:none; color:inherit; }
a.dcard:hover { border-color:var(--accent); }
.dcard strong { font-size:1.5rem; }
.dcard strong small { font-size:.8rem; font-weight:normal; color:var(--d-muted); }
.dcard h3 { margin:.2rem 0 .4rem; font-size:1rem; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.dash-grid .wide { grid-column:1 / -1; }
.t-ok { color:var(--d-ok); } .t-warn { color:var(--d-warn); } .t-err { color:var(--d-err); }
.mbar { display:inline-flex; width:100%; max-width:220px; height:6px; background:var(--d-track); border-radius:3px; overflow:hidden; vertical-align:middle; }
.mbar i, .track i, i.key { display:inline-block; height:100%; }
.b-ok { background:var(--d-ok); } .b-warn { background:var(--d-warn); } .b-err { background:var(--d-err); }
i.key { width:.7rem; height:.7rem; border-radius:2px; margin:0 .2rem 0 .5rem; vertical-align:middle; }
svg.spark { width:100%; height:40px; } svg.spark polyline { fill:none; stroke:#2563eb; stroke-width:1.5; vector-effect:non-scaling-stroke; }
svg.spark polyline.tx { stroke:#16a34a; }
.donut-wrap { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
svg.donut { width:150px; height:150px; transform:rotate(-90deg); }
svg.donut circle { fill:none; stroke-width:16; } svg.donut .ring, svg.gauge .ring { stroke:var(--d-track); }
svg.donut text { transform:rotate(90deg); transform-origin:70px 70px; text-anchor:middle; fill:var(--d-fg); }
svg .big { font-size:22px; font-weight:700; text-anchor:middle; fill:var(--d-fg); } svg .lbl { font-size:10px; fill:var(--d-muted); }
.legend { list-style:none; margin:0; padding:0; display:grid; gap:.2rem; font-size:.85rem; }
.legend i { display:inline-block; width:.7rem; height:.7rem; border-radius:2px; margin-right:.35rem; vertical-align:middle; }
svg.gauge { width:100%; max-width:220px; display:block; margin:0 auto; } svg.gauge path { fill:none; stroke-width:14; stroke-linecap:round; }
.center { text-align:center; }
.hbars { display:grid; gap:.35rem; }
.hbar { display:grid; grid-template-columns:minmax(120px, 200px) 1fr auto; gap:.6rem; align-items:center; font-size:.9rem; }
.hbar .track { display:flex; height:12px; background:var(--d-track); border-radius:3px; overflow:hidden; }
.hbar .num { font-variant-numeric:tabular-nums; color:var(--d-muted); }
.modgrid, .dgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:.6rem; }
.mod { display:grid; gap:.25rem; padding:.5rem .6rem; border:1px solid var(--d-line); border-radius:6px; text-decoration:none; color:inherit; }
.mod:hover { border-color:var(--accent); }
.daemon { display:grid; gap:.2rem; padding:.5rem .6rem; border:1px solid var(--d-line); border-radius:6px; }
.scanf { display:inline-flex; gap:.3rem; margin-left:auto; }
@media (max-width: 800px) { .dash-kpi { grid-template-columns:1fr 1fr; } .dash-grid { grid-template-columns:1fr; } }
@media (max-width: 480px) { .dash-kpi { grid-template-columns:1fr; } .hbar { grid-template-columns:1fr; } }
/* Panduan keamanan */
.guide [data-guide-search] { flex:1; min-width:200px; }
.pillars { display:grid; grid-template-columns:repeat(4, 1fr); gap:.75rem; margin-bottom:1rem; }
.pillar { border-top:4px solid var(--pc); background:#fff; border-radius:6px; padding:.6rem .8rem; display:grid; gap:.3rem;
  border-left:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.pillar span { display:grid; gap:.15rem; }
details.gchap { border:1px solid var(--line); border-left:4px solid var(--pc); border-radius:6px; background:#fff; margin-bottom:.5rem; padding:.2rem .8rem; }
details.gchap summary { cursor:pointer; padding:.4rem 0; }
.gnum { display:inline-block; min-width:1.6rem; text-align:center; border-radius:4px; background:var(--pc); color:#fff; font-size:.8rem; }
.gtopics { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:.6rem; }
.gtopic { border:1px solid var(--line); border-radius:6px; padding:.5rem .7rem; }
.gtopic h4 { margin:.1rem 0 .3rem; }
.gtopic p { margin:.2rem 0; }
.gtip { background:#fefce8; border-left:3px solid #ca8a04; padding:.3rem .5rem; font-size:.9rem; }
@media (max-width: 800px) { .pillars { grid-template-columns:1fr 1fr; } }
@media (max-width: 480px) { .pillars { grid-template-columns:1fr; } }
.mod .badge, .dcard > .badge { justify-self:start; }
.pillar, .pillar span { align-content:start; }
svg.daily { width:100%; height:110px; display:block; } svg.daily rect.b-err { fill:var(--d-err); } svg.daily rect.b-warn { fill:var(--d-warn); }
.spread { display:flex; justify-content:space-between; }
svg.gchart { width:100%; height:100px; border:1px solid var(--line); }
.malview { max-height:420px; overflow:auto; white-space:pre-wrap; word-break:break-all; background:#0f172a; color:#e2e8f0; padding:.6rem; border-radius:6px; font-size:.85rem; }

/* di dalam iframe client area whmbill */
body.embed .topbar { height:40px; background:#f3f5f7; color:#1f2d3d; position:static; }
body.embed .topbar a { color:#1f2d3d; }