:root{--gap:12px; --radius:12px; --border:#e5e7eb; --muted:#6b7280; --bg:#f9fafb}
* { box-sizing: border-box; }
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); margin:0; color:#111827;
}
.wrap{
  max-width:420px; margin:12vh auto; background:#fff;
  padding:28px; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 10px 24px rgba(0,0,0,.06)
}
h1{margin:0 0 16px;font-size:22px;line-height:1.2}

/* --- Badge input --- */
.input-wrap{position:relative;margin-top:var(--gap)}
.input-wrap .badge{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  background:#f3f4f6;color:#374151;font-size:14px;font-weight:600;
  padding:4px 6px;border-radius:6px;pointer-events:none;
  min-width:32px;text-align:center;
}
.input-wrap input{
  width:100%;padding:12px 12px 12px 54px; /* 32px badge + 10px left + litt luft */
  border:1px solid #d1d5db;border-radius:10px;
  background:#fff;line-height:1.3;
  transition:border-color .15s,box-shadow .15s;
}
.input-wrap input:focus{
  outline:none;border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)
}

/* --- Actions / knapper --- */
.actions{margin-top:18px;display:grid;grid-template-columns:1fr;row-gap:8px}
.actions .btn{
  width:100%;padding:12px 16px;border-radius:10px;border:1px solid #111;
  background:#111;color:#fff;cursor:pointer;font-weight:600;
  transition:background .15s,transform .02s
}
.actions .btn:hover{background:#222}
.actions .btn:active{transform:translateY(1px)}
.actions .sub{display:flex;justify-content:flex-end}

/* --- Tekster og meldinger --- */
.muted{color:var(--muted);font-size:13px;text-decoration:none}
.muted:hover{text-decoration:underline}
.msg{margin:12px 0;padding:10px;border-radius:10px;font-size:14px;border:1px solid transparent}
.error{background:#fee2e2;border-color:#fecaca;color:#7f1d1d}
.info {background:#ecfdf5;border-color:#d1fae5;color:#065f46}