/* ============================================================
   Blockplane — Minecraft server control plane
   Direction: ops control-room. Deep slate, voxel-lime signature,
   monospace for all machine data. Blocky structural motifs, used sparingly.
   ============================================================ */

:root {
  /* Palette */
  --bg:        #10141c;   /* deep slate, not pure black */
  --bg-panel:  #171d28;   /* raised surfaces */
  --bg-inset:  #0c1017;   /* wells / code areas */
  --line:      #26303f;   /* hairline borders */
  --line-soft: #1d2531;
  --text:      #e6ecf3;
  --text-dim:  #8b98a9;
  --text-mute: #5c6a7c;
  --lime:      #7fdb4c;   /* signature: grass-lime */
  --emerald:   #2fbf88;   /* accent shift */
  --amber:     #e5a94e;   /* warn */
  --red:       #e5644e;   /* error */
  --sky:       #4ea6e5;   /* info / provisioning */

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --radius: 4px;          /* blocky, low radius */
  --gap: 20px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}

.boot {
  min-height: 100vh; display: grid; place-items: center;
  color: var(--text-mute); font-family: var(--font-mono); font-size: 14px;
}

/* ---- Ambient grid background (voxel floor) ---- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  opacity: 0.5;
}

#root { position: relative; z-index: 1; }

button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }
a { color: var(--emerald); }

/* ============================================================
   Auth screen
   ============================================================ */
.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
}
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 36px 32px;
}
.brand {
  display: flex; align-items: center; gap: 12px; margin-bottom: 28px;
}
.brand .cube {
  width: 26px; height: 26px; flex: none;
}
.brand h1 {
  font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.02em;
}
.brand span { color: var(--lime); }

.auth-card h2 {
  font-size: 15px; font-weight: 500; color: var(--text-dim);
  margin: 0 0 20px; letter-spacing: 0.01em;
}

.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 12px; color: var(--text-dim);
  margin-bottom: 6px; font-family: var(--font-mono); letter-spacing: 0.03em;
}
.field input {
  width: 100%; padding: 11px 12px; font-size: 14px;
  background: var(--bg-inset); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--text); outline: none;
  transition: border-color 0.15s;
}
.field input:focus { border-color: var(--emerald); }

.btn {
  width: 100%; padding: 12px; font-size: 14px; font-weight: 600;
  background: var(--lime); color: #0c1409; border: none;
  border-radius: var(--radius); transition: filter 0.15s, transform 0.05s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.ghost {
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--line); font-weight: 500;
}
.btn.ghost:hover { border-color: var(--text-mute); color: var(--text); filter: none; }
.btn.danger { background: transparent; border: 1px solid var(--line); color: var(--red); font-weight: 500; }
.btn.danger:hover { background: rgba(229,100,78,0.1); filter: none; }

.auth-switch {
  margin-top: 18px; text-align: center; font-size: 13px; color: var(--text-mute);
}
.auth-switch button {
  background: none; border: none; color: var(--emerald); font-size: 13px;
  padding: 0; text-decoration: underline;
}
.form-error {
  background: rgba(229,100,78,0.1); border: 1px solid rgba(229,100,78,0.3);
  color: #f0a595; padding: 10px 12px; border-radius: var(--radius);
  font-size: 13px; margin-bottom: 16px; font-family: var(--font-mono);
}

/* ============================================================
   App shell
   ============================================================ */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; border-bottom: 1px solid var(--line);
  background: rgba(16,20,28,0.8); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 10;
}
.topbar .who {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: var(--text-dim); font-family: var(--font-mono);
}
.tag-admin {
  background: rgba(127,219,76,0.12); color: var(--lime);
  border: 1px solid rgba(127,219,76,0.3);
  padding: 2px 8px; border-radius: 3px; font-size: 11px; letter-spacing: 0.05em;
}
.logout { background: none; border: none; color: var(--text-mute); font-size: 13px; }
.logout:hover { color: var(--text); }

.container { max-width: 1080px; margin: 0 auto; padding: 32px 28px 80px; }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 28px; gap: 16px; flex-wrap: wrap;
}
.page-head h2 {
  font-size: 26px; font-weight: 700; margin: 0; letter-spacing: -0.02em;
}
.page-head p { margin: 4px 0 0; color: var(--text-mute); font-size: 14px; }

.view-toggle { display: flex; gap: 2px; background: var(--bg-inset); padding: 3px; border-radius: var(--radius); border: 1px solid var(--line); }
.view-toggle button {
  background: none; border: none; color: var(--text-dim); padding: 6px 14px;
  font-size: 13px; border-radius: 3px; font-weight: 500;
}
.view-toggle button.active { background: var(--bg-panel); color: var(--text); }

.head-actions { display: flex; gap: 10px; align-items: center; }
.btn-inline {
  width: auto; padding: 10px 18px; display: inline-flex; align-items: center; gap: 8px;
}

/* ---- Server grid ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--gap); }

.card {
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; position: relative;
  transition: border-color 0.15s;
}
.card:hover { border-color: var(--line); }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; word-break: break-all; }
.card-owner { font-size: 11px; color: var(--text-mute); font-family: var(--font-mono); margin-top: 2px; }

.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.04em;
  padding: 4px 9px; border-radius: 3px; text-transform: uppercase; flex: none;
}
.dot { width: 7px; height: 7px; border-radius: 50%; }
.st-running  { background: rgba(47,191,136,0.12);  color: var(--emerald); }
.st-running .dot { background: var(--emerald); box-shadow: 0 0 8px var(--emerald); }
.st-installing, .st-provisioning { background: rgba(78,166,229,0.12); color: var(--sky); }
.st-installing .dot, .st-provisioning .dot { background: var(--sky); animation: pulse 1.4s infinite; }
.st-queued { background: rgba(139,152,169,0.1); color: var(--text-dim); }
.st-queued .dot { background: var(--text-dim); animation: pulse 1.4s infinite; }
.st-error { background: rgba(229,100,78,0.12); color: var(--red); }
.st-error .dot { background: var(--red); }
.st-destroying, .st-destroyed, .st-stopped { background: rgba(92,106,124,0.1); color: var(--text-mute); }
.st-destroying .dot { background: var(--text-mute); animation: pulse 1.4s infinite; }
.st-destroyed .dot, .st-stopped .dot { background: var(--text-mute); }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.specs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 18px 0; padding: 14px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.spec { text-align: center; }
.spec .v { font-family: var(--font-mono); font-size: 15px; font-weight: 500; }
.spec .k { font-size: 10px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }

.connect {
  display: flex; align-items: center; gap: 8px; background: var(--bg-inset);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 14px;
}
.connect code { font-family: var(--font-mono); font-size: 13px; color: var(--lime); flex: 1; word-break: break-all; }
.copy-btn { background: none; border: 1px solid var(--line); color: var(--text-dim); padding: 4px 10px; border-radius: 3px; font-size: 11px; font-family: var(--font-mono); }
.copy-btn:hover { color: var(--text); border-color: var(--text-mute); }

.card-foot { display: flex; gap: 8px; }
.card-foot .btn { width: auto; flex: 1; padding: 9px; font-size: 13px; }

.card-pending-msg { font-size: 12px; color: var(--text-mute); margin-bottom: 14px; font-family: var(--font-mono); line-height: 1.5; }

/* ---- Empty state (voxel signature) ---- */
.empty { text-align: center; padding: 80px 20px; }
.empty svg { margin-bottom: 24px; opacity: 0.9; }
.empty h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.empty p { color: var(--text-mute); font-size: 14px; margin: 0 0 24px; }

/* ============================================================
   Modal (create + logs)
   ============================================================ */
.modal-back {
  position: fixed; inset: 0; z-index: 50; background: rgba(6,9,13,0.72);
  backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px;
  animation: fade 0.15s;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  width: 100%; max-width: 460px; background: var(--bg-panel);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.modal.wide { max-width: 640px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.modal-head .x { background: none; border: none; color: var(--text-mute); font-size: 20px; line-height: 1; }
.modal-head .x:hover { color: var(--text); }
.modal-body { padding: 24px; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field select {
  width: 100%; padding: 11px 12px; font-size: 14px; background: var(--bg-inset);
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); outline: none;
}
.field select:focus { border-color: var(--emerald); }
.hint { font-size: 11px; color: var(--text-mute); margin-top: 5px; font-family: var(--font-mono); }

/* ---- Logs / console view ---- */
.logs {
  background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
  max-height: 340px; overflow-y: auto;
}
.log-line { display: flex; gap: 12px; }
.log-time { color: var(--text-mute); flex: none; }
.log-msg { color: var(--text-dim); }
.log-line.warn .log-msg { color: var(--amber); }
.log-line.error .log-msg { color: var(--red); }
.log-line.info .log-msg { color: var(--text); }
.logs-empty { color: var(--text-mute); font-family: var(--font-mono); font-size: 13px; text-align: center; padding: 30px; }
.logs-note { font-size: 12px; color: var(--text-mute); margin-top: 14px; line-height: 1.5; }

/* ---- Manage modal: tabs ---- */
.modal-sub { font-size: 12px; color: var(--text-mute); font-family: var(--font-mono); margin-top: 3px; }
.tabs { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--line); }
.tabs button {
  background: none; border: none; color: var(--text-dim); padding: 12px 4px; margin-right: 16px;
  font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button.active { color: var(--text); border-bottom-color: var(--lime); }
.tabs button:hover { color: var(--text); }

/* ---- Control rows (power / service) ---- */
.ctrl-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.ctrl-label { font-size: 13px; color: var(--text-dim); }
.ctrl-btns { display: flex; gap: 6px; }
.mini {
  padding: 6px 12px; font-size: 12px; font-weight: 500; font-family: var(--font-mono);
  background: var(--bg-inset); border: 1px solid var(--line); color: var(--text-dim); border-radius: 3px;
}
.mini:hover:not(:disabled) { color: var(--text); border-color: var(--text-mute); }
.mini:disabled { opacity: 0.35; cursor: not-allowed; }
.mini.danger { color: var(--red); }
.mini.danger:hover:not(:disabled) { background: rgba(229,100,78,0.1); border-color: rgba(229,100,78,0.4); }

/* ---- Stat bars ---- */
.stats-block { margin-top: 20px; }
.stats-note { color: var(--text-mute); font-family: var(--font-mono); font-size: 13px; padding: 14px 0; }
.statbar { margin-bottom: 14px; }
.statbar-top { display: flex; justify-content: space-between; margin-bottom: 6px; }
.statbar-label { font-size: 12px; color: var(--text-dim); }
.statbar-val { font-size: 12px; font-family: var(--font-mono); color: var(--text); }
.statbar-track { height: 6px; background: var(--bg-inset); border-radius: 3px; overflow: hidden; }
.statbar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.mc-state { margin-top: 16px; font-size: 13px; color: var(--text-dim); font-family: var(--font-mono); }
.mc-state .on { color: var(--emerald); }
.mc-state .off { color: var(--text-mute); }

/* ---- Console ---- */
.log-pre { margin: 0; white-space: pre-wrap; word-break: break-word; color: var(--text-dim); font-family: var(--font-mono); font-size: 12px; line-height: 1.6; }
.cmd-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.cmd-prompt { font-family: var(--font-mono); color: var(--lime); font-size: 15px; }
.cmd-row input {
  flex: 1; padding: 10px 12px; font-family: var(--font-mono); font-size: 13px;
  background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); outline: none;
}
.cmd-row input:focus { border-color: var(--emerald); }

/* ---- Toast ---- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--bg-panel); border: 1px solid var(--line); border-left: 3px solid var(--lime);
  color: var(--text); padding: 12px 18px; border-radius: var(--radius);
  font-size: 13px; z-index: 100; box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  animation: slideup 0.2s;
}
@keyframes slideup { from { transform: translate(-50%, 12px); opacity: 0; } }

.loading-block { text-align: center; padding: 60px; color: var(--text-mute); font-family: var(--font-mono); font-size: 14px; }

@media (max-width: 560px) {
  .row2 { grid-template-columns: 1fr; }
  .specs { grid-template-columns: repeat(2, 1fr); }
  .container { padding: 24px 16px 60px; }
  .topbar { padding: 14px 16px; }
}

/* Accessibility: visible focus, reduced motion */
:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}

/* Portal: free-tier note */
.free-note { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin: 0 0 18px;
  padding: 12px 14px; background: var(--bg-inset); border: 1px solid var(--line);
  border-radius: var(--radius); border-left: 3px solid var(--lime); }

/* ── Admin panel ── */
.topnav { display: flex; gap: 4px; margin-left: 8px; }
.topnav button {
  background: none; border: none; color: var(--text-dim); padding: 8px 14px;
  font-size: 14px; font-weight: 500; border-radius: var(--radius);
}
.topnav button:hover { color: var(--text); }
.topnav button.active { color: var(--text); background: var(--bg-inset); }

.view-toggle { display: flex; gap: 2px; background: var(--bg-inset); padding: 3px;
  border-radius: var(--radius); border: 1px solid var(--line); }
.view-toggle button { background: none; border: none; color: var(--text-dim);
  padding: 6px 14px; font-size: 13px; border-radius: 3px; font-weight: 500; }
.view-toggle button.active { background: var(--bg-panel); color: var(--text); }

.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg-panel); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { text-align: left; padding: 12px 14px; color: var(--text-dim);
  font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line); background: var(--bg-inset); white-space: nowrap; }
.admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft);
  vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table .mono { font-family: var(--font-mono); font-size: 12px; }
.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mini { padding: 5px 10px; font-size: 12px; font-weight: 500; font-family: var(--font-mono);
  background: var(--bg-inset); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 3px; }
.mini:hover:not(:disabled) { color: var(--text); border-color: var(--text-mute); }
.mini:disabled { opacity: 0.35; cursor: not-allowed; }
.mini.danger { color: var(--red); }
.mini.danger:hover:not(:disabled) { background: rgba(229,100,78,0.1); border-color: rgba(229,100,78,0.4); }
.you-tag { margin-left: 8px; font-size: 10px; color: var(--lime); font-family: var(--font-mono); }
.tag-admin { background: rgba(127,219,76,0.12); color: var(--lime);
  border: 1px solid rgba(127,219,76,0.3); padding: 2px 8px; border-radius: 3px;
  font-size: 11px; letter-spacing: 0.05em; }

/* ── Manage modal: console ── */
.modal.wide { max-width: 760px; width: 92vw; }
.modal-sub { display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--text-dim); margin-top: 4px; }
.state-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.state-dot.on { background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.state-dot.err { background: var(--red); }
.state-dot.off { background: var(--text-mute); }
.ctrl-row { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.ctrl-btns { display: flex; gap: 6px; }
.stat-inline { font-size: 12px; color: var(--text-dim); }
.console { background: #0a0d13; border: 1px solid var(--line); border-radius: var(--radius);
  height: 340px; overflow-y: auto; padding: 12px 14px; font-family: var(--font-mono);
  font-size: 12px; line-height: 1.5; }
.console-empty { color: var(--text-mute); }
.console-line { color: #c7d2dc; white-space: pre-wrap; word-break: break-word; }
.cmd-row { display: flex; align-items: center; gap: 8px; margin-top: 10px;
  background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 12px; }
.cmd-prompt { color: var(--lime); font-family: var(--font-mono); font-weight: 700; }
.cmd-row input { flex: 1; background: none; border: none; color: var(--text);
  font-family: var(--font-mono); font-size: 13px; outline: none; }

/* ── Full manage modal ── */
.modal.manage { max-width: 860px; width: 94vw; }
.manage-tabs { display: flex; gap: 2px; padding: 0 20px; border-bottom: 1px solid var(--line);
  background: var(--bg-inset); overflow-x: auto; }
.manage-tabs button { background: none; border: none; color: var(--text-dim);
  padding: 12px 16px; font-size: 13px; font-weight: 500; white-space: nowrap;
  border-bottom: 2px solid transparent; }
.manage-tabs button:hover { color: var(--text); }
.manage-tabs button.active { color: var(--lime); border-bottom-color: var(--lime); }
.manage-body { max-height: 62vh; overflow-y: auto; }

.state-chip { display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--text-dim); font-family: var(--font-mono); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.stat-box { background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; text-align: center; }
.stat-box .sv { font-family: var(--font-mono); font-size: 15px; color: var(--text); }
.stat-box .sk { font-size: 10px; color: var(--text-mute); text-transform: uppercase; margin-top: 2px; }

.tab-head { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.tag-ok { background: rgba(47,191,136,0.12); color: var(--green); border: 1px solid rgba(47,191,136,0.3);
  padding: 2px 8px; border-radius: 3px; font-size: 11px; font-family: var(--font-mono); }
.tag-wait { background: rgba(217,182,78,0.12); color: #d9b64e; padding: 2px 8px;
  border-radius: 3px; font-size: 11px; font-family: var(--font-mono); }

/* Files */
.file-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.file-path { color: var(--text-dim); font-size: 12px; }
.file-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.file-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft); }
.file-row:last-child { border-bottom: none; }
.file-name { flex: 1; text-align: left; background: none; border: none; color: var(--text);
  font-size: 13px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.file-name:hover { color: var(--lime); }
.file-ico { font-size: 13px; }
.file-size { color: var(--text-mute); font-size: 11px; }
.file-editor { width: 100%; height: 46vh; background: #0a0d13; border: 1px solid var(--line);
  border-radius: var(--radius); color: #c7d2dc; font-family: var(--font-mono); font-size: 12px;
  padding: 12px; resize: vertical; }

/* Startup vars */
.startup-cmd { background: #0a0d13; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; font-size: 12px; color: var(--lime); margin-bottom: 14px; word-break: break-all; }
.var-list { display: flex; flex-direction: column; gap: 8px; }
.var-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.var-name { font-size: 13px; }
.var-env { font-size: 10px; color: var(--text-mute); margin-top: 2px; }
.var-edit { display: flex; gap: 6px; align-items: center; }
.var-input { background: var(--bg-panel); border: 1px solid var(--line); border-radius: 3px;
  color: var(--text); padding: 6px 10px; font-size: 12px; width: 200px; }

.cron-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }

/* ── Server type picker ── */
.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.type-card { background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; text-align: left; cursor: pointer; transition: border-color .12s, background .12s; }
.type-card:hover { border-color: var(--text-mute); }
.type-card.sel { border-color: var(--lime); background: rgba(127,219,76,0.06); }
.type-label { font-size: 14px; font-weight: 600; color: var(--text); }
.type-specs { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.opt { color: var(--text-mute); font-weight: 400; font-size: 11px; }