/* a1-auth: dark, Inter — the approved mockup 14.11 */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: #0E1116; color: #E8ECF2; font: 400 15px/1.45 Inter, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 440px; margin: 0 auto; min-height: 100vh; padding: max(40px, env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom)); }
.screen { display: flex; flex-direction: column; gap: 14px; }
.screen[hidden] { display: none; }
#s-login, #s-enroll { min-height: calc(100vh - 80px); padding-bottom: 0; }
.brand { display: flex; align-items: center; gap: 10px; color: #C9D1DC; font-weight: 600; }
.logo { width: 36px; height: 36px; border-radius: 10px; background: #7A2C2F; color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.hero { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; min-height: 360px; }
.face { width: 112px; height: 112px; border-radius: 30px; background: #161B23; border: 1px solid #263040; display: flex; align-items: center; justify-content: center; }
h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.muted { color: #9AA5B4; }
.fine { margin: 4px 0 0; font-size: 13px; color: #8592A3; text-align: center; }
.actions { display: flex; flex-direction: column; gap: 12px; }
button { font: inherit; cursor: pointer; }
.primary { height: 56px; border: 0; border-radius: 16px; background: #3B6CF6; color: #fff; font-size: 17px; font-weight: 600; }
.primary:active { background: #2F5BD6; }
.dashed { height: 48px; border-radius: 14px; border: 1px dashed #33405A; background: transparent; color: #C6D5FF; font-weight: 600; }
.danger { height: 52px; border-radius: 14px; border: 1px solid #4A2A2A; background: #1E1414; color: #F0B4B4; font-weight: 600; }
.ghost { height: 44px; border-radius: 12px; border: 1px solid #263040; background: transparent; color: #C9D1DC; }
.err { margin: 0; min-height: 1em; color: #F0B4B4; font-size: 14px; text-align: center; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #8592A3; }
.field input, .search input { height: 46px; border-radius: 12px; background: #161B23; border: 1px solid #263040; color: #E8ECF2; padding: 0 12px; font: inherit; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 14px; font-size: 12px; font-weight: 600; }
.chip.ok { background: #13261B; color: #7FD8A0; }
.search { display: block; }
.search input { width: 100%; }
.sr { position: absolute; left: -9999px; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.row { min-height: 58px; border-radius: 14px; background: #161B23; border: 1px solid #1F2733; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; }
.ini { width: 36px; height: 36px; flex: none; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ini.dev { background: #22304A; color: #C6D5FF; }
.txt { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.txt b { font-weight: 600; }
.txt .muted { font-size: 12px; color: #8592A3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.open { height: 40px; padding: 0 16px; border-radius: 10px; border: 0; background: #22304A; color: #C6D5FF; font-weight: 600; }
.open:disabled { opacity: .6; }
.del { height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: #E8A0A0; }
.cap { margin: 10px 4px 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8592A3; }
.card { border-radius: 14px; background: #161B23; border: 1px solid #1F2733; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.card .muted { font-size: 13px; }
.log { list-style: none; margin: 0; padding: 0 4px; font-size: 13px; color: #9AA5B4; display: flex; flex-direction: column; gap: 4px; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(14,17,22,.92); border-top: 1px solid #1F2733; backdrop-filter: blur(12px); }
.tab { flex: 1; max-width: 200px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: #8592A3; font-weight: 600; }
.tab.on { background: #161B23; color: #E8ECF2; }