* { box-sizing: border-box }
:root { --bg: rgb(15,15,15); --card: rgb(39,39,39); --card2: rgb(24,24,24); --tx: #F5F3F0; --mut: rgba(245,243,240,.78); --ac: rgb(154,31,31); --ac-h: rgb(178,42,42); --ln: rgba(245,243,240,.14); --warn: #ff9a8a }
html { color-scheme: dark }
body { margin: 0; background: var(--bg); color: var(--tx); padding-bottom: 100px; font: 400 17px/1.5 Montserrat, system-ui, sans-serif; -webkit-font-smoothing: antialiased }
[hidden] { display: none !important }
.top { background: var(--card2); border-bottom: 1px solid var(--ln); padding: 14px 20px }
.top .in { max-width: 640px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 12px }
.top .b { font: 400 18px 'Archivo Black', sans-serif; letter-spacing: .01em }
.top .b i { font-style: normal }
.top .who { font: 700 12px Montserrat; color: var(--mut) }
main { max-width: 640px; margin: 0 auto; padding: 24px 16px }
h1 { font: 800 clamp(34px, 9vw, 52px)/1.02 Montserrat, sans-serif; margin: 0 0 22px }
h2 { font: 800 clamp(28px, 8vw, 40px)/1.05 Montserrat, sans-serif; margin: 0 0 8px }
mark { background: var(--ac); color: var(--tx); padding: 0 .14em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone }
.tag { font: 700 12px Montserrat, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ac-h); margin: 0 0 12px }
.sub { font: 800 20px/1.25 Montserrat; margin: 0 0 14px }
p.t { color: var(--mut); font-size: 16px; line-height: 1.55; margin: 0 0 18px }
.hint { color: var(--mut); font-size: 14px; margin: 0 0 18px }
.card { background: var(--card); border: 1px solid var(--ln); border-radius: 16px; padding: 20px 18px; margin-bottom: 16px }
button { font: 700 15px Montserrat, sans-serif; padding: 10px 16px; border-radius: 4px; border: 1px solid var(--ln); background: transparent; color: var(--tx); cursor: pointer; transition: background .15s, border-color .15s; min-height: 50px }
button:hover { border-color: var(--ac-h) }
button.p { background: var(--ac); border-color: var(--ac); color: #fff }
button.p:hover { background: var(--ac-h) }
button:disabled { opacity: .45; cursor: default }
.auth { display: grid; gap: 10px }
.auth button { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px }
.auth b { display: inline-block; width: 26px; height: 26px; line-height: 26px; border-radius: 6px; color: #fff; font: 400 13px 'Archivo Black', sans-serif }
.auth .ya b { background: #FC3F1D } .auth .vk b { background: #0077FF }
.note { color: var(--mut); font-size: 13px; margin: 14px 0 0; line-height: 1.5 }
.err { color: var(--warn); font-weight: 700; margin-top: 14px; font-size: 14px }
.prog { display: flex; gap: 6px; margin-bottom: 22px; align-items: center }
.prog i { flex: 1; height: 4px; border-radius: 2px; background: var(--ln) }
.prog i.on { background: var(--ac-h) }
.prog span { font: 700 12px Montserrat; color: var(--mut); white-space: nowrap; margin-left: 8px }
.cards { display: grid; gap: 10px; margin-top: 20px }
.opt { text-align: left; width: 100%; display: flex; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--ln); border-radius: 16px; padding: 14px 16px; min-height: 72px; font-weight: 400 }
.opt:hover { border-color: var(--ac-h) }
.opt img { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; flex: none }
.opt .nm { font: 800 17px/1.2 Montserrat }
.opt .tx { font: 500 14px Montserrat; color: var(--mut); margin-top: 3px }
.opt .dot { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ln); flex: none }
.opt.sel { background: var(--ac); border-color: var(--ac) }
.opt.sel .tx { color: rgba(255,255,255,.85) }
.opt.sel .dot { background: #fff; border-color: #fff; box-shadow: inset 0 0 0 5px var(--ac) }
.line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ln) }
.line:last-child { border: 0 }
.line small { display: block; color: var(--mut); font: 600 12px Montserrat }
.line b { font: 800 17px Montserrat }
.line.empty b { color: var(--mut); font-weight: 600 }
.line button { min-height: 0; padding: 6px 2px; border: 0; color: var(--ac-h); font-size: 14px }
.who2 { font: 700 12px Montserrat; letter-spacing: .14em; text-transform: uppercase; color: var(--ac-h); margin-bottom: 10px }
.bar2 { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--card2); border-top: 1px solid var(--ln); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) }
.bar2 div { max-width: 640px; margin: 0 auto; display: flex; gap: 12px }
.bar2 .p { flex: 1 }
body { overflow-wrap: anywhere; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100% }
button { touch-action: manipulation }
.opt:active { transform: scale(.99) }
@media (max-width: 380px) {
  body { font-size: 16px }
  main { padding: 18px 12px }
  .top { padding: 12px 14px }
  .opt { padding: 12px; gap: 10px }
  .opt img { width: 52px; height: 52px }
  .card { padding: 16px 14px }
  .bar2 { padding-left: 12px; padding-right: 12px }
}
@media (min-width: 700px) {
  main { padding-top: 40px }
  .opt:hover { transform: translateY(-1px) }
}
.auth .ic { width: 28px; height: 28px; flex: none }
.legal { display: table; margin: 28px auto 0; padding: 8px 14px; color: rgba(245,243,240,.5); font: 600 12px Montserrat, sans-serif; text-decoration: none; transition: color .15s }
.legal:hover { color: var(--tx) }