:root { color-scheme:light dark; font-family:system-ui,sans-serif; }
body { margin:0; min-height:100dvh; display:grid; place-items:center;
  color:light-dark(#243a2e,#e8f2eb); background:light-dark(#eff4ed,#17231c); }
main { box-sizing:border-box; width:min(calc(100% - 32px), 400px); padding:24px;
  border:1px solid light-dark(#cbd9cc,#405648); border-radius:16px;
  background:light-dark(#fff,#202c25); }
h1 { margin:0 0 20px; }
form, label { display:grid; gap:8px; }
form { gap:16px; }
input, button { box-sizing:border-box; min-width:0; min-height:44px; border:1px solid light-dark(#b2c4b4,#53695a);
  border-radius:8px; padding:8px 12px; font:inherit; }
button { background:light-dark(#325c45,#bbd8bd); color:light-dark(white,#193522); cursor:pointer; }
p { margin:0; }
p:empty { display:none; }
[hidden] { display:none !important; }
ul { padding-inline-start:20px; }
li { margin-block:10px; overflow-wrap:anywhere; }
li button, #copy { margin:4px; }
#share { margin-top:12px; }
.password-field { display:grid; gap:8px; }
.password-row { display:flex; gap:6px; flex-wrap:wrap; }
.password-row input { flex:1 1 130px; width:100%; }
.password-row button { background:transparent; color:inherit; }
[role="alert"] { color:light-dark(#963529,#ffb4a8); }