:root { --ink:#16222e; --muted:#5d6b79; --line:#dbe3ea; --brand:#b82820; --brand-dark:#8f1f19; --black:#000; --bg:#f7f5f4; --card:#fff; --danger:#b3261e; --ok:#1e7f4f; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--ink); min-height:100vh; display:flex; flex-direction:column; }
a { color:var(--link,var(--brand)); }
header { display:flex; align-items:center; gap:1.5rem; padding:.9rem 2rem; background:#fff; border-bottom:1px solid var(--line); flex-wrap:wrap; }
header .brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; white-space:nowrap; }
header .brand img { height:36px; width:auto; display:block; }
header .brand small { font-size:.8rem; color:var(--muted); }
header .spacer { flex:1; }
header nav { display:flex; gap:.25rem; flex:1; flex-wrap:wrap; }
header nav a { padding:.35rem .75rem; border-radius:8px; color:var(--ink); text-decoration:none; }
header nav a:hover { background:var(--bg); }
header nav a.on { background:var(--brand); color:var(--on-brand,#fff); font-weight:600; }
.who { color:var(--muted); margin-right:.5rem; }
main { max-width:1100px; width:100%; margin:1.5rem auto; padding:0 1.5rem; flex:1; }
footer { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.5rem 2rem; background:var(--black); color:#bbb; font-size:.9rem; }
footer a { color:#fff; }
h1 { font-size:1.5rem; margin:0 0 1rem; } h2 { font-size:1.15rem; margin:2rem 0 .6rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem; margin:0 0 1rem; }
.card.narrow { max-width:380px; display:flex; flex-direction:column; gap:.8rem; }
.card.row { display:flex; flex-wrap:wrap; gap:.7rem; align-items:flex-end; }
.card.row label, .card.narrow label { display:flex; flex-direction:column; font-size:.85rem; color:var(--muted); gap:.2rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; }
.stat { text-align:center; color:var(--muted); } .stat span { display:block; font-size:2rem; color:var(--ink); font-weight:600; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
th, td { text-align:left; padding:.55rem .8rem; border-bottom:1px solid var(--line); vertical-align:middle; }
th { background:var(--bg); border-bottom:2px solid var(--brand); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
input, select, button { font:inherit; padding:.4rem .65rem; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); }
input[type=number] { width:6.5rem; }
button { cursor:pointer; } button:hover { background:var(--bg); }
button.primary { background:var(--brand); border-color:var(--brand); color:var(--on-brand,#fff); font-weight:600; } button.primary:hover { background:var(--brand-dark); border-color:var(--brand-dark); opacity:1; }
button.danger { color:var(--danger); border-color:var(--danger); }
button.link { border:0; background:none; color:var(--brand); }
form.inline, label.inline { display:inline-flex; gap:.4rem; align-items:center; margin:0; }
.flash { padding:.6rem .9rem; border-radius:6px; margin-bottom:1rem; word-break:break-word; }
.flash.ok { background:#e6f4ec; color:var(--ok); } .flash.error { background:#fbeaea; color:var(--danger); }
.muted { color:var(--muted); font-size:.9rem; }
.chip { display:inline-flex; gap:.3rem; align-items:center; border:1px solid var(--line); border-radius:99px; padding:.1rem .2rem .1rem .6rem; font-size:.85rem; }
.chip.on { background:#e6f4ec; border-color:var(--ok); }
.chip button { padding:.05rem .5rem; border-radius:99px; font-size:.8rem; }
pre { padding:.8rem; border-radius:6px; overflow:auto; } .okbox { background:#e6f4ec; } .errbox { background:#fbeaea; }
code { background:#eef0f4; padding:.1rem .3rem; border-radius:4px; }

h1 { font-weight:700; }
.login-wrap { max-width:420px; margin:2rem auto; }
.back { font-size:.9rem; }

/* ---- "List Accounts" (WHM style) ---- */
.whm-summary { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.whm-summary div { flex:1; min-width:110px; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:6px; padding:.6rem .9rem; color:var(--muted); font-size:.85rem; }
.whm-summary span { display:block; font-size:1.6rem; font-weight:700; color:var(--ink); line-height:1.2; }
.whm-summary span.bad { color:var(--danger); }
.whm-create summary { cursor:pointer; }
.whm-filter { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:0 0 .8rem; }
table.whm { font-size:.9rem; }
table.whm th { background:#eef1f4; text-transform:none; letter-spacing:0; font-size:.82rem; color:var(--ink); border-bottom:2px solid #cfd6dd; white-space:nowrap; }
table.whm td { padding:.45rem .7rem; vertical-align:middle; }
table.whm td:last-child { white-space:nowrap; }
table.whm tr.whm-row:nth-child(4n+1) td, table.whm tr.whm-row:nth-child(4n+1) + tr.whm-detail td { background:#fafbfc; }
table.whm tr.whm-row:hover td { background:#fdf3f2; }
tr.is-suspended td { background:#fdecea !important; }
.whm-manage { width:1.7rem; height:1.7rem; padding:0; border-radius:4px; font-weight:700; line-height:1; background:#fff; }
.whm-num { font-size:.8rem; white-space:nowrap; }
.whm-bar { height:7px; background:#e4e8ec; border-radius:4px; overflow:hidden; margin-top:3px; min-width:90px; }
.whm-bar span { display:block; height:100%; }
.whm-bar span.ok { background:var(--ok); } .whm-bar span.warn { background:#e6a117; } .whm-bar span.bad { background:var(--danger); }
.whm-tag { display:inline-block; padding:.05rem .5rem; border-radius:99px; font-size:.75rem; font-weight:600; margin:1px 0; }
.whm-tag.ok { background:#e6f4ec; color:var(--ok); } .whm-tag.warn { background:#fff3d6; color:#8a5a00; } .whm-tag.bad { background:#fbeaea; color:var(--danger); }
tr.whm-detail td { border-bottom:2px solid #cfd6dd; }
.whm-detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.2rem 2rem; padding:.4rem 0; }
.whm-detail-grid h4 { margin:.2rem 0 .4rem; font-size:.9rem; color:var(--brand-dark); border-bottom:1px solid var(--line); padding-bottom:.2rem; }
table.whm-kv { border:0; background:none; font-size:.85rem; } table.whm-kv th, table.whm-kv td { background:none !important; border:0; padding:.15rem .6rem .15rem 0; text-align:left; text-transform:none; letter-spacing:0; color:var(--ink); font-size:.85rem; white-space:normal; }
table.whm-kv th { color:var(--muted); font-weight:600; white-space:nowrap; }
.whm-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* ---- customer tools (v1.2) ---- */
.tiles { display:flex; gap:1rem; flex-wrap:wrap; margin:0 0 1rem; }
.tile { flex:1; min-width:130px; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:6px; padding:.6rem .9rem; color:var(--muted); font-size:.85rem; }
.tile b { display:block; font-size:1.5rem; color:var(--ink); line-height:1.2; }
.bar { height:8px; background:#e4e8ec; border-radius:4px; overflow:hidden; min-width:90px; }
.bar i { display:block; height:100%; background:var(--brand); }
.toolgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:.8rem; margin-bottom:1rem; }
.toolcard { display:block; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.8rem 1rem; text-decoration:none; color:var(--ink); }
.toolcard:hover { border-color:var(--brand); box-shadow:0 1px 6px rgba(0,0,0,.08); }
.toolcard b { display:block; color:var(--brand-dark); margin-bottom:.15rem; }
.toolcard span { color:var(--muted); font-size:.85rem; }
.chip { display:inline-block; padding:.15rem .7rem; border:1px solid var(--line); border-radius:99px; text-decoration:none; background:#fff; margin:0 .2rem .3rem 0; }
.crumbs { margin:.2rem 0 .8rem; color:var(--muted); }
details.inline summary { cursor:pointer; color:var(--brand); display:inline; }
details.inline[open] { display:block; padding:.4rem 0; }
details.inline form { display:block; margin:.2rem 0; }
textarea { font:inherit; }

/* ---- cPanel-style layout (signed in): dark sidebar, top bar with tool search, tool tiles ---- */
body.app-body { display:block; background:#f4f5f7; }
.app { display:flex; min-height:100vh; }
.side { width:250px; flex:none; background:var(--side-bg,#1c2742); color:var(--side-ink,#dfe5f2); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; }
.side-brand { display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; padding:1rem 1.2rem; background:#fff; text-decoration:none; border-bottom:3px solid var(--brand); }
.side-brand img { height:34px; width:auto; display:block; } .side-brand small { font-size:.75rem; color:var(--muted); }
.side nav { padding:.6rem 0 1.5rem; }
.side-head { padding:1rem 1.3rem .35rem; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--side-head,#8d9bbd); }
.side nav a { display:flex; align-items:center; gap:.85rem; padding:.6rem 1.3rem; color:var(--side-ink,#dfe5f2); text-decoration:none; border-left:4px solid transparent; font-size:1.02rem; }
.side nav a .ic { flex:none; opacity:.9; }
.side nav a:hover { background:var(--side-hover,#263459); color:var(--side-ink,#fff); }
.side nav a.on { background:var(--side-active,#2c3b66); border-left-color:var(--brand); color:var(--side-ink,#fff); font-weight:600; }
.app-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; gap:.9rem; padding:.7rem 1.6rem; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; justify-content:flex-end; }
.navbtn { display:none; cursor:pointer; margin-right:auto; color:var(--ink); }
.tsearch { position:relative; width:min(420px,100%); display:flex; align-items:center; }
.tsearch input { width:100%; padding:.5rem 2.2rem .5rem .8rem; border:1px solid var(--side-line,#1c2742); border-radius:6px; }
.tsearch .ic { position:absolute; right:.6rem; color:var(--side-line,#1c2742); pointer-events:none; }
.tresults { position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.15); overflow:hidden; z-index:30; }
.tresults a, .tresults .tnone { display:block; padding:.5rem .9rem; color:var(--ink); text-decoration:none; }
.tresults a:hover, .tresults a.sel { background:#eef1f8; } .tresults .tnone { color:var(--muted); }
.tbell { position:relative; display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%; color:var(--ink); }
.tbell b { position:absolute; top:-3px; right:-3px; background:var(--brand); color:#fff; border-radius:99px; font-size:.65rem; padding:0 .32rem; line-height:1.3; }
.tuser { position:relative; } .tuser summary { list-style:none; display:flex; align-items:center; gap:.4rem; cursor:pointer; border:1px solid var(--line); border-radius:99px; padding:.4rem .9rem .4rem .6rem; }
.tuser summary::-webkit-details-marker { display:none; }
.tmenu { position:absolute; right:0; top:calc(100% + 6px); min-width:210px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.15); padding:.3rem 0; z-index:30; }
.tmenu a, .tmenu button { display:block; width:100%; text-align:left; padding:.5rem 1rem; color:var(--ink); text-decoration:none; background:none; border:0; border-radius:0; }
.tmenu a:hover, .tmenu button:hover { background:#eef1f8; } .tmenu .tmeta { padding:.4rem 1rem; color:var(--muted); font-size:.85rem; border-bottom:1px solid var(--line); }
.tmenu form { margin:0; }
body.app-body main { max-width:1280px; margin:1.5rem auto; padding:0 1.6rem; }
body.app-body footer { margin-top:auto; }
.side-shade { display:none; }

/* tool home */
.cp-home { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.4rem; align-items:start; }
.cp-cat { background:#fff; border:1px solid var(--line); border-radius:8px; margin:0 0 1.1rem; }
.cp-cat > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:.9rem; padding:.9rem 1.2rem; font-size:1.1rem; }
.cp-cat > summary::-webkit-details-marker { display:none; }
.cp-cat > summary .ic { color:var(--brand); } .cp-cat > summary b { flex:1; font-weight:500; }
.cp-cat > summary:after { content:""; width:.55rem; height:.55rem; border-right:2px solid #777; border-bottom:2px solid #777; transform:rotate(-135deg); transition:transform .15s; margin-right:.3rem; }
.cp-cat:not([open]) > summary:after { transform:rotate(45deg); }
.cp-cat[open] > summary { border-bottom:1px solid var(--line); }
.cp-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:.2rem .6rem; padding:.8rem .9rem 1rem; }
.cp-tile { display:flex; align-items:center; gap:.9rem; padding:.7rem .6rem; border-radius:8px; color:var(--link,#1d4b8f); text-decoration:none; }
.cp-tile .ic { flex:none; color:var(--brand); width:36px; height:36px; }
.cp-tile:hover { background:#f2f5fb; text-decoration:underline; }
.cp-tile.off { opacity:.5; }
.cp-side .card { padding:0; margin-bottom:1.1rem; } .cp-side h3 { margin:0; padding:1rem 1.2rem; font-size:1.1rem; border-bottom:1px solid var(--line); }
.cp-kv { padding:.7rem 1.2rem; border-bottom:1px solid var(--line); } .cp-kv:last-child { border-bottom:0; }
.cp-kv small { display:block; color:var(--muted); font-size:.8rem; font-weight:600; } .cp-kv div { margin-top:.15rem; word-break:break-all; }
.cp-stat { padding:.7rem 1.2rem; border-bottom:1px solid var(--line); } .cp-stat:last-child { border-bottom:0; }
.cp-stat small { display:block; color:var(--muted); font-size:.8rem; font-weight:600; } .cp-stat div { margin:.1rem 0 .25rem; font-size:1.05rem; }
.cp-stat .bar { margin-top:.2rem; }

@media (max-width: 1100px) { .cp-home { grid-template-columns:1fr; } }
@media (max-width: 860px) {
  .side { position:fixed; left:0; top:0; z-index:50; transform:translateX(-100%); transition:transform .2s; box-shadow:4px 0 18px rgba(0,0,0,.3); }
  .navtoggle:checked ~ .app .side { transform:none; }
  .navtoggle:checked ~ .app .side-shade { display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40; }
  .navbtn { display:inline-flex; }
  body.app-body main { padding:0 1rem; }
  .topbar { padding:.6rem 1rem; }
  .tuser summary span { display:none; }
}

.tbell b { color:var(--on-brand,#fff); }

/* ---- dark mode (body.dark) ---- */
body.dark { --ink:#e4e9ef; --muted:#9aa8b8; --line:#2f3c4c; --bg:#11171e; --card:#1a232d; --danger:#ff8a80; --ok:#6fd49b; background:#11171e; color:var(--ink); color-scheme:dark; }
body.dark.app-body { background:#11171e; }
body.dark header, body.dark .topbar, body.dark .cp-cat, body.dark .tmenu, body.dark .tresults, body.dark .tuser summary, body.dark .tbell { background:var(--card); color:var(--ink); border-color:var(--line); }
body.dark .side-brand { background:#f3f4f6; }
body.dark input, body.dark select, body.dark textarea, body.dark button { background:#0f151c; color:var(--ink); border-color:#33414f; }
body.dark button:hover { background:#1f2a36; }
body.dark button.primary { background:var(--brand); color:var(--on-brand,#fff); border-color:var(--brand); }
body.dark th { background:#202b37; color:var(--muted); }
body.dark table.whm th { background:#202b37; color:var(--ink); border-bottom-color:#33414f; }
body.dark table.whm tr.whm-row:nth-child(4n+1) td, body.dark table.whm tr.whm-row:nth-child(4n+1) + tr.whm-detail td { background:#18212a; }
body.dark table.whm tr.whm-row:hover td { background:#222f3c; }
body.dark tr.is-suspended td { background:#3a1f22 !important; }
body.dark .tile, body.dark .toolcard, body.dark .whm-summary div, body.dark .chip, body.dark .whm-manage { background:var(--card); color:var(--ink); border-color:var(--line); }
body.dark .toolcard b { color:var(--link,var(--brand)); }
body.dark .flash.ok { background:#16322a; color:#8fe0b0; } body.dark .flash.error { background:#3a1f22; color:#ffb4ab; }
body.dark .flash { background:#202b37; }
body.dark code { background:#222d3a; color:#dbe4ee; } body.dark .okbox { background:#16322a; } body.dark .errbox { background:#3a1f22; }
body.dark .cp-tile:hover, body.dark .tmenu a:hover, body.dark .tmenu button:hover, body.dark .tresults a:hover, body.dark .tresults a.sel { background:#222f3c; }
body.dark .tmenu a, body.dark .tmenu button, body.dark .tresults a { color:var(--ink); }
body.dark .whm-bar, body.dark .bar { background:#2a3644; }
body.dark .whm-tag.ok { background:#16322a; } body.dark .whm-tag.warn { background:#3b3016; color:#f1c76a; } body.dark .whm-tag.bad { background:#3a1f22; }
body.dark .tsearch input { border-color:#4a5b6d; }
body.dark .tsearch .ic { color:var(--muted); }
body.dark hr { border-color:var(--line); }
body.dark .chip.on { background:#16322a; }

/* appearance page */
.swatches { display:flex; gap:.5rem; flex-wrap:wrap; margin:.3rem 0 .6rem; }
.swatch { display:inline-flex; align-items:center; gap:.4rem; padding:.2rem .6rem .2rem .25rem; border:2px solid var(--line); border-radius:99px; cursor:pointer; background:var(--card); }
.swatch i { width:22px; height:22px; border-radius:50%; display:block; border:1px solid rgba(0,0,0,.2); }
.swatch input { position:absolute; opacity:0; pointer-events:none; }
.swatch:has(input:checked) { border-color:var(--ink); box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--brand); }
.preview { display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; max-width:520px; margin:.5rem 0 1rem; }
.preview .pside { width:120px; padding:.6rem; background:var(--side-bg); color:var(--side-ink); font-size:.8rem; }
.preview .pside span { display:block; padding:.25rem .4rem; border-left:3px solid transparent; } .preview .pside span.on { background:var(--side-active); border-left-color:var(--brand); }
.preview .pbody { flex:1; padding:.7rem; background:var(--bg); } .preview .pbody b { display:inline-block; background:var(--brand); color:var(--on-brand,#fff); padding:.2rem .7rem; border-radius:6px; font-size:.8rem; }
body.dark .cp-cat > summary .ic, body.dark .cp-tile .ic { color:var(--link,var(--brand)); }
body.dark .tsearch .ic { color:var(--muted); }

/* ---- Radio ---- */
.rchart { display:flex; align-items:flex-end; gap:3px; height:90px; }
.rchart div { flex:1; height:100%; display:flex; align-items:flex-end; background:#f1f3f5; border-radius:3px 3px 0 0; }
.rchart span { display:block; width:100%; background:var(--brand); border-radius:3px 3px 0 0; min-height:2px; }