/* app.css — «Тихий кабинет». Только токены из tokens.css; радиусы 6/8/12/16/999; веса 400/500/600; без рамок на элементах управления. */

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility}
h1,h2,h3,p,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default;opacity:.5}
a{color:var(--accent);text-decoration:none}
kbd{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ink-2);background:var(--surface-2);border-radius:var(--r-xs);padding:1px 5px;min-width:18px;display:inline-block;text-align:center;line-height:16px}
[hidden]{display:none!important}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:20px;height:20px;flex:none;display:block}
[data-box="yandex"]{--box:var(--box-yandex)}[data-box="twinfo"]{--box:var(--box-twinfo)}[data-box="mailru"]{--box:var(--box-mailru)}
[data-box="twbuh"]{--box:var(--box-twbuh)}[data-box="twstatumen"]{--box:var(--box-twstatumen)}[data-box="other"]{--box:var(--box-other)}
::selection{background:var(--accent-soft)}

/* ---------------------------------------------------------------- каркас */
.boot{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--canvas)}
.boot__text{color:var(--ink-2)}
.app{position:fixed;inset:0;background:var(--canvas)}
.listpane{position:absolute;inset:0;background:var(--canvas);overflow:hidden;will-change:transform}
.letterpane{position:fixed;inset:0;z-index:20;background:var(--surface);transform:translateX(100%);visibility:hidden}
.app[data-view="letter"] .letterpane,.app[data-view="triage"] .letterpane,.letterpane.is-leaving{transform:none;visibility:visible}
.app[data-view="letter"] .listpane{transform:translateX(var(--parallax-shift));opacity:var(--list-dim)}
.app[data-view="triage"] .listpane,.app[data-view="triage"] .tabbar{visibility:hidden}

/* стекло панелей */
.bar{position:absolute;top:0;left:0;right:0;z-index:6;height:calc(var(--bar-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 6px 0;
  display:flex;align-items:center;gap:2px;background:var(--glass-bar);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:0 var(--hair) 0 transparent;transition:box-shadow var(--m-fast) var(--ease-out)}
/* хайрлайн панели — только когда под ней есть прокрученное содержимое (приёмка R1, «вау» 3) */
.listpane.is-scrolled-top .bar,.letterwrap.is-scrolled-top .bar--letter{box-shadow:0 var(--hair) 0 var(--line)}
.bar__title{flex:1;min-width:0;text-align:center;font-size:var(--fs-17);font-weight:var(--fw-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.bar__spacer{flex:1}
.bar__sep{width:var(--hair);height:20px;background:var(--line-strong);margin:0 6px}
.barbtn{width:var(--tap);height:var(--tap);display:grid;place-items:center;border-radius:var(--r-sm);color:var(--ink);flex:none;transition:background var(--m-fast),transform var(--m-instant)}
.barbtn:active{transform:scale(var(--press-scale))}
.barbtn--text{width:auto;padding:0 10px;font-size:var(--fs-15);font-weight:var(--fw-m);color:var(--ink)}
.barbtn--back{width:auto;padding:0 10px 0 2px;display:flex;align-items:center;gap:2px;font-size:var(--fs-15);font-weight:var(--fw-m);max-width:60%}
.barbtn--back span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barbtn--back .ico{width:22px;height:22px}
.subbar{position:absolute;top:calc(var(--bar-h) + env(safe-area-inset-top));left:0;right:0;z-index:6;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:0 var(--hair) 0 var(--line)}
.loadbar{position:absolute;left:0;right:0;top:calc(var(--bar-h) + env(safe-area-inset-top));height:2px;z-index:7;overflow:hidden;opacity:0;transition:opacity var(--m-fast) var(--m-fast)}
.loadbar::before{content:"";position:absolute;inset:0;width:40%;background:var(--accent);border-radius:var(--r-pill);animation:loadbar 1.1s var(--ease-inout) infinite}
.loadbar.is-on{opacity:.9;transition-delay:150ms}
.boot .loadbar{position:relative;top:auto;width:160px;opacity:.9}
@keyframes loadbar{from{transform:translateX(-100%)}to{transform:translateX(250%)}}

/* сегмент «Важное · Остальное» — текстовые вкладки, без пилюль */
.seg{flex:1;display:flex;justify-content:center;gap:22px;height:100%}
.seg__tab{position:relative;height:100%;font-size:var(--fs-15);font-weight:var(--fw-m);color:var(--ink-3);transition:color var(--m-fast)}
.seg__tab.is-on{color:var(--ink)}
.seg__tab.is-on::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:2px;border-radius:var(--r-pill);background:var(--accent)}

/* ---------------------------------------------------------------- лента */
.listwrap{position:absolute;inset:0}
.scroller{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
  padding-top:calc(var(--bar-h) + env(safe-area-inset-top));padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom) + 24px);scrollbar-width:thin}
.listpane.searching .scroller{padding-top:calc(var(--bar-h) + 44px + env(safe-area-inset-top))}
.rows{position:relative}
.row{position:relative;height:var(--row-h-touch);overflow:hidden;contain:layout paint style;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:default;touch-action:pan-y}
.row--hidden{display:none}
.row__fg{position:relative;z-index:1;height:100%;display:flex;align-items:center;padding-right:16px;background:var(--canvas)}
.row__fg::before{content:"";position:absolute;inset:2px 6px;border-radius:var(--r-sm);background:transparent;transition:background var(--m-fast)}
.row::after{content:"";position:absolute;left:var(--gutter);right:0;bottom:0;height:1px;transform:scaleY(.5);transform-origin:bottom;background:var(--line);z-index:2;pointer-events:none}
.row--open::after,.row--cursor::after,.row--sel::after,.row:has(+ .row--open)::after,.row:has(+ .row--cursor)::after,.row:has(+ .row--sel)::after{opacity:0}
.row--open .row__fg::before,.row--cursor .row__fg::before,.row--sel .row__fg::before{background:var(--selected)}
@media (hover:hover){.row:hover .row__fg::before{background:var(--hover)}.row--open:hover .row__fg::before,.row--sel:hover .row__fg::before{background:var(--selected)}}
.row__gut{position:relative;width:var(--gutter);height:100%;flex:none;display:grid;place-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:var(--dot);transform:scale(0);transition:transform var(--m-fast) var(--ease-out)}
.row--unread .dot{transform:none}
.check{position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong);display:none;place-items:center;color:var(--accent-ink);left:2px}
.check .ico{width:12px;height:12px;opacity:0}
.selecting .check{display:grid}.selecting .dot{display:none}
.row--sel .check{background:var(--accent);box-shadow:none}.row--sel .check .ico{opacity:1}
.selecting .row__gut{width:32px}
.row__main{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
.row__l1,.row__l2{display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap}
.row__from{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-15);font-weight:var(--fw-r);color:var(--ink-2)}
.row--unread .row__from{font-weight:var(--fw-s);color:var(--ink)}
.row__meta{flex:none;display:flex;align-items:center;gap:6px;font-size:var(--fs-13);color:var(--ink-3);align-self:center}
.row--unread .row__meta{color:var(--ink-2)}   /* время непрочитанного — единственное число, которое сканируют (≈5:1 вместо 2.4:1) */
.row__time{font-feature-settings:"tnum" 1}
.bdot{width:6px;height:6px;border-radius:50%;background:var(--box);flex:none}
.row__clip .ico{width:14px;height:14px}
.row__meta .row__clip{order:2}
.row__subj{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-15);color:var(--ink)}
.row--unread .row__subj{font-weight:var(--fw-m)}
.row__prev{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-13);color:var(--ink-2)}
.row__prev:not([hidden])::before{content:"  "}
.row__badge{margin-left:auto;padding-left:6px;flex:none;font-size:var(--fs-11);font-weight:var(--fw-m);color:var(--ink-2)}
.row--done:not(.row--unread) .row__subj{color:var(--ink-2)}
.hl{background:none;color:var(--accent);font-weight:var(--fw-m)}

/* свайпы */
.row__act{position:absolute;inset:0;z-index:0;display:flex;align-items:stretch;color:#fff}
.row__act--r{background:var(--tone);justify-content:flex-start;visibility:hidden}
.row__act--l{background:var(--tone);justify-content:flex-end;visibility:hidden}
.row--sw-r .row__act--r,.row--sw-l .row__act--l{visibility:visible}
[data-tone="hk"],[data-tone="read"],[data-tone="take"]{--tone:var(--accent)}
[data-tone="later"]{--tone:var(--warn)}[data-tone="archive"]{--tone:var(--ok)}[data-tone="trash"]{--tone:var(--danger)}
.act{width:var(--swipe-reveal);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:var(--fs-11);font-weight:var(--fw-m);color:#fff;background:var(--tone);flex:none;transition:width var(--m-base) var(--ease-out)}
.row__act--r .act{width:auto;padding-left:22px;align-items:flex-start;opacity:.7;transition:opacity var(--m-fast)}
.row--armed .row__act--r .act{opacity:1}
.act .ico{width:22px;height:22px}
.row--full .row__act--l .act:not(:last-child){width:0;overflow:hidden;padding:0}
.row--full .row__act--l .act:last-child{width:100%;align-items:flex-end;padding-right:22px}
.row--swiping .row__fg::before{background:transparent}
.row--swiping .row__fg{box-shadow:-1px 0 0 var(--line-strong),-12px 0 24px rgba(0,0,0,.10)}
/* отклик нажатия (приёмка R1, «вау» 2): подложка появляется за --m-instant, снимается на отпускание/сдвиг >6 px */
.row--press .row__fg::before{background:var(--hover);transition-duration:var(--m-instant)}
.row--press.row--open .row__fg::before,.row--press.row--sel .row__fg::before{background:var(--selected)}

/* подсказка над лентой */
.prompt-slot{display:none}
.prompt-slot--on{display:flex;align-items:center;height:36px;padding:0 16px 0 var(--gutter)}
.prompt{display:inline-flex;align-items:center;gap:4px;height:36px;font-size:var(--fs-15);font-weight:var(--fw-m);color:var(--ink-2);border-radius:var(--r-sm);transition:color var(--m-fast)}
.prompt .ico{width:16px;height:16px}
.prompt--accent{color:var(--ink-2)}   /* приедание: акцент — только на шевроне */
.prompt--accent .ico{color:var(--accent)}
.prompt--on{color:var(--accent)}
.prompt__n{font-feature-settings:"tnum" 1}
.list-tools{flex:none;display:flex;align-items:center;padding-left:8px}
.list-tools .prompt{height:32px;padding:0 4px;font-size:var(--fs-13)}

/* конец списка, «Ранее», нулевой входящий */
.list-end{padding:32px 20px 16px;text-align:center}
.end__text{font-size:var(--fs-13);color:var(--ink-3)}
.end__text--err{color:var(--danger);margin-bottom:8px}
.older{display:inline-flex;align-items:center;gap:6px;margin-top:12px;height:36px;padding:0 12px;border-radius:var(--r-pill);font-size:var(--fs-13);font-weight:var(--fw-m);color:var(--ink-2);transition:background var(--m-fast)}
.older .ico{width:14px;height:14px}
.older__n{color:var(--ink-3)}
@media (hover:hover){.older:hover{background:var(--hover)}}
.list-end--zero{padding-top:0}
.zero{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:max(48px,calc(40vh - var(--bar-h) - 64px));padding-bottom:24px}
.zero__check{width:24px;height:24px;fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.zero__title{font-size:var(--fs-17);font-weight:var(--fw-m);color:var(--ink)}
.zero__title--quiet{font-size:var(--fs-15);font-weight:var(--fw-r);color:var(--ink-2)}
.zero__sub{font-size:var(--fs-13);color:var(--ink-2)}
.zero--search{padding-top:48px}
.zero--triage{padding-top:max(64px,calc(40vh - 80px))}
.zero__done{margin-top:20px}
.search-foot{padding-top:16px;display:flex;flex-direction:column;align-items:center;gap:8px}
.newcap{position:absolute;z-index:7;top:calc(var(--bar-h) + env(safe-area-inset-top) + 10px);left:50%;transform:translateX(-50%);height:30px;padding:0 14px;border-radius:var(--r-pill);
  background:var(--surface);box-shadow:var(--shadow-2);font-size:var(--fs-13);font-weight:var(--fw-m);color:var(--accent)}
.sentinel{height:1px}

/* потянуть вниз */
.ptr{position:absolute;z-index:5;left:50%;top:calc(var(--bar-h) + env(safe-area-inset-top) - 30px);margin-left:-14px;width:28px;height:28px;opacity:0;pointer-events:none}
.ptr__svg{width:28px;height:28px;display:block}
.ptr__arc{fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center}
.ptr--spin .ptr__svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- нижняя панель (iPhone) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:8;height:calc(var(--bar-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:var(--glass-bar);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:0 calc(-1 * var(--hair)) 0 transparent;transition:box-shadow var(--m-fast) var(--ease-out)}
.app.is-scrolled-bottom .tabbar{box-shadow:0 calc(-1 * var(--hair)) 0 var(--line)}
.tab{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--fs-11);font-weight:var(--fw-m);color:var(--ink-3);transition:color var(--m-fast)}
.tab .ico{width:22px;height:22px}
.tab.is-on{color:var(--ink)}
.tab__compose{width:var(--tap);height:var(--tap);border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);margin:0 24px;transition:transform var(--m-instant),background var(--m-fast)}
.tab__compose:active{transform:scale(var(--press-scale));background:var(--accent-press)}

/* ---------------------------------------------------------------- ящики (шторка / колонка) */
.nav{position:fixed;z-index:30;top:0;bottom:0;left:0;width:min(300px,84vw);background:var(--canvas);display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 6px) 8px calc(env(safe-area-inset-bottom) + 8px);transform:translateX(-102%);transition:transform var(--m-base) var(--ease-out);box-shadow:var(--shadow-3);overflow-y:auto}
.app.drawer-open .nav{transform:none}
.scrim{position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.24)}
.nav__brand{display:flex;align-items:center;gap:10px;height:var(--bar-h);padding:0 4px 0 10px}
.brandmark{width:24px;height:24px;border-radius:var(--r-xs);background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
.brandmark .ico{width:15px;height:15px}
.nav__brandname{font-size:var(--fs-15);font-weight:var(--fw-s)}
.nav__list{display:flex;flex-direction:column;gap:1px;padding:4px 0}
.nav__boxes{margin-top:12px}
.nav__sec{font-size:var(--fs-13);color:var(--ink-3);padding:6px 12px 4px}
.nav__item{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:0 12px;border-radius:var(--r-sm);font-size:var(--fs-15);font-weight:var(--fw-m);color:var(--ink);text-align:left;transition:background var(--m-fast)}
.nav__item .nav__ico{width:18px;height:18px;color:var(--ink-2)}
.nav__item.is-on{background:var(--selected)}
.nav__item.is-on .nav__ico{color:var(--accent)}
@media (hover:hover){.nav__item:not(.is-on):hover{background:var(--hover)}}
.nav__dot{width:8px;height:8px;border-radius:50%;background:var(--box);margin:0 5px;flex:none}
.nav__label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav__count{font-size:var(--fs-13);font-weight:var(--fw-r);color:var(--ink-2)}
.nav__new{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;margin-right:4px}
.nav__warn{font-size:var(--fs-13);color:var(--warn);padding:8px 12px}
.nav__foot{margin-top:auto;display:flex;align-items:center;gap:2px;padding:8px 0 0 12px}
.nav__who{font-size:var(--fs-13);color:var(--ink-2)}
.nav__foot .barbtn{width:36px;height:36px;color:var(--ink-2)}
.nav__foot .ico,.nav__brand .barbtn .ico{width:18px;height:18px}

/* ---------------------------------------------------------------- поиск */
.search{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:var(--field-h);padding:0 10px;margin:0 4px;border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink-3);cursor:text}
.search__ico{width:16px;height:16px}
.search__input{flex:1;min-width:0;height:100%;border:0;background:transparent;font-size:var(--fs-15);color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.search__input::placeholder{color:var(--ink-3)}
.search__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search__kbd{flex:none}
.bar--search .search{margin-left:8px}
.chips{display:flex;gap:8px;padding:6px 16px 8px;overflow-x:auto;scrollbar-width:none;height:44px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 12px;border-radius:var(--r-pill);background:var(--surface-2);font-size:var(--fs-13);font-weight:var(--fw-m);color:var(--ink-2);white-space:nowrap;flex:none;transition:background var(--m-fast),color var(--m-fast)}
.chip .ico{width:14px;height:14px}
.chip--on{background:var(--accent-soft);color:var(--accent)}

/* ---------------------------------------------------------------- письмо */
.letterwrap{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--surface)}
.bar--letter{position:relative;flex:none;background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;padding-right:8px}
.letter-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.letter{max-width:calc(var(--measure) + 2 * var(--sp-4));padding:0 var(--sp-4)}
.letter-empty{height:60vh;display:grid;place-items:center;color:var(--ink-3);font-size:var(--fs-15)}
.letter__subj{font-size:var(--fs-22);font-weight:var(--fw-s);line-height:var(--lh-tight);letter-spacing:-.015em;margin-top:var(--sp-4);overflow-wrap:anywhere;width:fit-content;max-width:100%}
.letter__meta{display:flex;align-items:center;gap:12px;padding-top:14px}
.mono-av{width:32px;height:32px;border-radius:50%;background:var(--box);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:var(--fw-s);flex:none;letter-spacing:.02em}
.letter__who{flex:1;min-width:0}
.letter__line{display:flex;align-items:baseline;gap:6px;white-space:nowrap;overflow:hidden;min-width:0}
.letter__name{font-size:var(--fs-15);font-weight:var(--fw-m);flex:none;max-width:70%;overflow:hidden;text-overflow:ellipsis}
.letter__addr{font-size:var(--fs-13);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;min-width:0}
.letter__line--2{font-size:var(--fs-13);color:var(--ink-3);gap:0}
.letter__line--2>*{overflow:hidden;text-overflow:ellipsis}
.letter__rcpt{min-width:0}
.letter__fmt{align-self:flex-start;margin-top:2px;flex:none}
.letter__state{font-size:var(--fs-13);color:var(--ink-2);padding-top:10px}
.atts{display:flex;gap:8px;overflow-x:auto;padding:16px var(--sp-4) 2px;margin:0 calc(-1 * var(--sp-4));scrollbar-width:none}
.att{display:flex;align-items:center;gap:10px;height:36px;padding-right:12px;border-radius:var(--r-sm);background:var(--surface-2);flex:none;max-width:260px;text-align:left;transition:background var(--m-fast),transform var(--m-instant)}
.att:active{transform:scale(var(--press-scale))}
@media (hover:hover){.att:hover{background:var(--surface-3)}}
.att__ext{width:36px;height:36px;border-radius:var(--r-sm);background:var(--surface-3);display:grid;place-items:center;font-size:var(--fs-11);font-weight:var(--fw-m);color:var(--ink-2);flex:none;text-transform:lowercase}
.att__ext--big{width:64px;height:64px;font-size:var(--fs-15);border-radius:var(--r-md)}
.att__text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.att__name{font-size:var(--fs-13);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att__size{font-size:var(--fs-11);color:var(--ink-3)}
.letter__body{padding-top:20px;position:relative}
.letter__text{font-size:var(--fs-16);line-height:var(--lh-read);max-width:var(--measure);overflow-wrap:anywhere;color:var(--ink)}
.letter__text p{white-space:pre-wrap}
.letter__text p+p{margin-top:.9em}
.letter__text a{text-decoration:underline;text-decoration-color:var(--accent-soft);text-underline-offset:2px}
.letter__nothing{color:var(--ink-3)}
.quote__toggle{margin-top:14px;height:28px;padding:0 10px;border-radius:var(--r-pill);background:var(--surface-2);font-size:var(--fs-13);color:var(--ink-2)}
.quote{margin-top:10px;padding-left:12px;box-shadow:inset 2px 0 0 var(--line-strong);color:var(--ink-2);white-space:pre-wrap;font-size:var(--fs-15);line-height:1.5;overflow-wrap:anywhere}
.letter__frame{display:block;width:calc(100% + 2 * var(--sp-4));margin:0 calc(-1 * var(--sp-4));height:calc(100dvh - var(--bar-h) - env(safe-area-inset-top) - 24px);border:0;background:#fff}
.letter__frame.is-loading{position:absolute;opacity:0;pointer-events:none;height:10px}
.body-wait{min-height:120px}
.body-wait--center{min-height:50vh}
.body-err{padding:12px 0;color:var(--ink-2);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.letter-tail{height:24px}
.compose-slot:empty{display:none}
.linkbtn{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-13);font-weight:var(--fw-m);color:var(--accent);padding:4px 0;border-radius:var(--r-xs)}
.linkbtn .ico{width:16px;height:16px}
.linkbtn--small{font-size:var(--fs-13);font-weight:var(--fw-r)}

/* действия внизу письма (iPhone) */
.dock{position:absolute;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
.dock>*{pointer-events:auto}
.dock__left{display:flex;gap:10px}
.dock__round{width:var(--tap);height:var(--tap);border-radius:50%;display:grid;place-items:center;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--shadow-2);color:var(--ink);transition:transform var(--m-instant)}
.dock__round:active{transform:scale(var(--press-scale))}
.dock__round--on{color:var(--accent)}
.dock__reply{height:var(--tap);padding:0 20px 0 16px;box-shadow:var(--shadow-2)}
.dock--triage{left:0;right:0;bottom:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:0 calc(-1 * var(--hair)) 0 var(--line)}
.tri-act{height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:var(--r-md);font-size:var(--fs-11);font-weight:var(--fw-m);color:var(--ink);transition:background var(--m-fast),transform var(--m-instant)}
.tri-act .ico{width:22px;height:22px}
.tri-act:first-child{color:var(--accent)}
.tri-act:active{transform:scale(var(--press-scale));background:var(--hover)}
@media (hover:hover){.tri-act:hover{background:var(--hover)}}
.tri-act kbd{margin-top:1px}
.tri-progress{flex:none;height:2px;background:var(--line);position:relative;overflow:hidden}
.tri-progress__fill{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform var(--m-slow) var(--ease-out)}

/* пилюли */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border-radius:var(--r-pill);font-size:var(--fs-15);font-weight:var(--fw-m);white-space:nowrap;transition:transform var(--m-instant),background var(--m-fast)}
.pill .ico{width:18px;height:18px}
.pill:active{transform:scale(var(--press-scale))}
.pill--primary{background:var(--accent);color:var(--accent-ink)}
.pill--primary:active{background:var(--accent-press)}
.pill--quiet{background:var(--surface-2);color:var(--ink)}
@media (hover:hover){.pill--quiet:hover{background:var(--surface-3)}}
.pill__kbd{background:rgba(255,255,255,.18);color:inherit;font-size:11px}

/* ---------------------------------------------------------------- редактор */
.compose{display:flex;flex-direction:column;background:var(--surface);min-height:0}
.compose--sheet{height:100%}
.compose--inline{margin:8px var(--sp-4) 24px;max-width:calc(var(--measure) + 64px);border-radius:var(--r-md);box-shadow:var(--shadow-2)}
.cf__head{display:flex;align-items:center;gap:8px;height:var(--bar-h);padding:0 6px 0 16px;flex:none}
.cf__head--sheet{padding:0 8px;box-shadow:0 var(--hair) 0 var(--line)}
.cf__head--sheet .cf__title{flex:1;text-align:center;font-size:var(--fs-17)}
.cf__title{font-size:var(--fs-15);font-weight:var(--fw-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.compose--inline .cf__head{box-shadow:0 var(--hair) 0 var(--line)}
.compose--inline .barbtn{width:36px;height:36px}
.cf__fields{flex:none}
.cf{display:flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 16px;box-shadow:inset 0 calc(-1 * var(--hair)) 0 var(--line);position:relative}
.cf__label{flex:none;font-size:var(--fs-15);color:var(--ink-2);min-width:52px}
.cf__input{flex:1;min-width:0;height:var(--tap);border:0;background:transparent;font-size:var(--fs-15);color:var(--ink);outline:none}
.cf__plus{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--ink-2)}
.cf__plus .ico{width:18px;height:18px}
.cf__from{flex:1;display:flex;align-items:center;gap:8px;height:var(--tap);font-size:var(--fs-15);text-align:left;min-width:0}
.cf__from span:not(.bdot){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf__from .ico{width:16px;height:16px;color:var(--ink-3)}
.cf__editor{flex:1;min-height:0;overflow-y:auto;padding:0 0 12px}
.cf__text{display:block;width:100%;min-height:200px;border:0;background:transparent;resize:none;outline:none;padding:14px 16px;font-size:var(--fs-16);line-height:1.5;color:var(--ink)}
.compose--inline .cf__text{min-height:140px}
.cf__text::placeholder{color:var(--ink-3)}
.cf__sig{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:0 16px}
.cf__sigbtn{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-13);color:var(--ink-2);height:28px}
.cf__sigbtn .ico{width:14px;height:14px;transition:transform var(--m-fast)}
.cf__sigbtn.is-open .ico{transform:rotate(90deg)}
.cf__sigtext{flex-basis:100%;white-space:pre-wrap;font-size:var(--fs-13);color:var(--ink-2);padding:2px 0 6px}
.cf__quote{padding:4px 16px 0}
.quote--compose{max-height:240px;overflow:auto;font-size:var(--fs-13)}
.cf__note{padding:8px 16px 0;font-size:var(--fs-13);color:var(--ink-2)}
.cf__files{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px 0}
.fchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 4px 0 12px;border-radius:var(--r-pill);background:var(--surface-2);font-size:var(--fs-13);max-width:100%}
.fchip__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.fchip__size{font-size:var(--fs-11);color:var(--ink-3)}
.fchip__x{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;color:var(--ink-2)}
.fchip__x .ico{width:14px;height:14px}
.cf__error{margin:10px 16px 0;font-size:var(--fs-13);color:var(--danger)}
.cf__error--info{color:var(--ink-2)}
.cf__tools{flex:none;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px calc(env(safe-area-inset-bottom));box-shadow:0 calc(-1 * var(--hair)) 0 var(--line);background:var(--surface)}
.compose--inline .cf__tools{padding-bottom:0;border-radius:0 0 var(--r-md) var(--r-md)}
.tool{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;border-radius:var(--r-sm);font-size:var(--fs-13);font-weight:var(--fw-m);color:var(--ink-2);transition:background var(--m-fast)}
.tool .ico{width:18px;height:18px}
@media (hover:hover){.tool:hover{background:var(--hover)}}
.sugg{position:relative;z-index:3;background:var(--surface);box-shadow:var(--shadow-2);border-radius:var(--r-sm);margin:0 12px;padding:4px;display:flex;flex-direction:column}
.sugg__item{display:flex;flex-direction:column;align-items:flex-start;padding:6px 10px;border-radius:var(--r-xs);text-align:left}
.sugg__item.is-on,.sugg__item:hover{background:var(--selected)}
.sugg__name{font-size:var(--fs-15)}
.sugg__addr{font-size:var(--fs-13);color:var(--ink-2)}

/* ---------------------------------------------------------------- слои: листы, меню, палитра */
.layer{position:fixed;inset:0;z-index:60}
.layer--sheet{background:rgba(0,0,0,.28);display:flex;align-items:flex-end;justify-content:center}
.layer--pop{background:transparent}
.layer--float{background:rgba(0,0,0,.16);display:flex;justify-content:center;align-items:flex-start;padding-top:14vh}
.menu--sheet{width:100%;max-width:520px;background:var(--surface);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:0 8px calc(8px + env(safe-area-inset-bottom));box-shadow:var(--shadow-3)}
.menu--pop{position:fixed;min-width:240px;max-width:340px;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow-3);padding:6px;transform-origin:top right}
.menu__title{font-size:var(--fs-13);color:var(--ink-2);padding:4px 12px 8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu--pop .menu__title{text-align:left;padding:6px 10px 4px}
.menu__items{display:flex;flex-direction:column}
.menu__item{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 12px;border-radius:var(--r-sm);font-size:var(--fs-16);text-align:left;color:var(--ink);transition:background var(--m-fast)}
.menu--pop .menu__item{min-height:36px;font-size:var(--fs-15);padding:0 10px}
.menu__item:focus-visible{outline:none;background:var(--selected)}
@media (hover:hover){.menu__item:hover{background:var(--hover)}}
.menu__ico{width:20px;height:20px;color:var(--ink-2)}
.menu--pop .menu__ico{width:18px;height:18px}
.menu__label{flex:1;min-width:0}
.menu__hint{font-size:var(--fs-13);color:var(--ink-3);font-feature-settings:"tnum" 1}
.menu__item--danger,.menu__item--danger .menu__ico{color:var(--danger)}
.menu__sep{height:1px;transform:scaleY(.5);background:var(--line-strong);margin:4px 12px}
.menu__cancel{width:100%;height:50px;margin-top:8px;border-radius:var(--r-md);background:var(--surface-2);font-size:var(--fs-16);font-weight:var(--fw-m)}
.sheet__grab{width:36px;height:5px;border-radius:var(--r-pill);background:var(--line-strong);margin:8px auto 6px}
.sheet{width:100%;max-width:560px;max-height:92dvh;overflow-y:auto;background:var(--surface);border-radius:var(--r-lg) var(--r-lg) 0 0;padding-bottom:env(safe-area-inset-bottom);box-shadow:var(--shadow-3)}
.sheet--full{max-width:none;height:calc(100dvh - env(safe-area-inset-top) - 10px);max-height:none;overflow:hidden;display:flex;flex-direction:column}
.sheet__title{font-size:var(--fs-17);font-weight:var(--fw-s)}
.sheet__sub{font-size:var(--fs-13);color:var(--ink-2);margin-top:12px}
.sheet__hint{font-size:var(--fs-13);color:var(--ink-2)}
.form-sheet{display:flex;flex-direction:column;gap:12px;padding:4px 20px 20px}
.form-sheet__acts{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.field__input{width:100%;height:var(--field-h-touch);border:0;border-radius:var(--r-sm);background:var(--surface-2);padding:0 12px;font-size:var(--fs-16);color:var(--ink);outline:none}
.field__input--area{height:auto;padding:10px 12px;resize:none;line-height:1.4}
.field__input:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.switch-row{display:flex;align-items:center;justify-content:space-between;min-height:var(--tap);font-size:var(--fs-15)}
.switch{appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:var(--r-pill);background:var(--surface-3);position:relative;margin:0;flex:none;cursor:pointer;transition:background var(--m-fast)}
.switch::before{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform var(--m-base) var(--spring)}
.switch:checked{background:var(--accent)}
.switch:checked::before{transform:translateX(18px)}
.radios{display:flex;flex-direction:column}
.radio{display:flex;align-items:center;gap:12px;min-height:var(--tap);font-size:var(--fs-15);text-align:left}
.radio__mark{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong);flex:none;transition:box-shadow var(--m-fast)}
.radio.is-on .radio__mark{box-shadow:inset 0 0 0 6px var(--accent)}
.devices{display:flex;flex-direction:column}
.devices__item{display:flex;justify-content:space-between;align-items:center;min-height:40px;font-size:var(--fs-15)}

/* просмотр вложений */
.viewer{display:flex;flex-direction:column;height:100%;min-height:0}
.viewer__bar{flex:none;display:flex;align-items:center;gap:8px;height:56px;padding:0 10px 0 6px;box-shadow:0 var(--hair) 0 var(--line)}
.viewer__title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.viewer__name{font-size:var(--fs-15);font-weight:var(--fw-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer__size{font-size:var(--fs-11);color:var(--ink-3)}
.viewer__acts{display:flex;gap:6px}
.viewer__acts .pill{height:32px;padding:0 12px;font-size:var(--fs-13)}
.viewer__body{flex:1;min-height:0;background:var(--surface-2);display:flex}
.viewer__frame{flex:1;width:100%;height:100%;border:0;background:var(--surface-2)}
.viewer__none{margin:auto;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--ink-2);font-size:var(--fs-15);padding:24px;text-align:center}

/* палитра */
.pal{width:min(560px,94vw);max-height:420px;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-md);background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--shadow-3)}
.pal__field{flex:none;display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;box-shadow:0 var(--hair) 0 var(--line)}
.pal__ico{width:18px;height:18px;color:var(--ink-3)}
.pal__input{flex:1;height:44px;border:0;background:transparent;outline:none;font-size:var(--fs-17);color:var(--ink)}
.pal__input::placeholder{color:var(--ink-3)}
.pal__list{overflow-y:auto;padding:6px}
.pal__sec{font-size:var(--fs-13);color:var(--ink-3);padding:10px 10px 4px}
.pal__row{display:flex;align-items:center;gap:12px;height:38px;padding:0 10px;border-radius:var(--r-sm);font-size:var(--fs-15);cursor:pointer}
.pal__row.is-on{background:var(--selected)}
.pal__rico{width:18px;height:18px;color:var(--ink-2);flex:none}
.pal__title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal__key{font-size:var(--fs-13);color:var(--ink-3)}
.pal__none{padding:16px 10px;color:var(--ink-2);font-size:var(--fs-15)}

/* справка */
.help{padding:8px 24px 24px}
.help__head{display:flex;align-items:baseline;gap:12px;padding-bottom:12px}
.help__title{font-size:var(--fs-17);font-weight:var(--fw-s)}
.help__sub{font-size:var(--fs-13);color:var(--ink-3)}
.help__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 32px}
.help__gt{font-size:var(--fs-13);font-weight:var(--fw-r);color:var(--ink-3);padding:8px 0 4px}
.help__list{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;font-size:var(--fs-15)}
.help__list dd{display:flex;gap:4px;justify-content:flex-end}
.help__close{margin-top:16px}

/* плашка */
.toast{position:fixed;z-index:55;left:50%;bottom:calc(var(--bar-h) + env(safe-area-inset-bottom) + 12px);transform:translateX(-50%);display:flex;align-items:center;gap:12px;
  min-width:min(300px,calc(100vw - 32px));max-width:calc(100vw - 32px);height:var(--tap);padding:0 6px 0 16px;border-radius:var(--r-md);
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--shadow-3);font-size:var(--fs-15);font-weight:var(--fw-m);overflow:hidden}
.toast__text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast__btn{height:34px;padding:0 12px;border-radius:var(--r-sm);color:var(--accent);font-weight:var(--fw-s);flex:none}
.toast__btn--2{color:var(--ink-2);font-weight:var(--fw-m);padding:0 8px}
.toast--two{gap:0}.toast--two .toast__text{margin-right:4px}.toast--two .toast__btn{padding:0 8px}
@media (hover:hover){.toast__btn:hover{background:var(--accent-soft)}}
.toast__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform-origin:left;opacity:.7}
.toast--error .toast__text{color:var(--danger)}
.bar__title--left{flex:none;text-align:left;padding-left:4px}
.bar--letter .bar__title{position:absolute;left:96px;right:96px;pointer-events:none}
.app[data-view="letter"]~.toast,.composing .toast{bottom:calc(76px + env(safe-area-inset-bottom))}

/* связь, простой */
.offline{position:fixed;z-index:9;top:calc(var(--bar-h) + env(safe-area-inset-top));left:0;right:0;height:28px;display:grid;place-items:center;background:var(--surface-2);font-size:var(--fs-13);color:var(--ink-2)}
.app.idle .listpane::after,.app.idle .letterpane::after{content:"";position:absolute;inset:0;z-index:40;background:var(--dim);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.app.idle .listpane::before{content:"Нажмите любую клавишу";position:absolute;z-index:41;left:0;right:0;top:45%;text-align:center;font-size:var(--fs-15);color:var(--ink-2)}
@media (hover:none) and (pointer:coarse){.app.idle .listpane::before{content:"Коснитесь экрана"}}

/* ---------------------------------------------------------------- ПК: список + письмо */
@media (min-width:768px){
  .app{display:grid;grid-template-columns:320px 1fr}
  .listpane{position:relative;inset:auto;box-shadow:var(--hair) 0 0 var(--line);z-index:2;transform:none!important;opacity:1!important}
  .letterpane{position:relative;inset:auto;transform:none;visibility:visible;z-index:1}
  .tabbar{display:none}
  .row{height:var(--row-h)}
  .scroller{padding-bottom:24px}
  .bar--list{padding:0 10px 0 6px;background:var(--canvas);-webkit-backdrop-filter:none;backdrop-filter:none}
  .bar--list .search{margin:0}
  .bar--letter{padding:0 12px 0 16px;gap:0}
  .bar--letter .barbtn{width:36px;height:36px;color:var(--ink-2)}
  @media (hover:hover){.barbtn:hover{background:var(--hover);color:var(--ink)}}
  .letter{padding:0 var(--sp-6);max-width:calc(var(--measure) + 2 * var(--sp-6))}
  .letter__subj{margin-top:var(--sp-6)}
  .atts{padding:16px var(--sp-6) 2px;margin:0 calc(-1 * var(--sp-6))}
  .letter__frame{width:100%;margin:0;height:calc(100vh - var(--bar-h) - 32px);border-radius:var(--r-sm)}
  .compose--inline{margin:8px var(--sp-6) 24px}
  .letter-scroll{padding-bottom:24px}
  .toast{bottom:24px}
  .layer--sheet{align-items:center}
  .sheet{border-radius:var(--r-lg);width:min(560px,92vw)}
  .sheet--full{width:min(960px,92vw);height:88vh}
  .menu--sheet{border-radius:var(--r-lg);margin-bottom:0}
  .app[data-view="triage"]{grid-template-columns:1fr}
  .app[data-view="triage"] .listpane,.app[data-view="triage"] .nav{display:none}
  .app[data-view="triage"] .letterpane{background:var(--surface)}
  .app[data-view="triage"] .letter-scroll{padding-bottom:110px}
  .app[data-view="triage"] .letter{margin:0 auto}
  .dock--triage{left:50%;right:auto;bottom:24px;transform:translateX(-50%);width:min(560px,90%);border-radius:var(--r-lg);box-shadow:var(--shadow-3);padding:6px}
  .dock--triage .tri-act{flex-direction:row;gap:8px;font-size:var(--fs-13);height:44px}
  .dock--triage .tri-act .ico{width:18px;height:18px}
  .app.idle .listpane::before{top:40%}
}
@media (min-width:1100px){
  .app{grid-template-columns:var(--col-boxes) var(--col-list) 1fr}
  .nav{position:relative;inset:auto;width:auto;transform:none;box-shadow:var(--hair) 0 0 var(--line);z-index:3;transition:none;padding:0 10px 12px;background:var(--canvas)}
  .nav__item{min-height:34px;padding:0 10px}
  .nav__brand{padding:0 2px 0 10px}
  .scrim{display:none}
}
@media (max-width:767px){
  .letter__frame{height:calc(100dvh - var(--bar-h) - env(safe-area-inset-top) - 8px)}
  /* iPhone: в просмотре вложения имя файла важнее подписей — кнопки круглые, только иконки (aria-label на месте) */
  .viewer__acts .pill{width:36px;height:36px;padding:0;border-radius:50%}
  .viewer__acts .pill span{display:none}
}
/* нет размытия — панели и слои непрозрачные (иначе текст ленты просвечивает) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .bar,.tabbar,.toast,.pal,.dock__round,.dock--triage{background:var(--canvas)}
}
/* перелёт темы из строки в заголовок (WAAPI, app.js flySubject) — шрифт как у .letter__subj */
.subj-fly{position:fixed;z-index:26;pointer-events:none;transform-origin:0 0;font-size:var(--fs-22);font-weight:var(--fw-s);line-height:var(--lh-tight);
  letter-spacing:-.015em;color:var(--ink);overflow-wrap:anywhere;will-change:transform,opacity}
/* View Transition открытия письма — только по localStorage wm_vt='1' (замер: VT хуже WAAPI по кадрам, см. app.js).
   Именуется одна тема (subj); корень живой — внутри него идёт тот же WAAPI-въезд панели. */
::view-transition-group(*){animation-duration:var(--m-slow);animation-timing-function:var(--ease-out)}
::view-transition-old(*),::view-transition-new(*){animation-duration:var(--m-slow);animation-timing-function:var(--ease-out)}
::view-transition-old(subj){animation-duration:var(--m-fast)}
::view-transition-old(root){display:none}
::view-transition-new(root){animation:none}
@keyframes vt-list-dim{to{opacity:var(--list-dim)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@media (prefers-color-scheme:dark){
  .switch::before{background:#E8E8EA}
  .layer--sheet{background:rgba(0,0,0,.5)}
}

/* ---------------------------------------------------------------- вход и настройка кода */
.page-center{display:flex;align-items:center;justify-content:center;min-height:100%;overflow:auto;background:var(--canvas)}
.login{width:min(360px,calc(100vw - 40px));display:flex;flex-direction:column;gap:20px;padding:24px 0 10vh}
.login__brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.login__title{font-size:var(--fs-22);font-weight:var(--fw-s);letter-spacing:-.015em}
.login-form{display:flex;flex-direction:column;gap:14px}
.lf{display:flex;flex-direction:column;gap:6px}
.lf__label{font-size:var(--fs-13);color:var(--ink-2)}
.lf__input{height:var(--field-h-touch);border:0;border-radius:var(--r-sm);background:var(--surface-2);padding:0 14px;font-size:var(--fs-16);color:var(--ink);outline:none;width:100%}
.lf__input:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.code{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.code__cell{height:52px;border:0;border-radius:var(--r-sm);background:var(--surface-2);text-align:center;font-family:var(--mono);font-size:var(--fs-22);font-weight:var(--fw-m);color:var(--ink);outline:none;padding:0;caret-color:var(--accent);min-width:0}
.code__cell:focus-visible,.code__cell:focus{outline:2px solid var(--accent);outline-offset:0}
.code--err .code__cell{color:var(--danger)}
.lf__err{font-size:var(--fs-13);color:var(--danger)}
.lf__hint{font-size:var(--fs-13);color:var(--ink-3)}
.lf__submit{height:var(--tap);width:100%;font-size:var(--fs-16)}
.form-sheet .login-form{margin-top:4px}
.steps{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-15);color:var(--ink-2);counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:10px}
.steps li::before{content:counter(s);font-family:var(--mono);font-size:var(--fs-13);color:var(--ink-3);padding-top:2px}
.secret{font-family:var(--mono);font-size:var(--fs-17);letter-spacing:.06em;color:var(--ink);word-break:break-all}
.otpauth{font-family:var(--mono);font-size:var(--fs-11);color:var(--ink-3);word-break:break-all}
.qr{width:200px;height:200px;border-radius:var(--r-sm);background:#fff;padding:8px}
.ok-text{font-size:var(--fs-15);color:var(--ok)}