:root {
  --bg:      #1e1e2e;
  --card:    #2a2a3e;
  --entry:   #313244;
  --border:  #414155;
  --fg:      #cdd6f4;
  --fg2:     #6c7086;
  --green:   #a6e3a1;
  --purple:  #7c6af7;
  --red:     #f38ba8;
  --yellow:  #f9e2af;
  --blue:    #89b4fa;
  --pt:      #cba6f7;
  --en:      #89dceb;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem 3rem;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
header {
  width: 100%;
  max-width: 680px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.brand { font-size: 1.1rem; font-weight: 700; color: var(--fg); }
.brand span { margin-right: .4rem; }

nav a {
  color: var(--fg2);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
  padding: .3rem .75rem;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
nav a:hover { background: var(--entry); color: var(--fg); }
nav a.active { color: var(--fg); background: var(--entry); }

/* ── Cards ───────────────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  width: 100%;
  max-width: 680px;
  margin-bottom: 1rem;
}

.card-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg2);
  margin-bottom: .9rem;
}

/* ── Forms ────────────────────────────────────────────────────────────────────── */
label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--fg2);
  margin-bottom: .3rem;
}

input, select, textarea {
  width: 100%;
  padding: .5rem .75rem;
  background: var(--entry);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--fg);
  font-size: .88rem;
  margin-bottom: .85rem;
  outline: none;
  transition: border-color .15s;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--border); }
input.error { border-color: var(--red) !important; }
textarea { resize: vertical; min-height: 72px; }

.field-row {
  display: flex;
  gap: .75rem;
}
.field-row > .field { flex: 1; }

.hint {
  font-size: .77rem;
  color: var(--fg2);
  margin-top: -.6rem;
  margin-bottom: .85rem;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn {
  padding: .55rem 1.3rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  font-size: .88rem;
  transition: opacity .15s;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.btn:disabled { opacity: .4; cursor: default; }
.btn-primary-green { background: var(--green);  color: #1e1e2e; }
.btn-primary-purple { background: var(--purple); color: #fff; }
.btn-danger  { background: var(--red);    color: #1e1e2e; }
.btn-ghost   { background: var(--entry);  color: var(--fg); border: 1px solid var(--border); }

.btn-row { display: flex; gap: .75rem; align-items: center; margin-bottom: .5rem; }

/* ── Spinner ─────────────────────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Status bar ──────────────────────────────────────────────────────────────── */
.status-text { font-size: .83rem; color: var(--fg2); padding: .2rem 0; }
.status-text.running { color: var(--green); }
.status-text.error   { color: var(--red); }

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--green);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ── Log ─────────────────────────────────────────────────────────────────────── */
.log-box {
  background: #11111b;
  border-radius: 6px;
  padding: .75rem;
  height: 220px;
  overflow-y: auto;
  font-family: 'Consolas', 'Fira Mono', monospace;
  font-size: .8rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.log-err  { color: var(--red); }
.log-warn { color: var(--yellow); }
.log-ok   { color: var(--green); }
.log-info { color: var(--blue); }
.log-pt   { color: var(--pt); }
.log-en   { color: var(--en); }

/* ── Snippet ─────────────────────────────────────────────────────────────────── */
.snippet-pre {
  background: var(--entry);
  border-radius: 6px;
  padding: .7rem .85rem;
  font-family: 'Consolas', monospace;
  font-size: .77rem;
  color: var(--yellow);
  white-space: pre;
  overflow-x: auto;
  margin-bottom: .65rem;
  min-height: 3.5rem;
}
.snippet-placeholder { color: var(--fg2); font-style: italic; }

/* ── Download buttons ────────────────────────────────────────────────────────── */
.dl-box { display: flex; gap: .75rem; margin-top: .25rem; }
.dl-box a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  background: var(--entry);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  transition: background .15s;
}
.dl-box a:hover { background: #3a3a52; }

/* ── Progress bar ────────────────────────────────────────────────────────────── */
.progress-wrap {
  height: 4px;
  background: var(--entry);
  border-radius: 2px;
  overflow: hidden;
  margin: .5rem 0;
}
.progress-bar {
  height: 100%;
  background: var(--purple);
  border-radius: 2px;
  width: 0;
  transition: width .3s;
}
.progress-bar.indeterminate {
  width: 40%;
  animation: indeterminate 1.2s ease-in-out infinite;
}
@keyframes indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ── Toast ───────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  top: 1rem; right: 1rem;
  background: var(--red);
  color: #1e1e2e;
  padding: .6rem 1.1rem;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 999;
}
.toast.show { opacity: 1; }