:root{
  --bg:#0b1020; --card:#111a33; --card2:#0f1730;
  --text:#eaf0ff; --muted:#a9b4d3; --accent:#7cf3ff; --accent2:#ff7cf3;
  --good:#6dff95; --bad:#ff6d6d; --warn:#ffd56d;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.foxtrail{
  font-family: var(--sans);
  color: var(--text);
}

.foxtrail *{ box-sizing:border-box; }

.foxtrail .card{
  background: linear-gradient(180deg, rgba(17,26,51,.85), rgba(15,23,48,.75));
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}

.foxtrail .kicker{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  color:var(--muted); font-size:13px;
}

.foxtrail .pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

.foxtrail h2{ margin:10px 0 8px; font-size:22px; }
.foxtrail .hint{ color:var(--muted); font-size:12.5px; line-height:1.45; }

.foxtrail .divider{ height:1px; background: rgba(255,255,255,.08); margin:16px 0; }

.foxtrail .row{ display:flex; gap:12px; flex-wrap:wrap; }
.foxtrail .row > *{ flex:1; min-width: 260px; }

.foxtrail .field{ display:flex; flex-direction:column; gap:8px; }

.foxtrail input, .foxtrail textarea{
  width:100%;
  background: rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  padding:12px 12px;
  border-radius: 14px;
  outline:none;
  font-size:14px;
}

.foxtrail textarea{ min-height:120px; resize:vertical; }

.foxtrail .btn{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;
  border-radius: 14px;
  font-weight:650;
  font-size:13px;
  transition:.15s transform, .15s background, .15s border;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  display:inline-flex; align-items:center; justify-content:center;
  user-select:none;
}

.foxtrail .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.20); }
.foxtrail .btn.primary{
  background: linear-gradient(135deg, rgba(124,243,255,.25), rgba(255,124,243,.18));
  border-color: rgba(124,243,255,.35);
}

.foxtrail .btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

.foxtrail .status{
  margin-top:10px;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  font-size:13px;
  display:none;
}
.foxtrail .status.show{ display:block; }
.foxtrail .status.good{ border-color: rgba(109,255,149,.30); }
.foxtrail .status.bad{ border-color: rgba(255,109,109,.30); }

.foxtrail .mono{ font-family: var(--mono); }