/* /#/security — password + backup. Scoped: everything prefixed .sec- to avoid
   touching the existing desk styling. */
.sec-page { display: flex; flex-direction: column; gap: 18px; }
.sec-card { padding: 22px 22px 20px; }
.sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

.sec-inputwrap { position: relative; display: flex; align-items: center; }
.sec-inputwrap .inp { padding-right: 44px; width: 100%; }

.sec-peek {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  color: var(--muted, #8b93a7); transition: background .18s ease, color .18s ease;
}
.sec-peek:hover { background: rgba(255, 255, 255, .07); color: var(--fg, #e8ecf4); }
.sec-peek:focus-visible { outline: 2px solid var(--citron, #c8f560); outline-offset: 2px; }
.sec-peek svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.sec-peek.on svg { stroke: var(--citron, #c8f560); }

.sec-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
.sec-meter i { height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .12); transition: background .2s ease; }
.sec-meter[data-score="1"] i:nth-child(-n+1) { background: #ff6b6b; }
.sec-meter[data-score="2"] i:nth-child(-n+2) { background: #ffb020; }
.sec-meter[data-score="3"] i:nth-child(-n+3) { background: #9ad64b; }
.sec-meter[data-score="4"] i { background: var(--citron, #c8f560); }

.sec-modal {
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px; padding: 24px;
  background: rgba(16, 19, 27, .96); color: var(--fg, #e8ecf4);
  width: min(460px, calc(100vw - 32px)); backdrop-filter: blur(20px);
}
.sec-modal::backdrop { background: rgba(3, 5, 9, .72); backdrop-filter: blur(3px); }
.sec-modal h3 { margin: 0 0 6px; font-size: 1.05rem; letter-spacing: .01em; }
.sec-modal-sub { margin: 0 0 16px; color: var(--muted, #8b93a7); font-size: .82rem; line-height: 1.5; }
.sec-modal .field { margin-bottom: 14px; }
.sec-modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

.sec-warnbox {
  border: 1px solid rgba(255, 90, 90, .42);
  background: rgba(255, 60, 60, .09);
  color: #ffb3b3;
  border-radius: 14px; padding: 13px 14px; font-size: .8rem; line-height: 1.55;
}
.sec-warnbox b { color: #ff8f8f; }
.sec-check { display: flex; gap: 9px; align-items: flex-start; margin-top: 10px; color: #ffd7d7; cursor: pointer; }
.sec-check input { margin-top: 2px; accent-color: var(--citron, #c8f560); }

.btn[disabled] { opacity: .45; cursor: not-allowed; }
.sec-strength {
  display: inline-block; margin-top: 6px; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted, #8b93a7);
}
.sec-strength[data-level="weak"] { color: #ff8f8f; }
.sec-strength[data-level="medium"] { color: #ffb020; }
.sec-strength[data-level="strong"] { color: var(--citron, #c8f560); }