@import url('/styles/components.css');

/* Norius Mail — каркас приложения */

* { box-sizing: border-box; }
html, body { height: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--c-surface);
  color: var(--c-on-surface);
  font-family: var(--font-sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
body.boot { overflow: hidden; }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--c-on-surface) 18%, transparent); border-radius: var(--shape-full); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--c-on-surface) 30%, transparent); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: color-mix(in srgb, var(--c-primary) 30%, transparent); }

/* ==================== Splash ==================== */
.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  background: var(--c-surface);
  transition: opacity var(--dur-long-2) var(--ease-emphasized-accel), visibility var(--dur-long-2);
}
.splash.out { opacity: 0; visibility: hidden; }
.splash-mark { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.splash-ring {
  position: absolute;
  inset: 0;
  border-radius: 44% 56% 52% 48% / 52% 44% 56% 48%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-tertiary-container));
  animation: morph-blob 3.6s var(--ease-standard) infinite, spin 9s linear infinite;
  opacity: 0.9;
}
.splash-icon { position: relative; font-size: 44px; color: var(--c-on-primary); --icon-fill: 1; animation: splash-pulse 2.4s var(--ease-standard) infinite; }
.splash-text { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: 0.4px; color: var(--c-on-surface-variant); animation: fade-up var(--dur-long-2) var(--ease-emphasized-decel); }
@keyframes morph-blob {
  0%, 100% { border-radius: 44% 56% 52% 48% / 52% 44% 56% 48%; }
  33% { border-radius: 58% 42% 38% 62% / 45% 60% 40% 55%; }
  66% { border-radius: 38% 62% 60% 40% / 62% 38% 62% 38%; }
}
@keyframes splash-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* ==================== Экран входа ==================== */
.auth {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  overflow: hidden auto;
  background: var(--c-surface);
}
.auth-canvas { position: absolute; inset: 0; overflow: hidden; }
.blob {
  position: absolute;
  display: block;
  filter: blur(48px);
  opacity: 0.55;
  border-radius: 46% 54% 60% 40% / 52% 46% 54% 48%;
  /* Двигаем только transform: размытие в 48px просчитывается один раз
     и дальше просто композитится, а не пересобирается каждый кадр. */
  animation: drift 22s var(--ease-standard) infinite alternate;
  will-change: transform;
}
.blob-a { width: 46vmax; height: 46vmax; left: -12vmax; top: -14vmax; background: var(--c-primary); }
.blob-b { width: 38vmax; height: 38vmax; right: -10vmax; top: 12vmax; background: var(--c-tertiary-container); animation-delay: -6s; }
.blob-c { width: 34vmax; height: 34vmax; left: 24vmax; bottom: -16vmax; background: var(--c-secondary-container); animation-delay: -12s; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(4vmax, -3vmax, 0) scale(1.12); }
}

.auth-card {
  position: relative;
  width: min(94vw, 440px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  border-radius: var(--shape-2xl);
  background: color-mix(in srgb, var(--c-surface-container) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  animation: auth-in var(--dur-long-4) var(--ease-emphasized-decel);
}
/* Окно входа морфит из капли в карточку, а при входе складывается обратно. */
@keyframes auth-in {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.9);
    border-radius: 46% 54% 52% 48% / 54% 48% 52% 46%;
  }
  60% { opacity: 1; border-radius: calc(var(--shape-2xl) * 1.6); }
  100% { opacity: 1; transform: none; border-radius: var(--shape-2xl); }
}
.auth.out {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-medium-3) var(--ease-emphasized-accel);
}
.auth.out .auth-card { animation: auth-out var(--dur-medium-3) var(--ease-emphasized-accel) both; }
@keyframes auth-out {
  from { opacity: 1; transform: none; border-radius: var(--shape-2xl); }
  to {
    opacity: 0;
    transform: translateY(-12px) scale(0.94);
    border-radius: 44% 56% 50% 50% / 52% 48% 52% 48%;
  }
}
/* На время морфа высоты подрезаем содержимое. */
.auth-card.morphing { overflow: hidden; }
.auth-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.auth-head h1 { margin: 0; }
.auth-head p { margin: 0; }
.auth-logo {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--sp-2);
  border-radius: 42% 58% 54% 46% / 56% 44% 56% 44%;
  background: linear-gradient(135deg, var(--c-primary), color-mix(in srgb, var(--c-tertiary) 70%, var(--c-primary)));
  color: var(--c-on-primary);
  animation: morph-blob 7s var(--ease-standard) infinite;
}
.auth-logo .msr { font-size: 32px; --icon-fill: 1; }
.auth-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.auth-form .field[hidden] { display: none !important; }
.auth-error {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--shape-sm);
  background: var(--c-error-container);
  color: var(--c-on-error-container);
  animation: shake var(--dur-long-1) var(--ease-standard);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.auth-submit { min-height: 52px; margin-top: var(--sp-2); font-size: 15px; }
.auth-accounts { display: flex; flex-direction: column; gap: var(--sp-2); }
.auth-accounts > p { margin: 0; text-transform: uppercase; }
.auth-accounts-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.account-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--shape-full);
  background: transparent;
  color: var(--c-on-surface);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: background var(--dur-short-4) var(--ease-standard), transform var(--dur-short-3) var(--ease-spring);
}
.account-chip:hover { background: color-mix(in srgb, var(--c-on-surface) 8%, transparent); }
.account-chip:active { transform: scale(0.98); }
.account-chip .col { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.account-chip .col b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chip .col span { font-size: 12px; color: var(--c-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-foot { margin: 0; text-align: center; }
.auth-foot a { color: var(--c-primary); }

/* ==================== Каркас ==================== */
.app { display: flex; flex-direction: column; height: 100dvh; animation: fade-in var(--dur-long-1) var(--ease-standard); }

.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--topbar-h);
  flex: 0 0 auto;
  min-width: 0;
  padding: 0 var(--sp-3);
  background: var(--c-surface);
}
.brand { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2); color: inherit; text-decoration: none; }
.brand-icon { color: var(--c-primary); --icon-fill: 1; font-size: 26px; transition: transform var(--dur-medium-3) var(--ease-spring); }
.brand:hover .brand-icon { transform: rotate(-8deg) scale(1.08); }
.brand-text { white-space: nowrap; }

.searchbar {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: 1 1 0%;
  min-width: 0;
  max-width: 720px;
  height: 48px;
  margin: 0 auto;
  padding: 0 var(--sp-1) 0 var(--sp-1);
  border-radius: var(--shape-full);
  background: var(--c-surface-container);
  transition: background var(--dur-short-4) var(--ease-standard), box-shadow var(--dur-short-4) var(--ease-standard), max-width var(--dur-medium-2) var(--ease-emphasized);
}
.searchbar:focus-within { background: var(--c-surface-lowest); box-shadow: var(--elev-2); }
.searchbar-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
}
.searchbar-input::-webkit-search-cancel-button { display: none; }
.topbar-actions { display: flex; align-items: center; gap: var(--sp-1); flex: 0 0 auto; }

.shell { display: flex; flex: 1 1 auto; min-height: 0; }

/* ==================== Навигация ==================== */
.nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: var(--nav-w);
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  overflow: hidden;
  transition: width var(--dur-medium-3) var(--ease-emphasized), transform var(--dur-medium-3) var(--ease-emphasized);
}
.nav.collapsed { width: var(--nav-rail-w); }
.nav.collapsed .fab-label,
.nav.collapsed .nav-item span.nav-text,
.nav.collapsed .nav-group-title span,
.nav.collapsed .nav-storage p { display: none; }
.nav.collapsed .fab-compose { padding: 0; width: 56px; justify-content: center; }
.nav.collapsed .nav-item { justify-content: center; padding: 0; width: 56px; margin-inline: auto; }
.nav.collapsed .nav-item .badge { position: absolute; top: 4px; right: 6px; }

.fab-compose {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  height: 56px;
  padding: 0 var(--sp-6);
  border-radius: var(--shape-lg);
  background: var(--c-primary-container);
  color: var(--c-on-primary-container);
  box-shadow: var(--elev-1);
  font-size: 15px;
  align-self: flex-start;
  transition: box-shadow var(--dur-short-4) var(--ease-standard), transform var(--dur-short-3) var(--ease-spring), width var(--dur-medium-2) var(--ease-emphasized), background var(--dur-short-4) var(--ease-standard);
}
.fab-compose:hover { box-shadow: var(--elev-3); background: color-mix(in srgb, var(--c-primary-container) 88%, var(--c-primary)); }
.fab-compose .msr { font-size: 22px; }

.nav-scroll { display: flex; flex-direction: column; gap: var(--sp-1); overflow-y: auto; padding-bottom: var(--sp-4); flex: 1 1 auto; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-title { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-4); padding: 0 var(--sp-3); color: var(--c-on-surface-variant); text-transform: uppercase; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 48px;
  padding: 0 var(--sp-4);
  border: none;
  border-radius: var(--shape-full);
  background: transparent;
  color: var(--c-on-surface-variant);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--dur-short-4) var(--ease-standard), color var(--dur-short-4) var(--ease-standard);
}
.nav-item:hover { background: color-mix(in srgb, var(--c-on-surface) 8%, transparent); }
.nav-item.active { background: var(--c-secondary-container); color: var(--c-on-secondary-container); }
.nav-item.active .msr { --icon-fill: 1; color: inherit; }
.nav-item .nav-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .msr { font-size: 22px; }
.nav-item .label-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.nav-item.drop-target { outline: 2px dashed var(--c-primary); outline-offset: -3px; background: color-mix(in srgb, var(--c-primary) 12%, transparent); }

.nav-storage { margin-top: auto; padding: var(--sp-4) var(--sp-4) 0; }
.nav-storage p { margin: 6px 0 0; }
.storage-track { height: 6px; border-radius: var(--shape-full); background: var(--c-surface-highest); overflow: hidden; }
.storage-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c-primary); transition: width var(--dur-long-2) var(--ease-emphasized); }
.storage-fill.warn { background: var(--c-warning); }
.storage-fill.full { background: var(--c-error); }

.nav-scrim { position: fixed; inset: 0; z-index: 45; background: rgb(var(--c-scrim) / 0.4); animation: fade-in var(--dur-short-4) var(--ease-standard); }

/* ==================== Панели ==================== */
.panes { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; gap: var(--sp-3); padding: 0 var(--sp-3) var(--sp-3) 0; }
:root[data-reading="bottom"] .panes { flex-direction: column; }
:root[data-reading="bottom"] .list-pane { width: auto; height: 46%; }
:root[data-reading="off"] .read-pane { display: none; }

.list-pane {
  display: flex;
  flex-direction: column;
  width: var(--list-w);
  flex: 0 0 auto;
  min-height: 0;
  border-radius: var(--shape-lg);
  background: var(--c-surface-low);
  overflow: hidden;
  transition: width var(--dur-medium-3) var(--ease-emphasized);
}
:root[data-reading="off"] .list-pane { width: auto; flex: 1 1 auto; }

.list-toolbar { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-2); min-height: 56px; }
.list-toolbar-actions { display: flex; align-items: center; gap: 2px; animation: fade-in var(--dur-short-4) var(--ease-standard); }
.list-toolbar-meta { display: flex; flex-direction: column; min-width: 0; margin-left: var(--sp-1); flex: 1 1 auto; }
.list-toolbar-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-toolbar-tail { display: flex; align-items: center; gap: 2px; margin-left: auto; }

/* Плашки переносятся по строкам: на узком экране последняя больше не обрезается. */
.chips-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0 var(--sp-3) var(--sp-2); }
.chips-row:empty { display: none; }
.chips-row .chip { flex: 0 1 auto; max-width: 100%; }
/* Ленты, которые остаются в одну строку, не должны прятать последний элемент под краем. */
.settings-tabs, .compose-toolbar, .thread-toolbar { scroll-padding-inline: var(--sp-3); overscroll-behavior-x: contain; }
.settings-tabs > :last-child, .compose-toolbar > :last-child, .thread-toolbar > :last-child { margin-inline-end: var(--sp-2); }

.list-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.thread-list { list-style: none; margin: 0; padding: 0 var(--sp-2) var(--sp-4); display: flex; flex-direction: column; gap: 2px; }

.thread-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--row-h);
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--shape-md);
  cursor: pointer;
  color: var(--c-on-surface-variant);
  overflow: hidden;
  transition: background var(--dur-short-3) var(--ease-standard), transform var(--dur-short-3) var(--ease-standard), box-shadow var(--dur-short-4) var(--ease-standard);
  animation: row-in var(--dur-medium-2) var(--ease-emphasized-decel) both;
  animation-delay: calc(var(--i, 0) * 14ms);
  /* Строк в списке бывает до сотни. Изолируем их друг от друга,
     чтобы наведение не пересчитывало весь список, а строки за экраном
     вообще не рисовались. На видимые строки это никак не влияет. */
  contain: layout style;
  content-visibility: auto;
  contain-intrinsic-size: auto var(--row-h);
}
@keyframes row-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.thread-row.no-anim { animation: none; }
.thread-row:hover { background: var(--c-surface-high); box-shadow: var(--elev-1); }
.thread-row.active { background: var(--c-secondary-container); color: var(--c-on-secondary-container); }
.thread-row.selected { background: color-mix(in srgb, var(--c-primary) 16%, var(--c-surface-low)); }
.thread-row.unread { color: var(--c-on-surface); }
.thread-row.unread .row-from, .thread-row.unread .row-subject { font-weight: 700; }
.thread-row.removing { animation: row-out var(--dur-medium-2) var(--ease-emphasized-accel) forwards; }
@keyframes row-out {
  to { opacity: 0; transform: translateX(-24px) scale(0.97); max-height: 0; margin: 0; padding-block: 0; }
}
.thread-row .checkbox { width: 36px; height: 36px; }
.thread-row .star-btn { width: 36px; height: 36px; }
.thread-row .star-btn .msr { font-size: 20px; }
.row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.row-line { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.row-from { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.row-count { font-size: 12px; color: var(--c-on-surface-variant); font-weight: 600; }
.row-date { font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
.row-subject { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.row-snippet { font-size: 13px; color: var(--c-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.row-badges { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.row-badges .msr { font-size: 16px; }
.row-labels { display: flex; gap: 4px; flex-wrap: wrap; }
.row-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 7px;
  border-radius: var(--shape-xs);
  background: var(--c-surface-highest);
  color: var(--c-on-surface-variant);
  font-size: 11px;
  font-weight: 600;
}
/* Островок действий лежит поверх строки, а не в её потоке: появление можно
   анимировать, и наведение не пересчитывает раскладку списка. */
.row-actions {
  position: absolute;
  top: 50%;
  right: var(--sp-2);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--shape-full);
  background: var(--c-surface-highest);
  box-shadow: var(--elev-2);
  opacity: 0;
  transform: translateY(-50%) scale(0.86);
  transform-origin: 100% 50%;
  pointer-events: none;
  transition:
    opacity var(--dur-short-4) var(--ease-standard),
    transform var(--dur-medium-2) var(--ease-emphasized-decel),
    background var(--dur-short-4) var(--ease-standard),
    box-shadow var(--dur-short-4) var(--ease-standard);
}
/* Помеченное письмо видно и без наведения — но без подложки островка. */
.thread-row.starred .row-actions {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
  background: transparent;
  box-shadow: none;
}
.thread-row:hover .row-actions,
.thread-row:focus-within .row-actions {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
  background: var(--c-surface-highest);
  box-shadow: var(--elev-2);
}
/* Морф островка: кнопки вырастают из звёздочки. */
.row-more {
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-width var(--dur-medium-3) var(--ease-emphasized),
    opacity var(--dur-short-3) var(--ease-standard);
}
.thread-row:hover .row-more,
.thread-row:focus-within .row-more { max-width: 180px; opacity: 1; }
/* Дату убираем прозрачностью, а не display: раскладка строки не меняется. */
.row-date { transition: opacity var(--dur-short-3) var(--ease-standard); }
.thread-row:hover .row-date,
.thread-row:focus-within .row-date { opacity: 0; }
.thread-row.dragging { opacity: 0.5; }

.skeleton-list { display: none; flex-direction: column; padding: 0 var(--sp-2); }
.skeleton-list.on { display: flex; }
.list-scroll .load-more { display: grid; place-items: center; padding: var(--sp-4); }

/* ==================== Чтение письма ==================== */
.read-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  border-radius: var(--shape-lg);
  background: var(--c-surface-lowest);
  overflow: hidden;
}
.read-pane[data-state="empty"] .thread-view,
.read-pane[data-state="empty"] .read-skeleton { display: none; }
.read-pane[data-state="loading"] .read-empty,
.read-pane[data-state="loading"] .thread-view { display: none; }
.read-pane[data-state="thread"] .read-empty,
.read-pane[data-state="thread"] .read-skeleton { display: none; }
.read-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--c-on-surface-variant); }
.read-empty p { margin: 0; }

.thread-view { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; animation: fade-up var(--dur-medium-3) var(--ease-emphasized-decel); }
.thread-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface-lowest);
  border-bottom: 1px solid var(--c-outline-variant);
}
.thread-toolbar .spacer { flex: 1 1 auto; }
.thread-header { padding: var(--sp-5) var(--sp-6) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.thread-subject { margin: 0; font-size: 22px; font-weight: 500; line-height: 30px; color: var(--c-on-surface); }
.thread-header .row-labels { gap: 6px; }

.msg { border-top: 1px solid var(--c-outline-variant); padding: var(--sp-4) var(--sp-6); animation: fade-up var(--dur-medium-2) var(--ease-emphasized-decel) both; }
.msg:first-of-type { border-top: none; }
.msg.collapsed { cursor: pointer; padding-block: var(--sp-3); }
.msg.collapsed:hover { background: var(--c-surface-low); }
.msg-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.msg-headline { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; gap: 2px; }
.msg-from { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.msg-from b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-from span { font-size: 13px; color: var(--c-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-to { font-size: 12px; color: var(--c-on-surface-variant); display: flex; align-items: center; gap: 4px; cursor: pointer; }
.msg-to .msr { font-size: 16px; }
.msg-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.msg-date { font-size: 12px; color: var(--c-on-surface-variant); white-space: nowrap; }
.msg-preview { font-size: 13px; color: var(--c-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px var(--sp-4);
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3);
  border-radius: var(--shape-sm);
  background: var(--c-surface-low);
  font-size: 12px;
  color: var(--c-on-surface-variant);
  animation: fade-up var(--dur-short-4) var(--ease-standard);
}
.msg-details b { color: var(--c-on-surface); font-weight: 600; }
.msg-auth { display: inline-flex; align-items: center; gap: 4px; }
.msg-auth.pass { color: var(--c-success); }
.msg-auth.fail { color: var(--c-error); }

.msg-body { margin-top: var(--sp-4); color: var(--c-on-surface); }
.msg-frame { width: 100%; border: none; display: block; background: transparent; min-height: 40px; transition: height var(--dur-short-4) var(--ease-standard); }
.msg-text { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 22px; white-space: pre-wrap; word-wrap: break-word; }
.msg-text a { color: var(--c-primary); }

.images-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-3) 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--shape-sm);
  background: var(--c-warning-container);
  color: var(--c-on-surface);
  font-size: 13px;
}
.images-banner .msr { color: var(--c-warning); }
.images-banner button { margin-left: auto; }

.attachments { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.attachment {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 260px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--shape-md);
  background: var(--c-surface-low);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-short-4) var(--ease-standard), transform var(--dur-short-3) var(--ease-spring), box-shadow var(--dur-short-4) var(--ease-standard);
}
.attachment:hover { background: var(--c-surface-high); box-shadow: var(--elev-1); transform: translateY(-1px); }
.attachment .msr { color: var(--c-primary); }
.attachment .col { display: flex; flex-direction: column; min-width: 0; }
.attachment .col b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment .col span { font-size: 11px; color: var(--c-on-surface-variant); }
.attachment-thumb { width: 40px; height: 40px; border-radius: var(--shape-sm); object-fit: cover; }

.reply-actions { display: flex; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6) var(--sp-7); }

.image-viewer { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgb(0 0 0 / 0.86); animation: fade-in var(--dur-short-4) var(--ease-standard); }
.image-viewer img { max-width: 92vw; max-height: 88vh; border-radius: var(--shape-sm); animation: dialog-in var(--dur-medium-2) var(--ease-emphasized-decel); }
.image-viewer .icon-btn { position: absolute; top: var(--sp-4); right: var(--sp-4); color: #fff; background: rgb(255 255 255 / 0.14); }

/* ==================== Создание письма ==================== */
.compose-layer { display: flex; align-items: flex-end; justify-content: flex-end; gap: var(--sp-3); padding: 0 var(--sp-4) 0; }
.compose {
  display: flex;
  flex-direction: column;
  width: min(94vw, 620px);
  height: min(78vh, 640px);
  border-radius: var(--shape-lg) var(--shape-lg) 0 0;
  background: var(--c-surface-container);
  box-shadow: var(--elev-4);
  overflow: hidden;
  animation: compose-in var(--dur-medium-3) var(--ease-emphasized-decel);
  transition: height var(--dur-medium-2) var(--ease-emphasized), width var(--dur-medium-2) var(--ease-emphasized);
}
@keyframes compose-in {
  from { opacity: 0; transform: translateY(40px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.compose.minimized { height: 48px; width: 280px; }
.compose.minimized .compose-body, .compose.minimized .compose-foot { display: none; }
.compose.maximized { position: fixed; inset: 4vh 6vw; width: auto; height: auto; border-radius: var(--shape-xl); }
.compose.closing { animation: compose-out var(--dur-short-4) var(--ease-emphasized-accel) forwards; }
@keyframes compose-out { to { opacity: 0; transform: translateY(30px) scale(0.96); } }

.compose-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 48px;
  padding: 0 var(--sp-2) 0 var(--sp-4);
  background: var(--c-surface-high);
  cursor: move;
  user-select: none;
}
.compose-title { flex: 1 1 auto; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose-head .icon-btn { width: 32px; height: 32px; }
.compose-head .icon-btn .msr { font-size: 18px; }

.compose-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.compose-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--c-outline-variant);
  min-height: 44px;
}
.compose-row > label { flex: 0 0 auto; padding-top: 8px; font-size: 13px; color: var(--c-on-surface-variant); width: 44px; }
.compose-row .rcpt-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; padding: 4px 0; }
.compose-row input {
  flex: 1 1 120px;
  min-width: 80px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  padding: 6px 0;
}
.compose-row .row-tools { display: flex; gap: 4px; align-self: center; }
.compose-row .row-tools button { font-size: 12px; }
.rcpt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px 0 4px;
  border-radius: var(--shape-full);
  background: var(--c-surface-highest);
  font-size: 13px;
  animation: fade-in var(--dur-short-3) var(--ease-standard);
}
.rcpt.invalid { background: var(--c-error-container); color: var(--c-on-error-container); }
.rcpt .avatar { width: 22px; height: 22px; font-size: 10px; }
.rcpt button { display: inline-flex; padding: 2px; border: none; background: none; cursor: pointer; border-radius: 50%; color: inherit; }
.rcpt button:hover { background: color-mix(in srgb, var(--c-on-surface) 12%, transparent); }
.rcpt button .msr { font-size: 16px; }

.autocomplete {
  position: fixed;
  z-index: 95;
  min-width: 260px;
  max-height: 260px;
  overflow-y: auto;
  padding: var(--sp-1);
  border-radius: var(--shape-md);
  background: var(--c-surface-container);
  box-shadow: var(--elev-3);
  animation: menu-in var(--dur-short-4) var(--ease-emphasized-decel);
}
.autocomplete .ac-item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2); border: none; border-radius: var(--shape-sm); background: transparent; cursor: pointer; text-align: left; }
.autocomplete .ac-item:hover, .autocomplete .ac-item.active { background: color-mix(in srgb, var(--c-primary) 12%, transparent); }
.autocomplete .col { display: flex; flex-direction: column; min-width: 0; }
.autocomplete .col b { font-size: 13px; }
.autocomplete .col span { font-size: 12px; color: var(--c-on-surface-variant); }

.compose-editor {
  flex: 1 1 auto;
  min-height: 180px;
  padding: var(--sp-4);
  outline: none;
  overflow-y: auto;
  font-size: 14px;
  line-height: 22px;
  color: var(--c-on-surface);
}
.compose-editor:empty::before { content: attr(data-placeholder); color: var(--c-on-surface-variant); }
.compose-editor blockquote { margin: 0 0 0 var(--sp-2); padding-left: var(--sp-3); border-left: 2px solid var(--c-outline-variant); color: var(--c-on-surface-variant); }
.compose-editor img { max-width: 100%; height: auto; border-radius: var(--shape-xs); }
.compose-editor a { color: var(--c-primary); }

.compose-attachments { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-2); }
.compose-attachments:empty { display: none; }
.att-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 220px;
  padding: 6px var(--sp-2);
  border-radius: var(--shape-sm);
  background: var(--c-surface-high);
  font-size: 12px;
  overflow: hidden;
}
.att-chip .msr { font-size: 18px; color: var(--c-primary); }
.att-chip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-chip .att-progress { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--c-primary); transition: width var(--dur-short-4) var(--ease-standard); }
.att-chip.error { background: var(--c-error-container); color: var(--c-on-error-container); }

.compose-toolbar { display: flex; align-items: center; gap: 2px; padding: var(--sp-1) var(--sp-2); border-top: 1px solid var(--c-outline-variant); overflow-x: auto; scrollbar-width: none; }
.compose-toolbar::-webkit-scrollbar { display: none; }
.compose-toolbar .icon-btn { width: 36px; height: 36px; }
.compose-toolbar .icon-btn .msr { font-size: 19px; }
.compose-toolbar .sep { width: 1px; height: 22px; margin: 0 4px; background: var(--c-outline-variant); flex: 0 0 auto; }

.compose-foot { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
.compose-foot .spacer { flex: 1 1 auto; }
.compose-status { font-size: 12px; color: var(--c-on-surface-variant); }
.send-split { display: flex; align-items: stretch; border-radius: var(--shape-full); overflow: hidden; background: var(--c-primary); color: var(--c-on-primary); }
.send-split .btn { border-radius: 0; background: transparent; color: inherit; }
.send-split .btn:first-child { padding-left: var(--sp-6); }
.send-split .split-arrow { width: 40px; padding: 0; border-left: 1px solid color-mix(in srgb, var(--c-on-primary) 30%, transparent); }

/* ==================== Настройки ==================== */
.settings { display: flex; flex-direction: column; gap: var(--sp-4); min-height: 320px; }
.settings-tabs {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--sp-1);
  margin: 0 calc(var(--sp-6) * -1);
  padding: var(--sp-3) var(--sp-6) var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--c-surface-container);
  box-shadow: inset 0 -1px 0 var(--c-outline-variant);
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--sp-3);
  border: none;
  border-radius: var(--shape-full);
  background: transparent;
  color: var(--c-on-surface-variant);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--dur-short-4) var(--ease-standard), color var(--dur-short-4) var(--ease-standard);
}
.settings-tab { flex: 0 0 auto; }
.settings-tab .msr { font-size: 20px; }
.settings-tab:hover { background: var(--c-surface-high); color: var(--c-on-surface); }
.settings-tab .settings-tab-text { display: none; }
.settings-tab.active .settings-tab-text { display: inline; }
.settings-tab:not(.active) { width: 40px; min-width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; }
.settings-tab.active { height: 40px; padding: 0 var(--sp-4); }
.settings-tab.active { background: var(--c-secondary-container); color: var(--c-on-secondary-container); }
.settings-panel { display: flex; flex-direction: column; gap: var(--sp-4); animation: fade-up var(--dur-short-4) var(--ease-emphasized-decel); }
.settings-row { display: flex; align-items: center; gap: var(--sp-4); }
.settings-row .col { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.settings-row .col b { font-size: 14px; font-weight: 600; color: var(--c-on-surface); }
.settings-row .col span { font-size: 12px; color: var(--c-on-surface-variant); }
.settings-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.settings-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--shape-md);
  background: var(--c-surface-low);
}
.settings-item .col { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.settings-item .col b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-item .col span { font-size: 12px; color: var(--c-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.swatch {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--shape-full);
  cursor: pointer;
  position: relative;
  transition: transform var(--dur-short-4) var(--ease-spring), border-radius var(--dur-medium-2) var(--ease-emphasized);
}
.swatch:hover { transform: scale(1.1); }
.swatch.active { border-radius: 34%; transform: scale(1.12); }
.swatch.active::after {
  content: 'check';
  font-family: 'Material Symbols Rounded';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 20px;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
}

/* ==================== Мобильное ==================== */
.fab {
  position: fixed;
  right: var(--sp-4);
  bottom: calc(var(--sp-4) + 72px);
  display: none;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: var(--shape-lg);
  background: var(--c-primary-container);
  color: var(--c-on-primary-container);
  box-shadow: var(--elev-3);
  cursor: pointer;
  z-index: 40;
  overflow: hidden;
  transition: transform var(--dur-medium-2) var(--ease-spring), box-shadow var(--dur-short-4) var(--ease-standard);
}
.fab:active { transform: scale(0.92); }
.fab .msr { font-size: 26px; }

.bottom-nav {
  display: none;
  align-items: center;
  justify-content: space-around;
  height: 72px;
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-1);
  background: var(--c-surface-container);
  border-top: 1px solid var(--c-outline-variant);
  padding-bottom: max(var(--sp-2), env(safe-area-inset-bottom));
}
.bn-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1 1 0;
  border: none;
  background: transparent;
  color: var(--c-on-surface-variant);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}
.bn-item .bn-pill {
  display: grid;
  place-items: center;
  width: 60px;
  height: 32px;
  border-radius: var(--shape-full);
  transition: background var(--dur-medium-1) var(--ease-emphasized);
}
.bn-item.active { color: var(--c-on-secondary-container); }
.bn-item.active .bn-pill { background: var(--c-secondary-container); }
.bn-item.active .msr { --icon-fill: 1; }
.bn-item .badge { position: absolute; top: -2px; right: 22%; }

.offline-banner {
  position: fixed;
  left: 50%;
  bottom: var(--sp-4);
  transform: translateX(-50%);
  z-index: 110;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--shape-full);
  background: var(--c-error-container);
  color: var(--c-on-error-container);
  font-size: 13px;
  box-shadow: var(--elev-2);
  animation: snack-in var(--dur-medium-2) var(--ease-emphasized-decel);
}
.offline-banner .msr { font-size: 18px; }

/* ==================== Адаптивность ==================== */
@media (max-width: 1240px) {
  :root { --list-w: 380px; }
}

@media (max-width: 1024px) {
  .nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    width: var(--nav-w);
    padding-top: var(--sp-4);
    background: var(--c-surface-container);
    border-radius: 0 var(--shape-lg) var(--shape-lg) 0;
    transform: translateX(-102%);
    box-shadow: var(--elev-3);
  }
  .nav.open { transform: none; }
  .nav.collapsed { width: var(--nav-w); }
  .nav.collapsed .fab-label, .nav.collapsed .nav-item span.nav-text, .nav.collapsed .nav-group-title span, .nav.collapsed .nav-storage p { display: revert; }
  .nav.collapsed .nav-item { justify-content: flex-start; width: auto; padding: 0 var(--sp-4); }
  .nav.collapsed .fab-compose { width: auto; padding: 0 var(--sp-6); }
  .panes { padding-left: var(--sp-3); }
}

@media (max-width: 860px) {
  .brand-text { display: none; }
  .panes { padding: 0 var(--sp-2) var(--sp-2); }
  .list-pane { width: auto; flex: 1 1 auto; }
  .read-pane {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 55;
    border-radius: 0;
    transform: translateX(100%);
    transition: transform var(--dur-medium-4) var(--ease-emphasized);
  }
  .read-pane[data-state="thread"], .read-pane[data-state="loading"] { transform: none; }
  .read-pane[data-state="empty"] { pointer-events: none; }
  .fab { display: flex; }
  .bottom-nav { display: flex; }
  /* На узком экране наведения нет: оставляем только звёздочку в потоке строки. */
  .thread-row .row-more { display: none; }
  .thread-row .row-actions {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
  .thread-row:hover .row-date,
  .thread-row:focus-within .row-date { opacity: 1; }
  .compose-layer { padding: 0; align-items: stretch; }
  .compose { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; }
  .compose.minimized { inset: auto 0 0 0; height: 48px; width: auto; }
  .compose.maximized { inset: 0; border-radius: 0; }
  .thread-toolbar {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .thread-toolbar::-webkit-scrollbar { display: none; }
  .msg, .thread-header { padding-inline: var(--sp-4); }
  .reply-actions { padding-inline: var(--sp-4); }
  :root[data-reading="bottom"] .list-pane { height: auto; }
}

@media (max-width: 560px) {
  .topbar { padding: 0 var(--sp-2); gap: var(--sp-1); }
  .brand { display: none; }
  .searchbar { height: 44px; margin: 0; }
  #settings-btn { display: none; }
  .thread-subject { font-size: 19px; line-height: 26px; }
  .thread-toolbar { gap: 0; padding-inline: var(--sp-2); }
  .thread-toolbar .icon-btn { width: 36px; height: 36px; }
  .thread-toolbar .icon-btn .msr { font-size: 20px; }
  .thread-toolbar .hide-narrow { display: none; }
  .chips-row { gap: 6px; padding-inline: var(--sp-2); }
  .chips-row .chip { height: 30px; padding: 0 10px; font-size: 12px; }
  .dialog { width: 96vw; }
}

@media (min-width: 861px) {
  .fab, .bottom-nav { display: none !important; }
}

/* ==================== Профиль (меню аккаунта) ==================== */
.menu.account-sheet { width: min(92vw, 340px); padding: var(--sp-2); max-height: min(82vh, 660px); }
.account-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border-radius: var(--shape-lg);
  background: var(--c-surface-low);
  text-align: center;
}
.account-head-avatar { position: relative; display: inline-flex; margin-bottom: var(--sp-3); }
.account-head-edit {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--c-surface-low);
  border-radius: var(--shape-full);
  background: var(--c-surface-highest);
  color: var(--c-on-surface-variant);
  cursor: pointer;
  transition: background var(--dur-short-4) var(--ease-standard), transform var(--dur-short-4) var(--ease-spring);
}
.account-head-edit:hover { background: var(--c-secondary-container); color: var(--c-on-secondary-container); transform: scale(1.08); }
.account-head b { color: var(--c-on-surface); }
.account-head > span.body-small { color: var(--c-on-surface-variant); }
.account-manage { margin-top: var(--sp-4); }
.account-list { display: flex; flex-direction: column; gap: 2px; }
.account-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: none;
  border-radius: var(--shape-full);
  background: transparent;
  color: var(--c-on-surface-variant);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-short-3) var(--ease-standard);
}
.account-row:hover { background: color-mix(in srgb, var(--c-on-surface) 8%, transparent); }
.account-row-text { display: flex; flex-direction: column; min-width: 0; }
.account-row-text b { font-size: 13px; font-weight: 600; color: var(--c-on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-row-text span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-actions { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-2); }
.account-action {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: none;
  border-radius: var(--shape-full);
  background: transparent;
  color: var(--c-on-surface);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-short-3) var(--ease-standard);
}
.account-action .msr { font-size: 20px; color: var(--c-on-surface-variant); }
.account-action:hover { background: color-mix(in srgb, var(--c-on-surface) 8%, transparent); }
.account-action.danger, .account-action.danger .msr { color: var(--c-error); }
.account-action.danger:hover { background: color-mix(in srgb, var(--c-error) 12%, transparent); }
.account-storage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border: none;
  border-radius: var(--shape-lg);
  background: var(--c-surface-low);
  color: var(--c-on-surface-variant);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-short-3) var(--ease-standard);
}
.account-storage:hover { background: var(--c-surface-high); }
.account-storage-head { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-on-surface); }
.account-storage-head .msr { font-size: 18px; color: var(--c-primary); }
.account-storage-head b { font-size: 13px; font-weight: 600; }
.account-storage .storage-track { display: block; width: 100%; }
.account-storage p { margin: 0; }