:root {
  --bg: #0f1419;
  --panel: #1a222c;
  --border: #2a3542;
  --text: #e7eef6;
  --muted: #8b9aab;
  --accent: #3d9a78;
  --font: "IBM Plex Sans", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  background: radial-gradient(1200px 600px at 10% -10%, #1b2a33 0%, var(--bg) 55%);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: #9fd4bc; }
.top {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: rgba(15, 20, 25, .85);
  position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 700; letter-spacing: .02em; }
.tabs { display: flex; gap: .25rem; margin-left: .5rem; flex-wrap: wrap; }
.lang { margin-left: auto; display: flex; gap: .25rem; }
.lang a {
  border: 1px solid var(--border); color: var(--muted); text-decoration: none;
  padding: .25rem .55rem; border-radius: 4px; font-size: .8rem; letter-spacing: .04em;
}
.lang a.on, .lang a:hover { color: var(--text); border-color: var(--accent); }
.tab {
  appearance: none; border: 1px solid transparent; background: transparent;
  color: var(--muted); padding: .35rem .75rem; border-radius: 4px;
  cursor: pointer; font: inherit; font-size: .9rem; text-decoration: none;
}
.tab:hover { color: var(--text); border-color: var(--border); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.foot {
  margin-top: auto;
  border-top: 1px solid var(--border);
  background: rgba(15, 20, 25, .85);
}
.foot-inner {
  max-width: 1100px; margin: 0 auto; padding: .85rem 1.25rem;
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .82rem; color: var(--muted);
}
.foot-inner a { color: #9fd4bc; }
.foot-inner .tox code {
  font-family: var(--mono); font-size: .74rem;
  color: var(--text); overflow-wrap: anywhere; word-break: break-all;
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.1rem;
}
h2 { margin: 0 0 .75rem; font-size: 1.05rem; }
.muted { color: var(--muted); font-size: .85rem; }
.note {
  margin: .35rem 0 0;
  padding: .65rem .75rem;
  border-radius: 4px;
  background: #1a242e;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .85rem;
  line-height: 1.4;
}
.stack { display: flex; flex-direction: column; gap: .65rem; }
label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--muted); }
input, select, textarea {
  background: #121820; border: 1px solid var(--border); color: var(--text);
  padding: .45rem .55rem; border-radius: 4px; font: inherit;
}
textarea { font-family: var(--mono); font-size: .82rem; resize: vertical; }
button, .btn {
  appearance: none; border: 1px solid var(--border); background: #24303c; color: var(--text);
  padding: .4rem .7rem; border-radius: 4px; cursor: pointer; font: inherit; font-size: .82rem;
  text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { border-color: var(--accent); }
button.primary, .btn.primary { background: #1e3a31; border-color: #2d5a48; }
button.ghost { background: transparent; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td {
  text-align: left; padding: .5rem .4rem; border-bottom: 1px solid var(--border);
  vertical-align: top; overflow-wrap: anywhere; word-break: break-word;
}
.table th { color: var(--muted); font-weight: 560; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.badge {
  display: inline-block; padding: .1rem .4rem; border-radius: 4px;
  font-size: .75rem; background: #24303c; margin: 0 .15rem .15rem 0;
}
.badge.ok { background: #1e3a31; color: #8fd4b5; }
.badge.bad { background: #3a2222; color: #efb0b0; }
.badge.cat { background: #1e2a3a; border-color: #2a3a52; color: #9fc1e8; }
.actions { display: flex; flex-wrap: wrap; gap: .3rem; }
.flash { padding: .55rem .7rem; border-radius: 4px; margin-bottom: .75rem; background: #24303c; border: 1px solid var(--border); }
.flash.error { border-color: #6a3030; color: #efb0b0; }
.flash.ok { border-color: #2d5a48; color: #8fd4b5; }
.htmx-indicator { display: none; }
.htmx-request.htmx-indicator, .htmx-request .htmx-indicator { display: inline; }
.filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; }
.filters label { min-width: 160px; }
.row-inline { flex-direction: row; align-items: center; gap: .4rem; }
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; }
.prod {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: .9rem 1rem;
  text-decoration: none; color: var(--text);
}
.prod:hover { border-color: #2d5a48; }
.prod-title { font-weight: 600; font-size: .95rem; }
.prod-meta { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.price { font-size: 1.1rem; font-weight: 700; color: #7fd4ae; }
.req-box, .key-box {
  white-space: pre-wrap; font-family: var(--mono); font-size: .85rem;
  background: #121820; border: 1px solid var(--border); border-radius: 4px; padding: .7rem .8rem;
}
.key-box { background: #10201a; border-color: #2d5a48; }
.balance { font-size: 1.6rem; font-weight: 700; color: #7fd4ae; }
.shop-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.inline-form { display: inline; }
.pager { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.cat-block { margin: .85rem 0 0; }
.cat-block summary { cursor: pointer; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.chip {
  border: 1px solid var(--border); background: #121820; color: var(--text);
  border-radius: 999px; padding: .25rem .6rem; font-size: .8rem; text-decoration: none;
}
.chip.on, .chip:hover { border-color: #2d5a48; background: #1e3a31; }
.chip .n { color: #7fd4ae; margin-left: .25rem; }
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .65rem;
}
.stat {
  display: flex; flex-direction: column; gap: .2rem;
  background: #121820; border: 1px solid var(--border); border-radius: 6px;
  padding: .7rem .8rem;
}
.stat.net { border-color: #2d5a48; background: #10201a; }
.stat-label { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 1.35rem; font-weight: 700; color: #7fd4ae; }
.chips.stats { flex-direction: column; align-items: stretch; }
.chips.stats .chip {
  border-radius: 6px; display: flex; flex-wrap: wrap; gap: .35rem .7rem; align-items: baseline;
}
.cat-label { margin: .85rem 0 .35rem; font-weight: 600; }
.cred-group { margin: .35rem 0; }
.cred-group summary { cursor: pointer; }
.group-body { margin-top: .5rem; }
.success-toolbar { display: flex; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.success-dump, .cred-src { display: none; }
.detail-pre, .code {
  margin: 0; white-space: pre-wrap; font-family: var(--mono); font-size: .78rem;
  background: #121820; border: 1px solid var(--border); border-radius: 4px; padding: .45rem .55rem;
}
.table.cat-table { min-width: 0; }
.table.cat-table col.domain { width: 20%; }
.table.cat-table col.keys { width: 44%; }
.table.cat-table col.when { width: 8.5rem; }
.table.cat-table col.actions-col { width: 10.5rem; }
.table.cat-table td.actions { width: 10.5rem; }
.table.cat-table .actions { flex-direction: column; align-items: stretch; }
.table.cat-table .actions button { width: 100%; }
.table.cat-table .body-row td { padding-bottom: .65rem; }
@media (max-width: 860px) {
  .table { display: block; overflow-x: auto; }
  .tabs { margin-left: 0; }
}