:root{
  --bg:#eef2f7; --card:#ffffff; --ink:#1f2937; --muted:#6b7280;
  --line:#d9e0ea; --brand:#1d4ed8; --brand-ink:#fff;
  --ok:#15803d; --ok-bg:#e7f6ec; --err:#b91c1c;
  --radius:14px; --shadow:0 6px 24px rgba(16,32,64,.10);
}
*{box-sizing:border-box}
body{
  margin:0; font:15px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
  display:flex; min-height:100vh; align-items:center; justify-content:center; padding:20px;
}
.app{width:100%; max-width:420px}
.status{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; margin-bottom:12px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.status .brand{font-weight:800; letter-spacing:.5px; color:var(--brand)}
.status .lock{font-size:13px; color:var(--muted)}
.status.unlocked .lock{color:var(--ok); font-weight:600}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px;
}
h1{font-size:20px; margin:0 0 16px}
label{display:block; margin:0 0 12px; font-size:13px; color:var(--muted)}
input{
  width:100%; margin-top:5px; padding:11px 12px; font-size:15px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:10px;
}
input:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand)}
button{
  appearance:none; cursor:pointer; font-size:15px; font-weight:600;
  padding:11px 16px; border-radius:10px; border:1px solid var(--brand);
  background:var(--brand); color:var(--brand-ink); margin-top:4px;
}
button:hover{filter:brightness(.96)}
button:disabled{opacity:.6; cursor:progress}
button.ghost{background:#fff; color:var(--muted); border-color:var(--line)}
.row{display:flex; gap:10px}
.row button{flex:1}
.error{color:var(--err); font-size:13px; min-height:18px; margin:4px 0 10px}
.muted{color:var(--muted)}
.small{font-size:12px}
.foot{text-align:center; margin-top:14px}
.hidden{display:none !important}
#view-unlocked h1{color:var(--ok)}

/* ===== cofre desbloqueado (F3) ===== */
body[data-view="unlocked"] .app{max-width:760px}
.cofre-bar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.cofre-bar .inline{margin:0; display:flex; gap:6px; align-items:center; font-size:13px}
.cofre-bar select,.cofre-bar input[type=search]{margin-top:0; width:auto; flex:1; min-width:140px}
.cofre-bar .spacer{flex:1}
.mini{padding:7px 10px; font-size:13px; margin-top:0}
.inline-form{display:flex; gap:8px; align-items:center; margin-bottom:12px}
.inline-form input{margin-top:0}
.lista{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.item{display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff}
.item-main{display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-width:0}
.item-main strong{color:var(--ink)}
.item .tag{font-size:12px; color:var(--brand); background:#eaf0ff; padding:1px 7px; border-radius:6px}
.item .status{font-size:11px; color:var(--muted)}
.item-acts{display:flex; gap:6px; flex-shrink:0}
.painel{margin-top:14px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fafbfd}
.painel h2{font-size:17px; margin:0 0 10px}
.campo{display:flex; gap:8px; align-items:center; padding:4px 0; font-size:14px; flex-wrap:wrap}
.campo-rot{color:var(--muted); min-width:90px; font-size:12px}
.campo-val{color:var(--ink); word-break:break-all}
.senha-mascara{font-family:monospace; letter-spacing:1px}
.modal-bg{position:fixed; inset:0; background:rgba(16,32,64,.45); display:flex; align-items:center; justify-content:center; z-index:50}
.modal{background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; width:min(360px,92vw); box-shadow:var(--shadow)}
.modal h2{font-size:17px; margin:0 0 8px}