/* Azeroth dashboard — WotLK frost-night theme.
   Self-contained: system font stacks only, all art is inline SVG/CSS. */
:root {
  color-scheme: dark;
  --night: #0b1220;        /* frost-night background */
  --panel: #121b2c;        /* panel surface */
  --inset: #0a101c;        /* code/pre wells */
  --border: rgba(201, 165, 74, 0.28);   /* gold hairline */
  --border-dim: rgba(127, 212, 255, 0.12);
  --text: #e8dfc8;         /* parchment */
  --text-dim: #9aa3b5;
  --frost: #7fd4ff;        /* ice accent */
  --gold: #c9a54a;         /* old gold */
  --ok: #6ecb7e;
  --warn: #e0a63e;
  --bad: #e06c5a;
  --font-display: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", Consolas, Menlo, Monaco, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 500px at 50% -10%, rgba(38, 64, 105, 0.55), transparent 70%),
    var(--night);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
}

/* aurora band — the one ambient flourish */
.aurora {
  height: 4px;
  background: linear-gradient(90deg,
    transparent, var(--frost) 20%, #a9f0d1 40%, var(--gold) 60%, var(--frost) 80%, transparent);
  background-size: 200% 100%;
  opacity: 0.75;
  animation: aurora-drift 18s linear infinite;
}
@keyframes aurora-drift {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora { animation: none; }
}

a { color: var(--frost); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- hero (public dashboard) ---- */
.hero { text-align: center; padding: 2.25rem 0 1rem; }
.hero .crest {
  width: 108px; height: 108px;
  color: var(--frost);
  filter: drop-shadow(0 0 14px rgba(127, 212, 255, 0.35));
}
.hero .crest .crest-gold { color: var(--gold); }
.hero .crest .crest-frost { opacity: 0.85; }
.hero h1 {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.22em;
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--gold);
  margin: 0.5rem 0 0.2rem;
  text-shadow: 0 0 24px rgba(201, 165, 74, 0.25);
}
.hero .tagline { color: var(--text-dim); margin: 0; font-size: 0.95rem; }

/* ---- chrome ---- */
header.topnav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.7rem 1.5rem;
  background: rgba(10, 16, 28, 0.85);
  border-bottom: 1px solid var(--border);
}
header.topnav .brand {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.12em;
  font-size: 1.05rem;
  color: var(--gold);
}
header.topnav .brand em { font-style: normal; color: var(--text-dim); font-size: 0.8em; }
header.topnav nav { display: flex; gap: 1rem; flex: 1; flex-wrap: wrap; }
header.topnav form { margin: 0; }

main { max-width: 880px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

.flash { padding: 0.6rem 1rem; border-radius: 3px; margin-bottom: 1.25rem; border: 1px solid var(--border); }
.flash.applied { border-color: var(--ok); color: var(--ok); }
.flash.error { border-color: var(--bad); color: var(--bad); }

/* panels: dark surface, gold hairline, notched top corners */
.panel {
  position: relative;
  background: linear-gradient(180deg, rgba(127, 212, 255, 0.03), transparent 40%), var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.4rem;
}
.panel::before, .panel::after {
  content: "";
  position: absolute; top: -1px; width: 26px; height: 8px;
  border-top: 2px solid var(--gold);
}
.panel::before { left: -1px; border-left: 2px solid var(--gold); }
.panel::after { right: -1px; border-right: 2px solid var(--gold); }

h1, h2 {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--gold);
  font-weight: 600;
}
h1 { font-size: 1.45rem; margin-top: 0; }
h2 { font-size: 1.15rem; margin-top: 0; border-bottom: 1px solid var(--border-dim); padding-bottom: 0.4rem; }

.muted { color: var(--text-dim); }

/* ---- status ---- */
.status-panel { text-align: center; }
.status { font-family: var(--font-display); font-size: 1.35rem; margin: 0.3rem 0; }
.status .orb {
  display: inline-block; width: 0.75em; height: 0.75em; border-radius: 50%;
  margin-right: 0.45rem; vertical-align: baseline;
}
.status.up { color: var(--frost); }
.status.up .orb { background: var(--frost); box-shadow: 0 0 10px var(--frost); }
.status.down { color: var(--bad); }
.status.down .orb { background: var(--bad); box-shadow: 0 0 10px var(--bad); }
.soap-info { text-align: left; }

.status-badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 3px; font-weight: 700; font-size: 0.85rem; }
.status-badge.up { background: rgba(110, 203, 126, 0.15); color: var(--ok); }
.status-badge.down { background: rgba(224, 108, 90, 0.15); color: var(--bad); }

.badge { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 3px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-left: 0.4rem; }
.badge.reload { background: rgba(110, 203, 126, 0.15); color: var(--ok); }
.badge.restart { background: rgba(224, 166, 62, 0.15); color: var(--warn); }

/* ---- steps (a real sequence: download -> install -> connect) ---- */
ol.steps { margin: 0.5rem 0 0; padding-left: 0; list-style: none; counter-reset: step; }
ol.steps li {
  counter-increment: step;
  position: relative;
  padding: 0.45rem 0 0.45rem 2.6rem;
}
ol.steps li::before {
  content: counter(step, upper-roman);
  position: absolute; left: 0; top: 0.45rem;
  width: 2rem; text-align: center;
  font-family: var(--font-display);
  color: var(--gold);
  border-right: 1px solid var(--border);
}

/* ---- downloads ---- */
ul.downloads { list-style: none; padding: 0; margin: 0; }
ul.downloads li {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid var(--border-dim);
}
ul.downloads li:last-child { border-bottom: none; }
.dl-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dl-name { font-weight: 600; word-break: break-all; }
.dl-desc { color: var(--text-dim); font-size: 0.85rem; }
.dl-size { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-dim); white-space: nowrap; }
ul.downloads form { margin: 0; }

/* ---- setup guide ---- */
details { border: 1px solid var(--border-dim); border-radius: 3px; margin-bottom: 0.6rem; padding: 0 0.9rem; }
details summary {
  cursor: pointer; padding: 0.55rem 0;
  font-family: var(--font-display); font-variant: small-caps; letter-spacing: 0.05em;
  color: var(--frost); font-size: 1.02rem;
}
details[open] summary { border-bottom: 1px solid var(--border-dim); }
ul.guide { padding-left: 1.2rem; }
ul.guide li { margin: 0.4rem 0; }

.site-foot { text-align: center; margin-top: 0.5rem; }
.site-foot a { color: var(--text-dim); font-size: 0.85rem; }

/* ---- code / forms ---- */
pre, code {
  background: var(--inset);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  font-family: var(--font-mono);
}
code { padding: 0.05rem 0.35rem; font-size: 0.85em; }
pre { padding: 0.75rem; overflow-x: auto; white-space: pre-wrap; word-break: break-word; font-size: 0.85rem; }
pre code { border: none; background: none; padding: 0; }

textarea {
  width: 100%; min-height: 420px;
  background: var(--inset); color: var(--text);
  border: 1px solid var(--border-dim); border-radius: 3px;
  padding: 0.75rem; font-family: var(--font-mono); font-size: 13px; resize: vertical;
}

.field-row {
  display: grid; grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 0.75rem; align-items: start; padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-dim);
}
.field-row:last-child { border-bottom: none; }
.field-label { display: flex; flex-direction: column; gap: 0.15rem; }
.field-label .key { color: var(--text-dim); font-size: 0.75rem; font-family: var(--font-mono); }
.field-hint { color: var(--text-dim); font-size: 0.75rem; margin-top: 0.25rem; }

input[type=text], input[type=password], input[type=number], input[type=file] {
  width: 100%;
  background: var(--inset); color: var(--text);
  border: 1px solid var(--border-dim); border-radius: 3px;
  padding: 0.45rem 0.55rem; font-family: var(--font-body); font-size: 14px;
}
input:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--frost); outline-offset: 1px;
}

button, input[type=submit] {
  background: linear-gradient(180deg, #d9b862, var(--gold));
  color: #241a05;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  padding: 0.45rem 1rem;
  font-weight: 700; font-family: var(--font-body); font-size: 14px;
  cursor: pointer;
}
button:hover, input[type=submit]:hover { filter: brightness(1.08); }
button.danger { background: linear-gradient(180deg, #e88377, var(--bad)); color: #2b0c08; }
button.warn { background: linear-gradient(180deg, #ecc06a, var(--warn)); color: #2b1e05; }

.form-actions { margin-top: 0.75rem; }

.mini-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; }
.mini-form input { width: auto; flex: 1; min-width: 120px; }
.mini-form.stack { flex-direction: column; align-items: stretch; }
.mini-form.stack input { width: 100%; flex: none; }

.warning-banner {
  background: rgba(224, 166, 62, 0.12);
  border: 1px solid var(--warn); color: var(--warn);
  border-radius: 3px; padding: 0.6rem 1rem; margin-bottom: 1rem;
}

ul.backup-list { list-style: none; padding: 0; margin: 0; }
ul.backup-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.35rem 0; border-bottom: 1px solid var(--border-dim);
}
ul.backup-list li:last-child { border-bottom: none; }
ul.backup-list .name { color: var(--text-dim); font-size: 0.85rem; font-family: var(--font-mono); }

@media (max-width: 620px) {
  .hero h1 { font-size: 2rem; }
  ul.downloads li { flex-wrap: wrap; }
  .field-row { grid-template-columns: 1fr; }
}
.checkline { display: flex; gap: 0.5rem; align-items: center; color: var(--text-dim); font-size: 0.9rem; }
.checkline input[type=checkbox] { width: auto; }