:root { --bg:#0b0c10; --card:#151821; --ink:#e6e8f0; --muted:#9aa3b2; --accent:#6ee7b7; --danger:#ff6b6b; }
*{ box-sizing:border-box; }
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:linear-gradient(180deg,#0b0c10,#0e1117);
  min-height:100dvh; display:grid; place-items:center; padding:16px;
}
.card{ width:100%; max-width:640px; background:var(--card); border:1px solid rgba(255,255,255,.06);
  border-radius:18px; padding:20px 18px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
h1{ font-size:clamp(1.25rem,3.5vw,1.75rem); margin:0 0 10px; }
p.lead{ color:var(--muted); margin:0 0 18px; font-size:.95rem; }
label{ display:block; font-weight:600; margin:14px 0 6px; }
input, button{
  width:100%; font-size:1rem; padding:12px 14px; border-radius:12px; border:1px solid #2b3240;
  background:#0f1220; color:var(--ink); outline:none;
}
input::placeholder{ color:#6c7383; }
input:focus{ border-color:#394154; box-shadow:0 0 0 3px rgba(110,231,183,.15); }
.row{ display:grid; gap:12px; grid-template-columns:1fr; }
.actions{ display:grid; gap:10px; margin-top:14px; grid-template-columns:1fr; }
.btn{ cursor:pointer; border:0; }
.btn-primary{ background:var(--accent); color:#052b27; font-weight:700; }
.btn-secondary{ background:#202635; color:var(--ink); }
.result{ margin-top:16px; padding:14px; border-radius:12px; background:#0f1322; border:1px solid #293048; display:none; }
.result.ok{ border-color:#1b614f; }
.result.bad{ border-color:#6b1b1b; }
.result h2{ margin:0 0 6px; font-size:1.1rem; }
.meta{ color:var(--muted); font-size:.9rem; }
.error{ color:var(--danger); margin-top:8px; font-weight:600; }
@media (min-width:520px){ .row{ grid-template-columns:1fr 1fr; } .actions{ grid-template-columns:1fr 1fr; } }
small.hint{ color:var(--muted); }

/* Recent */
.recent{ margin-top:18px; background:#0f1322; border:1px solid #293048; border-radius:12px; padding:12px; }
.recent[hidden]{ display:none; }
.recent-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.recent-head h2{ margin:0; }
.recent-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.recent-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid #21283d; border-radius:10px; padding:10px; background:#0c1020; cursor:pointer; }
.recent-item .left{ display:flex; flex-direction:column; gap:2px; }
.recent-item .title{ font-weight:600; }
.recent-item .meta{ color:var(--muted); font-size:.9rem; }
.badge{ padding:2px 8px; border-radius:999px; font-size:.8rem; border:1px solid #2a334a; }
.badge.ok{ border-color:#1b614f; }
.badge.bad{ border-color:#6b1b1b; }

/* Icon button */
.icon-btn{ width:auto; height:36px; min-width:36px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; background:#202635; border:1px solid #2b3240; color:var(--ink); font-size:18px; line-height:1; cursor:pointer; }
.icon-btn:hover{ filter:brightness(1.12); }
.icon-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(110,231,183,.25); }
/* Force single-line inputs at all widths */
.row { grid-template-columns: 1fr !important; }
.actions { grid-template-columns: 1fr !important; }

/* Floating clear button (top-left of card) */
.card { position: relative; overflow: visible; }
.fab-clear{
  position:absolute; top:-12px; left:-12px;
  width:40px; height:40px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1; padding:0; cursor:pointer;
  background:#202635; color:var(--ink);
  border:1px solid #2b3240; box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.fab-clear:hover{ filter:brightness(1.08); }
.fab-clear:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(110,231,183,.25); }
/* per-input clear */
.input-wrap { position: relative; }
.field-with-clear { position: relative; }
.field-with-clear input { padding-right: 44px; } /* room for the button */

.input-clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; min-width:28px; padding:0;
  display:none; align-items:center; justify-content:center;
  border-radius:999px; background:#202635; border:1px solid #2b3240;
  color:var(--ink); font-size:18px; line-height:1; cursor:pointer;
}
.input-clear.show{ display:flex; }
.input-clear:hover{ filter:brightness(1.1); }
.input-clear:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(110,231,183,.25); }

/* keep single-column layout from earlier */
.row { grid-template-columns: 1fr !important; }
.actions { grid-template-columns: 1fr !important; }
.disclaimer{
  margin-top:16px;
  padding:12px;
  border-radius:10px;
  background:#0f1322;
  border:1px dashed #3a4258;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.35;
}
.disclaimer strong{ color:#cbd2e1; }