/**
 * TSTP Console UI Kit. Shared styling: card stack, spacing tokens, forms, tabs, alerts.
 * Structure only: layout, spacing, borders, padding. Colors via var(--tstp-*) only.
 */
:root {
  --tstp-space-1: 6px;
  --tstp-space-2: 10px;
  --tstp-space-3: 14px;
  --tstp-space-4: 18px;
  --tstp-space-5: 24px;
  --tstp-radius-1: 8px;
  --tstp-radius-2: 12px;
  --tstp-font-1: 12px;
  --tstp-font-2: 14px;
  --tstp-font-3: 16px;
  --tstp-font-4: 18px;
  --tstp-maxw: 980px;
  --tstp-input-padding-x: 12px;
  --tstp-input-padding-y: 10px;
  --tstp-border-w: 2px;
  /* Optional: widget result states (themes may override) */
  --tstp-success-border: #22c55e;
  --tstp-success-bg: rgba(34, 197, 94, 0.1);
  --tstp-error-border: #ef4444;
  --tstp-error-bg: rgba(239, 68, 68, 0.1);
  --tstp-surface-hover: #1e1e24;
}

* { box-sizing: border-box; }

.tstp-console-page {
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--tstp-font-2);
  line-height: 1.5;
  background: var(--tstp-bg, #0c0c0e);
  color: var(--tstp-text, #e8e8ed);
  margin: 0;
}

.tstp-console-header {
  height: 56px;
  min-height: 56px;
  background: var(--tstp-surface, #16161a);
  border-bottom: var(--tstp-border-w) solid var(--tstp-border-strong, #3a3a42);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--tstp-space-5);
  position: sticky;
  top: 0;
  z-index: 100;
}

.tstp-console-brand a {
  color: var(--tstp-text, #e8e8ed);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--tstp-font-3);
}

.tstp-console-brand a:hover {
  color: var(--tstp-accent, #1877f2);
}

.tstp-console-tool {
  color: var(--tstp-text-muted, #888);
  font-weight: 400;
  margin-left: 0.35rem;
}

.tstp-console-nav a {
  color: var(--tstp-text-muted, #888);
  text-decoration: none;
  font-size: var(--tstp-font-2);
  margin-left: var(--tstp-space-3);
}

.tstp-console-nav a:hover {
  color: var(--tstp-accent, #1877f2);
}

.tstp-console-wrap {
  max-width: var(--tstp-maxw);
  margin: 0 auto;
  padding: var(--tstp-space-5);
  width: 100%;
}

@media (max-width: 640px) {
  .tstp-console-wrap { padding: var(--tstp-space-3); }
}

.tstp-console-stack {
  display: flex;
  flex-direction: column;
  gap: var(--tstp-space-4);
}

.tstp-console-card {
  background: var(--tstp-surface, #16161a);
  border: var(--tstp-border-w) solid var(--tstp-border-strong, #3a3a42);
  border-radius: var(--tstp-radius-2);
  padding: var(--tstp-space-5);
  margin-bottom: var(--tstp-space-4);
}

.tstp-console-card-title {
  margin: 0 0 var(--tstp-space-3) 0;
  font-size: var(--tstp-font-3);
  font-weight: 600;
  line-height: 1.3;
  padding-bottom: var(--tstp-space-3);
  border-bottom: 1px solid var(--tstp-border, #2a2a30);
  color: var(--tstp-text, #e8e8ed);
}

.tstp-console-section {
  border: var(--tstp-border-w) solid var(--tstp-border-strong, #3a3a42);
  border-radius: var(--tstp-radius-2);
  margin: 0 0 var(--tstp-space-4) 0;
  overflow: hidden;
  background: var(--tstp-surface-alt, #1a1a1f);
}

.tstp-console-section summary {
  list-style: none;
  cursor: pointer;
  padding: var(--tstp-space-3) var(--tstp-space-5);
  font-weight: 600;
  font-size: var(--tstp-font-2);
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--tstp-surface-alt, #1a1a1f);
  border-bottom: 1px solid var(--tstp-border, #2a2a30);
  color: var(--tstp-text, #e8e8ed);
  min-height: 48px;
}

.tstp-console-section summary::-webkit-details-marker { display: none; }

.tstp-console-section summary::after {
  content: '';
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--tstp-text-muted, #888);
  border-bottom: 2px solid var(--tstp-text-muted, #888);
  transform: rotate(45deg);
  margin-left: var(--tstp-space-2);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.tstp-console-section[open] summary::after { transform: rotate(-135deg); }

.tstp-console-section .section-body {
  padding: var(--tstp-space-5);
  background: var(--tstp-surface, #16161a);
  border-top: none;
}

/* Nested sections (details inside section-body) — sub-cards */
.tstp-console-section .section-body > .tstp-console-section,
.tstp-console-section .section-body > details.tstp-console-section,
.tstp-console-section .section-body > .console-subsection,
.tstp-console-section .section-body > .widget-card {
  margin-top: var(--tstp-space-4);
  margin-bottom: var(--tstp-space-4);
  border: var(--tstp-border-w) solid var(--tstp-border, #2a2a30);
  border-radius: var(--tstp-radius-2);
  background: var(--tstp-surface-alt, #1a1a1f);
  overflow: hidden;
}

.tstp-console-section .section-body > .tstp-console-section .section-body,
.tstp-console-section .section-body > details .section-body,
.console-subsection .section-body,
.widget-card .section-body {
  padding: var(--tstp-space-4);
  background: var(--tstp-surface, #16161a);
}

.tstp-console-section .section-body > .tstp-console-section summary,
.tstp-console-section .section-body > details.tstp-console-section summary,
.console-subsection summary,
.widget-card summary {
  padding: var(--tstp-space-3) var(--tstp-space-4);
  font-size: var(--tstp-font-2);
  min-height: 44px;
}

/* Section body typography and blocks */
.tstp-console-section .section-body > p {
  margin: 0 0 var(--tstp-space-3) 0;
  line-height: 1.55;
}

.tstp-console-section .section-body > p:first-child {
  margin-top: 0;
}

.tstp-console-section .section-body > p strong {
  display: block;
  margin-top: var(--tstp-space-4);
  margin-bottom: var(--tstp-space-2);
  font-size: var(--tstp-font-2);
  font-weight: 600;
}

.tstp-console-section .section-body > p strong:first-child {
  margin-top: 0;
}

.tstp-console-alert {
  padding: var(--tstp-space-3) var(--tstp-space-4);
  border-radius: var(--tstp-radius-2);
  margin-bottom: var(--tstp-space-4);
  font-size: var(--tstp-font-2);
  line-height: 1.5;
  border-width: 1px;
}

.tstp-console-alert-success {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid #22c55e;
  color: #86efac;
}

.tstp-console-alert-error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #fca5a5;
}

.tstp-console-alert-warning {
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid #eab308;
  color: #fde047;
}

.tstp-console-alert-info {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid #3b82f6;
  color: #93c5fd;
}

.tstp-console-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 2px;
  margin-bottom: var(--tstp-space-3);
  border-bottom: 1px solid var(--tstp-border, #2a2a30);
  -webkit-overflow-scrolling: touch;
}

.tstp-console-tabs button {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--tstp-text-muted, #888);
  padding: var(--tstp-space-2) var(--tstp-space-3);
  cursor: pointer;
  border-radius: var(--tstp-radius-1) var(--tstp-radius-1) 0 0;
  font-size: var(--tstp-font-2);
}

.tstp-console-tabs button:hover {
  color: var(--tstp-text, #e8e8ed);
  background: var(--tstp-surface, #16161a);
}

.tstp-console-tabs button.active {
  color: var(--tstp-accent, #1877f2);
  background: var(--tstp-surface, #16161a);
  font-weight: 600;
}

/* Primary button: single definition for uniformity and accent */
.tstp-console-btn,
.btn,
.tstp-console-section .section-body button[type="button"]:not(.tstp-console-btn-secondary):not(.btn-secondary),
.tstp-console-card button[type="button"]:not(.tstp-console-btn-secondary):not(.btn-secondary) {
  display: inline-block;
  padding: var(--tstp-space-2) var(--tstp-space-5);
  background: var(--tstp-accent, #1877f2);
  color: #fff;
  border: none;
  border-radius: var(--tstp-radius-1);
  font-size: var(--tstp-font-2);
  line-height: 1.4;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  margin-top: var(--tstp-space-2);
  margin-bottom: var(--tstp-space-1);
  transition: opacity 0.15s;
  min-height: 44px;
  vertical-align: middle;
  box-sizing: border-box;
}

.tstp-console-btn:hover,
.btn:hover,
.tstp-console-section .section-body button[type="button"]:not(.tstp-console-btn-secondary):not(.btn-secondary):hover,
.tstp-console-card button[type="button"]:not(.tstp-console-btn-secondary):not(.btn-secondary):hover {
  opacity: 0.9;
}

.tstp-console-btn + .tstp-console-btn,
.btn + .btn {
  margin-left: var(--tstp-space-2);
}

@media (max-width: 640px) {
  .tstp-console-btn,
  .btn { width: 100%; margin-left: 0; }
  .tstp-console-btn + .tstp-console-btn,
  .btn + .btn { margin-left: 0; margin-top: var(--tstp-space-2); }
}

.tstp-console-btn-secondary,
.btn-secondary {
  background: var(--tstp-border, #2a2a30);
  color: var(--tstp-text, #e8e8ed);
}

.tstp-console-btn-secondary:hover,
.btn-secondary:hover {
  background: var(--tstp-border-strong, #3a3a42);
}

.tstp-console-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tstp-space-3);
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--tstp-space-4);
  margin-bottom: var(--tstp-space-2);
}

@media (max-width: 640px) {
  .tstp-console-action-bar { justify-content: stretch; }
}

/* Form structure: stacked labels and inputs with clear separation */
.tstp-console-section .section-body label,
.tstp-console-section .section-body .tstp-console-label {
  display: block;
  margin-top: var(--tstp-space-3);
  margin-bottom: var(--tstp-space-2);
  font-size: var(--tstp-font-2);
  font-weight: 500;
  line-height: 1.4;
  color: var(--tstp-text, #e8e8ed);
}

.tstp-console-section .section-body label:first-child,
.tstp-console-section .section-body .tstp-console-label:first-child {
  margin-top: 0;
}

.tstp-console-form-group {
  margin-bottom: var(--tstp-space-4);
}

.tstp-console-form-group:last-child {
  margin-bottom: 0;
}

/* All form controls: shared structure (tools may use raw input/label) */
.tstp-console-input,
.tstp-console-textarea,
.tstp-console-select,
.tstp-console-section .section-body input:not([type="checkbox"]):not([type="radio"]),
.tstp-console-section .section-body textarea,
.tstp-console-section .section-body select,
.tstp-console-card input:not([type="checkbox"]):not([type="radio"]),
.tstp-console-card textarea,
.tstp-console-card select {
  width: 100%;
  max-width: 100%;
  padding: var(--tstp-input-padding-y) var(--tstp-input-padding-x);
  background: var(--tstp-bg, #0c0c0e);
  border: var(--tstp-border-w) solid var(--tstp-border, #2a2a30);
  border-radius: var(--tstp-radius-1);
  color: var(--tstp-text, #e8e8ed);
  font-size: var(--tstp-font-2);
  line-height: 1.45;
  margin-top: 0;
  margin-bottom: var(--tstp-space-3);
  min-height: 44px;
  display: block;
  box-sizing: border-box;
}

.tstp-console-section .section-body .token-row input {
  margin-bottom: 0;
  flex: 1;
  min-width: 180px;
}

.tstp-console-input,
.tstp-console-textarea,
.tstp-console-select {
  margin-bottom: var(--tstp-space-3);
}

.tstp-console-input:focus,
.tstp-console-textarea:focus,
.tstp-console-select:focus,
.tstp-console-section .section-body input:focus,
.tstp-console-section .section-body textarea:focus,
.tstp-console-section .section-body select:focus,
.tstp-console-card input:focus,
.tstp-console-card textarea:focus,
.tstp-console-card select:focus {
  outline: none;
  border-color: var(--tstp-accent, #1877f2);
}

.tstp-console-textarea {
  min-height: 100px;
  resize: vertical;
  padding: var(--tstp-space-3) var(--tstp-input-padding-x);
  line-height: 1.5;
}

.tstp-console-select {
  cursor: pointer;
  appearance: auto;
}

.tstp-console-label {
  display: block;
  margin-bottom: var(--tstp-space-2);
  margin-top: 0;
  font-size: var(--tstp-font-2);
  font-weight: 500;
  line-height: 1.4;
  color: var(--tstp-text-muted, #888);
}

/* Tables: structure, spacing, borders */
.tstp-console-table-wrap {
  overflow-x: auto;
  margin: var(--tstp-space-4) 0;
  border: var(--tstp-border-w) solid var(--tstp-border, #2a2a30);
  border-radius: var(--tstp-radius-2);
}

.tstp-console-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tstp-font-2);
  line-height: 1.45;
}

.tstp-console-table th,
.tstp-console-table td {
  padding: var(--tstp-space-3) var(--tstp-space-4);
  text-align: left;
  border-bottom: 1px solid var(--tstp-border, #2a2a30);
  vertical-align: top;
}

.tstp-console-table th {
  font-weight: 600;
  background: var(--tstp-surface-alt, #1a1a1f);
  color: var(--tstp-text, #e8e8ed);
  white-space: nowrap;
}

.tstp-console-table tr:last-child td {
  border-bottom: none;
}

/* Any table inside section-body gets data-table styling */
.tstp-console-section .section-body table,
.tstp-console-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tstp-font-2);
  line-height: 1.45;
  margin: var(--tstp-space-3) 0;
  border: var(--tstp-border-w) solid var(--tstp-border, #2a2a30);
  border-radius: var(--tstp-radius-2);
  overflow: hidden;
}

.tstp-console-section .section-body table th,
.tstp-console-section .section-body table td,
.tstp-console-card table th,
.tstp-console-card table td {
  padding: var(--tstp-space-3) var(--tstp-space-4);
  text-align: left;
  border-bottom: 1px solid var(--tstp-border, #2a2a30);
  vertical-align: middle;
}

.tstp-console-section .section-body table th,
.tstp-console-card table th {
  font-weight: 600;
  background: var(--tstp-surface-alt, #1a1a1f);
  color: var(--tstp-text, #e8e8ed);
}

.tstp-console-section .section-body table thead th,
.tstp-console-card table thead th {
  border-bottom: var(--tstp-border-w) solid var(--tstp-border, #2a2a30);
}

.tstp-console-section .section-body table tfoot td,
.tstp-console-card table tfoot td {
  border-top: var(--tstp-border-w) solid var(--tstp-border, #2a2a30);
  font-weight: 600;
  background: var(--tstp-surface-alt, #1a1a1f);
}

.tstp-console-section .section-body table tr:last-child td,
.tstp-console-card table tbody tr:last-child td {
  border-bottom: none;
}

.tstp-console-section .section-body table .token-limit-input,
.tstp-console-card table .token-limit-input {
  width: 80px;
  min-width: 60px;
  margin: 0;
  padding: var(--tstp-space-2) var(--tstp-space-3);
  min-height: 38px;
}

.tstp-console-section .section-body table .tstp-console-btn,
.tstp-console-card table .tstp-console-btn {
  margin: 0 var(--tstp-space-1) 0 0;
  min-height: 38px;
}

/* Token row: input + buttons on one line */
.token-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tstp-space-2);
  align-items: center;
  margin-top: var(--tstp-space-2);
  margin-bottom: var(--tstp-space-3);
}

.token-row .tstp-console-btn {
  margin-top: 0;
  margin-bottom: 0;
}

/* Inline input + button row (e.g. grant email + Grant button) */
.tstp-console-section .section-body > input[type="email"] {
  display: inline-block;
  width: auto;
  max-width: 320px;
  margin-right: var(--tstp-space-2);
  vertical-align: middle;
}

.tstp-console-section .section-body > input[type="email"] + button {
  margin-top: 0;
  margin-bottom: var(--tstp-space-2);
  vertical-align: middle;
}

.tstp-console-section .section-body .form-row,
.input-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tstp-space-2);
  align-items: center;
  margin-bottom: var(--tstp-space-3);
}

.tstp-console-section .section-body .form-row input,
.input-button-row input {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}

.tstp-console-section .section-body .form-row .tstp-console-btn,
.input-button-row .tstp-console-btn {
  margin-top: 0;
  margin-bottom: 0;
}

/* Stats rows (e.g. X API spending) */
.stat-row,
.stats-stacked .stat-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--tstp-space-2);
  padding: var(--tstp-space-2) 0;
  border-bottom: 1px solid var(--tstp-border, #2a2a30);
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-label {
  font-size: var(--tstp-font-2);
  font-weight: 500;
}

.stat-value {
  font-size: var(--tstp-font-2);
  font-variant-numeric: tabular-nums;
}

.stats-stacked {
  margin: var(--tstp-space-3) 0;
}

/* Data lists (e.g. #requests-list, #tokens-list, #revoked-list) */
.tstp-console-section .section-body > div[id$="-list"],
.tstp-console-section .section-body > div[id$="-content"] {
  margin-top: var(--tstp-space-2);
  margin-bottom: var(--tstp-space-3);
  overflow-x: auto;
}

.tstp-console-section .section-body > div[id$="-list"] p,
.tstp-console-section .section-body > div[id$="-content"] p {
  margin: 0 0 var(--tstp-space-2) 0;
}

/* Alert / result messages inside section-body */
.tstp-console-section .section-body .alert,
.tstp-console-card .alert {
  padding: var(--tstp-space-3) var(--tstp-space-4);
  border-radius: var(--tstp-radius-1);
  margin-top: var(--tstp-space-2);
  margin-bottom: var(--tstp-space-3);
  font-size: var(--tstp-font-2);
  line-height: 1.5;
  border-width: 1px;
}

/* Form in section-body */
.tstp-console-section .section-body form,
.tstp-console-card form {
  margin-top: var(--tstp-space-2);
  margin-bottom: var(--tstp-space-3);
}

.tstp-console-section .section-body form label,
.tstp-console-card form label {
  display: block;
  margin-bottom: var(--tstp-space-2);
}

.tstp-console-section .section-body form input,
.tstp-console-section .section-body form textarea,
.tstp-console-card form input,
.tstp-console-card form textarea {
  margin-bottom: var(--tstp-space-3);
}

.tstp-console-section .section-body form button[type="submit"],
.tstp-console-card form button[type="submit"] {
  margin-top: var(--tstp-space-2);
}

.tstp-console-muted {
  color: var(--tstp-text-muted, #888);
  font-size: var(--tstp-font-1);
  line-height: 1.5;
}

.tstp-console-empty {
  text-align: center;
  padding: var(--tstp-space-5);
  color: var(--tstp-text-muted, #888);
}

.tstp-console-empty .tstp-console-btn { margin-top: var(--tstp-space-4); }

.tstp-console-pre,
.tstp-console-code,
.tstp-console-section .section-body pre,
.tstp-console-section .section-body code,
.tstp-console-card pre,
.tstp-console-card code {
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  font-size: var(--tstp-font-1);
  line-height: 1.5;
  background: var(--tstp-bg, #0c0c0e);
  color: var(--tstp-text, #e8e8ed);
}

.tstp-console-section .section-body code,
.tstp-console-card code {
  padding: 0.2em 0.5em;
  border-radius: var(--tstp-radius-1);
  border: 1px solid var(--tstp-border, #2a2a30);
}

.tstp-console-pre,
.tstp-console-section .section-body pre,
.tstp-console-card pre {
  padding: var(--tstp-space-4);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  border: var(--tstp-border-w) solid var(--tstp-border, #2a2a30);
  border-radius: var(--tstp-radius-2);
  margin: var(--tstp-space-3) 0;
}

.tstp-console-section .section-body .widget-result {
  margin-top: var(--tstp-space-4);
  margin-bottom: var(--tstp-space-2);
}

.copy-api-btn {
  margin-top: var(--tstp-space-2);
  margin-bottom: var(--tstp-space-3);
}

/* Usage / content blocks (API docs, etc.) */
.tstp-console-section .section-body .usage-block,
.usage-block {
  margin: var(--tstp-space-4) 0;
  padding: var(--tstp-space-4);
  border: var(--tstp-border-w) solid var(--tstp-border, #2a2a30);
  border-radius: var(--tstp-radius-2);
}

.tstp-console-section .section-body .usage-block:first-child,
.usage-block:first-child {
  margin-top: 0;
}

.usage-block h4 {
  margin: 0 0 var(--tstp-space-3) 0;
  font-size: var(--tstp-font-2);
  font-weight: 600;
  line-height: 1.3;
}

.usage-block p {
  margin: 0 0 var(--tstp-space-2) 0;
  font-size: var(--tstp-font-2);
  line-height: 1.5;
}

.usage-block .tstp-console-pre {
  margin: var(--tstp-space-2) 0;
}

/* JSON display: table (Label | Content) + Raw button */
.tstp-json-display { margin: var(--tstp-space-2) 0; }
.tstp-json-visual { margin-bottom: var(--tstp-space-2); overflow-x: auto; }
.tstp-json-raw-btn { margin-bottom: var(--tstp-space-2); }
.tstp-json-table { width: 100%; border-collapse: collapse; font-size: var(--tstp-font-2); }
.tstp-json-table th, .tstp-json-table td { border: 1px solid var(--tstp-border, #2a2a30); padding: var(--tstp-space-2) var(--tstp-space-3); text-align: left; vertical-align: top; }
.tstp-json-th-label, .tstp-json-th-content { background: var(--tstp-surface-alt, #1a1a1f); font-weight: 600; color: var(--tstp-text-muted); }
.tstp-json-label { min-width: 120px; max-width: 240px; font-weight: 600; color: var(--tstp-accent, #0ea5e9); word-break: break-word; }
.tstp-json-content { word-break: break-word; white-space: pre-wrap; }
.tstp-json-table .tstp-json-table { margin: var(--tstp-space-1) 0; font-size: 0.95em; }
.tstp-json-table .tstp-json-table th { padding: var(--tstp-space-1) var(--tstp-space-2); }
.tstp-json-table .tstp-json-table td { padding: var(--tstp-space-1) var(--tstp-space-2); }
.tstp-json-null { color: var(--tstp-text-muted); font-style: italic; }
.tstp-json-bool { color: #a78bfa; }
.tstp-json-num { color: #34d399; }
.tstp-json-str { color: #fbbf24; }

.tstp-console-login-card {
  max-width: 440px;
  margin: var(--tstp-space-5) auto;
  padding: var(--tstp-space-5);
  text-align: center;
}

.tstp-console-login-card .tstp-console-input,
.tstp-console-login-card .tstp-console-btn {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Modals (structure only) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--tstp-space-5);
  overflow: auto;
  background: rgba(0, 0, 0, 0.75);
}

.modal-overlay.is-open {
  display: flex !important;
}

.modal-content {
  background: var(--tstp-surface, #16161a);
  border: var(--tstp-border-w) solid var(--tstp-border, #2a2a30);
  border-radius: var(--tstp-radius-2);
  padding: var(--tstp-space-5);
  max-width: 420px;
  width: 100%;
}

.modal-confirm-msg {
  margin: var(--tstp-space-3) 0;
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tstp-space-3);
  margin-top: var(--tstp-space-4);
}

.modal-actions .tstp-console-btn,
.modal-actions .btn {
  margin-top: 0;
  margin-bottom: 0;
}

.modal-content h3 {
  margin: 0 0 var(--tstp-space-2) 0;
  font-size: var(--tstp-font-3);
  font-weight: 600;
}

/* Preview modal (e.g. Theme Manager) */
.preview-modal-content {
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  background: var(--tstp-bg, #0c0c0e);
  border: var(--tstp-border-w) solid var(--tstp-border, #2a2a30);
  border-radius: var(--tstp-radius-2);
  padding: var(--tstp-space-4);
}

.preview-modal-tabs {
  display: flex;
  gap: 2px;
  border-bottom: var(--tstp-border-w) solid var(--tstp-border, #2a2a30);
  padding: 0 var(--tstp-space-3);
  margin-bottom: var(--tstp-space-3);
}

.preview-modal-tabs button {
  padding: var(--tstp-space-2) var(--tstp-space-3);
  background: transparent;
  border: none;
  border-bottom: var(--tstp-border-w) solid transparent;
  margin-bottom: calc(-1 * var(--tstp-border-w));
  color: var(--tstp-text-muted, #888);
  cursor: pointer;
  font-size: var(--tstp-font-2);
}

.preview-modal-tabs button.active {
  color: var(--tstp-accent, #1877f2);
  font-weight: 600;
  border-bottom-color: var(--tstp-accent, #1877f2);
}

/* ---------- Widget hint (collapsible “How to use”) ---------- */
.widget-hint {
  border: 1px solid var(--tstp-border, #2a2a30);
  border-radius: var(--tstp-radius-1);
  margin: var(--tstp-space-2) 0;
  background: var(--tstp-surface-alt, #1a1a1f);
}

.widget-hint summary {
  list-style: none;
  cursor: pointer;
  padding: var(--tstp-space-2) var(--tstp-space-3);
  font-size: var(--tstp-font-2);
  font-weight: 500;
}

.widget-hint summary::-webkit-details-marker {
  display: none;
}

.widget-hint-body {
  padding: var(--tstp-space-3);
  border-top: 1px solid var(--tstp-border, #2a2a30);
}

.widget-hint-body p {
  margin: 0;
  font-size: var(--tstp-font-2);
  line-height: 1.5;
}

/* ---------- Widget result blocks (structure only; no solid tint so inner cards/lines show separation) ---------- */
.widget-result {
  padding: var(--tstp-space-4);
  border-radius: var(--tstp-radius-2);
  border: var(--tstp-border-w) solid var(--tstp-border, #2a2a30);
  margin-top: var(--tstp-space-3);
  margin-bottom: var(--tstp-space-2);
  font-size: var(--tstp-font-2);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--tstp-surface, #16161a);
}

/* Success/error: structural accent only (left border), no full background tint */
.widget-result.widget-success {
  border-left-width: 4px;
  border-left-color: var(--tstp-accent, #1877f2);
  border-left-style: solid;
}

.widget-result.widget-error {
  border-left-width: 4px;
  border-left-color: var(--tstp-error-border);
  border-left-style: solid;
}

/* When result contains card list, keep container neutral so each card is the visual unit */
.widget-result:has(.widget-list-posts-cards) {
  background: var(--tstp-surface, #16161a);
}

.widget-result > p:first-child {
  margin-top: 0;
  margin-bottom: var(--tstp-space-4);
  padding-bottom: var(--tstp-space-3);
  border-bottom: 1px solid var(--tstp-border, #2a2a30);
}

.widget-result .widget-list-posts-cards {
  margin-top: 0;
  padding-top: 0;
}

/* Unclassed form submit (e.g. “Update credentials”) — same structure as primary button */
.tstp-console-section .section-body form button[type="submit"]:not(.tstp-console-btn):not(.btn),
.tstp-console-card form button[type="submit"]:not(.tstp-console-btn):not(.btn) {
  display: inline-block;
  padding: var(--tstp-space-2) var(--tstp-space-5);
  background: var(--tstp-accent, #1877f2);
  color: #fff;
  border: none;
  border-radius: var(--tstp-radius-1);
  font-size: var(--tstp-font-2);
  cursor: pointer;
  min-height: 44px;
  margin-top: var(--tstp-space-2);
  box-sizing: border-box;
}

.tstp-console-section .section-body form button[type="submit"]:not(.tstp-console-btn):not(.btn):hover,
.tstp-console-card form button[type="submit"]:not(.tstp-console-btn):not(.btn):hover {
  opacity: 0.9;
}

/* ---------- Reddit (and similar) list-post cards: clear separation, borders, nesting ---------- */
.widget-list-posts-cards {
  display: flex;
  flex-direction: column;
  gap: var(--tstp-space-4);
  margin-top: 0;
}

.widget-list-posts-card {
  background: var(--tstp-surface-alt, #1a1a1f);
  border: var(--tstp-border-w) solid var(--tstp-border, #2a2a30);
  border-radius: var(--tstp-radius-2);
  padding: var(--tstp-space-4);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin: 0;
}

.widget-list-posts-card + .widget-list-posts-card {
  margin-top: 0;
}

.widget-list-posts-card:hover {
  border-color: var(--tstp-border-strong, #3a3a42);
  background: var(--tstp-surface-hover);
}

.widget-list-posts-card.selected {
  border-color: var(--tstp-accent, #1877f2);
  background: var(--tstp-surface-hover);
}

.widget-list-posts-card .post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tstp-space-2) var(--tstp-space-4);
  margin-bottom: var(--tstp-space-3);
  padding-bottom: 0;
}

.widget-list-posts-card .post-meta .meta-item {
  display: flex;
  align-items: center;
  gap: var(--tstp-space-1);
  font-size: var(--tstp-font-1);
}

.widget-list-posts-card .post-meta .meta-label {
  font-weight: 600;
}

.widget-list-posts-card .post-title {
  font-weight: 600;
  font-size: var(--tstp-font-3);
  line-height: 1.4;
  margin: 0 0 var(--tstp-space-3) 0;
  padding: 0;
}

.widget-list-posts-card .post-extra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tstp-space-2) var(--tstp-space-4);
  margin-top: var(--tstp-space-2);
  padding-top: var(--tstp-space-3);
  border-top: 1px solid var(--tstp-border, #2a2a30);
  font-size: var(--tstp-font-1);
}

.widget-list-posts-card .post-actions {
  display: none;
  margin-top: var(--tstp-space-4);
  padding-top: var(--tstp-space-4);
  border-top: 1px solid var(--tstp-border, #2a2a30);
  gap: var(--tstp-space-2);
  flex-wrap: wrap;
}

.widget-list-posts-card.selected .post-actions {
  display: flex;
}

.widget-list-posts-card .post-actions .btn,
.widget-list-posts-card .post-actions .tstp-console-btn {
  margin-top: 0;
  margin-bottom: 0;
  margin-right: var(--tstp-space-2);
}

/* Read post widget: clickable post body reveals Reply button */
.read-post-clickable {
  cursor: pointer;
  padding: var(--tstp-space-2) 0;
  margin: 0 0 var(--tstp-space-2) 0;
}

.read-post-reply-actions {
  margin-top: var(--tstp-space-3);
  padding-top: var(--tstp-space-3);
  border-top: 1px solid var(--tstp-border, #2a2a30);
}

.read-post-reply-actions .read-post-reply-btn {
  margin-top: 0;
}

/* Narrow number inputs in section-body (e.g. limit) */
.tstp-console-section .section-body input[type="number"] {
  max-width: 120px;
}