/* neverlogoff/assets/e2e-mls/keys.css — Settings -> Your keys (E2E on MLS)
   Logical properties only, so a right-to-left language flips without new CSS. */
.ky-wrap { max-inline-size: 52rem; margin-inline: auto; padding-block: 1.5rem 4rem; padding-inline: 1rem; }
.ky-lede { font-size: 1.05rem; max-inline-size: 42rem; }
.ky-status { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-block: 1rem; }
.ky-chip { display: inline-flex; align-items: center; gap: .45rem; padding-block: .35rem; padding-inline: .8rem; border-radius: 999px; border: 1px solid var(--line, #e4e4e7); font-weight: 600; }
.ky-dot { inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: #b45309; }
.ky-chip[data-state="unlocked"] .ky-dot { background: #15803d; }
.ky-chip[data-state="none"] .ky-dot { background: #71717a; }
.ky-warn { border-inline-start: 4px solid #b45309; background: #fffbeb; color: #451a03; padding-block: .7rem; padding-inline: .9rem; border-radius: 8px; }
.ky-card { border: 1px solid var(--line, #e4e4e7); border-radius: 12px; padding-block: 1.1rem; padding-inline: 1.2rem; margin-block: 1rem; background: var(--field, #fff); }
.ky-card h2 { margin-block: .1rem .6rem; font-size: 1.15rem; }
.ky-card h3 { margin-block: .2rem .4rem; font-size: 1rem; }
.ky-note { color: #52525b; font-size: .95rem; }
.ky-msg { min-block-size: 1.3em; font-weight: 600; }
.ky-msg[data-kind="error"] { color: #b91c1c; }
.ky-msg[data-kind="ok"] { color: #15803d; }
.ky-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-block: .5rem; }
.ky-row label { min-inline-size: 11rem; font-weight: 600; }
.ky-row input[type="password"], .ky-row input[type="text"] { flex: 1 1 14rem; min-inline-size: 0; padding-block: .55rem; padding-inline: .7rem; border: 1px solid #a1a1aa; border-radius: 8px; font: inherit; }
.ky-end { justify-content: flex-end; }
.ky-check { display: flex; gap: .5rem; align-items: center; margin-block: .4rem; }
.ky-btn { font: inherit; font-weight: 600; padding-block: .55rem; padding-inline: 1rem; border-radius: 999px; border: 1px solid #0a0a0a; background: #0a0a0a; color: #fafafa; cursor: pointer; min-block-size: 44px; }
.ky-btn.ky-ghost { background: transparent; color: #0a0a0a; }
.ky-btn[disabled] { opacity: .45; cursor: not-allowed; }
.ky-btn.ky-danger { border-color: #b91c1c; color: #b91c1c; background: transparent; }
.ky-list { list-style: none; padding: 0; margin: 0; }
.ky-list > li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; padding-block: .6rem; border-block-end: 1px solid var(--line, #e4e4e7); }
.ky-list > li:last-child { border-block-end: 0; }
.ky-item-main { display: flex; flex-direction: column; gap: .1rem; min-inline-size: 0; }
.ky-item-name { font-weight: 600; overflow-wrap: anywhere; }
.ky-item-sub { color: #52525b; font-size: .9rem; }
.ky-empty { color: #71717a; }
.ky-add { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: .8rem .2rem; }
.ky-more { margin-block-start: .8rem; }
.ky-more summary { cursor: pointer; font-weight: 600; }
.ky-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem; margin-block-start: .8rem; }
.ky-code-label { margin-block: .6rem .1rem; color: #52525b; }
.ky-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.1rem; overflow-wrap: anywhere; }
.ky-qr svg { inline-size: 11rem; block-size: 11rem; }
.ky-sas { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 2rem; letter-spacing: .25em; font-weight: 700; margin-block: .4rem; }
.ky-facts { padding-inline-start: 1.2rem; margin-block: 1rem .4rem; }
.ky-facts li { margin-block: .35rem; }
.ky-modes { display: grid; gap: .5rem; margin-block-start: .8rem; }
.ky-mode { margin: 0; }
.ky-badge { display: inline-block; padding-block: .15rem; padding-inline: .55rem; border-radius: 6px; background: #dcfce7; color: #14532d; font-weight: 700; font-size: .85rem; }
.ky-badge-warn { background: #fef3c7; color: #78350f; }
.ky-space-state { display: inline-flex; gap: .35rem; align-items: center; font-size: .9rem; }
.ky-dialog { border: 0; border-radius: 14px; padding: 0; inline-size: min(34rem, calc(100vw - 1.5rem)); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.ky-dialog::backdrop { background: rgba(10,10,10,.45); }
.ky-dform { padding-block: 1.2rem; padding-inline: 1.3rem; }
.ky-dform h2 { margin-block-start: 0; font-size: 1.2rem; }
@media (max-width: 30rem) {
  .ky-row label { min-inline-size: 100%; }
  .ky-sas { font-size: 1.6rem; }
}
/* MLS additions (2026-10-05): development label, safety codes, notices, legacy badge */
.ky-dev { border-inline-start: 4px solid #7c3aed; background: #f5f3ff; color: #2e1065; padding-block: .7rem; padding-inline: .9rem; border-radius: 8px; }
.ky-safety { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1rem; letter-spacing: .06em; overflow-wrap: anywhere; }
.ky-verify { border-block-start: 1px solid var(--line, #e4e4e7); margin-block-start: 1rem; padding-block-start: .6rem; }
.ky-notices > li { font-size: .95rem; }
.ky-badge-bad { background: #fee2e2; color: #7f1d1d; }