/* X Protocol design language W2 — tokens, scene, dashboard and modals. */
:root {
  --w2-bg: #16181A;
  --w2-surface: #1E2023;
  --w2-surface-raised: #26282B;
  --w2-line: rgba(255, 255, 255, .08);
  --w2-text: #FFFFFF;
  --w2-text-muted: rgba(255, 255, 255, .55);
  --w2-text-quiet: rgba(255, 255, 255, .35);
  --w2-lime: #C8F135;
  --w2-fire: #F1462C;
  --w2-gold: #FFD740;
  --w2-s1: 4px;
  --w2-s2: 8px;
  --w2-s3: 12px;
  --w2-s4: 16px;
  --w2-s5: 20px;
  --w2-s6: 24px;
  --w2-s7: 32px;
  --w2-s8: 40px;
  --w2-s9: 48px;
  /* Два уровня ширины: обзорные экраны (Пульс, Утро) — сфокусированная колонка,
     рабочие (тренировка, питание, тело, БАДы, история, настройки) — вся ширина */
  --w2-overview-width: 1180px;
  /* Хром узкого экрана. Высота нижней панели — замеренная (иконка 31 + отступы);
     под неё резервируется место, иначе низ страницы уезжает под панель. */
  --w2-tabbar-h: 72px;
  /* Слой хрома: выше контента, но НИЖЕ модальных слоёв (они живут от 999).
     Панель на 9999 физически перекрывала кнопки модалок — замер 14.08.2026. */
  --w2-z-chrome: 900;
}

/* Переходная гармонизация старых экранов на новой сцене (этап 1): старые токены фона и поверхностей поднимаются к значениям W2, иначе старые карточки (#0f0f0f) проваливаются НИЖЕ нового фона #16181A, а экраны, красящие фон сами через var(--bg), дают шов под топ-баром */
:root {
  --bg: #16181A;
  --surface: #1E2023;
  --surface2: #26282B;
  --surface3: #2E3033;
  --border: rgba(255, 255, 255, .08);
  --on-bg: #FFFFFF;
  --on-surface: #FFFFFF;
  --on-surface-dim: rgba(255, 255, 255, .55);
}
#screen-morning {
  --mr-bg: var(--w2-bg);
}

/* Craft baseline */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Шорткод font: сбрасывает font-variant-numeric — возвращаем табличные цифры каждому узлу сцены W2 (ID-скоуп бьёт классовые шорткоды) */
#screen-dashboard,#screen-dashboard *,.sf-state,.sf-state * {
  font-variant-numeric:tabular-nums;
}
.v11-act-title,.ss-next .body .name {
  text-wrap:balance;
}
.v11-act-sub,.ss-cell .sub,.w2-alert {
  text-wrap:pretty;
}

/* Global W2 scene and top bar */
body {
  background:var(--w2-bg);
}
.sf-tbar {
  --ok:var(--w2-lime);
  --ok-soft:rgba(200,241,53,.06);
  --ok-bg:rgba(200,241,53,.04);
  --ok-brd:rgba(200,241,53,.24);
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  flex-shrink:0;
  gap:var(--w2-s5);
  padding:var(--w2-s5);
  border-bottom:0;
  background:var(--w2-bg);
}
.sf-tbar::before {
  content:'';
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:1px;
  background:var(--w2-line);
}
.sf-logo {
  display:flex;
  align-items:center;
  gap:var(--w2-s3);
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}
.sf-logo-mark {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:max(51px,3vw);
  height:max(51px,3vw);
  color:var(--w2-lime);
  filter:drop-shadow(0 0 6px rgba(200,241,53,.22));
}
.sf-logo-mark svg {
  width:100%;
  height:100%;
}
.sf-logo:hover .sf-logo-mark {
  filter:drop-shadow(0 0 8px rgba(200,241,53,.32));
}
.sf-logo-lbl {
  display:flex;
  flex-direction:column;
  gap:max(4px,.12vw);
}
.sf-logo-lbl .w1 {
  color:var(--w2-text);
  font:500 max(16px,1.05vw)/.95 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.sf-logo-lbl .w2 {
  color:var(--w2-lime);
  font:800 max(16px,1.05vw)/.95 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.sf-tbar-div {
  width:1px;
  align-self:stretch;
  margin:max(5px,.3vw) max(6px,.35vw);
  background:var(--w2-line);
}
.sf-nav {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  min-width:0;
  gap:max(6px,.35vw);
  overflow:visible;
}
.sf-nav-it {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:4.9vw;
  gap:max(10px,.58vw);
  padding:max(13px,.75vw) max(17px,1vw) max(15px,.9vw);
  border-radius:10px;
  color:rgba(255,255,255,.5);
  background:transparent;
  font:700 max(12px,.64vw)/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color 160ms cubic-bezier(.2,0,0,1),background-color 160ms cubic-bezier(.2,0,0,1),text-shadow 160ms cubic-bezier(.2,0,0,1),transform 160ms cubic-bezier(.2,0,0,1);
}
.sf-nav-it svg {
  width:max(27px,1.6vw);
  height:max(27px,1.6vw);
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:filter 160ms cubic-bezier(.2,0,0,1);
}
.sf-nav-it:hover {
  color:rgba(255,255,255,.9);
}
.sf-nav-it:active {
  transform:scale(.96);
}
.sf-nav-it.active {
  color:var(--w2-lime);
  text-shadow:0 0 8px rgba(200,241,53,.18);
}
.sf-nav-it.active svg {
  filter:drop-shadow(0 0 6px rgba(200,241,53,.28));
}
.sf-nav-slider {
  position:absolute;
  bottom:-1px;
  z-index:3;
  height:3px;
  border-radius:2px;
  background:var(--w2-lime);
  box-shadow:0 0 8px rgba(200,241,53,.34);
  pointer-events:none;
  transition:left 350ms cubic-bezier(.4,0,.2,1),width 350ms cubic-bezier(.4,0,.2,1);
}
.sf-state {
  display:flex;
  align-items:center;
  flex-shrink:0;
  gap:var(--w2-s2);
  padding:var(--w2-s2) var(--w2-s4);
  border:1px solid rgba(200,241,53,.24);
  border-radius:max(26px,1.5vw);
  background:rgba(200,241,53,.055);
  box-shadow:0 0 0 1px rgba(255,255,255,.025),0 8px 20px rgba(0,0,0,.14);
  transition:border-color 180ms cubic-bezier(.2,0,0,1),background-color 180ms cubic-bezier(.2,0,0,1),box-shadow 180ms cubic-bezier(.2,0,0,1);
}
.sf-state .dot {
  width:max(10px,.42vw);
  height:max(10px,.42vw);
  border-radius:50%;
  background:var(--w2-lime);
  box-shadow:0 0 7px rgba(200,241,53,.42);
  animation:w2StatusPulse 1.6s ease-in-out infinite;
  transition:background-color 180ms cubic-bezier(.2,0,0,1),box-shadow 180ms cubic-bezier(.2,0,0,1),opacity 180ms cubic-bezier(.2,0,0,1),transform 180ms cubic-bezier(.2,0,0,1);
}
.sf-state .txt {
  color:var(--w2-lime);
  font:800 max(12px,.62vw)/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.22em;
  text-transform:uppercase;
  transition:color 180ms;
}
.sf-state .ver {
  margin-left:max(3px,.15vw);
  color:var(--w2-text-quiet);
  font:600 max(11px,.52vw)/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.12em;
  text-transform:uppercase;
}
@keyframes w2StatusPulse {
  0%,100% {
    opacity:1;
    transform:scale(1);
  }
  50% {
    opacity:.4;
    transform:scale(.65);
  }
}
.sf-state.error {
  border-color:rgba(241,70,44,.3);
  background:rgba(241,70,44,.06);
  box-shadow:0 0 0 1px rgba(255,255,255,.025),0 8px 20px rgba(0,0,0,.14);
}
.sf-state.error .dot {
  background:var(--w2-fire);
  box-shadow:0 0 7px rgba(241,70,44,.42);
}
.sf-state.error .txt {
  color:var(--w2-fire);
}

/* Dashboard rhythm: 20px group padding, 40px section gap. */
#screen-dashboard {
  padding: var(--w2-s8) var(--w2-s5);
}
#dash-widgets {
  gap: var(--w2-s4) !important;
}
#dash-widgets > * {
  margin-block: 0;
}
#status-strip-anchor {
  margin-top: var(--w2-s8);
}

/* Dashboard notification cards */
.v11-act {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--w2-s5);
  margin-bottom: 0;
  padding: var(--w2-s5);
  border: 1px solid var(--w2-line);
  border-radius: var(--w2-s4);
  background: var(--w2-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 12px 28px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .035);
  overflow: hidden;
  cursor: pointer;
  transition-property: background-color, border-color, box-shadow, transform;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.v11-act::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 28%, transparent);
  opacity: .88;
}
.v11-act:hover {
  border-color: rgba(255, 255, 255, .12);
  background: var(--w2-surface-raised);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .24), 0 16px 34px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.v11-act:active {
  transform: scale(.99);
}
.v11-act.training, .v11-act.green {
  --accent: var(--w2-lime);
}
.v11-act.warn, .v11-act.pink, .v11-act.v11-overdue {
  --accent: var(--w2-fire);
}
.v11-act-ico {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--w2-s9);
  height: var(--w2-s9);
  border: 1px solid var(--w2-line);
  border-radius: calc(var(--w2-s4) - var(--w2-s2));
  color: var(--accent);
  background: var(--w2-surface-raised);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.v11-act-ico svg {
  width: var(--w2-s6);
  height: var(--w2-s6);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v11-act-body {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: var(--w2-s5);
}
.v11-act-main {
  flex: 1;
  min-width: 0;
}
.v11-act-tag {
  margin-bottom: var(--w2-s1);
  color: var(--accent);
  font: 700 12px/1.25 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .88;
}
.v11-act-title {
  margin-bottom: var(--w2-s1);
  color: var(--w2-text);
  font: 600 17px/1.2 'Inter', sans-serif; font-variant-numeric: tabular-nums;
  letter-spacing: -.018em;
}
.v11-act-sub {
  color: var(--w2-text-muted);
  font: 400 15px/1.45 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.v11-act-when {
  min-height: var(--w2-s8);
  padding: var(--w2-s2) var(--w2-s3);
  border: 1px solid var(--w2-line);
  border-radius: calc(var(--w2-s4) - var(--w2-s2));
  color: var(--w2-text-quiet);
  background: var(--w2-surface-raised);
  font: 700 12px/1.2 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.v11-act:is(.training, .green):not(.v11-milestone) .v11-act-when, .v11-act:is(.training, .green):not(.v11-milestone) .v11-act-when.now, .v11-act:is(.training, .green):not(.v11-milestone) .v11-act-when.today {
  color: var(--w2-lime);
  border-color: rgba(200, 241, 53, .22);
  background: rgba(200, 241, 53, .06);
}
.v11-act:is(.warn, .pink, .v11-overdue) .v11-act-when, .v11-act:is(.warn, .pink, .v11-overdue) .v11-act-when.now, .v11-act:is(.warn, .pink, .v11-overdue) .v11-act-when.today, .v11-act-when.overdue {
  color: var(--w2-fire);
  border-color: rgba(241, 70, 44, .24);
  background: rgba(241, 70, 44, .07);
}
.v11-act-arr {
  flex-shrink: 0;
  margin-left: var(--w2-s1);
  color: var(--w2-text-quiet);
  font: 500 20px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums;
  transition-property: color, transform;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.v11-act:hover .v11-act-arr {
  color: var(--w2-text-muted);
  transform: translateX(2px);
}
@property --v11-angle {
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}
@property --v11-ms-angle {
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}
@keyframes v11OverdueSweep {
  to {
    --v11-angle: 360deg;
  }
}
@keyframes v11MilestoneSweep {
  to {
    --v11-ms-angle: 360deg;
  }
}
.v11-overdue {
  border-color: transparent;
  background: var(--w2-surface);
  isolation: isolate;
}
.v11-overdue::after {
  content:'';
  position:absolute;
  inset:-1px;
  z-index:2;
  padding:1px;
  border-radius:inherit;
  background:conic-gradient(from var(--v11-angle),transparent 40%,rgba(241,70,44,.82) 50%,transparent 60%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:v11OverdueSweep 2.5s linear infinite;
  pointer-events:none;
}
.v11-act.v11-milestone {
  --accent: #FFD740;
  border-color: transparent;
  background: linear-gradient(135deg, rgba(255, 215, 0, .045), rgba(255, 170, 0, .012)), var(--w2-surface);
  isolation: isolate;
}
.v11-act.v11-milestone::after {
  content:'';
  position:absolute;
  inset:-1px;
  z-index:2;
  padding:1px;
  border-radius:inherit;
  background:conic-gradient(from var(--v11-ms-angle),transparent 30%,rgba(255,215,0,.65) 45%,rgba(255,170,0,.8) 50%,rgba(255,215,0,.65) 55%,transparent 70%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:v11MilestoneSweep 3s linear infinite;
  pointer-events:none;
}
.v11-act.v11-milestone .v11-act-ico {
  color: #FFD740;
  border-color: rgba(255, 215, 0, .22);
  background: rgba(255, 215, 0, .035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}
.v11-act.v11-milestone .v11-act-tag, .v11-act.v11-milestone .v11-act-when {
  color: #FFD740;
}
.v11-act.v11-milestone .v11-act-when {
  border-color: rgba(255, 215, 0, .24);
  background: rgba(255, 215, 0, .07);
}
.v11-act-dismiss {
  position: absolute;
  top: var(--w2-s3);
  right: var(--w2-s3);
  z-index: 5;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  color: var(--w2-text-quiet);
  background: rgba(255, 255, 255, .06);
  font-size: 13px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition-property: opacity, background-color, color, transform;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.v11-act:hover .v11-act-dismiss {
  opacity: 1;
}
.v11-act-dismiss:hover {
  color: var(--w2-text);
  background: rgba(255, 255, 255, .14);
}
.v11-act-dismiss::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--w2-s8);
  height: var(--w2-s8);
  transform: translate(-50%, -50%);
}
.v11-act-dismiss:active {
  transform: scale(.96);
}
.v11-act-dismiss:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  opacity: 1;
}

/* Backup reminder */
.w2-alert {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--w2-s3);
  overflow: hidden;
  padding: var(--w2-s5);
  border: 1px solid var(--w2-line);
  border-radius: var(--w2-s4);
  color: var(--w2-text-muted);
  background: var(--w2-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 12px 28px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .035);
  font: 500 15px/1.45 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.w2-alert::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--w2-fire);
}
.w2-alert-icon {
  width: var(--w2-s5);
  height: var(--w2-s5);
  flex: 0 0 var(--w2-s5);
  color: var(--w2-fire);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Dashboard status strip */
.ss-anchor {
  --ss-green: var(--w2-lime);
  --ss-green-glow: rgba(200, 241, 53, .18);
  --ss-border: var(--w2-line);
  --ss-text: var(--w2-text);
  --ss-text-mute: var(--w2-text-muted);
  --ss-text-dim: var(--w2-text-quiet);
  position: relative;
  margin: 0;
  border: 1px solid var(--w2-line);
  border-radius: var(--w2-s5);
  background: var(--w2-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 16px 36px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .04);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.ss-anchor::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 3;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--w2-lime) 20%, var(--w2-lime) 80%, transparent);
  box-shadow: 0 0 8px rgba(200, 241, 53, .2);
  opacity: .72;
}
.ss-anchor::after {
  content: '';
  position: absolute;
  top: var(--w2-s5);
  bottom: var(--w2-s5);
  left: 0;
  z-index: 3;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--w2-lime);
  box-shadow: 0 0 8px rgba(200, 241, 53, .2);
}
.ss-next {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  cursor: pointer;
  transition-property: background-color;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.ss-next:hover {
  background: rgba(255, 255, 255, .025);
}
.ss-next .day {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 120px;
  padding: var(--w2-s5) var(--w2-s6);
  border-right: 1px solid var(--w2-line);
}
.ss-next .day .lbl, .ss-next .body .tag, .ss-cell .lbl {
  color: var(--w2-text-quiet);
  font: 700 12px/1.25 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ss-next .day .lbl {
  margin-bottom: var(--w2-s2);
}
.ss-next .day .d {
  color: var(--w2-lime);
  font: 700 24px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  text-shadow: 0 0 8px rgba(200, 241, 53, .16);
}
.ss-next .body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  gap: var(--w2-s2);
  padding: var(--w2-s5) var(--w2-s6);
}
.ss-next .body .tag {
  color: var(--w2-lime);
  opacity: .88;
}
.ss-next .body .name {
  color: var(--w2-text);
  font: 600 17px/1.2 'Inter', sans-serif; font-variant-numeric: tabular-nums;
  letter-spacing: -.018em;
}
.ss-next .arr {
  display: grid;
  place-items: center;
  padding: 0 var(--w2-s6);
  color: var(--w2-lime);
  font: 500 24px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.ss-div {
  position: relative;
  z-index: 1;
  height: 1px;
  margin: 0 var(--w2-s5);
  background: var(--w2-line);
}
.ss-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: var(--w2-s5) 0;
}
.ss-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--w2-s2);
  padding: 0 var(--w2-s5);
}
.ss-cell + .ss-cell::before {
  content: '';
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 0;
  width: 1px;
  background: var(--w2-line);
}
.ss-cell .val {
  color: var(--w2-text);
  font: 700 clamp(20px, 1.4vw, 24px)/1 'Inter', sans-serif;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.ss-cell .val .u {
  margin-left: var(--w2-s1);
  color: var(--w2-text-muted);
  font: 500 12px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.ss-cell .sub {
  color: var(--w2-text-muted);
  font: 500 12px/1.25 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.ss-cell .sub.pos {
  color: var(--w2-lime);
}
.ss-cell .sub.neg, .ss-cell .sub.warn {
  color: var(--w2-fire);
}

/* One-shot dashboard entrance: split children, 70ms stagger, W2 spring. */
@keyframes w2DashboardEnter {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(.98);
  }
  72% {
    opacity: 1;
    transform: translateY(-1px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes w2StatusEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#dash-widgets > * {
  animation: w2DashboardEnter 300ms cubic-bezier(.2, .9, .2, 1) backwards;
}
#dash-widgets > :nth-child(1) {
  animation-delay: 0ms;
}
#dash-widgets > :nth-child(2) {
  animation-delay: 80ms;
}
#dash-widgets > :nth-child(3) {
  animation-delay: 160ms;
}
#dash-widgets > :nth-child(4) {
  animation-delay: 240ms;
}
#dash-widgets > :nth-child(5) {
  animation-delay: 320ms;
}
#dash-widgets > :nth-child(6) {
  animation-delay: 400ms;
}
#dash-widgets > :nth-child(7) {
  animation-delay: 480ms;
}
#dash-widgets > :nth-child(8) {
  animation-delay: 560ms;
}
#dash-widgets > :nth-child(n+9) {
  animation-delay: 560ms;
}

/* Вход играет один раз за загрузку страницы: повторные перерисовки (скрытие карточки, возврат на экран, слияние данных) без стаггера */
#dash-widgets.w2-no-enter > * {
  animation: none;
}
#dash-widgets.w2-no-enter ~ #status-strip-anchor > .ss-anchor {
  animation: none;
}
#status-strip-anchor > .ss-anchor {
  animation: w2StatusEnter 300ms cubic-bezier(.2, .9, .2, 1) 140ms backwards;
}
@media (max-width: 900px) {
  #screen-dashboard {
    padding: var(--w2-s6) var(--w2-s5);
  }
  .sf-tbar {
    flex-wrap: wrap;
    gap: var(--w2-s3);
    padding: var(--w2-s4) var(--w2-s5);
  }
  .sf-logo-mark {
    width: 42px;
    height: 42px;
  }
  .sf-logo-lbl .w1,.sf-logo-lbl .w2 {
    font-size: 14px;
  }
  .sf-tbar-div {
    height: 32px;
    margin: 0 var(--w2-s1);
  }
  .sf-nav {
    gap: var(--w2-s2);
    flex-wrap: wrap;
  }
  .sf-nav-it {
    min-width: 64px;
    gap: var(--w2-s2);
    padding: var(--w2-s3);
    font-size: 11px;
  }
  .sf-nav-it svg {
    width: 20px;
    height: 20px;
  }
  .sf-state {
    gap: var(--w2-s2);
    padding: var(--w2-s2) var(--w2-s3);
  }
  .sf-state .dot {
    width: 8px;
    height: 8px;
  }
  .sf-state .txt, .sf-state .ver {
    font-size: 11px;
  }
  .v11-act {
    align-items: flex-start;
    gap: var(--w2-s3);
    padding: var(--w2-s5);
    border-radius: var(--w2-s4);
  }
  .v11-act-ico {
    width: var(--w2-s8);
    height: var(--w2-s8);
  }
  .v11-act-ico svg {
    width: var(--w2-s5);
    height: var(--w2-s5);
  }
  .v11-act-body {
    align-items: flex-start;
    gap: var(--w2-s3);
  }
  .v11-act-arr {
    align-self: center;
    margin-left: 0;
  }
  .ss-next .day {
    min-width: 96px;
    padding: var(--w2-s5);
  }
  .ss-next {
    flex-wrap: wrap;
  }
  .ss-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--w2-s3);
  }
}

/* Узкий экран: бейдж «когда» не отжимает текст карточки в столбик, а встаёт отдельной строкой под текстом во всю ширину карточки */
@media (max-width: 600px) {
  .v11-act-body {
    flex-direction: column;
    align-items: stretch;
  }
  .v11-act-when {
    align-self: flex-start;
    margin-top: var(--w2-s2);
  }
  .ss-next .body {
    padding: var(--w2-s5);
  }
  .ss-next .arr {
    padding: 0 var(--w2-s4);
  }
  .ss-strip {
    gap: var(--w2-s6) 0;
    padding: var(--w2-s5) 0;
  }
  .ss-cell {
    gap: var(--w2-s2);
    padding: 0 var(--w2-s5);
  }
  .ss-cell:nth-child(3)::before {
    display: none;
  }
  .ss-cell:nth-child(n + 3) {
    padding-top: var(--w2-s5);
    border-top: 1px solid var(--w2-line);
  }
}
@media (hover: none) {
  .v11-act-dismiss {
    opacity: .65;
  }
}
@media (prefers-reduced-motion: reduce) {
  #dash-widgets > *, #status-strip-anchor > .ss-anchor {
    animation: none;
  }
  .v11-overdue::after, .v11-milestone::after, .sf-state .dot {
    animation: none;
  }
  .v11-act, .v11-act-arr, .v11-act-dismiss, .ss-next, .sf-nav-it, .sf-nav-it svg, .sf-nav-slider, .sf-state, .sf-state .dot {
    transition-duration: .01ms;
  }
}

/* Общий каркас модалов приложения — W2. Скин сквозной для всех экранов. */
.modal-overlay {
  background:rgba(10,11,12,.72);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.modal-overlay .modal {
  padding:var(--w2-s6);
  border:1px solid var(--w2-line);
  border-radius:var(--w2-s5);
  background:var(--w2-surface);
  box-shadow:0 24px 64px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
  clip-path:none;
}
.modal-overlay .modal::before {
  display:none;
}
.modal-overlay .modal h3 {
  margin:0 0 var(--w2-s3);
  color:var(--w2-text);
  font:700 20px/1.3 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  text-wrap:balance;
}
.modal-overlay .modal #modal-body {
  color:var(--w2-text-muted);
}
.modal-overlay .modal .btn {
  padding:var(--w2-s3) var(--w2-s5);
  border:0;
  border-radius:999px;
  font-family:'Inter',sans-serif;
  font-size:15px;
  font-weight:700;
  clip-path:none;
  transition:transform 150ms ease-out,background-color 160ms ease-out,box-shadow 160ms ease-out,color 160ms ease-out,border-color 160ms ease-out;
}
.modal-overlay .modal .btn:active {
  transform:scale(.96);
}
.modal-overlay .modal .btn-primary {
  background:var(--w2-lime);
  color:#101204;
  box-shadow:none;
  text-shadow:none;
}
.modal-overlay .modal .btn-primary:hover {
  box-shadow:0 0 14px rgba(200,241,53,.25);
}
.modal-overlay .modal .btn-secondary {
  border:1px solid var(--w2-line);
  background:var(--w2-surface-raised);
  color:var(--w2-text-muted);
}
.modal-overlay .modal .btn-secondary:hover {
  border-color:rgba(255,255,255,.14);
  color:var(--w2-text);
}
.modal-overlay .modal .btn-danger {
  border:1px solid rgba(241,70,44,.35);
  background:transparent;
  color:var(--w2-fire);
}
.modal-overlay .modal .btn-danger:hover {
  background:rgba(241,70,44,.08);
}

/* Сцена при активном Focus: плавающие виджеты приложения (пилюля пользователя,
   статус синка) не висят поверх оверлея ни на каком вьюпорте */
body:has(.focus-v2.active) :is(.xp-user-widget, #xp-sync-status) {
  display: none !important;
}