:root {
  --bg: #f5f6fa; --card: #fff; --ink: #14102e; --muted: #5f5c7e;
  --line: #e4e3ef; --brand: #09042e; --brand-d: #221a5e; --brand-tint: rgba(9,4,46,.08);
  --ok: #1a7f37; --warn: #9a6700; --err: #b42318; --info: #1f6feb;
  --thead: #f7f8fc; --chip: #edecf5; --inputbg: #fff;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 2px 6px rgba(16,24,40,.06);
}
html[data-theme="dark"] {
  --bg: #09042e; --card: #171240; --ink: #f3f4fb; --muted: #a8acd0;
  --line: #2c2660; --brand: #ffffff; --brand-d: #e4e6f4; --brand-tint: rgba(255,255,255,.14);
  --ok: #56d364; --warn: #e0b341; --err: #ff6b63; --info: #58a6ff;
  --thead: #13103a; --chip: #221c54; --inputbg: #110b38;
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.3);
}
html[data-theme="dark"] .alert.error { background: #2a1714; }
html[data-theme="dark"] .alert.warn { background: #2a2410; }
html[data-theme="dark"] .alert.ok,
html[data-theme="dark"] .badge.running, html[data-theme="dark"] .badge.ok { background: #10241a; }
html[data-theme="dark"] .badge.provisioning, html[data-theme="dark"] .badge.queued,
html[data-theme="dark"] .badge.installing { background: #10243a; }
html[data-theme="dark"] .badge.error { background: #2a1714; }
html[data-theme="dark"] .badge.stopped, html[data-theme="dark"] .badge.pending { background: #222c38; }
* { 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(--ink); }
header { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 10px 24px; background: var(--card); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow); position: sticky; top: 0; z-index: 10; }
.nav-left { display: flex; align-items: center; gap: 22px; min-width: 0; flex: 1 1 auto; }
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.logo { height: 26px; width: auto; display: block; }
.logo-neg { display: none; }
html[data-theme="dark"] .logo-pos { display: none; }
html[data-theme="dark"] .logo-neg { display: block; }
/* Primary navigation = pages you go to. Never wrap: scroll horizontally instead. It grows
   to fill the row so the theme toggle is always pinned top-right beside the logo. */
.nav-links { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; min-width: 0;
  flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.nav-links::-webkit-scrollbar { display: none; }
.theme-toggle { flex: 0 0 auto; margin-left: auto; }
.nav-links a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px;
  padding: 6px 11px; border-radius: 8px; white-space: nowrap; transition: background .12s, color .12s; }
.nav-links a:hover { color: var(--ink); background: var(--thead); }
.nav-links a.active { color: var(--brand); background: var(--brand-tint); }
/* Secondary = actions + identity */
.nav-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.btn.icon { padding: 6px 9px; line-height: 1; }
.btn.icon svg { display: block; }
/* Subtle identity line under the navbar (text links, no buttons) */
.userbar { max-width: 1080px; margin: 0 auto; padding: 6px 24px 0; text-align: right;
  font-size: 12px; color: var(--muted); }
.userbar a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.userbar a:hover { color: var(--ink); }
/* Page header with a primary action on the right */
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 8px; }
.page-head h1 { margin: 0; }
main { max-width: 1080px; margin: 24px auto; padding: 0 24px; }
h1 { font-size: 24px; margin: 0 0 18px; }
h2 { font-size: 16px; margin: 22px 0 10px; }
a { color: var(--info); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

.btn { display: inline-block; padding: 6px 12px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--card); color: var(--ink); cursor: pointer;
  text-decoration: none; font-size: 14px; }
.btn:hover { border-color: #c7ced6; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-d); }
.btn.danger { color: var(--err); border-color: #f0c4bf; }
.btn.small { padding: 3px 9px; font-size: 13px; }
.btn.ghost { border: none; background: transparent; color: var(--muted); }
/* Dark mode: white buttons with navy (#09042e) text; keep borders in the navy family. */
html[data-theme="dark"] .btn:hover { border-color: var(--muted); }
html[data-theme="dark"] .btn.primary { color: #09042e; }
html[data-theme="dark"] .btn.danger { border-color: #6a2f2f; }

table.grid { width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
table.grid th, table.grid td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.grid thead th { background: var(--thead); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
table.grid tr:last-child td { border-bottom: none; }
table.kv th { text-align: left; color: var(--muted); font-weight: 500; padding: 4px 14px 4px 0; white-space: nowrap; }
table.kv td { padding: 4px 0; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-bottom: 18px; box-shadow: var(--shadow); }

/* Collapsible product panels (catalog) */
details.product { padding: 14px 20px; }
details.product > summary { cursor: pointer; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; list-style: none; font-size: 15px; }
details.product > summary::-webkit-details-marker { display: none; }
details.product > summary::before { content: '▸'; color: var(--muted); font-size: 12px; }
details.product[open] > summary::before { content: '▾'; }
details.product[open] > summary { margin-bottom: 4px; }
.prod-name { font-weight: 700; }
.prod-pills { display: flex; flex-wrap: wrap; gap: 3px; margin-left: auto; }
.prod-form { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.prod-form .plugins { margin: 8px 0; }
.cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .cols, .cols-3 { grid-template-columns: 1fr; } }

/* Admin overview */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow); }
.stat-n { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.stat-l { color: var(--muted); font-size: 13px; margin-top: 4px; }
.wow { font-size: 12px; font-weight: 700; margin-left: 4px; }
.wow.up { color: var(--ok); } .wow.down { color: var(--err); }
.bar { height: 8px; background: var(--line); border-radius: 5px; overflow: hidden; }
.bar .fill { height: 100%; background: var(--brand); border-radius: 5px; }
.bar .fill.hot { background: var(--err); }
.res { margin: 12px 0; }
.res-h { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.dist-row { display: grid; grid-template-columns: 90px 1fr 32px; align-items: center; gap: 10px; margin: 7px 0; font-size: 13px; }
.dist-k { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dist-n { text-align: right; font-weight: 600; }

form.card label, fieldset label { display: block; margin: 12px 0; font-weight: 600; font-size: 14px; }
input, select { width: 100%; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 7px; font: inherit; background: var(--inputbg); color: var(--ink);
  margin-top: 4px; font-weight: 400; }
html[data-theme="dark"] select option { background: var(--inputbg); color: var(--ink); }
fieldset { border: 1px solid var(--line); border-radius: 10px; margin: 16px 0; padding: 6px 16px 16px; }
fieldset.env { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
fieldset.env legend { grid-column: 1 / -1; }
legend { font-weight: 700; padding: 0 6px; }
.plugin-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.plugin-row select { margin-top: 0; }
.slug-row { display: flex; align-items: center; gap: 0; margin-top: 4px; }
.slug-row input { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-top: 0; }
.slug-row .suffix { padding: 8px 10px; border: 1px solid var(--line); border-left: none;
  border-radius: 0 7px 7px 0; background: var(--thead); white-space: nowrap; }
.testprog { margin-bottom: 10px; font-size: 13px; }
.pbar { height: 6px; background: var(--line); border-radius: 4px; margin-top: 6px; overflow: hidden; }
.pfill { height: 100%; background: var(--brand); width: 0; transition: width .4s ease; }
.pluginform { display: flex; gap: 6px; align-items: center; }
.pluginform select { margin-top: 0; min-width: 130px; max-width: 220px; }
.note-edit { display: flex; gap: 8px; align-items: center; margin: -6px 0 16px; }
.note-edit input { flex: 1 1 auto; max-width: 460px; }
.actions { margin-top: 18px; display: flex; gap: 8px; }
.actions.wrap { flex-wrap: wrap; }
.actions form { margin: 0; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: capitalize; background: var(--chip); color: var(--muted); }
.badge.running, .badge.ok { background: #e4f5e9; color: var(--ok); }
.badge.provisioning, .badge.queued, .badge.installing { background: #e7f0fe; color: var(--info); }
.badge.stopped, .badge.pending { background: #f0f1f3; color: var(--muted); }
.badge.error { background: #fdeceb; color: var(--err); }
.chip { display: inline-block; padding: 1px 8px; margin: 1px 2px; background: var(--chip); border-radius: 6px; font-size: 12px; }
.kind { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; vertical-align: middle; }
.kind-trial { background: #fef1e0; color: #9a5b00; }
.kind-testing { background: #e7f0fe; color: var(--info); }
.kind-demo { background: #efe6fd; color: #6b3fce; }
html[data-theme="dark"] .kind-trial { background: #2a2010; color: #e6a54d; }
html[data-theme="dark"] .kind-testing { background: #10243a; color: #6db0ff; }
html[data-theme="dark"] .kind-demo { background: #1e152e; color: #b78ff0; }

.demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 14px 0; }
.demo-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.demo-card-body { padding: 16px 16px 10px; flex: 1; }
.demo-card-body h3 { margin: 0 0 .3em; font-size: 16px; }
.demo-tagline { margin: .2em 0 .5em; font-size: 13px; }
.demo-plugins { margin-top: .5em; }
.demo-card-foot { display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--chip); }
.demo-roles { margin-top: .7em; }
.demo-roles .btn { margin: 2px 3px 2px 0; padding: 3px 9px; font-size: 12px; }

/* Public landing page (/) */
.hero { padding: 34px 0 26px; max-width: 46rem; }
.hero h1 { font-size: 34px; line-height: 1.2; letter-spacing: -.02em; margin-bottom: 14px; }
.hero .lead { font-size: 17px; color: var(--muted); margin: 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-cta .btn { padding: 9px 16px; font-weight: 600; }
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 14px 0 8px; align-items: start; }
.way { position: relative; padding-top: 26px; }
.way h3 { margin: 0 0 .2em; font-size: 17px; }
.way p { font-size: 14px; }
.way .way-when { font-weight: 600; margin: 0 0 1em; }
.way .small { font-size: 13px; }
.way-n { position: absolute; top: -13px; left: 20px; width: 27px; height: 27px; border-radius: 50%;
  background: var(--brand); color: var(--bg); display: grid; place-items: center;
  font-size: 14px; font-weight: 800; }
.notes { margin: 0; padding-left: 1.1em; }
.notes li { margin-bottom: .5em; }

/* "You already have a trial" — the swap offer */
.swap { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.swap h2 { font-size: 16px; }

/* Trial catalogue (/trials) */
.trial-steps { max-width: 62ch; margin: 18px 0 24px; padding-left: 1.3em; color: var(--muted); font-size: 14px; }
.trial-steps li { margin-bottom: .35em; }
.trial-steps strong { color: var(--ink); }
.trial-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 18px; }
.trial { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; scroll-margin-top: 70px; }
.trial h2 { margin: 0 0 .2em; font-size: 20px; }
.trial-sub { margin: 0 0 1em; font-size: 14px; }
.trial-intro { font-size: 14px; }
.trial-intro p { margin: 0 0 .7em; }
.trial-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.trial-side { border-left: 1px solid var(--line); padding-left: 24px; }
.trial-side h3 { margin: 0 0 .7em; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.trial-incl { margin: 0; padding-left: 1.1em; font-size: 13.5px; }
.trial-incl li { margin-bottom: .45em; }
.trial-incl code { background: var(--chip); border-radius: 4px; padding: 1px 5px; font-size: 12px; }
@media (max-width: 820px) {
  .trial { grid-template-columns: 1fr; gap: 18px; }
  .trial-side { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 16px; }
}
.elsewhere h3 { margin: 0 0 .3em; font-size: 15px; }
.elsewhere p { font-size: 14px; margin: 0; }
.public-footer { max-width: 1080px; margin: 34px auto 24px; padding: 18px 24px 0;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; text-align: center; }
.public-footer a { color: var(--muted); }
.public-footer a:hover { color: var(--ink); }
@media (max-width: 820px) { .ways { grid-template-columns: 1fr; } .hero h1 { font-size: 27px; } }

/* Dashboard filters + accordion */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters select, .filters input { width: auto; }
.filters select { flex: 0 0 auto; }
.filter-search { flex: 1 1 240px; min-width: 180px; }
.acc-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 6px; }
.acc-toolbar-actions { font-size: 13px; }
.acc { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.env-acc + .env-acc { border-top: 1px solid var(--line); }
.env-acc > summary { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer;
  list-style: none; user-select: none; transition: background .12s; }
.env-acc > summary::-webkit-details-marker { display: none; }
.env-acc > summary:hover { background: var(--thead); }
.env-acc[open] > summary { background: var(--thead); }
.env-acc[open] > summary .env-acc-name { color: var(--brand); }
.env-fav { width: 20px; height: 20px; border-radius: 5px; flex: 0 0 20px; object-fit: contain;
  background: #fff; box-shadow: 0 0 0 1px var(--line); }
.env-acc-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.env-acc-note { font-size: 12px; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-style: italic; }
.env-acc-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.env-acc-owner { font-size: 13px; }
.env-acc-chev { color: var(--muted); font-size: 12px; transition: transform .18s ease; }
.env-acc[open] .env-acc-chev { transform: rotate(90deg); color: var(--brand); }
.env-acc-body { padding: 10px 16px 18px 48px; border-top: 1px dashed var(--line); background: var(--thead); }
.env-acc[open] > .env-acc-body { animation: accIn .18s ease; }
@keyframes accIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.env-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 22px; font-size: 13px; }
.env-card-grid .k { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 1px; }
.env-card-plugins { grid-column: 1 / -1; }
.env-card-actions { margin-top: 14px; display: flex; gap: 8px; }

.alert { padding: 10px 14px; border-radius: 8px; margin: 12px 0; }
.alert.error { background: #fdeceb; color: var(--err); }
.alert.warn { background: #fdf6e3; color: var(--warn); }
.alert.ok { background: #e4f5e9; color: var(--ok); }
.alert ul { margin: 0; padding-left: 18px; }

pre.log { background: #0e141b; color: #d6dee8; padding: 14px; border-radius: 8px;
  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; max-height: 460px;
  overflow: auto; white-space: pre-wrap; word-break: break-word; }
code { background: var(--chip); padding: 1px 5px; border-radius: 4px; font-size: 13px; }

/* Wide tables scroll horizontally instead of breaking the layout on narrow screens. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table.grid { border-radius: 0; }
.table-wrap { border: 1px solid var(--line); border-radius: 10px; }
.table-wrap table.grid { border: none; }

/* ── responsive (desktop-first; this keeps it usable on phones/tablets) ── */
@media (max-width: 760px) {
  header { gap: 10px; padding: 10px 12px; position: static; }
  .nav-links { gap: 2px; }
  .nav-links a { padding: 5px 9px; font-size: 13px; }
  .nav-right { gap: 6px; }
  main { padding: 0 14px; margin: 16px auto; }
  h1 { font-size: 21px; }
  .card { padding: 16px; }
  fieldset.env { grid-template-columns: 1fr; }
  .actions { flex-wrap: wrap; }
  .stat-n { font-size: 26px; }
}
@media (max-width: 480px) {
  .plugin-row { grid-template-columns: 1fr auto; }
  .plugin-row select, .plugin-row input[name="plugin_ref"] { grid-column: 1 / -1; margin-top: 0; }
  .slug-row { flex-wrap: wrap; }
}