/* Пульт · каркас: рамка контура, разделы слева, верхняя панель, боковая карточка, окна, поиск, уведомления. */

/* рамка контура: цвет меняется вместе с контуром */
.frame { position: fixed; inset: 0; z-index: 400; pointer-events: none; overflow: hidden; }
.frame::before {
  content: ""; position: absolute; inset: var(--frame-w); border-radius: var(--r-lg);
  box-shadow: 0 0 0 60px var(--frame);
  transition: box-shadow .5s var(--ease);
}
.frame-tag {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  height: var(--frame-w); display: flex; align-items: center; gap: 6px;
  font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72);
  white-space: nowrap;
}
html[data-contour="wcd"] .frame-tag { color: rgba(253, 246, 227, .55); }
body { background: var(--frame); transition: background-color .5s var(--ease); }

.shell {
  min-height: 100vh;
  padding: var(--frame-w);
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
}
.shell-bg { position: fixed; inset: 0; z-index: -1; background: var(--cream); }

/* ---------- разделы слева */
.side {
  position: sticky; top: var(--frame-w);
  height: calc(100vh - 2 * var(--frame-w));
  display: flex; flex-direction: column;
  background: var(--paper);
  border-right: 2px solid var(--ink);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  overflow: hidden;
  z-index: 30;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 18px 18px 16px; }
.brand-mark { position: relative; width: 36px; height: 36px; flex: none; border: 2px solid var(--ink); border-radius: 11px; background: var(--white); box-shadow: var(--sh); display: grid; place-items: center; }
.brand-mark svg { width: 22px; height: 22px; }
.brand > span:last-child { display: grid; min-width: 0; }
.menu-scrim { display: none; }
.brand-name { font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.brand-sub { font-size: 11.5px; font-weight: 600; color: var(--mut); line-height: 1.2; margin-top: 2px; }

.nav-scroll { flex: 1 1 auto; overflow-y: auto; padding: 4px 12px 12px; scrollbar-width: thin; }
.nav-group + .nav-group { margin-top: 14px; padding-top: 12px; border-top: 1.5px dashed var(--line-2); }
.nav-label { padding: 0 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut-2); }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 11px;
  height: 40px; padding: 0 10px 0 11px; margin: 2px 0;
  border: 2px solid transparent; border-radius: 11px;
  font-weight: 600; font-size: 14.5px; color: var(--ink-2);
  transition: background .15s, border-color .15s, color .15s, transform .15s var(--ease);
}
.nav-item .i { color: var(--ink-3); transition: transform .2s var(--ease), color .15s; }
.nav-item:hover { background: var(--cream); color: var(--ink); }
.nav-item:hover .i { transform: translateX(1px); color: var(--ink); }
.nav-item[aria-current="page"] { background: var(--nav-on); border-color: var(--ink); color: var(--ink); font-weight: 700; box-shadow: var(--sh); }
.nav-item[aria-current="page"] .i { color: var(--ink); }
.nav-item .count { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: var(--cream-2); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.nav-item[aria-current="page"] .count { background: var(--white); border: 1.5px solid var(--ink); }
.nav-item .count.hot { background: var(--red); color: #fff; border: 0; }
.nav-item .count.soft { background: transparent; color: var(--mut); font-weight: 600; }
.nav-item.locked { color: var(--mut); }
.nav-item.locked .i { color: var(--mut-2); }
.nav-item .lock { margin-left: auto; color: var(--mut-2); }

.side-demo { margin: 0 12px 10px; padding: 10px 12px; border: 1.5px dashed var(--line-2); border-radius: 12px; background: var(--cream); display: grid; gap: 8px; }
.side-demo .kicker { font-size: 10px; }
.side-demo .sw-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 600; }
.side-demo .select { height: 32px; font-size: 12.5px; }
.side-demo .note { font-size: 11px; color: var(--mut); line-height: 1.35; }
.side-foot { border-top: 2px solid var(--ink); padding: 12px 14px; display: flex; align-items: center; gap: 10px; background: var(--white); }
.side-foot .who { min-width: 0; flex: 1; }
.side-foot .who b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.side-foot .who span { display: block; font-size: 11.5px; color: var(--mut); line-height: 1.3; }

/* ---------- верхняя панель */
.main-col { min-width: 0; display: flex; flex-direction: column; background: var(--cream); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.topbar {
  position: sticky; top: var(--frame-w); z-index: 25;
  height: var(--top-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 22px 0 20px;
  background: rgba(253, 246, 227, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 2px solid var(--ink);
  border-radius: 0 var(--r-lg) 0 0;
}
.topbar .sp { flex: 1 1 auto; min-width: 8px; }

.contour { display: inline-flex; align-items: center; padding: 3px; gap: 2px; height: 40px; border: 2px solid var(--ink); border-radius: 12px; background: var(--white); box-shadow: var(--sh); flex: none; }
.contour button { height: 30px; padding: 0 12px 0 10px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 8px; background: transparent; font-weight: 700; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; transition: background .2s, color .2s; }
.contour button:hover { background: var(--cream); }
.contour button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
html[data-contour="fe"] .contour button[aria-pressed="true"] { background: var(--magenta); color: #fff; }
.contour .cdot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.contour .cdot.wcd { background: conic-gradient(var(--red) 0 25%, var(--yellow) 0 50%, var(--blue) 0 75%, var(--green) 0); border-color: var(--ink); }
.contour button[aria-pressed="true"] .cdot.wcd { border-color: var(--cream); }
.contour .cdot.fe { background: var(--magenta); border-color: var(--magenta); }
.contour button[aria-pressed="true"] .cdot.fe { border-color: #fff; }

.chip-btn {
  height: 40px; display: inline-flex; align-items: center; gap: 9px; padding: 0 12px 0 11px; flex: none;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--white); box-shadow: var(--sh);
  font-weight: 600; font-size: 13.5px; white-space: nowrap; max-width: 280px;
  transition: transform .15s var(--ease), box-shadow .15s;
}
.chip-btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.chip-btn:active { transform: translateY(2px); box-shadow: none; }
.chip-btn .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.chip-btn .val { font-weight: 700; overflow: hidden; text-overflow: clip; }
.chip-btn .chev { color: var(--mut); }
.crumbs { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.crumbs .sep { color: var(--mut-2); }

.wave-chip { max-width: none; }
.wave-chip .ring { width: 26px; height: 26px; flex: none; }
.wave-chip .days { font-size: 15px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wave-chip .days-s { display: none; }
.wave-chip .ribbon { display: flex; height: 4px; width: 22px; border-radius: 2px; overflow: hidden; }
.wave-chip .ribbon i { flex: 1; }

.search-btn {
  height: 40px; min-width: 240px; max-width: 340px; flex: 0 1 300px;
  display: flex; align-items: center; gap: 10px; padding: 0 8px 0 12px;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--white); color: var(--mut);
  font-size: 13.5px; font-weight: 500; text-align: left; box-shadow: inset 0 2px 0 rgba(29,28,28,.05);
  transition: border-color .15s, box-shadow .15s;
}
.search-btn:hover { box-shadow: inset 0 2px 0 rgba(29,28,28,.05), 0 0 0 4px rgba(245, 194, 68, .28); }
.search-btn .txt { flex: 1; overflow: hidden; white-space: nowrap; }
.clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; flex: none; cursor: default; }
.clock b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.clock span { font-size: 11px; color: var(--mut); font-weight: 600; }

.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border: 2px solid var(--ink); border-radius: 12px; background: var(--white); box-shadow: var(--sh); transition: transform .15s var(--ease), box-shadow .15s; }
.icon-btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.icon-btn:active { transform: translateY(2px); box-shadow: none; }

.m-only { display: none !important; }

/* ---------- содержимое */
.main { flex: 1 1 auto; min-width: 0; padding: 0 0 72px; }
.main:focus { outline: none; }
.page { max-width: 1360px; margin: 0 auto; padding: 28px 32px 0; }
.page.enter { animation: rise-in .35s var(--ease-out); }
.page.narrow { max-width: 980px; }
.page.wide { max-width: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head .titles { min-width: 0; flex: 1 1 520px; }
.page-head .kicker { margin-bottom: 6px; }
.page-head .sub { margin-top: 8px; color: var(--ink-3); font-size: 15px; max-width: 760px; }
.page-head .acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none; max-width: 100%; }

.readonly-bar, .preview-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 10px 14px;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--yellow-xl);
  font-size: 13.5px; font-weight: 500;
}
.preview-bar { background: var(--accent-xl); }
.preview-bar > span:first-of-type, .readonly-bar > span:first-of-type { flex: 1 1 320px; min-width: 0; }
.preview-bar b, .readonly-bar b { font-weight: 700; }

/* ---------- боковая карточка */
.drawer {
  position: fixed; z-index: 120;
  top: var(--frame-w); right: var(--frame-w); bottom: var(--frame-w);
  width: min(var(--drawer-w), calc(100vw - 2 * var(--frame-w)));
  display: flex; flex-direction: column;
  background: var(--paper);
  border-left: 2px solid var(--ink);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  box-shadow: -12px 0 40px -18px rgba(29, 28, 28, .45), -4px 0 0 rgba(29,28,28,.06);
  transform: translateX(calc(100% + 30px));
  transition: transform .38s var(--ease-out), visibility 0s linear .38s;
  visibility: hidden;
}
.drawer:focus { outline: none; }
.drawer.open { transform: none; visibility: visible; transition: transform .38s var(--ease-out), visibility 0s; }
.drawer-head { padding: 18px 20px 0; border-bottom: 2px solid var(--ink); background: var(--white); border-radius: 0 var(--r-lg) 0 0; }
.drawer-head .top-row { display: flex; align-items: flex-start; gap: 12px; }
.drawer-head .t { flex: 1; min-width: 0; }
.drawer-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-top: 4px; overflow-wrap: anywhere; }
.drawer-head .meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.drawer-tabs { display: flex; gap: 2px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
.drawer-tabs::-webkit-scrollbar { display: none; }
.drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px 28px; scrollbar-width: thin; }
.drawer-foot { border-top: 2px solid var(--ink); padding: 12px 16px; background: var(--white); border-radius: 0 0 var(--r-lg) 0; }
.drawer-scrim { position: fixed; inset: 0; z-index: 110; background: rgba(29, 28, 28, .18); opacity: 0; pointer-events: none; transition: opacity .3s; }
.drawer-scrim.on { opacity: 1; pointer-events: auto; }
@media (min-width: 1201px) { .drawer-scrim { background: transparent; } }

/* ---------- окна */
.layer { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; background: rgba(29, 28, 28, .38); animation: fade-in .18s; }
.layer.top { place-items: start center; padding-top: 12vh; }
.modal { width: min(580px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-pop); animation: pop-in .22s var(--ease-out); }
.modal.wide { width: min(820px, 100%); }
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1.5px solid var(--line); }
.modal-head h2 { flex: 1; font-size: 20px; font-weight: 800; letter-spacing: -.015em; }
.modal-head .sub { margin-top: 4px; font-size: 13.5px; color: var(--mut); }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 14px 20px; border-top: 1.5px solid var(--line); background: var(--white); border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* ---------- всплывающие списки */
.pop { position: fixed; z-index: 320; min-width: 220px; max-width: min(380px, calc(100vw - 24px)); max-height: min(460px, calc(100vh - 40px)); overflow-y: auto; background: var(--white); border: 2px solid var(--ink); border-radius: 12px; box-shadow: var(--sh-pop); padding: 6px; animation: pop-in .16s var(--ease-out); }
.pop-title { padding: 8px 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mut); }
.pop-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 14px; font-weight: 500; }
.pop-item:hover, .pop-item.on { background: var(--cream); }
.pop-item[aria-checked="true"] { font-weight: 700; }
.pop-item[aria-checked="true"]::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); flex: none; }
.pop-item .sub { display: block; font-size: 12px; color: var(--mut); font-weight: 400; }
.pop-item[disabled] { opacity: .5; cursor: not-allowed; }
.pop-sep { height: 0; border-top: 1.5px solid var(--line); margin: 6px 4px; }
.pop .search { padding: 4px 4px 6px; position: sticky; top: -6px; background: var(--white); z-index: 1; }

/* ---------- поиск и команды */
.cmdk { width: min(680px, 100%); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-pop); overflow: hidden; animation: pop-in .2s var(--ease-out); display: flex; flex-direction: column; max-height: 70vh; }
.cmdk-in { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 62px; border-bottom: 2px solid var(--ink); background: var(--white); }
.cmdk-in input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.cmdk-in input::placeholder { color: var(--mut-2); }
.cmdk-in input:focus-visible { outline: none; }
.cmdk-in:focus-within { box-shadow: inset 0 -3px 0 var(--accent); }
.cmdk-list { overflow-y: auto; padding: 8px; }
.cmdk-group { padding: 10px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; }
.cmdk-item .ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--line-2); border-radius: 8px; background: var(--white); }
.cmdk-item .t { flex: 1; min-width: 0; }
.cmdk-item .t b { display: block; font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; }
.cmdk-item .t span { display: block; font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; }
.cmdk-item .hint { font-size: 11.5px; color: var(--mut); white-space: nowrap; }
.cmdk-item.on { background: var(--nav-on); }
.cmdk-item.on .ico { border-color: var(--ink); }
.cmdk-foot { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 16px; border-top: 1.5px solid var(--line); font-size: 12px; color: var(--mut); background: var(--white); }
.cmdk-empty { padding: 28px 16px; text-align: center; color: var(--mut); font-weight: 500; }
mark { background: var(--hl); color: inherit; border-radius: 3px; padding: 0 1px; }

/* ---------- уведомления */
.toasts { position: fixed; z-index: 350; left: 50%; bottom: calc(var(--frame-w) + 18px); transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; width: min(560px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 16px; min-height: 48px; width: 100%; background: var(--ink); color: var(--cream); border-radius: 12px; box-shadow: 0 4px 0 rgba(0,0,0,.25), 0 16px 32px -12px rgba(0,0,0,.4); font-size: 14px; font-weight: 500; animation: rise-in .25s var(--ease-out); }
.toast .i { color: var(--yellow); }
.toast .toast-msg { flex: 1; min-width: 0; line-height: 1.4; }
.toast .toast-msg b { font-weight: 700; }
.toast button { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--hl); color: var(--ink); font-weight: 700; font-size: 13px; flex: none; }
.toast button.x { background: transparent; color: var(--cream); padding: 0 6px; }
.toast .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--yellow); transform-origin: left; }
.toast.out { animation: fade-in .2s reverse forwards; }

/* ---------- подсказка */
.tip { position: fixed; z-index: 500; max-width: 300px; padding: 7px 10px; border-radius: 8px; background: var(--ink); color: var(--cream); font-size: 12.5px; font-weight: 500; line-height: 1.4; pointer-events: none; box-shadow: 0 6px 18px -6px rgba(0,0,0,.4); animation: fade-in .12s; }
.tip b { color: var(--hl); font-weight: 700; }

/* ---------- нижняя навигация (телефон) */
.tabbar { display: none; }

/* ---------- узкие экраны */
@media (max-width: 1280px) {
  .search-btn { min-width: 44px; flex: 0 1 220px; }
  .clock span { display: none; }
}
@media (max-width: 1100px) {
  :root { --side-w: 220px; }
  .search-btn .txt { display: none; }
  .search-btn { flex: none; min-width: 0; width: 44px; padding: 0; justify-content: center; }
  .search-btn kbd { display: none; }
  .chip-btn .lbl { display: none; }
}
@media (max-width: 900px) {
  :root { --frame-w: 4px; --top-h: 58px; --drawer-w: 100vw; }
  .frame::before { border-radius: 12px; }
  .frame-tag { display: none; }
  .shell { display: block; }
  .side { position: fixed; left: var(--frame-w); top: var(--frame-w); bottom: var(--frame-w); height: auto; width: min(310px, 86vw); border-radius: 12px 0 0 12px; transform: translateX(-110%); transition: transform .3s var(--ease-out); box-shadow: 6px 0 0 rgba(29,28,28,.15); z-index: 210; border-right: 2px solid var(--ink); }
  .shell.menu-open .side { transform: none; }
  .menu-scrim { display: block; position: fixed; inset: 0; z-index: 205; background: rgba(29, 28, 28, .4); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .shell.menu-open .menu-scrim { opacity: 1; pointer-events: auto; }
  .main-col { border-radius: 12px; min-height: calc(100vh - 2 * var(--frame-w)); }
  .topbar { padding: 0 10px; gap: 8px; border-radius: 12px 12px 0 0; }
  .d-only { display: none !important; }
  .m-only { display: flex !important; }
  .m-title { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; }
  .m-contour { height: 32px; padding: 0 8px 0 9px; border-radius: 999px; border: 2px solid var(--ink); background: var(--white); display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; flex: none; }
  .m-contour .cdot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); flex: none; }
  .m-contour .cdot.wcd { background: conic-gradient(var(--red) 0 25%, var(--yellow) 0 50%, var(--blue) 0 75%, var(--green) 0); }
  .m-contour .cdot.fe { background: var(--magenta); }
  html[data-contour="fe"] .m-contour { background: var(--magenta-l); }
  .wave-chip .lbl, .wave-chip .ring, .wave-chip .days { display: none; }
  .wave-chip .days-s { display: inline; font-size: 14px; font-weight: 800; }
  .preview-bar > span:first-of-type, .readonly-bar > span:first-of-type { flex-basis: 220px; }
  .m-title { font-size: 16px; }
  .icon-btn { width: 38px; height: 38px; border-radius: 10px; }
  .wave-chip { height: 38px; padding: 0 9px; gap: 6px; }
  .wave-chip .ring { width: 22px; height: 22px; }
  .wave-chip .ribbon, .wave-chip .val-date, .wave-chip .chev { display: none; }
  .page { padding: 18px 14px 0; }
  .page-head { margin-bottom: 16px; }
  .display { font-size: 27px; }
  .h1 { font-size: 23px; }
  .drawer { top: var(--frame-w); right: var(--frame-w); left: var(--frame-w); bottom: var(--frame-w); width: auto; border-radius: 12px; border: 2px solid var(--ink); }
  .drawer-head { border-radius: 12px 12px 0 0; padding: 14px 14px 0; }
  .drawer-body { padding: 14px 14px 90px; }
  .drawer-foot { border-radius: 0 0 12px 12px; }
  .layer { padding: 10px; place-items: end center; }
  .layer.top { padding-top: 10px; place-items: start center; }
  .modal { max-height: calc(100vh - 20px); border-radius: 14px; }
  .main { padding-bottom: 96px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; z-index: 100; left: var(--frame-w); right: var(--frame-w); bottom: var(--frame-w);
    height: 64px; padding: 0 4px; background: var(--paper); border-top: 2px solid var(--ink); border-radius: 0 0 12px 12px;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: transparent; font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
  .tabbar .i { width: 22px; height: 22px; }
  .tabbar [aria-current="page"] { color: var(--ink); font-weight: 800; }
  .tabbar [aria-current="page"]::before { content: ""; position: absolute; top: 6px; width: 46px; height: 30px; border-radius: 10px; background: var(--nav-on); border: 1.5px solid var(--ink); z-index: -1; }
  .tabbar .tb-ico { position: relative; z-index: 1; display: grid; place-items: center; height: 30px; width: 46px; margin-top: 2px; }
  .tabbar .badge { position: absolute; top: -3px; right: 2px; min-width: 18px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; border: 1.5px solid var(--paper); }
  .toasts { bottom: 80px; }
}

@media (max-width: 600px) {
  .page-head .acts { width: 100%; }
  .page-head .acts > .btn { flex: 1 1 auto; justify-content: center; }
  .page-head .acts:has(> .btn:nth-child(3)) > .btn-primary { order: -1; flex-basis: 100%; }
}