:root {
  --bg: #0f172a;
  --panel: #111827;
  --muted: #94a3b8;
  --text: #e5e7eb;
  --accent: #22d3ee;
  --card: #0b1220;
  --border: #1f2937;
  /* semantic alert colors (dark default) */
  --danger-bg: #2b0e0e;
  --danger-border: #7f1d1d;
  --danger-text: #fca5a5;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--text); margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--accent); text-decoration: none; }

.page { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.header { margin-bottom: 16px; }
.header h1 { margin: 0 0 8px; font-size: 28px; font-weight: 700; }
.header p { margin: 0; color: var(--muted); }
.header { display:flex; align-items:flex-start; gap:12px; justify-content:space-between; flex-wrap:wrap; }
.header .meta { color: var(--muted); }
.toggle { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; cursor: pointer; }
.toggle:hover { border-color: var(--accent); color: var(--accent); }

/* Brand */
.brand { display:inline-flex; align-items:center; gap:8px; color: var(--text); text-decoration:none; font-weight:700; letter-spacing:0.2px; margin-bottom:6px; }
.brand:hover { color: var(--accent); }
.brand svg { width:24px; height:24px; display:block; }
.brand svg .logo-outline { stroke: var(--border); stroke-width: 1.5; }
.brand svg .logo-mark { stroke: currentColor; stroke-width: 2.25; }
.brand svg .logo-accent { fill: var(--accent); stroke: var(--accent); }

.grid { display: grid; grid-template-columns: 1fr 320px; gap: 16px; }
.grid.single { grid-template-columns: 1fr; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
.two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 900px) { .two { grid-template-columns:1fr; } }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.12); }
.card h2 { margin: 0 0 12px; font-size: 20px; }

.footer { margin: 24px 0 16px; color: var(--muted); font-size: 14px; }

table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 10px; background: var(--card); }
td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: none; }
td:first-child { color: var(--muted); width: 35%; }
/* Improve long content wrapping in tables */
td { word-break: break-word; overflow-wrap: anywhere; }

iframe { width: 100% !important; height: 320px !important; border: 0; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,0.18); margin: 0 0 12px 0 !important; float: none !important; }

.field { display:flex; gap:8px; align-items:center; margin:8px 0; }
input[type="text"], select { background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:8px 10px; width:100%; }
input[type="submit"] { background:var(--accent); color:#07262b; border:0; border-radius:8px; padding:8px 12px; font-weight:700; cursor:pointer; }

pre { background:var(--panel); color:var(--text); padding:12px; border-radius:10px; max-height: 420px; overflow:auto; border:1px solid var(--border); white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.card .head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.card .actions { display:flex; gap:8px; align-items:center; }
.error { color: var(--danger-text); border:1px solid var(--danger-border); background: var(--danger-bg); padding:8px; border-radius:8px; margin-bottom:8px; }

textarea { background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:10px; width:100%; min-height:360px; }

/* Optional: smoothen theme transitions */
html, body, .card, input[type="text"], select, textarea {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
/* Smooth transitions for alerts too */
.error { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
/* Wrap long header lines without overflowing */
.wrap { overflow-wrap: anywhere; word-break: break-word; }

/* Light theme overrides */
body.theme-light {
  --bg: #f7fafc;
  --panel: #ffffff;
  --muted: #475569;
  --text: #0f172a;
  --accent: #0ea5e9;
  --card: #ffffff;
  --border: #e2e8f0;
  /* light theme alert colors */
  --danger-bg: #fff1f2;      /* rose-50 */
  --danger-border: #fecdd3;  /* rose-200 */
  --danger-text: #9f1239;    /* rose-800 */
}

/* Responsive tweaks */
@media (max-width: 600px) {
  .header h1 { font-size: 22px; }
  .header p.meta { font-size: 14px; }
  .grid { gap: 12px; }
  iframe { height: 260px !important; }
  td:first-child { width: auto; }
  /* So labels don't force wide layouts on phones */
  .field label { min-width: 0 !important; }
  /* Make large textareas friendlier on small screens */
  textarea { min-height: 220px; }
}