/* Elegant dark theme with green accent */
:root{
  --bg: #0f1216;
  --bg-soft: #151a20;
  --card: #151a20;
  --text: #e6edf3;
  --muted: #9aa6b2;
  --border: #263040;
  --accent: #2ecc71;
  --accent-2: #20bf6b;
  --warn: #ffb86c;
  --err: #ff6b6b;
  --good: #6cf7a7;
  --focus: #88ffcc55;
}
* { box-sizing: border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; }
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }
.container{ max-width: 1100px; margin: 0 auto; padding: 1rem; }
.site-header{ display:flex; align-items:center; justify-content:space-between; padding: .75rem 1rem; border-bottom:1px solid var(--border); background: linear-gradient(180deg, #12161c, #0f1216); position:sticky; top:0; z-index:10; }
.brand{ display:flex; gap:.75rem; align-items:center; }
.logo{ border-radius:8px; }
.titles h1{ font-size:1.1rem; margin:.2rem 0 0 0; }
.titles .tagline{ margin:0; font-size:.9rem; color:var(--muted); }
.actions{ display:flex; gap:.5rem; }
.btn{ background:#1b222b; color:var(--text); border:1px solid var(--border); padding:.5rem .8rem; border-radius:.5rem; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; }
.btn:hover{ border-color: var(--accent); }
.btn.primary{ background: var(--accent-2); color:#08130c; border-color: transparent; font-weight:600; }
.btn.sm{ padding:.25rem .5rem; font-size:.8rem; }
.alert{ padding:.75rem 1rem; border-radius:.5rem; margin: .5rem 0; border:1px solid var(--border); background:#151a20; }
.alert.error{ border-color:#462e2e; background:#1e1414; color:#ffd4d4; }
.alert.info{ border-color:#2e3b2e; background:#141e14; color:#d2ffd2; }
.card{ background: var(--card); border:1px solid var(--border); border-radius:.75rem; padding:1rem; margin:1rem 0; box-shadow: 0 4px 20px rgba(0,0,0,.25); }
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .85rem; }
.field{ display:flex; flex-direction:column; gap:.35rem; }
.field.full{ grid-column: 1 / -1; }
.field label{ color:var(--muted); font-size:.95rem; }
input[type="text"],input[type="url"],input[type="number"],select{ background:#0f141a; color:var(--text); border:1px solid var(--border); border-radius:.5rem; padding:.55rem .6rem; outline:none; }
input:focus,select:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.field.switch{ justify-content:flex-end; gap:.5rem; }
.field.switch label{ display:flex; align-items:center; gap:.5rem; }
.actions{ margin-top:.5rem; }
.summary-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:.75rem; margin:.75rem 0; }
.summary-item{ background:#0f141a; border:1px solid var(--border); border-radius:.5rem; padding:.75rem; display:flex; flex-direction:column; gap:.35rem; }
.summary-item .label{ color:var(--muted); font-size:.9rem; }
.summary-item .value{ font-size:1.3rem; font-weight:700; }
.summary-item .value.warn{ color: var(--warn); }
.summary-item .value.good{ color: var(--good); }
.table-wrap{ overflow:auto; border:1px solid var(--border); border-radius:.5rem; }
.table-wrap table{ min-width: 900px; }
table.data{ width:100%; border-collapse: collapse; }
.data th, .data td { padding:.5rem .6rem; border-bottom:1px solid var(--border); vertical-align: top; }
.data thead th{ position:sticky; top:0; background:#0f141a; z-index:1; }
.truncate{ max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.muted{ color:var(--muted); }
.site-footer{ border-top:1px solid var(--border); color:var(--muted); padding:1rem; text-align:center; }
.export-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0; }
.ai-alt{ display:inline-block; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align:middle; }
.toast{ position: fixed; left:50%; transform:translateX(-50%); bottom: 1rem; background:#0f141a; border:1px solid var(--border); color:var(--text); padding:.5rem .75rem; border-radius:.5rem; opacity:0; transition: opacity .2s ease, transform .2s ease; }
.toast.show{ opacity:1; transform: translateX(-50%) translateY(-6px); }
@media (max-width: 640px){
  .titles .tagline{ display:none; }
  .truncate{ max-width: 160px; }
}