.k-tab_sel .tab-btn.on { color: #2b1d10; margin: 3px 3px 2px; }
.k-tab_sel .tab-btn.on::after { display: none; }
.k-tab_sel .tab-btn.on canvas { opacity: 1; }
.k-tabbar .tabbar { box-shadow: none; }
.k-tabbar .tab-btn:not(.on) { color: #c4aa82; }
.k-tabbar .tab-btn:not(.on) canvas { opacity: .8; }

.k-tile .more-tile, .k-tile .ph-tile { color: var(--fg); }
.k-tile .ph-tile { box-shadow: none !important; }
.k-tile_on .more-tile.on, .k-tile_on .ph-tile.on { color: var(--fg); }

.k-chip .chip { color: var(--fg); padding: 2px 6px 3px; }
.k-chip .chip.dot { padding: 2px 3px; }
.k-chip_on .chip.on { color: #2b1d10; }

.k-button_off .btn:disabled { opacity: 1; color: #8e949e; filter: none; transform: none; cursor: default; }
.k-button_off .btn:disabled canvas { filter: grayscale(1) brightness(.75); }

.k-header body.phone .sign-hang { animation: none; }
.k-header body.phone .sign-hang::before, .k-header body.phone .sign-hang::after { display: none; }
.k-header body.phone .sign { padding: 2px 10px; }

.k-sheet_grip body.phone .sheet-grip i { width: var(--ui-sheet_grip-w); height: var(--ui-sheet_grip-h); background: var(--ui-sheet_grip) 0 0 / 100% 100% no-repeat; box-shadow: none; }

.k-meter .xp-bar, .k-meter .wg-bar, .k-meter .progress, .k-meter .jr-bar, .meter { height: calc(var(--uis) * 9); background-color: transparent; }
.meter { display: block; width: 100%; }
.k-meter_fill .xp-fill, .k-meter_fill .wg-fill, .k-meter_fill .progress > div, .k-meter_fill .jr-bar > div, .meter > i {
  display: block; height: 100%; max-width: 100%;
  background: var(--ui-meter_fill) 0 0 / var(--ui-meter_fill-w) var(--ui-meter_fill-h) repeat-x;
  box-shadow: inset calc(var(--uis) * -1) 0 0 rgba(0, 0, 0, .28);
}
.k-meter_fill .wg-q.ready .wg-fill, .meter.good > i { background: var(--good); box-shadow: inset 0 calc(var(--uis) * -1) 0 rgba(0, 0, 0, .28); }

.badge-pip { position: absolute; top: calc(var(--uis) * -2); right: calc(var(--uis) * -2); z-index: 2; width: var(--ui-badge_pip-w, 12px); height: var(--ui-badge_pip-h, 12px); background: var(--ui-badge_pip, var(--bad)) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.k-badge_pip .tab-btn.pip::before, .k-badge_pip .nav-btn.pip::before, .k-badge_pip .wg-toggle.pip::after {
  width: var(--ui-badge_pip-w); height: var(--ui-badge_pip-h); background: var(--ui-badge_pip) 0 0 / 100% 100% no-repeat; box-shadow: none;
}
.badge-num { display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--uis) * 9); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; text-box: trim-both cap alphabetic; pointer-events: none; }
.badge-num.corner { position: absolute; top: calc(var(--uis) * -3); right: calc(var(--uis) * -3); z-index: 2; }

.k-toggle_off .switch { width: var(--ui-toggle_off-w); height: var(--ui-toggle_off-h); background: var(--ui-toggle_off) 0 0 / 100% 100% no-repeat; box-shadow: none; flex: none; }
.k-toggle_on .switch.on { background-image: var(--ui-toggle_on); }
.k-toggle_off .switch .knob { display: none; }
.k-toggle_off .toggle input[type="checkbox"] { appearance: none; margin: 0; flex: none; cursor: pointer; width: var(--ui-toggle_off-w); height: var(--ui-toggle_off-h); background: var(--ui-toggle_off) 0 0 / 100% 100% no-repeat; }
.k-toggle_on .toggle input[type="checkbox"]:checked { background-image: var(--ui-toggle_on); }
.switch:active, .toggle input[type="checkbox"]:active { transform: translateY(var(--uis)); }

.divider { display: block; border: 0; margin: 8px 0; height: var(--ui-divider-h, 8px); background: var(--ui-divider) 0 0 / var(--ui-divider-w) var(--ui-divider-h) repeat-x; flex: none; align-self: stretch; }

.spinner, .empty[class*="art-"]::before {
  --img: var(--ui-spinner); --w: var(--ui-spinner-w); --h: var(--ui-spinner-h); --n: var(--ui-spinner-n); --ms: var(--ui-spinner-ms);
  display: inline-block; flex: none; vertical-align: middle; width: var(--w); height: var(--h);
  background: var(--img) 0 0 / calc(var(--w) * var(--n)) var(--h) no-repeat;
  animation: uk-strip calc(var(--ms) * var(--n)) steps(var(--n)) infinite;
}
@keyframes uk-strip { to { background-position-x: calc(var(--w) * var(--n) * -1); } }

.empty[class*="art-"] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px 12px 32px; text-align: center; color: var(--muted); line-height: 1.3; }
.empty[class*="art-"]::before { content: ''; display: block; }
.empty.art-bag::before { --img: var(--ui-empty_bag); --w: var(--ui-empty_bag-w); --h: var(--ui-empty_bag-h); --n: var(--ui-empty_bag-n); --ms: var(--ui-empty_bag-ms); }
.empty.art-book::before { --img: var(--ui-empty_book); --w: var(--ui-empty_book-w); --h: var(--ui-empty_book-h); --n: var(--ui-empty_book-n); --ms: var(--ui-empty_book-ms); }
.empty.art-list::before { --img: var(--ui-empty_list); --w: var(--ui-empty_list-w); --h: var(--ui-empty_list-h); --n: var(--ui-empty_list-n); --ms: var(--ui-empty_list-ms); }
.empty > b { color: var(--fg); font-size: 16px; font-weight: 700; }

.loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; color: var(--muted); font-size: var(--fs-label, 14px); line-height: 1; }
.loading > span:last-child { text-box: trim-both cap alphabetic; }
.skel-row { display: flex; flex-wrap: wrap; gap: 8px; }
.skel { display: block; width: 132px; height: 30px; background: var(--bg3); box-shadow: 0 0 0 3px var(--ink); animation: uk-skel 1.2s steps(2, end) infinite alternate; }
body.phone .skel { height: 44px; }
@keyframes uk-skel { to { opacity: .45; } }
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg, #1a1a1a); color: var(--muted, #888); font: 16px "Pixelify Cases", monospace; z-index: 300; }
.boot > span { animation: ls-blink 1.2s steps(1, end) infinite; }

@media (prefers-reduced-motion: reduce) {
  .spinner, .empty[class*="art-"]::before, .skel, .boot > span { animation: none; }
}