/* DE-FEEDBACK activation portal — matches installer aesthetic */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink: #0d0e11;
  --panel: #13151a;
  --hair: #21242b;
  --text: #e7e4dd;
  --muted: #6c7078;
  --amber: #e2a63d;
  --amber-hi: #f0b654;
  --err: #d96459;
  --ok: #7fb069;
}

html, body { height: 100%; }
body {
  background: var(--ink);
  color: var(--text);
  font: 15px/1.6 -apple-system, "Segoe UI", Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 32px; border-bottom: 1px solid var(--hair);
}
.brand { font-weight: 600; letter-spacing: 0.18em; font-size: 13px; }
.brand .v { color: var(--amber); font-weight: 500; }
.meta { color: var(--muted); font-size: 11px; letter-spacing: 0.22em; }

main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }

.card {
  width: 100%; max-width: 520px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 36px;
  animation: fade 300ms ease-out;
}
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }

h1 { font-size: 24px; font-weight: 300; margin-bottom: 8px; }
.sub { color: var(--muted); font-size: 13.5px; margin-bottom: 26px; }
.mono { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 0.95em; color: var(--amber); }

.drop {
  border: 1px dashed var(--hair);
  border-radius: 6px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.drop:hover, .drop.over { border-color: var(--amber); background: rgba(226, 166, 61, 0.04); }
.dmark { color: var(--amber); font-size: 26px; margin-bottom: 10px; }
.dtext { color: var(--muted); font-size: 13.5px; }
.dtext .mono { color: var(--amber); }
#file { display: none; }

.status { margin-top: 22px; font-size: 13.5px; }
.status.ok #status-text { color: var(--ok); }
.status.err #status-text { color: var(--err); }
.status.busy #status-text { color: var(--muted); }

.cta {
  display: inline-block;
  margin-top: 18px;
  background: var(--amber);
  color: #141310;
  font: 600 13px -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 32px;
  border-radius: 4px;
  text-decoration: none;
  animation: fade 300ms ease-out;
}
.cta:hover { background: var(--amber-hi); }

.note {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  color: var(--muted);
  font-size: 12px;
}