:root {
  --bg: #08090b;
  --bg2: #101218;
  --panel: #15171d;
  --panel2: #1c1f28;
  --line: #2e3240;
  --text: #ececf1;
  --muted: #9494a3;
  --yellow: #e8b84a;
  --yellow-dim: #b88922;
  --danger: #e0574f;
  --ok: #3dba7a;
  --drawer: 268px;
  --radius: 12px;
  --font: "Manrope", "SF Pro Text", "Segoe UI", sans-serif;
  --fs: 13px;
  --fs-sm: 11px;
  --fs-xs: 10px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --shadow-btn: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 14px rgba(0,0,0,.22);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(232,184,74,.06), transparent 45%),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* не даём Telegram свернуть миниапп жестом «потянуть вниз» и не зумим двойным тапом */
  overscroll-behavior-y: none;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}
button, input, textarea, select {
  font: inherit;
  font-weight: 600;
  -webkit-appearance: none;
  appearance: none;
}
button {
  color: inherit;
  background: transparent;
  overflow: visible;
  line-height: inherit;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid #3a3f4d;
  border-radius: 5px;
  background: #0b0c10;
  flex: none;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input[type="checkbox"]:checked {
  /* Стиль C: плотнее галочки */
  background: #f0c43a;
  border-color: #f0c43a;
  box-shadow: 0 0 0 3px rgba(240,196,58,.18);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #17120a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
code { color: var(--yellow); }

.app { display: grid; grid-template-columns: var(--drawer) 1fr; min-height: 100%; }

.drawer {
  background: linear-gradient(180deg, #101117 0%, #0a0b0f 100%);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  z-index: 20;
  overflow: hidden;
}
.promo {
  margin: 12px;
  padding: 16px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 80% 20%, rgba(240,196,58,.25), transparent 45%),
    linear-gradient(135deg, #1c1508, #12131a 60%);
  border: 1px solid rgba(240,196,58,.28);
  flex: none;
}
.promo-badge {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  color: #111; background: var(--yellow); border-radius: 999px; padding: 3px 8px;
}
.promo-title { margin-top: 10px; font-size: 26px; font-weight: 800; }
.promo-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }

.menu {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; border: 0; background: transparent; color: var(--muted);
  text-align: left; padding: 9px 10px; border-radius: 10px; cursor: pointer;
  font-size: var(--fs); font-weight: 600;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.menu-item .ico { width: 22px; text-align: center; opacity: .9; }
.menu-item .ico-img {
  width: 22px; height: 22px; object-fit: contain; flex: none;
  border-radius: 0;
  background: transparent;
  filter: none;
}
.menu-item.active .ico-img { filter: none; }
.menu-item:hover { background: var(--panel2); color: var(--text); }
.menu-item.active {
  background: linear-gradient(180deg, #f0c45a 0%, var(--yellow) 100%);
  color: #17120a; font-weight: 700;
  box-shadow: 0 6px 14px rgba(232,184,74,.18);
}
.menu-item[hidden],
#menuAdminBtn[hidden] {
  display: none !important;
}
.menu-item .badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: #111; color: var(--yellow);
  font-size: 11px; display: grid; place-items: center; font-weight: 700;
}
.menu-item.active .badge { background: rgba(0,0,0,.2); color: #111; }

.drawer-foot { margin-top: auto; padding: 12px; flex: none; }
.job-chip {
  font-size: 12px; color: var(--muted); background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.content { min-width: 0; padding: 0 12px 22px; background:
  radial-gradient(900px 420px at 100% -10%, rgba(232,184,74,.07), transparent 50%),
  transparent;
}
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0 8px; background: rgba(8,9,11,.86); backdrop-filter: blur(10px);
  overflow: visible;
}
.top-status { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sync-status-hint {
  font-size: 10px; line-height: 1.2; color: #e8a84a; font-weight: 600;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(232, 168, 74, .12); border: 1px solid rgba(232, 168, 74, .35);
}
.sync-status-hint.is-paused {
  color: #ffb4ae;
  background: rgba(224, 87, 79, .14);
  border-color: rgba(224, 87, 79, .4);
}
.bot-pause-panel {
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(224, 87, 79, .28);
  background: rgba(224, 87, 79, .08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bot-pause-panel.is-paused {
  border-color: rgba(61, 186, 122, .35);
  background: rgba(61, 186, 122, .08);
}
.bot-pause-title {
  font-weight: 700;
  font-size: var(--fs-md);
}
.bot-pause-copy { margin-bottom: 2px; }
.bot-pause-panel .btn { margin: 0; }

.delay-pad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.delay-pad-cap {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  margin: 0 0 4px;
  text-align: center;
}
.delay-stepper {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 5px 4px;
  min-height: 48px;
}
.delay-step-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  font-size: 16px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  padding: 0;
}
.delay-step-btn:active:not(:disabled) {
  background: rgba(240, 196, 58, 0.14);
  border-color: rgba(240, 196, 58, 0.35);
}
.delay-step-btn:disabled { opacity: 0.35; cursor: default; }
.delay-step-val { text-align: center; min-width: 0; }
.delay-step-num {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #f0c43a;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.delay-step-unit {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.2;
}
.delay-pad-hint {
  margin: 5px 0 0;
  text-align: center;
  font-size: 11px;
}
.delay-hit-stats {
  margin: 6px 0 0;
  line-height: 1.35;
  word-break: break-word;
  font-size: 10px;
  opacity: 0.9;
}
.delay-pad-preview {
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(240, 196, 58, 0.08);
  border: 1px solid rgba(240, 196, 58, 0.22);
  font-size: 12px;
  line-height: 1.3;
  color: var(--text);
  text-align: center;
  font-weight: 600;
}
.delay-pad-preview b { color: #f0c43a; font-weight: 700; }

.day-break-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.day-break-chip {
  appearance: none;
  border: 1px solid #2a2d38;
  background: #121318;
  color: #c9ced8;
  border-radius: 10px;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.day-break-chip.is-on {
  border-color: rgba(240, 210, 74, 0.55);
  background: rgba(240, 210, 74, 0.12);
  color: #f0d24a;
}
.day-break-status {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(90, 140, 90, 0.14);
  border: 1px solid rgba(90, 140, 90, 0.45);
  color: #9ad39a;
}
.day-break-status.is-short {
  background: rgba(224, 87, 79, 0.1);
  border-color: rgba(224, 87, 79, 0.45);
  color: #ef857d;
}
.day-break-warn {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(224, 87, 79, 0.45);
  background: rgba(224, 87, 79, 0.1);
  color: #ef857d;
  font-size: 13px;
  line-height: 1.35;
}
#dayBreakSaveBtn { margin-top: 10px; }

.author-tip-panel {
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.author-tip-title {
  font-weight: 700;
  font-size: var(--fs-md);
}
.author-tip-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.author-tip-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  color: inherit;
}
.author-tip-row .btn { margin: 0; flex: none; white-space: nowrap; }
.author-tip-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.author-tip-presets .btn { margin: 0; min-width: 52px; }
.admin-tips-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-tips-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: var(--fs-sm);
}
.admin-tips-list .tip-who {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-tips-list .tip-meta {
  color: var(--muted);
  flex: none;
  white-space: nowrap;
}
.bridge-panel {
  margin-top: 14px; padding: 12px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
  display: flex; flex-direction: column; gap: 8px;
}
#tokenPanel { margin-top: 0; }
#tokenBookmarkCode { font-size: 11px; }
#tokenAutoHint[hidden], #tokenBrokenHint[hidden], #tokenRenewBtn[hidden] { display: none; }
.token-steps { display: flex; flex-direction: column; gap: 8px; }
.token-steps[hidden] { display: none; }
.bridge-panel .btn { margin: 0; }
.bridge-panel p { margin: 0; }
.bridge-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bridge-title { font-weight: 700; font-size: var(--fs-md); }
.bridge-pill, .bridge-badge {
  flex: none; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--muted);
}
.bridge-badge { font-size: 10px; padding: 2px 6px; line-height: 1.2; }
.bridge-pill.is-bridge, .bridge-badge.is-bridge {
  border-color: rgba(61, 186, 122, .45); background: rgba(61, 186, 122, .18); color: #8ee6b5;
}
.bridge-pill.is-wait, .bridge-badge.is-wait {
  border-color: rgba(232, 168, 74, .45); background: rgba(232, 168, 74, .16); color: #f0d9a8;
}
#bridgeRouteBadge { cursor: pointer; }
.bridge-lamp {
  flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: #8a8f98; box-shadow: 0 0 0 2px rgba(255, 255, 255, .06);
}
.bridge-lamp.is-ok { background: #3dba7a; box-shadow: 0 0 6px rgba(61, 186, 122, .8); }
.bridge-lamp.is-warn { background: #e8a84a; box-shadow: 0 0 6px rgba(232, 168, 74, .8); }
.bridge-lamp.is-off { background: #e05555; box-shadow: 0 0 6px rgba(224, 85, 85, .8); }
.bridge-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.bridge-tabs button {
  font-size: 12px; color: var(--muted); background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
}
.bridge-tabs button.is-active { color: var(--text); border-color: rgba(61, 186, 122, .55); background: rgba(61, 186, 122, .12); }
.bridge-cmd {
  margin: 0; padding: 10px; border-radius: 8px; background: rgba(0, 0, 0, .35);
  font-size: 11px; white-space: pre-wrap; word-break: break-all; user-select: all;
}
.bridge-warn { color: #f0d9a8 !important; }
.bridge-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.bridge-panel[hidden], .bridge-actions[hidden], .bridge-lamp[hidden], .bridge-badge[hidden] { display: none !important; }
.bridge-actions .btn { font-size: 12px; padding-left: 4px; padding-right: 4px; }
.bridge-wizard { display: flex; flex-direction: column; gap: 12px; }
.bridge-wizard[hidden], .bridge-done[hidden], .bridge-link[hidden], .bridge-tip[hidden] { display: none !important; }
.bridge-tip { padding: 8px 10px; border-radius: 10px; background: rgba(232, 168, 74, .1); border: 1px solid rgba(232, 168, 74, .35); }
.bridge-step { display: flex; gap: 10px; align-items: flex-start; }
.bridge-step-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #8ee6b5;
  background: rgba(61, 186, 122, .16); border: 1px solid rgba(61, 186, 122, .45);
}
.bridge-step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bridge-step-title { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.bridge-wizard .bridge-cmd { font-size: 13px; }
.bridge-wait-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #e8a84a;
  animation: bridge-pulse 1.2s ease-in-out infinite;
}
@keyframes bridge-pulse { 50% { opacity: .25; } }
.bridge-help summary { cursor: pointer; font-weight: 700; font-size: 13px; color: #f0d9a8; }
.bridge-help ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.bridge-done {
  padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: #8ee6b5;
  background: rgba(61, 186, 122, .14); border: 1px solid rgba(61, 186, 122, .45);
}
.bridge-link {
  align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 12px; color: var(--muted); text-decoration: underline;
}
.home-planner { margin: 10px 0 12px; border: 1px solid rgba(232, 200, 74, 0.28); }
.unlock-goal-reqs { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.top-actions {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  overflow: visible;
}
#topSection {
  color: var(--text);
  font-weight: 600;
  font-size: var(--fs-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-btn {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); cursor: pointer;
  position: relative;
  overflow: visible;
}
.bell-btn .bell-ico { font-size: 16px; line-height: 1; }
.mail-btn {
  overflow: visible;
  background: #14151a;
  border-color: #3a3d48;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  box-sizing: border-box;
}
.refresh-btn {
  overflow: visible;
  background: #14151a;
  border-color: #3a3d48;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  box-sizing: border-box;
}
.mail-btn .mail-ico {
  width: 20px;
  height: 20px;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.65));
  transform: none;
  transform-origin: center;
}
.refresh-btn .refresh-ico {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
  color: #d7c4a0;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.65));
  transform-origin: 50% 50%;
}
.refresh-btn.is-loading .refresh-ico {
  animation: refresh-spin 0.75s linear infinite;
}
.refresh-btn.is-loading {
  opacity: 0.9;
  pointer-events: none;
}
@keyframes refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.read-all-btn {
  color: #8ee6b5;
  font-weight: 800;
  line-height: 1;
}
.read-all-btn:hover, .read-all-btn:focus-visible {
  border-color: rgba(61, 186, 122, 0.45);
  background: rgba(61, 186, 122, 0.1);
  outline: none;
}
.bell-badge {
  position: absolute;
  top: -3px;
  right: -4px;
  left: auto;
  transform: none;
  min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 999px; background: #e53935; color: #fff;
  font-size: 9px; font-weight: 800; display: grid; place-items: center;
  border: 1.5px solid #0b0b0d;
  box-shadow: none;
  z-index: 2;
  line-height: 1;
  box-sizing: border-box;
  pointer-events: none;
}
.bell-badge[hidden] { display: none !important; }

.notify-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
}
.notify-overlay[hidden] { display: none !important; }
/* сразу после тапа по конверту: backdrop не принимает click того же жеста */
.notify-overlay.is-arming .notify-backdrop {
  pointer-events: none;
}
.notify-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(3px);
}
.notify-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: none;
  background: linear-gradient(180deg, #1a171f 0%, #121218 100%);
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  animation: sheetIn .16s ease;
}
@keyframes sheetIn {
  from { opacity: .5; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.notify-panel-head {
  flex: 0 0 auto;
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  margin: 0;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
  background: #1a171f;
  border-bottom: 1px solid rgba(255,255,255,.06);
  border-radius: 0;
}
.notify-panel-head > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}
.notify-tabs {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: #16141c;
  max-height: none;
  overflow: visible;
}
.notify-tab {
  appearance: none;
  border: 1px solid rgba(255,255,255,.08);
  background: #23202b;
  color: #c9c4d4;
  border-radius: 10px;
  padding: 7px 9px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
}
.notify-tab .nt-ico {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  line-height: 0;
  opacity: .95;
  flex: 0 0 14px;
}
.notify-tab .nt-svg {
  width: 14px;
  height: 14px;
  display: block;
}
.notify-tab .nt-count {
  color: #9b95a8;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.notify-tab.is-active {
  background: #f0c43a;
  border-color: #f0c43a;
  color: #1a1408;
}
.notify-tab.is-active .nt-count {
  color: #5a4810;
}
.notify-tab.is-empty:not(.is-active) {
  opacity: .72;
}
.notify-panel-title { font-weight: 800; font-size: 16px; }
.notify-head-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}
.notify-head-actions .icon-btn.sm {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  flex: 0 0 34px;
  font-size: 0;
  line-height: 0;
}
.notify-head-actions .ico-svg {
  width: 18px;
  height: 18px;
  display: block;
}
.notify-sheet .notify-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain;
}
#menuBtn { display: none; }
.scrim { display: none; }

.page { display: none; animation: fade .18s ease; }
.page.active { display: block; }
@keyframes fade { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }

h1 { margin: 0 0 4px; font-size: var(--fs-lg); font-weight: 650; letter-spacing: -.01em; }
h2 { margin: 0; font-size: var(--fs); font-weight: 600; color: var(--yellow); }
.muted { color: var(--muted); margin: 0 0 10px; line-height: 1.35; font-size: var(--fs-sm); }
.page-title-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }

.hero-card {
  background: linear-gradient(135deg, #1a1408, var(--panel));
  border: 1px solid rgba(240,196,58,.22);
  border-radius: 18px; padding: 18px; margin-bottom: 12px;
}
.hero-kicker { color: var(--yellow); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hero-name { font-size: 24px; font-weight: 800; margin-top: 6px; }
.hero-level { color: var(--muted); margin-top: 4px; font-size: 13px; }

.stat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px;
}
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px;
}
.stat .label { color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.stat .value { font-size: 18px; font-weight: 750; }

.panel {
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%), var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.status-pre {
  margin: 0; white-space: pre-wrap; word-break: break-word; color: #c9cdd8;
  font-size: 12px; line-height: 1.45; max-height: 180px; overflow: auto;
}

.quick-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.quick {
  border: 1px solid var(--line); background: var(--panel2); color: var(--text);
  border-radius: 12px; padding: 12px 8px; cursor: pointer; font-weight: 600;
}

.sticky-actions {
  position: sticky; top: 56px; z-index: 8;
  display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 12px;
  background: linear-gradient(180deg, rgba(7,7,8,.95), rgba(7,7,8,.82));
}

.btn {
  border: 0; border-radius: 11px; padding: 8px 12px; cursor: pointer;
  font-weight: 700; font-size: var(--fs); letter-spacing: 0.01em;
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  box-shadow: var(--shadow-btn);
  transition: transform .12s var(--ease), filter .12s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.btn.sm { padding: 5px 9px; font-size: var(--fs-sm); font-weight: 650; }
.btn.block { width: 100%; margin: 6px 0; }
.btn.primary {
  /* Стиль C: плотная жёлтая кнопка, без «стекла» */
  background: #f0c43a;
  color: #17120a;
  border-color: #f0c43a;
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.btn.ghost { background: var(--panel2); color: var(--text); border: 1px solid var(--line); }
.btn.danger {
  /* Стиль C: плотная красная «Стоп» */
  background: #e23b35;
  color: #fff;
  border-color: #e23b35;
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.btn.ok {
  background: #2f9e68;
  color: #fff;
  border: 1px solid #2f9e68;
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.btn:hover:not(:disabled) { filter: brightness(1.05); }
.btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(.97); }
.btn:disabled { opacity: .55; cursor: default; box-shadow: none; }
.btn:focus-visible {
  outline: 2px solid rgba(232,184,74,.55);
  outline-offset: 2px;
}

/* Вкладки разделов — единый тёмный стиль (не системные белые кнопки Telegram/iOS) */
.tab-row {
  display: flex;
  gap: 6px;
  margin: 8px 0 6px;
  flex-wrap: wrap;
}
.tab-btn,
.wardrobe-tabs .tab-btn,
.wardrobe-bucket-tabs .tab-btn,
.wardrobe-slot-tabs .tab-btn,
.friends-tabs .tab-btn,
.muta-tabs .tab-btn,
.muta-types .tab-btn,
.inventory-tabs .tab-btn {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--line) !important;
  background: var(--panel) !important;
  color: var(--muted) !important;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: var(--fs-sm);
  cursor: pointer;
  font-weight: 550;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
.tab-btn.active,
.wardrobe-tabs .tab-btn.active,
.wardrobe-bucket-tabs .tab-btn.active,
.wardrobe-slot-tabs .tab-btn.active,
.friends-tabs .tab-btn.active,
.muta-tabs .tab-btn.active,
.muta-types .tab-btn.active,
.inventory-tabs .tab-btn.active {
  /* Стиль C: плотная жёлтая активная вкладка */
  color: #17120a !important;
  border-color: #f0c43a !important;
  background: #f0c43a !important;
  font-weight: 700;
}
.tab-btn.is-disabled,
.tab-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Тюряга-стиль: Запустить + Добавить */
.queue-ctrl { margin: 2px 0 10px; }
.queue-meta {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0 0 8px;
  letter-spacing: .01em;
  font-weight: 450;
}
.queue-actions.row.gap,
.row.gap.queue-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 0 0 4px;
}
.queue-actions .btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  box-sizing: border-box;
  white-space: nowrap;
}
.queue-actions .run-ico,
.queue-actions .run-ico-svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: block;
  opacity: 1;
}
.queue-actions .run-ico {
  font-size: 12px;
  line-height: 1;
  width: auto;
  height: auto;
  flex: none;
}
.btn.run-start {
  background: #f0c43a;
  color: #17120a;
  border: 0;
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.btn.run-start .run-ico-svg { color: #17120a; }
.btn.run-stop {
  background: #e23b35;
  color: #fff;
  border: 0;
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.btn.run-stop .run-ico-svg { color: #fff; }
.btn.run-stop:active { filter: brightness(.94); }
.btn.run-start:active { filter: brightness(.96); }
.queue-actions .btn.queue-add,
.queue-actions .btn.ghost {
  background: #22242e;
  color: #fff;
  border: 1px solid #5a5e6c;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.queue-actions .btn.queue-add:active,
.queue-actions .btn.ghost:active {
  filter: brightness(1.08);
}

.floor-tree { display: flex; flex-direction: column; gap: 10px; }
.floor {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  overflow: visible;
}
.floor.open {
  overflow: hidden;
}
.floor-head {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; color: inherit; cursor: pointer;
  padding: 12px 14px; text-align: left;
  overflow: visible;
  line-height: 1.35;
  min-height: 52px;
  box-sizing: border-box;
}
.floor-head:hover { background: rgba(255,255,255,.02); }
.floor-mark {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(240,196,58,.12); color: var(--yellow); font-weight: 800;
}
.floor-meta { flex: 1; min-width: 0; overflow: visible; }
.floor-title {
  font-weight: 700;
  line-height: 1.35;
  overflow: visible;
  white-space: normal;
}
.floor-sub {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
  line-height: 1.35;
  overflow: visible;
}
.floor-count {
  font-size: 12px; color: var(--muted); background: var(--bg2);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px;
  flex: none; line-height: 1.2;
}
.floor.open .floor-body { display: block; }
.floor-body { display: none; border-top: 1px solid var(--line); padding: 8px; }
.floor.locked {
  opacity: .72;
}
.floor-head:disabled,
.floor-head.locked {
  cursor: not-allowed;
  opacity: .85;
}
.floor-head.locked:hover { background: transparent; }
.floor-head.locked.unlockable {
  cursor: pointer;
  opacity: 1;
}
.floor-head.locked.unlockable:hover {
  background: rgba(240,196,58,.06);
}
.flat-item.locked {
  opacity: .5;
  cursor: not-allowed;
}
.flat-item.locked input { cursor: not-allowed; }
.flat-item .fi-name { font-weight: 650; }

.boss-pick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.boss-card {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  background: #12131a;
  border-radius: 12px;
  padding: 12px 10px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  min-height: 52px;
  position: relative;
  overflow: visible;
  line-height: 1.35;
  box-sizing: border-box;
}
.boss-card.loot-ok {
  border-color: rgba(61,186,122,.38);
}
.boss-card.loot-mid {
  border-color: rgba(232,184,74,.5);
}
.boss-card:hover:not(:disabled):not(.selected) {
  border-color: rgba(240,196,58,.45);
}
.boss-card.loot-ok:hover:not(:disabled):not(.selected) {
  border-color: rgba(61,186,122,.55);
}
.boss-card.selected {
  /* фон/рамка — ниже (тёмная карточка + жёлтая обводка); текст светлый */
  color: var(--text);
  border-color: rgba(232, 184, 74, 0.55);
  background: rgba(232, 184, 74, 0.08);
}
.boss-card.selected .boss-tip { color: var(--text); }
.boss-card.queued:not(.selected)::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3dba7a;
}
.boss-card.locked {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}
.boss-card.locked.unlockable {
  opacity: .45;
  border-color: var(--line);
  cursor: not-allowed;
  pointer-events: none;
}
.boss-card:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.boss-card-name {
  font-weight: 750;
  font-size: 14px;
  line-height: 1.35;
  overflow: visible;
}
.boss-pick-actions {
  position: sticky;
  bottom: 0;
  z-index: 6;
  padding: 10px 0 4px;
  margin-top: 10px;
  background: linear-gradient(180deg, rgba(7,7,8,0), rgba(7,7,8,.92) 28%, rgba(7,7,8,.98));
}
.boss-pick-actions .btn.block { margin: 6px 0; }
.attack-add-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.attack-add-grid .btn {
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.boss-plan-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.boss-plan-label { font-weight: 600; }
.boss-plan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.boss-plan-chip {
  min-width: 44px;
  border-radius: 999px;
  padding: 6px 10px;
}
.boss-plan-chip.active {
  border-color: rgba(240,196,58,.55);
  background: rgba(240,196,58,.14);
  color: var(--text);
}
.boss-plan-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* иначе display:flex перебивает HTML hidden */
.boss-plan-inputs[hidden],
.attack-boss-card .boss-plan-inputs[hidden] {
  display: none !important;
}
.boss-plan-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  min-width: 96px;
  flex: 1;
}
.boss-plan-field input {
  width: 100%;
  background: #0c0d11;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  padding: 8px 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.boss-plan-loot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.boss-plan-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  user-select: none;
}
.boss-plan-check input {
  width: 16px;
  height: 16px;
  accent-color: #e8b84a;
}
.attack-boss-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(58vh, 480px);
  overflow: auto;
}
.attack-boss-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}
.attack-boss-card.active {
  border-color: rgba(240,196,58,.45);
  background: rgba(240,196,58,.08);
}
.attack-boss-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attack-boss-card .boss-plan-field input,
.attack-boss-card input[data-attack-boss] {
  width: 100%;
  background: #0c0d11;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  padding: 8px 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.boss-plan-wheel {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.boss-time-wheel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.boss-time-wheel-cap {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 600;
}
.boss-time-wheel-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0c0d11;
  overflow: hidden;
}
.boss-time-wheel-frame::before,
.boss-time-wheel-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 36px;
  z-index: 1;
  pointer-events: none;
}
.boss-time-wheel-frame::before {
  top: 0;
  background: linear-gradient(#0c0d11, transparent);
}
.boss-time-wheel-frame::after {
  bottom: 0;
  background: linear-gradient(transparent, #0c0d11);
}
.boss-time-wheel-scroller {
  max-height: 132px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.boss-time-wheel-scroller::-webkit-scrollbar { display: none; }
.boss-time-wheel-pad {
  height: 48px;
  flex: none;
  pointer-events: none;
}
.boss-time-wheel-item {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  scroll-snap-align: center;
  cursor: pointer;
  user-select: none;
}
.boss-time-wheel-item.on {
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  background: rgba(240, 196, 58, 0.12);
}
.boss-time-preview {
  font-size: 12px;
  color: var(--muted);
}
.boss-time-preview b {
  color: #e8b84a;
  font-weight: 700;
}
.boss-timer-remain {
  font-size: 12px;
  color: #9fd6ff;
  font-weight: 600;
  margin-top: 6px;
  display: block;
}
.boss-timer-expired {
  color: #ff6b6b;
}
.attack-boss-card .boss-plan-loot-hint {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}
.blt-ico {
  width: 18px; height: 18px; object-fit: contain; flex: none;
  vertical-align: middle; margin-right: 6px;
}
.blt-row { align-items: center; }
.blt-row-name { display: inline-flex; align-items: center; gap: 0; min-width: 0; }
.blt-group-head img.blt-ico { width: 16px; height: 16px; margin-right: 4px; }
.floor-tools { display: flex; gap: 6px; margin-bottom: 8px; }

.entity {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start;
  padding: 10px; border-radius: 12px; border: 1px solid transparent;
}
.entity:hover { background: var(--panel2); }
.entity.selected { border-color: rgba(240,196,58,.35); background: rgba(240,196,58,.06); }
.entity input { margin-top: 3px; }
.entity-name { font-weight: 650; font-size: 14px; }
.entity-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.entity-side { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.chip {
  font-size: 11px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 7px;
}

.work-detail {
  grid-column: 1 / -1; margin-top: 8px; padding: 10px;
  background: var(--bg2); border-radius: 12px; border: 1px solid var(--line);
}
.task {
  display: flex; justify-content: space-between; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.04); font-size: 13px;
}
.task:last-child { border-bottom: 0; }
.bar {
  height: 4px; background: #222; border-radius: 99px; overflow: hidden; margin-top: 6px;
}
.bar > i {
  display: block; height: 100%; background: var(--yellow);
  transition: width .45s ease-out;
}

.boss-card .work-card-prog {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 650;
}
.boss-card.selected .work-card-prog { color: var(--muted); }
.work-card-bar {
  height: 3px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; margin-top: 5px;
}
.boss-card.selected .work-card-bar { background: rgba(255,255,255,.08); }
.work-card-bar > i { display: block; height: 100%; background: var(--yellow); transition: width .45s ease-out; }
.boss-card.selected .work-card-bar > i { background: var(--yellow); }

.work-manual { margin-top: 10px; }
.floor-body .work-manual { grid-column: 1 / -1; }
.work-manual-head {
  display: flex; justify-content: space-between; gap: 10px; align-items: flex-start;
  margin-bottom: 10px;
}
.work-manual-title { font-weight: 800; font-size: 15px; }
.work-manual-energy {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(240,196,58,.35);
  background: rgba(240,196,58,.1);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.work-manual-energy.low { border-color: rgba(224,87,79,.45); background: rgba(224,87,79,.12); color: #ef857d; }
.work-overall {
  margin-bottom: 12px;
}
.work-overall-meta {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--muted); margin-bottom: 6px;
}
.work-overall-bar, .work-run-bar {
  height: 14px; background: #1a1b22; border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px; overflow: hidden; position: relative;
}
.work-overall-bar > i, .work-run-bar > i {
  display: block; height: 100%;
  background: #f0c43a;
  min-width: 0;
  transition: width .45s ease-out;
}
.work-overall-bar.checkpoint > i { background: #ffd45a; }
.work-bar-label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.7); pointer-events: none;
}
.work-task-list { display: flex; flex-direction: column; gap: 8px; }
.work-task {
  border: 1px solid var(--line); background: #12131a; border-radius: 12px; padding: 10px 12px;
}
.work-task.done { opacity: .72; border-color: rgba(61,186,122,.35); }
.work-task-top {
  display: flex; justify-content: space-between; gap: 10px; align-items: flex-start;
}
.work-task-name { font-weight: 700; font-size: 13px; }
.work-task-meta { color: var(--muted); font-size: 11px; margin-top: 3px; }
.work-task-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.work-task-cost { font-size: 11px; color: var(--muted); white-space: nowrap; }
.work-task-cost.low { color: #ef857d; }
.work-task .bar { margin-top: 8px; height: 6px; }
.work-energy-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.work-energy-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  flex-shrink: 0;
}
.work-energy-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.work-energy-timer {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.work-energy-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 10px;
  font-weight: 750;
  font-size: 13px;
  background: #0c0d11;
  color: var(--text);
  white-space: nowrap;
}
.work-energy-pill.low {
  border-color: rgba(240,196,58,.55);
  color: #f0c43a;
}

/* Карточка шприц/дефиб — стиль «Чифир» из Тюряги */
.work-energy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.work-energy-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 750;
  font-size: var(--fs-md);
  color: var(--yellow);
}
.work-energy-title-ico {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 6px;
}
#workEnergyPanel .work-energy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.work-energy-card {
  margin-top: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
  border-radius: 14px;
  padding: 4px 12px 8px;
  display: flex;
  flex-direction: column;
}
.work-boost-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  min-width: 0;
}
.work-boost-row + .work-boost-row {
  border-top: 1px solid rgba(42, 44, 54, .55);
}
.work-boost-ico-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
}
.work-boost-ico {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
  background: #121216;
}
/* Счётчик как в игре: внизу слева поверх иконки, «вырезом» под фон карточки */
.work-boost-qty {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  min-width: 1.15em;
  padding: 1px 4px 0;
  background: #14161c;
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  letter-spacing: -0.02em;
  border-radius: 0 4px 0 9px;
  pointer-events: none;
}
.work-boost-item-meta {
  min-width: 0;
  flex: 1;
}
.work-boost-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.work-boost-name {
  font-weight: 750;
  font-size: 14px;
  line-height: 1.25;
  white-space: normal;
}
.work-boost-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  flex: none;
}
.work-boost-sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.work-boost-primary {
  flex: none;
  white-space: nowrap;
  min-height: 34px;
  margin: 0;
  padding: 6px 10px;
  font-size: 12px;
  max-width: 108px;
}
.work-boost-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.work-energy-card .switch-row {
  border-top: 1px solid rgba(42, 44, 54, .55);
}
.work-boost-keep {
  padding: 0 0 8px;
}
.work-boost-keep .field-label { margin-top: 0; }
.work-dollar-buys {
  display: flex;
  gap: 8px;
  padding: 0 0 8px;
}
.work-dollar-buys .btn {
  flex: 1;
  margin: 0;
  min-height: 36px;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  margin: 0;
  cursor: pointer;
  border-top: 1px solid rgba(42, 44, 54, .7);
}
.switch-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.switch-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.3;
}
.switch-sub {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}
input[type="checkbox"].switch {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 26px;
  margin: 0;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: #3a3f4d;
  position: relative;
  cursor: pointer;
  transition: background .16s ease;
}
input[type="checkbox"].switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e8e8ec;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform .16s ease;
  border: 0;
  transform: none;
}
input[type="checkbox"].switch:checked {
  background: #f0c43a;
  border-color: transparent;
}
input[type="checkbox"].switch:checked::after {
  transform: translateX(18px);
  background: #17120a;
  border: 0;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
}
.work-run-progress { margin: 8px 0 10px; display: flex; flex-direction: column; gap: 10px; }
.work-run-wait {
  color: var(--warn, #e0b35a);
  font-weight: 650;
}
.work-wait-banner {
  display: none;
}
.rico {
  display: inline-block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  vertical-align: -6px;
  flex: 0 0 auto;
}
.rico.lg { width: 34px; height: 34px; }
.rico-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.rico-chip .rico {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.pvp-reward,
.quest-reward,
.inv-boost-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 4px;
}
.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(240, 196, 58, 0.12);
  color: var(--yellow);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
}
.stat-chip .stat-ico {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: none;
  display: block;
}
.stat-chip.flat {
  padding: 0;
  gap: 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #e8e6df;
}
.stat-chip.flat .stat-ico {
  width: 22px;
  height: 22px;
}
.stat-chip.flat b {
  color: #e8e6df;
  font-weight: 650;
  font-size: 13px;
  line-height: 22px;
}
.quest-card .social-card-title,
.quest-cond,
.quest-row-title {
  font-size: var(--fs-md);
}
.quest-cond {
  margin-top: 4px;
  color: var(--text);
}
.quest-row.is-current {
  border-left: 3px solid var(--yellow);
  padding-left: 10px;
}
.inv-floor-head {
  margin: 12px 0 6px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--yellow);
}
.inv-combat-row .social-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.xp-label .rico,
.energy-value .rico,
.work-energy-title .rico,
.energy-modal-title .rico {
  width: 32px;
  height: 32px;
}
.energy-value .gico {
  width: 32px;
  height: 32px;
  font-size: 17px;
}
.currency-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.currency {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  text-align: center;
}
.currency .k {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
  color: var(--muted);
  font-size: var(--fs-xs);
  margin: 0;
  line-height: 1.2;
  text-align: center;
}
.currency-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.currency-ico {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
}
.currency-ico .rico {
  width: 28px !important;
  height: 28px !important;
  vertical-align: 0;
}
.currency .v {
  display: block;
  font-size: var(--fs-md);
  font-weight: 650;
  color: #8ee6b5;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  text-align: center !important;
  width: 100%;
  margin: 0;
}

.donate-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(232, 184, 74, .42);
  background: linear-gradient(180deg, rgba(232, 184, 74, .08), rgba(20, 16, 10, .55));
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.donate-card:hover, .donate-card:focus-visible {
  border-color: rgba(232, 184, 74, .7);
  background: linear-gradient(180deg, rgba(232, 184, 74, .12), rgba(20, 16, 10, .65));
  outline: none;
}
.donate-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.donate-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(90, 55, 20, .55);
  border: 1px solid rgba(232, 184, 74, .28);
}
.donate-ico img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}
.donate-text { min-width: 0; }
.donate-title {
  font-weight: 750;
  font-size: 15px;
  line-height: 1.2;
}
.donate-sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}
.donate-chevron {
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  flex: none;
}

.bank-sheet {
  max-height: min(78vh, 640px);
  overflow: auto;
}
.bank-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bank-tabs::-webkit-scrollbar { display: none; }
.bank-tab {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  flex: none;
}
.bank-tab img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
  opacity: .72;
}
.bank-tab.active {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .12);
}
.bank-tab.active img { opacity: 1; }
.bank-packs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.bank-pack {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #1a1c22;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  min-width: 0;
}
.bank-pack:hover, .bank-pack:focus-visible {
  border-color: rgba(232, 184, 74, .45);
  outline: none;
}
.bank-pack:disabled {
  opacity: .55;
  cursor: wait;
}
.bank-pack-ico {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
}
.bank-pack-ico img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}
.bank-pack-meta { min-width: 0; }
.bank-pack-amount {
  font-weight: 750;
  font-size: 15px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.bank-pack-price {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--yellow);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.bank-pack-price img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
}
.bank-empty {
  grid-column: 1 / -1;
  padding: 18px 8px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
#bankModalMsg.is-err:not(:empty) {
  color: #f07178;
}

.wardrobe-wallet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 8px 0 10px;
  min-height: 28px;
}
.wardrobe-wallet .rico-chip {
  gap: 6px;
}
.wardrobe-wallet .rico {
  width: 18px;
  height: 18px;
}
.work-task-cost,
.work-manual-energy,
.xp-label,
.energy-modal-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.work-card-zone {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}
.work-run-row { display: flex; flex-direction: column; gap: 4px; }
.work-run-row-meta {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--muted);
}
.work-run-row-meta strong { color: var(--text); font-weight: 700; }

.invite-list { display: flex; flex-direction: column; gap: 10px; }
.invite-list.is-scroll {
  max-height: 520px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}
.invite {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px;
}
.invite-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.invite-boss { font-weight: 750; font-size: 16px; line-height: 1.25; }
.invite-from { color: var(--muted); font-size: 13px; margin-top: 4px; line-height: 1.3; }
.invite-top .entity-sub {
  flex: none;
  text-align: right;
  white-space: nowrap;
  line-height: 1.25;
  margin-top: 2px;
}
.invite-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  margin-top: 12px;
}
.invite-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 6px;
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
  text-align: center;
}
.empty {
  color: var(--muted); border: 1px dashed var(--line); border-radius: 16px;
  padding: 28px; text-align: center;
}

.action-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.action-card {
  text-align: left; border: 1px solid var(--line); background: var(--panel);
  border-radius: 12px; padding: 12px; color: inherit; cursor: pointer;
}
.action-card:hover { border-color: var(--yellow-dim); }
.action-ico { font-size: 18px; }
.action-title { font-weight: 600; margin-top: 6px; font-size: var(--fs); }
.action-sub { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }

.actions-head { margin: 2px 0 10px; }
.actions-kicker {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--yellow);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.page h1 {
  font-weight: 800;
  letter-spacing: -0.01em;
}
.actions-lead { margin: 4px 0 0; }
.actions-panel .action-row + .action-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.action-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.action-row-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255,255,255,.05);
  color: var(--muted);
  border: 1px solid var(--line);
}
.action-row-ico.daily {
  background: rgba(240,196,58,.12);
  border-color: rgba(240,196,58,.28);
  color: var(--yellow);
}
.action-row-ico.biz {
  background: rgba(61,186,122,.1);
  border-color: rgba(61,186,122,.28);
  color: #8ee6b5;
}
.action-row-body { min-width: 0; flex: 1; }
.action-row-title {
  font-size: var(--fs);
  font-weight: 600;
  line-height: 1.25;
}
.action-row-sub {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.3;
}
.action-row-meta {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--muted);
  opacity: .9;
  font-variant-numeric: tabular-nums;
}
.action-row-btn {
  flex: none;
  min-width: 78px;
}
.action-row.is-ready .action-row-sub { color: #8ee6b5; }
.action-row.is-done .action-row-sub { color: var(--muted); }
.action-row.is-done .action-row-btn {
  opacity: .7;
}
.action-row.is-busy .action-row-btn { opacity: .65; pointer-events: none; }
.action-auto-row {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  gap: 8px;
}
.action-auto-row input {
  width: 15px;
  height: 15px;
}
.actions-toast {
  display: none !important;
}
.update-banner {
  position: sticky;
  top: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #16171d;
  border-bottom: 1px solid rgba(201, 178, 122, 0.35);
  color: var(--text);
  font-size: var(--fs-sm);
}
.update-banner[hidden] {
  display: none !important;
}
.update-banner-text {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.game-down-banner {
  position: sticky;
  top: 0;
  z-index: 119;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(90deg, #2a1c0e 0%, #1a1510 55%, #15120e 100%);
  border-bottom: 1px solid rgba(232, 168, 74, 0.55);
  color: #f0d9a8;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.game-down-banner[hidden] {
  display: none !important;
}
.game-down-banner-text {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}
body.is-game-down .content {
  /* лёгкая пометка, что данные могут быть старыми */
  opacity: 1;
}
.sync-status-hint.is-game-down {
  color: #f0d9a8;
  background: rgba(232, 168, 74, .16);
  border-color: rgba(232, 168, 74, .45);
}
.app-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%) scale(0.96);
  z-index: 200;
  max-width: min(920px, calc(100vw - 28px));
  width: max-content;
  min-width: min(280px, calc(100vw - 28px));
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(160, 160, 170, 0.38);
  background: rgba(12, 12, 14, 0.97);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.app-toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.app-toast.ok {
  border-color: rgba(160, 160, 170, 0.38);
  background: rgba(12, 12, 14, 0.97);
  color: var(--text);
}
.app-toast.err {
  border-color: rgba(224, 87, 79, 0.45);
  background: rgba(36, 14, 14, 0.95);
  color: #ffc4bf;
}
.app-toast.loot {
  text-align: left;
  width: min(340px, calc(100vw - 28px));
  max-width: min(340px, calc(100vw - 28px));
  min-width: min(280px, calc(100vw - 28px));
  padding: 14px 16px 16px;
  background: #0b0b0d;
  border: 1px solid rgba(150, 150, 160, 0.42);
}
.app-toast-loot-title {
  color: #f0d24a;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  margin: 0 0 4px;
}
.app-toast-loot-list {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}
.app-toast-loot-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.app-toast-loot-ico {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: contain;
  background: #101014;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.app-toast-loot-orn {
  display: grid;
  place-items: center;
  color: #f0d24a;
  font-size: 18px;
}
.app-toast-loot-name {
  font-weight: 650;
  color: #f3f4f6;
  font-size: 14px;
  line-height: 1.25;
}
.app-toast-loot-sub {
  margin-top: 2px;
  color: #8b9bb0;
  font-size: 12px;
  line-height: 1.2;
}

/* PvP + wardrobe */
.pvp-energy-row,
.pvp-stats-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  font-size: var(--fs);
  flex-wrap: wrap;
}
.pvp-energy-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;
}
.pvp-mode-row {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.pvp-mode-row .pvp-refill-btn {
  margin-left: 0;
}
.pvp-auto-block {
  padding: 8px 10px;
}
.pvp-auto-oneline {
  margin: 0;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}
.pvp-auto-oneline .heal-block-head {
  margin: 0;
  flex: 0 0 auto;
  min-width: 0;
}
.pvp-auto-oneline .heal-row-label {
  min-width: 0;
}
.pvp-auto-oneline .heal-seg {
  flex: 1 1 auto;
  min-width: 0;
}
.pvp-auto-oneline .heal-seg-btn {
  padding: 6px 8px;
  white-space: nowrap;
}
.pvp-auto-oneline .pvp-refill-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 380px) {
  .pvp-auto-oneline {
    flex-wrap: wrap;
  }
}
.pvp-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.pvp-card-head .pvp-attack-btn {
  flex: none;
  align-self: center;
}
.pvp-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.pvp-stat .rico {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}
.pvp-stat b {
  font-weight: 700;
  line-height: 26px;
  font-size: 15px;
}
.pvp-energy-actions { margin-top: 6px; align-items: center; }
.pvp-auto-row { margin: 10px 0 4px; }
.pvp-list, .wardrobe-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.pvp-card, .ward-set {
  border: 1px solid #3a3e4c;
  border-radius: 10px;
  background: #1a1c24;
  padding: 8px 10px;
}
.pvp-card--no-reward {
  opacity: 0.55;
}
.pvp-card--no-reward .pvp-attack-btn {
  opacity: 0.85;
}
.pvp-card-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.pvp-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: #1a1a1e;
  flex: none;
}
.pvp-card-body { min-width: 0; flex: 1; }
.pvp-name {
  font-weight: 600;
  font-size: var(--fs);
}
.pvp-stats {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.pvp-stats-icons,
.muta-bonus-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 4px;
}
.ward-item-stats {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 4px;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.stash-reward {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}
.stash-reward-wallet,
.stash-reward-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.stash-reward-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.stash-reward-stats {
  flex: 1 1 auto;
  min-width: 0;
}
.stash-reward-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin-left: auto;
  color: var(--muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.pvp-stats-icons {
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
}
.muta-bonus-chips .stat-chip.flat .stat-ico,
.stash-reward .stat-chip.flat .stat-ico {
  width: 22px;
  height: 22px;
}
.ward-item-stats .stat-chip.flat {
  gap: 3px;
  padding: 0;
}
.ward-item-stats .stat-chip.flat .stat-ico {
  width: 16px;
  height: 16px;
}
.ward-item-stats .stat-chip.flat b {
  font-size: 11px;
  line-height: 16px;
  font-weight: 650;
}
.muta-bonus-chips {
  display: inline-flex;
  vertical-align: middle;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 6px 8px;
}
.muta-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.muta-meta.muta-meta-inline {
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.muta-meta.muta-meta-inline .muta-bonus-chips {
  flex: 0 0 auto;
}
.muta-craft-cost {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 4px;
}
.muta-craft-cost .rico-chip {
  font-size: var(--fs-sm);
}
.muta-pick-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 8px;
  margin: 0 0 4px;
}
.muta-pick-card {
  flex: 0 0 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  text-align: center;
}
.muta-pick-card.active {
  border-color: #f0c43a;
  background: rgba(240, 196, 58, 0.12);
}
.muta-pick-card img,
.muta-pick-ph {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
  background: #101014;
}
.muta-pick-ph {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.muta-pick-name {
  font-size: var(--fs-xs);
  font-weight: 650;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.muta-pick-qty {
  font-size: var(--fs-xs);
  color: var(--muted);
}
.muta-pick-meta {
  margin: 0 0 10px;
}
.muta-avail-search {
  width: 100%;
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
}
.muta-extract-bulk-box {
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.muta-extract-bulk-head {
  font-weight: 700;
  color: var(--text);
}
.muta-extract-lv-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.muta-extract-lv-val {
  min-width: 52px;
  text-align: center;
  font-weight: 700;
}
.muta-extract-found-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.muta-extract-pills {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.muta-extract-pills .rico-chip {
  font-size: var(--fs-sm);
}
.tag.muta-code-tag {
  flex: none;
  white-space: nowrap;
  border-radius: 8px;
  padding: 3px 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.muta-scroll-list {
  max-height: min(58vh, 520px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
  margin: 0 0 4px;
}
.muta-scroll-list .muta-card {
  margin: 0;
}
.muta-slot-chips {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
  max-width: 100%;
  padding-bottom: 4px;
}
.muta-extract-bulk-box.is-premium-locked {
  opacity: 0.78;
}
.muta-extract-bulk-box .premium-lock-hint {
  margin: 0;
}
.muta-bulk-progress {
  margin: 2px 0 4px;
}
.muta-bulk-progress[hidden] {
  display: none !important;
}
.muta-bulk-bar {
  height: 18px;
  border-radius: 8px;
}
.muta-bulk-bar > i {
  background: linear-gradient(90deg, #d4a017, #f5d76e);
  transition: width .35s ease-out;
}
.muta-bulk-bar .work-bar-label {
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
}
.muta-bulk-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.muta-bulk-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.muta-bulk-check input {
  width: 16px;
  height: 16px;
  accent-color: #f0c43a;
}
.pvp-attack-cost {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  white-space: nowrap;
}
.pvp-attack-cost .rico,
.pvp-attack-cost .pvp-pill-ico {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  flex: none;
}
.pvp-attack-cost b {
  font-weight: 750;
  line-height: 1;
}
.inv-buy-btn {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  min-height: 34px;
  min-width: 118px;
  padding: 6px 12px !important;
  line-height: 1;
  color: #17120a !important;
}
.inv-buy-btn .inv-buy-label {
  color: #17120a;
  font-weight: 700;
}
.inv-buy-btn .inv-buy-price,
.inv-buy-btn .rico-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: #17120a;
  font-weight: 700;
  font-size: 12px;
}
.inv-buy-btn .rico {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  filter: drop-shadow(0 0 0.5px rgba(0,0,0,.35));
}
.inv-combat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.inv-combat-info { min-width: 0; flex: 1; }
.inv-buy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  flex-shrink: 0;
}
.inv-buy-btn.ghost {
  color: var(--text) !important;
}
.inv-buy-btn.ghost .inv-buy-label,
.inv-buy-btn.ghost .inv-buy-price,
.inv-buy-btn.ghost .rico-chip {
  color: var(--text);
}
.pvp-stat-mini {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.stat-ico {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: none;
  display: block;
  vertical-align: middle;
}
.rico.sm {
  width: 20px;
  height: 20px;
}
.pvp-energy-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
}
.pvp-timer-plus {
  color: var(--yellow);
  font-weight: 700;
}
.pvp-timer-left {
  color: var(--muted);
  letter-spacing: 0.01em;
}
.pvp-refill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 32px;
  width: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
  flex: none;
}
.pvp-refill-btn #pvpRefillCost {
  line-height: 1;
  font-weight: 750;
}
.pvp-pill-ico {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: none;
  display: block;
}
/* Пилюли + число + «+» — один компактный блок, без разъезда */
.pvp-energy-row .pvp-stat,
.pvp-energy-row .pvp-energy-timer {
  flex: none;
}
.pvp-energy-timer {
  gap: 4px;
}
.biz-card-flags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  vertical-align: middle;
}
.biz-card-flags .tag {
  /* Стиль C: ярче бейдж «макс» */
  background: rgba(61,186,122,.28);
  color: #8ee6b5;
  border-color: rgba(61,186,122,.55);
  font-weight: 800;
}
.biz-upgrade-btn.is-max {
  opacity: 1;
  background: #2f9e68;
  color: #fff;
  border-color: #2f9e68;
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
  cursor: default;
}
.pvp-card-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.pvp-fight {
  margin-top: 8px;
  border: 1px solid rgba(201,178,122,.35);
  border-radius: 10px;
  background: var(--panel2);
  padding: 10px;
}
.pvp-fight-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.pvp-fight-title {
  font-weight: 600;
  font-size: var(--fs);
}
.pvp-fight-sub {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-top: 2px;
}
.pvp-hp {
  margin-top: 6px;
}
.pvp-hp-top {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: 3px;
}
.pvp-hp-bar {
  height: 12px;
  border-radius: 999px;
  background: #2a2a30;
  border: 0;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.pvp-hp-bar > i {
  display: block;
  height: 100%;
  background: #f0c43a;
  transition: width .45s ease-out;
}
.pvp-hp-bar.enemy > i {
  background: #e23b35;
}
.pvp-fight-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.yard-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 4px 0 6px;
  justify-content: space-between;
}
#yardWallet,
#yardProgress,
#yardStartCost,
#pokerWallet,
.yard-wallet-chips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
.yard-wallet-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  line-height: 24px;
}
.yard-wallet-label {
  display: inline-flex;
  align-items: center;
  height: 24px;
  line-height: 24px;
  font-weight: 600;
  font-size: var(--fs-md, 14px);
  /* текст оптически чуть ниже круглых иконок — приподнять */
  padding-bottom: 1px;
}
#pokerWallet,
.yard-wallet-chips {
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  line-height: 24px;
  vertical-align: middle;
}
#pokerWallet .rico-chip,
.yard-wallet-chips .rico-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin: 0;
  font-size: var(--fs-md, 14px);
  line-height: 1;
}
#pokerWallet .rico,
.yard-wallet-chips .rico {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
#yardProgress .rico,
#pokerProgress .rico {
  width: 16px;
  height: 16px;
}
.yard-log-deal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 4px 0 2px;
}
.yard-mini-cards {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  vertical-align: middle;
}
.yard-mini-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 38px;
  border-radius: 4px;
  border: 1px solid rgba(40, 40, 48, .45);
  background: linear-gradient(180deg, #fffdf8 0%, #f3eee4 100%);
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.yard-mini-card b {
  font-size: 11px;
  font-weight: 800;
}
.yard-mini-card i {
  font-size: 12px;
  font-style: normal;
  margin-top: 1px;
}
.yard-mini-card.is-red { color: #c62828; }
.yard-mini-card.is-black { color: #1c1c1c; }
.yard-log-row .yard-deal-arrow {
  margin: 0 4px;
  color: var(--muted);
  font-size: 12px;
}
.yard-actions .btn.primary {
  color: #1a1408;
  font-weight: 800;
}
.yard-actions .btn .rico-chip {
  gap: 6px;
  margin: 0 2px;
  vertical-align: middle;
  color: #1a1408;
  font-weight: 800;
  font-size: 14px;
}
.yard-actions .btn .rico {
  width: 20px;
  height: 20px;
}
.yard-die-val {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
}
.die-pips {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdf8 0%, #e8dfc8 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.25);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 5px;
  flex-shrink: 0;
}
.die-pips.die-pips-empty {
  opacity: 0.55;
}
.die-pips i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1a1408;
  margin: auto;
  opacity: 0;
}
.die-pips[data-n="1"] i:nth-child(5) { opacity: 1; }
.die-pips[data-n="2"] i:nth-child(1),
.die-pips[data-n="2"] i:nth-child(9) { opacity: 1; }
.die-pips[data-n="3"] i:nth-child(1),
.die-pips[data-n="3"] i:nth-child(5),
.die-pips[data-n="3"] i:nth-child(9) { opacity: 1; }
.die-pips[data-n="4"] i:nth-child(1),
.die-pips[data-n="4"] i:nth-child(3),
.die-pips[data-n="4"] i:nth-child(7),
.die-pips[data-n="4"] i:nth-child(9) { opacity: 1; }
.die-pips[data-n="5"] i:nth-child(1),
.die-pips[data-n="5"] i:nth-child(3),
.die-pips[data-n="5"] i:nth-child(5),
.die-pips[data-n="5"] i:nth-child(7),
.die-pips[data-n="5"] i:nth-child(9) { opacity: 1; }
.die-pips[data-n="6"] i:nth-child(1),
.die-pips[data-n="6"] i:nth-child(3),
.die-pips[data-n="6"] i:nth-child(4),
.die-pips[data-n="6"] i:nth-child(6),
.die-pips[data-n="6"] i:nth-child(7),
.die-pips[data-n="6"] i:nth-child(9) { opacity: 1; }
.die-pips-sm {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  padding: 2px;
}
.die-pips-sm i {
  width: 4px;
  height: 4px;
}
.yard-die-face {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: auto;
}
.yard-die-face.dim { opacity: .55; }
.yard-die-num {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.yard-tabs { margin: 8px 0 10px; }
.yard-poker-panel { margin-top: 10px; }
.yard-poker-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.yard-card {
  position: relative;
  width: 56px;
  height: 80px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: #1a2230;
  color: #1a1520;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.28);
}
.yard-card.has-value {
  border-color: rgba(40, 40, 48, .55);
  background: linear-gradient(180deg, #fffdf8 0%, #f3eee4 100%);
}
.yard-card.is-back {
  border-color: rgba(180, 150, 90, .45);
  background: linear-gradient(145deg, #2a3a58 0%, #1a2740 55%, #152033 100%);
}
.yard-card.can-exchange {
  box-shadow: 0 0 0 2px rgba(120, 200, 140, .55), 0 2px 6px rgba(0,0,0,.28);
}
.yard-card.in-combo {
  box-shadow: 0 0 0 2px #e6c44a, 0 0 10px rgba(230, 196, 74, .45);
  border-color: #e6c44a;
}
.yard-card.suggest-swap {
  box-shadow: 0 0 0 2px #ff8a3d, 0 0 12px rgba(255, 138, 61, .5);
  border-color: #ff8a3d;
  animation: yard-swap-pulse 1.2s ease-in-out infinite;
}
.yard-card.in-combo.suggest-swap {
  box-shadow: 0 0 0 2px #ff8a3d, 0 0 0 4px rgba(230, 196, 74, .65), 0 0 12px rgba(255, 138, 61, .45);
}
@keyframes yard-swap-pulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.yard-poker-hint {
  margin: 4px 0 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(230, 196, 74, .35);
  background: rgba(230, 196, 74, .08);
  color: #f0e6c8;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
}
.yard-poker-hint .hint-swap { color: #ffb07a; }
.yard-poker-hint .hint-goal { color: #f0d56a; }
.yard-card:disabled { cursor: default; }
.yard-card-val {
  position: absolute;
  inset: 0;
  display: block;
}
.yard-card-face-art {
  position: absolute;
  inset: 3px;
  border-radius: 5px;
  background: transparent;
}
.yard-card-face-art.is-red { color: #c62828; }
.yard-card-face-art.is-black { color: #1c1c1c; }
.yard-card-idx {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-weight: 800;
}
.yard-card-idx b {
  font-size: 12px;
  font-style: normal;
}
.yard-card-idx i {
  font-size: 11px;
  font-style: normal;
  margin-top: 1px;
}
.yard-card-idx-tl { top: 2px; left: 3px; }
.yard-card-idx-br {
  right: 3px;
  bottom: 2px;
  transform: rotate(180deg);
}
.yard-card-pip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 26px;
  line-height: 1;
}
.yard-card-back-art {
  position: absolute;
  inset: 4px;
  border-radius: 5px;
  border: 1px solid rgba(230, 200, 140, .35);
  background:
    linear-gradient(135deg, rgba(230,200,140,.12) 25%, transparent 25%) -6px 0 / 12px 12px,
    linear-gradient(225deg, rgba(230,200,140,.12) 25%, transparent 25%) -6px 0 / 12px 12px,
    linear-gradient(315deg, rgba(230,200,140,.12) 25%, transparent 25%) 0 0 / 12px 12px,
    linear-gradient(45deg, rgba(230,200,140,.12) 25%, transparent 25%) 0 0 / 12px 12px,
    linear-gradient(180deg, #243452, #182338);
  display: flex;
  align-items: center;
  justify-content: center;
}
.yard-card-back-emblem {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(230, 200, 140, .55);
  background: rgba(20, 28, 44, .65);
  color: #e6c88c;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px rgba(230, 200, 140, .12);
}
.yard-card-ex {
  position: absolute;
  bottom: 2px;
  left: 0; right: 0;
  font-size: 9px;
  letter-spacing: .02em;
  opacity: 0;
  color: #1b5e20;
  font-weight: 700;
  text-align: center;
  z-index: 2;
  text-shadow: 0 0 4px #fffdf8;
}
.yard-card.is-back .yard-card-ex { color: #c8f0d4; text-shadow: none; }
.yard-card.can-exchange .yard-card-ex { opacity: 1; }
.yard-dice-panel { margin-top: 10px; }
.yard-dice-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 8px 0 12px;
}
.yard-die {
  flex: 1;
  max-width: 96px;
  min-height: 88px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: default;
  padding: 8px 6px;
}
.yard-die.has-value {
  border-color: rgba(201, 178, 122, 0.35);
  background: rgba(201, 178, 122, 0.06);
}
.yard-die.can-reroll {
  cursor: pointer;
  border-color: rgba(110, 207, 142, 0.55);
}
.yard-die.can-reroll:hover {
  background: rgba(110, 207, 142, 0.12);
}
.yard-die.in-combo {
  box-shadow: 0 0 0 2px #e6c44a, 0 0 10px rgba(230, 196, 74, 0.35);
  border-color: #e6c44a;
}
.yard-die.suggest-swap {
  box-shadow: 0 0 0 2px #ff8a3d, 0 0 12px rgba(255, 138, 61, 0.45);
  border-color: #ff8a3d;
  animation: yard-swap-pulse 1.2s ease-in-out infinite;
}
.yard-die.in-combo.suggest-swap {
  box-shadow: 0 0 0 2px #ff8a3d, 0 0 0 4px rgba(230, 196, 74, 0.55), 0 0 12px rgba(255, 138, 61, 0.4);
}
.yard-die:disabled {
  opacity: 0.85;
}
.yard-die-reroll {
  font-size: var(--fs-sm);
  color: var(--muted);
  text-transform: lowercase;
}
.yard-die.can-reroll .yard-die-reroll {
  color: #6ecf8e;
}
.yard-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.yard-actions .btn { flex: 1; min-width: 120px; }
.yard-combo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.yard-combo {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
}
.yard-combo.active {
  color: #1a1408;
  background: rgba(201, 178, 122, 0.9);
  border-color: rgba(201, 178, 122, 0.9);
}
#yardAutoBlock, #diceRunTotalsBlock, #diceLogBlock { margin-top: 10px; }
#diceAutoStatus { margin-top: 8px; }
.yard-free-switch {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.yard-run-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.yard-run-actions .btn { flex: 1; min-width: 0; }
.yard-run-actions .btn.primary { color: #1a1408; font-weight: 800; }
.yard-run-actions .btn.primary:disabled { opacity: 0.7; }
.yard-run-progress { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.yard-run-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.yard-run-bar-fill {
  height: 100%;
  width: 0;
  background: rgba(201, 178, 122, 0.95);
  transition: width 0.4s ease;
}
.yard-run-totals { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.yard-run-totals .muted { flex-basis: 100%; }
.yard-log-count {
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
}
.yard-log {
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.yard-log-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.yard-log-row:last-child { border-bottom: 0; }
.yard-log-head { display: flex; justify-content: space-between; align-items: center; }
.yard-log-n {
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
}
.yard-log-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.yard-mini-dice { display: inline-flex; gap: 3px; }
.yard-mini-die {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: #f3ead6;
  color: #1a1408;
  font-weight: 800;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.yard-step-arrow { color: var(--muted); font-size: 12px; margin: 0 2px; }
.yard-log-reward { display: flex; flex-wrap: wrap; gap: 6px; }
.rico-chip.yard-item { color: #e9c46a; }
.yard-reward {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(201, 178, 122, 0.35);
  background: rgba(201, 178, 122, 0.08);
  font-size: var(--fs-sm);
}

.wardrobe-tabs,
.wardrobe-bucket-tabs,
.wardrobe-slot-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0 6px;
}
.wardrobe-bucket-tabs { margin-top: 0; }
.wardrobe-slot-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-top: 0;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.wardrobe-tabs .tab-btn,
.wardrobe-bucket-tabs .tab-btn,
.wardrobe-slot-tabs .tab-btn {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.wardrobe-slot-tabs .tab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.wardrobe-tabs .tab-btn.active,
.wardrobe-bucket-tabs .tab-btn.active,
.wardrobe-slot-tabs .tab-btn.active {
  color: #17120a;
  border-color: #f0c43a;
  background: #f0c43a;
  font-weight: 700;
}
.wardrobe-slot-tabs[hidden] { display: none !important; }
.biz-summary { margin-bottom: 6px; }
.biz-summary .action-row-sub { font-size: 12px; line-height: 1.35; }
.biz-summary .action-row-meta { font-size: 11px; line-height: 1.35; margin-top: 2px; }
#collectBizBtn {
  flex: none;
  min-width: 88px;
  max-width: 46vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.biz-auto-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 2px 0 8px;
}
/* компактные галочки у бизнесов / улучшений — без «кричащего» крупного текста */
.biz-auto-row .check-row,
#page-upgrades .check-row {
  margin: 2px 0;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.25;
}
.biz-auto-row .check-row input,
#page-upgrades .check-row input {
  width: 15px;
  height: 15px;
}
#page-upgrades .actions-lead {
  font-size: 12px;
  margin-top: 2px;
}
#page-upgrades .upg-run-ctrl .queue-meta {
  font-size: 11px;
  margin-top: 4px;
}
#page-upgrades .upg-now-main {
  font-size: 13px;
  font-weight: 600;
}
#page-upgrades .upg-now .sm,
#page-upgrades #upgStatsInfo {
  font-size: 11px;
  line-height: 1.35;
}
.biz-floor-tree { margin-top: 4px; }
.biz-floor-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 2px;
}
.biz-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel2);
  padding: 8px 10px;
}
.biz-card.can-upgrade { border-color: rgba(201,178,122,.35); }
.biz-card.can-collect { border-color: rgba(61,186,122,.35); }
.biz-card-body { min-width: 0; flex: 1; }
.biz-card-title { font-weight: 600; font-size: var(--fs); }
.biz-card-sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.35;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.biz-card-wait {
  white-space: nowrap;
}
.biz-card-income {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.biz-card-income .rico-chip {
  margin: 0;
}
.biz-card-reqs {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.biz-req {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
  background: #12131a;
}
.biz-req.ok {
  color: #8fd6ad;
  border-color: rgba(61,186,122,.35);
}
.biz-req.need {
  color: #e0b35a;
  border-color: rgba(224,179,90,.35);
}
.biz-upgrade-needs {
  margin: 14px 0 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #14151b 0%, #101114 100%);
}
.biz-need-head {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 8px;
}
.biz-need-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.biz-need-row {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #0b0c10;
}
.biz-need-row.ok { border-color: rgba(184, 233, 134, 0.28); }
.biz-need-row.need { border-color: rgba(224, 179, 90, 0.35); }
.biz-need-ico {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
  border-radius: 6px;
  background: #12131a;
}
.biz-need-body { min-width: 0; flex: 1; }
.biz-need-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.biz-need-meta { color: var(--muted); font-size: 11px; margin-top: 1px; }
@media (max-width: 380px) {
  .biz-need-grid { grid-template-columns: 1fr; }
}
.biz-upgrade-btn { flex: none; }
.biz-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  flex: none;
}
.biz-farm-btn { white-space: nowrap; }
.biz-drop-status {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}
.biz-drop-status.ok { color: #8fd6ad; }
.biz-drop-status.need { color: #e0b35a; }
.biz-card-reqs { margin-bottom: 2px; }

.ward-bucket-lead { margin: 2px 0 6px; }
.ward-bucket-empty {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 14px 12px;
  background: var(--panel2);
}
.ward-drop-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 120px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #12131a;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
}
.ward-set-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0;
}
.ward-set-top {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}
.ward-set-actions {
  flex: 0 0 auto;
  padding-top: 2px;
}
.ward-set-ico {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  background: #121216;
  flex: none;
}
.ward-set-title {
  font-weight: 600;
  font-size: var(--fs);
}
.ward-set-meta {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.ward-set-bonus {
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: #c9b27a;
}
.ward-set.open .ward-items { display: flex; }
.ward-items {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.ward-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #3a3e4c;
  background: #1a1c24;
  margin-bottom: 6px;
}
.ward-item-ico {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: #0c0d11;
  flex: none;
}
.ward-item-room {
  flex-direction: column;
}
.ward-item-room .ward-item-main {
  width: 100%;
}
.ward-room-preview {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #0c0d11;
  border: 1px solid rgba(255, 255, 255, 0.06);
  aspect-ratio: 16 / 9;
  max-height: 140px;
}
.ward-room-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ward-item-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ward-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.ward-items-flat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.ward-items-flat .ward-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  background: var(--panel);
}
.ward-item-title {
  font-size: var(--fs-sm);
  font-weight: 650;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ward-item-sub {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.3;
}
.ward-item-lock { color: #e0a070; }
.ward-item-action {
  flex: none;
}
.ward-item-action .btn {
  min-width: 72px;
}
.ward-on {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 650;
  color: #d7ecd7;
  background: rgba(90, 140, 90, .32);
  border: 1px solid rgba(120, 170, 120, .4);
}
.ward-upgrades {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ward-upgrades .btn {
  min-width: 0;
  padding: 4px 8px;
  font-size: 11px;
}
.ward-rec {
  color: var(--yellow);
  font-size: 11px;
  font-weight: 700;
}
.ward-item.is-recommended {
  border-color: rgba(240,196,58,.4);
  background: rgba(240,196,58,.05);
}
.ward-item.is-equipped {
  border-color: rgba(90, 140, 90, .4);
}
.ward-item.is-locked { opacity: .78; }
.ward-item-stats {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px 6px;
  color: #d7d4cc;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow-x: auto;
}
.ward-item-stats span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  flex: none;
}
.ward-item-stats em {
  font-style: normal;
  color: #8b8b9a;
  font-size: 11px;
  flex: none;
  margin-right: 2px;
}
.ward-item-body { min-width: 0; flex: 1; }
.ward-item-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: none;
  align-items: flex-end;
}
.ward-item-actions .btn { min-width: 72px; }
.ward-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}
.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 6px;
  background: #15161c;
  border: 1px solid var(--line);
  color: #e8e6df;
  font-size: 13px;
  line-height: 1;
}
.stat-chip .stat-ico {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: none;
  display: block;
}
.stat-chip b {
  color: #e8e6df;
  font-weight: 650;
  font-size: 13px;
  line-height: 24px;
}
.stat-chip.flat {
  padding: 0;
  gap: 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.stat-chip.flat .stat-ico {
  width: 22px;
  height: 22px;
}
.stat-chip.flat b {
  line-height: 22px;
  font-size: 13px;
}
.ward-rec-pill,
.ward-eq-pill,
.ward-price-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
}
.ward-rec-pill {
  color: #1a1508;
  background: var(--yellow);
  font-weight: 700;
}
.ward-eq-pill {
  color: #c8d6c0;
  background: rgba(90, 140, 90, .25);
}
.ward-price-pill {
  color: #d7c9a0;
  background: rgba(215, 201, 160, .12);
}

.social-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.social-card {
  background: #101114;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
}
.social-card.is-locked { opacity: .72; }
.social-card-head {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
}
.social-card-title { font-weight: 600; font-size: var(--fs-sm); }
.quest-active { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.quest-cond { font-size: var(--fs-sm); color: #d7d4cc; margin-top: 2px; padding: 2px 0; }
.quest-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.quest-all { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.quest-row {
  padding: 8px 0 8px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.quest-row:last-child { border-bottom: 0; padding-bottom: 0; }
.quest-row.is-done {
  border-left: 3px solid #7dce7a;
  padding-left: 10px;
  opacity: 0.92;
}
.quest-row.is-done .quest-row-title { color: #9be09a; }
.quest-row.is-active,
.quest-row.is-current {
  border-left: 3px solid var(--yellow);
  padding-left: 10px;
  background: rgba(240, 196, 58, 0.06);
  border-radius: 0 8px 8px 0;
}
.quest-row.is-active .quest-row-title,
.quest-row.is-current .quest-row-title { color: var(--yellow); }
.quest-row.is-locked {
  border-left: 3px solid rgba(154, 149, 140, 0.45);
  padding-left: 10px;
  color: #8f8a82;
}
.quest-row.is-locked .quest-row-title,
.quest-row.is-locked .quest-cond { color: #8f8a82; }
.quest-cond.is-done { color: #9be09a; }
.quest-cond.is-todo { color: #d7d4cc; }
.quest-row.is-current .quest-row-title { color: var(--yellow); }
.quest-reward { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.stash-head-main { display: flex; gap: 8px; align-items: center; min-width: 0; }
.stash-preview, .stash-ing-ico {
  width: 36px; height: 36px; border-radius: 8px; object-fit: cover; background: #0c0d11; flex: none;
}
.stash-ings { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.stash-ing { display: flex; gap: 8px; align-items: center; }
.stash-ing.is-missing { opacity: 0.85; }
.stash-ing-body { flex: 1; min-width: 0; }
.stash-ing-actions { flex: 0 0 auto; }
.stash-card-top { display: flex; gap: 8px; align-items: flex-start; }
.stash-card-top .social-card-head { flex: 1; min-width: 0; }
.stash-card-actions { flex: 0 0 auto; padding-top: 4px; }
.stash-ing-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
.social-card.is-ready { border-color: rgba(184, 233, 134, 0.35); }
.inv-list { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.inv-buff {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #12131a;
}
.inv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.inv-card {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #14151b 0%, #101114 100%);
  min-width: 0;
}
.inv-card.is-empty { opacity: 0.55; }
.inv-ico {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #0b0c10;
}
.inv-body { min-width: 0; flex: 1; }
.inv-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-qty { color: var(--muted); font-size: 12px; margin-top: 2px; }
.inv-combat-row .social-card-head { width: 100%; }
.inv-combat-row .inv-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.inv-row-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-row-qty {
  flex-shrink: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.inv-row-qty.is-empty { color: var(--muted); font-weight: 500; }
.inv-combat-row .inv-buy-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.inv-combat-row .inv-buy-btn { min-width: 0; width: 100%; }
.inv-combat-row .inv-boost-meta { margin-top: 6px; gap: 6px; }
.inv-dot { opacity: .5; }
.inv-floor-chips { margin: 0 0 10px; }
.inv-floor-chips .boss-floor-chip.is-ready { position: relative; }
.inv-floor-chips .boss-floor-chip.is-ready::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}
@media (max-width: 380px) {
  .inv-grid { grid-template-columns: 1fr; }
}
.friends-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #14151b 0%, #101114 100%);
}
.friends-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.friends-search-row input {
  flex: 1;
  min-width: 0;
  margin: 0;
  background: #0b0c10;
  border: 1px solid #2a2d38;
  border-radius: 10px;
  color: var(--text);
  padding: 9px 12px;
  font-size: var(--fs-sm);
}
.friends-search-row input:focus {
  outline: none;
  border-color: rgba(240, 196, 58, .55);
}
.friends-bulk-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
}
.friends-bulk-row .btn {
  flex: 1 1 140px;
}
.friends-head-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.friends-threshold-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.friends-threshold-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.friends-threshold-stats .field-label {
  margin: 0;
  min-width: 0;
  font-size: 11px;
}
.friends-threshold-stats input {
  width: 100%;
  min-width: 0;
  padding: 7px 6px;
  font-size: 13px;
}
.friends-cleanup-load {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}
.friends-cleanup-load .btn {
  flex: 0 0 auto;
}
.friends-cleanup-level {
  display: block;
  margin-top: 8px;
}
.friends-cleanup-preview {
  margin: 8px 0 0;
  line-height: 1.35;
}
.friends-cleanup-progress {
  margin: 8px 0 2px;
}
.friends-cleanup-targets {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #23262d;
  border-radius: 10px;
  background: #0f1116;
  padding: 8px 6px;
  margin: 8px 0 4px;
}
.friends-cleanup-targets .friends-cleanup-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #14161b;
  margin: 0;
}
.friends-cleanup-targets .friends-cleanup-row .social-player-body {
  flex: 1;
  min-width: 0;
}
.friends-cleanup-targets .friends-cleanup-row .social-player-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.friends-cleanup-targets .friends-cleanup-row .social-player-name {
  font-weight: 600;
}
.friends-cleanup-targets .friends-cleanup-row .social-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.friends-cleanup-targets .social-meta-chip.is-stat {
  font-size: 11px;
  padding: 1px 6px;
  background: #1c1e24;
}
.friends-cleanup-targets .social-player-actions .btn {
  padding: 2px 8px;
  font-size: 12px;
  flex: 0 0 auto;
}
#friendsAcceptSettings .heal-block .check-row,
#settingsNotifyBlocks .heal-block .check-row,
#settingsGeneralBlocks .heal-block .check-row {
  margin: 6px 0;
}
#workBoostKeepBlock {
  margin-top: 10px;
}
#workBoostKeepBlock .switch-row {
  margin: 6px 0;
}
#upgReserveBlock .field-grid {
  margin-top: 4px;
}
@media (max-width: 420px) {
  .friends-threshold-row {
    grid-template-columns: 1fr;
  }
}
.friends-history-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 2px;
}
.friends-history-summary.is-empty {
  display: block;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.friends-history-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.2;
  border: 1px solid transparent;
  white-space: nowrap;
}
.friends-history-chip-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  flex: none;
}
.friends-history-chip.is-ok {
  color: #8ee0b2;
  background: rgba(61, 186, 122, 0.12);
  border-color: rgba(61, 186, 122, 0.28);
}
.friends-history-chip.is-ok .friends-history-chip-ico {
  color: #0b1a12;
  background: #3dba7a;
}
.friends-history-chip.is-warn {
  color: #f0c878;
  background: rgba(232, 184, 74, 0.12);
  border-color: rgba(232, 184, 74, 0.3);
}
.friends-history-chip.is-warn .friends-history-chip-ico {
  color: #1a1408;
  background: #e8b84a;
}
.friends-history-chip.is-info {
  color: #c8c8d4;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.friends-history-chip.is-info .friends-history-chip-ico {
  color: #111;
  background: #9494a3;
}
.friends-history-chip.is-danger {
  color: #f0a8a3;
  background: rgba(224, 87, 79, 0.12);
  border-color: rgba(224, 87, 79, 0.28);
}
.friends-history-chip.is-danger .friends-history-chip-ico {
  color: #1a0b0a;
  background: #e0574f;
}
.friends-history-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 6px 0 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.friends-history-toggle::after {
  content: "▴";
  font-size: 10px;
  line-height: 1;
}
.friends-history-toggle.is-collapsed::after {
  content: "▾";
}
.friends-history-list {
  display: grid;
  gap: 0;
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.friends-autoadd-journal {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(46, 50, 64, 0.75);
}
.friends-autoadd-journal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #e8a54b);
}
.friends-autoadd-journal-list {
  display: grid;
  gap: 0;
  margin-top: 6px;
  max-height: 220px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.friends-history-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 9px 0;
  border-top: 1px solid rgba(46, 50, 64, 0.7);
}
.friends-history-row:first-child {
  border-top: 0;
}
.friends-history-ico {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-top: 1px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.14), transparent 55%),
    #22252e;
  border: 1px solid var(--line);
  position: relative;
  flex: none;
}
.friends-history-ico::before {
  content: "";
  position: absolute;
  inset: 7px 9px 11px;
  border-radius: 50% 50% 45% 45%;
  background: #8b8f9c;
}
.friends-history-ico::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 5px;
  height: 8px;
  border-radius: 8px 8px 4px 4px;
  background: #8b8f9c;
}
.friends-history-row.is-ok .friends-history-ico {
  border-color: rgba(61, 186, 122, 0.45);
  box-shadow: inset 0 0 0 1px rgba(61, 186, 122, 0.12);
}
.friends-history-row.is-warn .friends-history-ico {
  border-color: rgba(232, 184, 74, 0.45);
}
.friends-history-body {
  min-width: 0;
}
.friends-history-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.friends-history-name {
  font-weight: 650;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.friends-history-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.friends-history-badge.is-ok {
  color: #8ee0b2;
  background: rgba(61, 186, 122, 0.14);
  border: 1px solid rgba(61, 186, 122, 0.28);
}
.friends-history-badge.is-warn {
  color: #f0c878;
  background: rgba(232, 184, 74, 0.14);
  border: 1px solid rgba(232, 184, 74, 0.3);
}
.friends-history-badge.is-info {
  color: #c8c8d4;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.friends-history-badge.is-danger {
  color: #f0a8a3;
  background: rgba(224, 87, 79, 0.14);
  border: 1px solid rgba(224, 87, 79, 0.28);
}
.friends-history-reason {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.friends-history-time {
  color: var(--muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
  padding-top: 2px;
}
.friends-import-area {
  width: 100%;
  min-height: 110px;
  margin: 8px 0;
  background: #0b0c10;
  border: 1px solid #2a2d38;
  border-radius: 10px;
  color: var(--text);
  padding: 10px 12px;
  font-size: var(--fs-sm);
  resize: vertical;
}
.friends-panel {
  display: grid;
  gap: 12px;
}
.friends-panel[hidden] {
  display: none !important;
}
.friends-tabs {
  margin: 0 0 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.friends-tabs .tab-btn {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  border-radius: 8px;
  padding: 6px 6px;
  font-size: var(--fs-sm);
  cursor: pointer;
  text-align: center;
}
.friends-tabs .tab-btn.active {
  color: #17120a;
  border-color: #f0c43a;
  background: #f0c43a;
  font-weight: 700;
}
.friends-auto-row {
  margin: 0;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text);
}
.friends-auto-kind {
  margin: 0;
}
.friends-auto-kind select {
  width: 100%;
  margin-top: 4px;
}
.friends-list {
  gap: 6px;
}
#friendsOwnList.friends-list,
#friendsIncomingList.friends-list {
  max-height: min(46vh, 360px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 2px;
  margin-top: 8px;
}
.social-player {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: start;
  background: #121318;
  border: 1px solid #232632;
  border-radius: 12px;
  padding: 8px 10px;
}
.social-player.is-pending {
  border-color: rgba(72, 180, 210, .55);
  background: rgba(56, 150, 180, .14);
}
.social-player.is-current {
  border-color: rgba(240, 196, 58, .65);
  background: rgba(240, 196, 58, .1);
  box-shadow: 0 0 0 1px rgba(240, 196, 58, .25);
}
.social-player.is-friend {
  border-color: rgba(90, 140, 90, .35);
  background: rgba(90, 140, 90, .06);
}
.social-player.is-open .friend-add {
  box-shadow: inset 0 0 0 1px rgba(240, 196, 58, .25);
}
.social-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  background: #0c0d11;
  flex: none;
}
.social-player-body { min-width: 0; }
.social-player-stats {
  grid-column: 1 / -1;
  min-width: 0;
}
.social-player-stats .clan-player-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 0;
}
.social-player-stats .clan-stat {
  justify-content: center;
  min-width: 0;
  padding: 4px 6px;
  border-radius: 8px;
  background: #0c0d11;
}
.social-player-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}
.social-player-name {
  font-weight: 650;
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}
button.social-player-name.is-copy {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button.social-player-name.is-copy:active {
  color: #f0d48a;
}
.social-tg-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: min(100%, 160px);
  padding: 1px 7px 1px 5px;
  border-radius: 999px;
  background: rgba(40, 140, 220, 0.14);
  border: 1px solid rgba(80, 170, 240, 0.45);
  color: #9ed0ff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  flex: none;
  -webkit-tap-highlight-color: transparent;
}
.social-tg-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.social-tg-chip:active {
  filter: brightness(1.12);
}
.social-tg-ico {
  width: 13px;
  height: 13px;
  flex: none;
  display: block;
}
.social-player-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}
.social-meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  background: #1a1c24;
  border: 1px solid #2a2d38;
  color: #b7bdc9;
  font-size: 11px;
  line-height: 1.35;
}
.social-meta-chip.is-online {
  color: #9ad39a;
  border-color: rgba(90, 140, 90, .45);
}
.social-meta-chip.is-guild {
  color: #f0d48a;
  border-color: rgba(200, 160, 60, .5);
  background: rgba(80, 60, 20, .35);
}
.social-player.is-guild {
  border-color: rgba(200, 160, 60, .35);
}
.social-player-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  min-width: 0;
  max-width: 108px;
}
.social-player-actions .btn {
  width: 100%;
  min-width: 0;
  white-space: nowrap;
  font-size: 11px;
  padding: 4px 6px;
}
.friend-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 650;
  text-align: center;
  line-height: 1.25;
}
.friend-status.is-sent {
  color: #d8f7ff;
  background: #1f6f86;
  border: 1px solid #4ec4e0;
  box-shadow: inset 0 0 0 1px rgba(120, 220, 240, .2);
}
.friend-status.is-friend {
  color: #d7ecd7;
  background: rgba(90, 140, 90, .35);
  border: 1px solid rgba(120, 170, 120, .45);
}
.friend-status.is-out {
  color: #d7c9a0;
  background: rgba(215, 201, 160, .14);
}
#autoAddTopStatus {
  min-height: 1.2em;
}
#autoAddTopStatus.is-wait {
  color: #e0a070;
}
.friends-pool-add-progress {
  margin: 10px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.friends-pool-add-progress .friends-history-summary {
  margin: 0;
}

.muta-tabs,
.muta-types {
  margin: 0 0 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.muta-types[hidden],
.muta-level-row[hidden] {
  display: none !important;
}
.muta-tabs .tab-btn,
.muta-types .tab-btn {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.muta-tabs .tab-btn.active,
.muta-types .tab-btn.active {
  color: #17120a;
  border-color: #f0c43a;
  background: #f0c43a;
  font-weight: 700;
}
.muta-level-row {
  margin: 0 0 10px;
}
.muta-level-row select {
  width: 100%;
}
.muta-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  background: #121318;
  border: 1px solid #232632;
  border-radius: 12px;
  padding: 10px;
}
.muta-card.is-ready {
  border-color: rgba(61, 186, 122, .45);
  background: rgba(61, 186, 122, .06);
}
.muta-claim-box {
  margin: 0 0 10px;
  padding: 14px 16px 16px;
  border-radius: 14px;
  border: 1px solid rgba(150, 150, 160, 0.42);
  background: #0b0b0d;
}
.muta-claim-title {
  font-weight: 700;
  margin-bottom: 4px;
  color: #f0d24a;
  font-size: 15px;
}
.muta-claim-grid {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}
.muta-claim-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.muta-claim-ico {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: contain;
  background: #101014;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.muta-claim-orn {
  display: grid;
  place-items: center;
  color: #f0d24a;
  font-size: 18px;
}
.muta-claim-name {
  font-weight: 650;
  color: #f3f4f6;
}
.muta-claim-sub {
  margin-top: 2px;
  color: #8b9bb0;
  font-size: 12px;
}
.muta-ico {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: #0c0d11;
  flex: none;
}
.muta-title {
  font-weight: 650;
  font-size: var(--fs-sm);
}
.muta-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.muta-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 96px;
}
.muta-actions .btn { width: 100%; min-width: 0; }
.muta-ex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
  font-size: 11px;
  color: #c9c6be;
}
.muta-ex-piece {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 8px;
  background: #1a1c24;
  border: 1px solid #2a2d38;
}
.muta-ex-piece img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: cover;
}
.muta-arrow { color: var(--muted); }
.muta-ex-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  flex-wrap: nowrap;
}
.muta-ex-row .muta-ex-piece {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.muta-ex-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.muta-ex-have { color: var(--muted); flex-shrink: 0; }
.muta-ex-piece.is-lack .muta-ex-have { color: var(--red, #e5484d); }

.field-label { display: block; color: var(--muted); font-size: var(--fs-sm); margin: 8px 0 4px; font-weight: 450; }
textarea,
input[type="number"],
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="password"],
input:not([type]),
select {
  width: 100%; background: #0c0d11; color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; resize: vertical;
  /* ≥16px — иначе iOS сам приближает экран при фокусе на поле */
  font-size: 16px;
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check-row {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 8px;
  color: var(--text); font-size: 14px; cursor: pointer;
}
.check-row input { width: 18px; height: 18px; flex: none; }

#attackDelayBlock {
  margin: 4px 0 10px;
}
.heal-settings {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 4px;
}
.heal-block {
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  padding: 10px 12px 12px;
}
.heal-block-nested {
  margin-left: 0;
  background: rgba(0, 0, 0, 0.12);
}
.heal-block-head {
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--yellow);
  letter-spacing: 0.02em;
  margin: 0 0 2px;
}
.heal-block .check-row { margin: 8px 0 6px; }
.heal-block .field-label { margin-top: 10px; }
.heal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  flex-wrap: wrap;
}
.heal-row-label {
  flex: 0 0 auto;
  min-width: 52px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 450;
}
.heal-seg {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #0c0d11;
  flex: 1 1 auto;
  max-width: 100%;
}
.heal-seg-btn {
  flex: 1 1 0;
  margin: 0;
  padding: 7px 10px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 650;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.heal-seg-btn:last-child { border-right: 0; }
/* пустой скрытый переключатель иначе рисуется рамкой-«точкой» */
.heal-seg[hidden] { display: none !important; }
.heal-seg-btn.active {
  background: rgba(232, 184, 74, 0.18);
  color: var(--yellow);
}
.heal-seg-btn:disabled,
.heal-buy-fields.is-off {
  opacity: 0.45;
  pointer-events: none;
}
.heal-mismatch {
  color: #e8a26a !important;
  margin: 4px 0 0;
}

.invite-auto.cardish {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.invite-auto .heal-settings {
  margin: 0;
}
.invite-auto .boss-floor-chips {
  margin: 6px 0 8px;
}
.invite-auto .field-label {
  margin: 8px 0 4px;
}
.invite-auto #inviteAutoStatus {
  margin: 10px 0 0;
}
.invite-auto .heal-block .check-row {
  margin: 6px 0;
}
.heal-limit-custom {
  margin-top: 6px;
}
.heal-limit-custom.is-preset input {
  opacity: 0.55;
}
#pvpAutoBlock {
  margin-top: 10px;
}
#pvpAutoBlock .check-row {
  margin: 6px 0;
}
.biz-auto-block {
  margin: 10px 0 12px;
}
.biz-auto-block .biz-auto-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.biz-auto-block .biz-auto-row.biz-auto-col {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2px;
  align-items: stretch;
}
.biz-auto-block .biz-auto-col .check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0;
  width: 100%;
}
.biz-auto-block .biz-auto-col .check-row input {
  width: 16px;
  height: 16px;
  flex: none;
}
.biz-auto-block .check-row {
  margin: 4px 0;
}
.muta-chest-notify[hidden] {
  display: none !important;
}
.muta-chest-notify {
  margin: 8px 0 10px;
}
.muta-chest-notify .switch-row {
  border-top: 0;
  padding: 8px 0;
}
.muta-chest-autos {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2px;
}
.muta-chest-autos .switch-row {
  padding: 8px 0 0;
  border-top: 1px solid rgba(42, 44, 54, .7);
  margin-top: 8px;
}
.muta-chest-autos .switch-row + .switch-row {
  margin-top: 0;
  padding-top: 8px;
  border-top: 0;
}
.muta-chest-autos .switch-title {
  font-size: 12px;
  font-weight: 600;
}
.muta-chest-autos input.switch {
  width: 40px;
  height: 24px;
}
.muta-chest-autos input.switch::after {
  width: 18px;
  height: 18px;
  top: 3px;
  left: 3px;
}
.muta-chest-autos input.switch:checked::after {
  transform: translateX(16px);
}
.clan-tabs-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.clan-tabs-grid .tab-btn {
  flex: none !important;
  width: 100%;
  min-width: 0;
  padding: 7px 4px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quest-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.quest-prog-pill {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  color: var(--muted);
}
.quest-ready-pill {
  display: inline-block;
  margin: 4px 0;
  font-size: 12px;
  font-weight: 700;
  color: #6fd4a0;
}
.quest-toggle-link {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.work-energy-ico {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.auto-accept-boss-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  max-height: 360px;
  overflow: auto;
  margin: 4px 0 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.12);
  align-content: start;
}
.auto-accept-boss-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.auto-accept-boss-row.is-on {
  grid-column: 1 / -1;
}
.auto-accept-boss-row.is-flash {
  outline: 1px solid rgba(240, 196, 58, .55);
  border-radius: 10px;
  background: rgba(240, 196, 58, .10);
}
.auto-accept-boss-list label.auto-accept-boss-lab {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.auto-accept-boss-list label.loot-ok > span,
.auto-accept-boss-list label.loot-ok .auto-accept-boss-name {
  color: #6fd4a0;
}
.auto-accept-boss-list label.loot-mid > span,
.auto-accept-boss-list label.loot-mid .auto-accept-boss-name {
  color: var(--yellow);
}
.auto-accept-boss-list label.locked {
  /* зона ещё закрыта — галочку можно поставить заранее */
  opacity: 0.48;
  cursor: pointer;
}
.auto-accept-boss-list label.locked input {
  cursor: pointer;
}
.auto-accept-boss-list input[data-auto-boss-id] {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  flex-shrink: 0;
}
.auto-accept-boss-list input[type="checkbox"]:checked::after {
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
}
.auto-accept-loot-until {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 2px 24px;
  padding: 0;
  border: 0;
  background: transparent;
}
.auto-accept-loot-until.is-premium-locked {
  opacity: 0.55;
  pointer-events: none;
}
.auto-accept-loot-cap {
  margin: 0;
  font-size: 10px;
  line-height: 1.2;
  color: var(--muted);
}
.auto-accept-loot-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
}
.auto-accept-loot-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.auto-accept-loot-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.auto-accept-loot-chip.is-on {
  border-color: rgba(232, 197, 71, 0.55);
  background: rgba(232, 197, 71, 0.16);
  color: var(--yellow);
}
#autoAcceptLootHint {
  margin: 0 0 8px;
}
#autoAcceptLootPremiumLock {
  margin: 0 0 4px;
  color: var(--yellow);
}
@media (max-width: 420px) {
  .auto-accept-boss-list { grid-template-columns: 1fr; }
}
.section-mini { margin: 14px 0 8px; font-size: 13px; color: var(--yellow); font-weight: 700; }
.muta-stats-note { margin: 4px 0 10px; line-height: 1.35; }
.muta-card.is-stored { opacity: 0.82; }
.tag.muta-eq { color: #b8e986; border-color: rgba(184, 233, 134, 0.35); }
.tag.muta-off { color: #9a958c; }
.invite-status {
  display: inline-block; margin-top: 4px; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}


.sub-card {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%;
  border: 1px solid rgba(61,186,122,.45); background: rgba(61,186,122,.08);
  border-radius: 16px; padding: 14px; margin-bottom: 12px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.sub-card:hover, .sub-card:focus-visible {
  border-color: rgba(61,186,122,.7);
  background: rgba(61,186,122,.12);
  outline: none;
}
.sub-card[hidden] { display: none !important; }
.sub-card.off { border-color: var(--line); background: var(--panel); }
.sub-card.warn {
  border-color: rgba(232, 196, 90, .45);
  background: rgba(232, 196, 90, .08);
}
.sub-left { display: flex; gap: 12px; align-items: center; min-width: 0; }
.sub-ico {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(61,186,122,.2); color: var(--ok); font-weight: 800;
  flex: none;
}
.sub-card.off .sub-ico { background: rgba(255,255,255,.06); color: var(--muted); }
.sub-card.warn .sub-ico { background: rgba(232, 196, 90, .18); color: #f0d78a; }
.sub-text { min-width: 0; }
.sub-title { font-weight: 750; }
.sub-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.sub-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.sub-days {
  font-size: 12px;
  font-weight: 750;
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(61,186,122,.22);
  color: #8ee6b5;
  border: 1px solid rgba(61,186,122,.35);
}
.sub-card.warn .sub-days {
  background: rgba(232, 196, 90, .18);
  color: #f0d78a;
  border-color: rgba(232, 196, 90, .35);
}
.sub-card.off .sub-days {
  background: rgba(255,255,255,.06);
  color: var(--muted);
  border-color: var(--line);
}
.sub-chevron {
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
}

.profile-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 14px; margin-bottom: 14px;
}
.profile-idrow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.id-pill {
  font-size: 12px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 8px;
}
.icon-btn.sm { width: 32px; height: 32px; border-radius: 10px; }
.profile-main { display: flex; gap: 12px; align-items: center; }
.avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}
.avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #2a2a33, #15151a);
  border: 2px solid rgba(240,196,58,.35);
  display: grid; place-items: center; font-weight: 800; color: var(--yellow); font-size: 22px;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* уровень на иконке персонажа — как в игре, снизу справа */
.avatar-wrap .lvl-badge.avatar-lvl {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 28px;
  height: 28px;
  z-index: 1;
  pointer-events: none;
}
.avatar-wrap .lvl-badge.avatar-lvl .lvl-badge-num {
  font-size: 10px;
}
.profile-nick { font-size: var(--fs-lg); font-weight: 700; color: var(--yellow); }
.home-cache-hint { margin-top: 0.2rem; opacity: 0.85; }
.profile-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px; font-size: 12px; color: var(--text);
}
.pill.gold { color: var(--yellow); border-color: rgba(240,196,58,.35); }
.pill-ico {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: none;
  display: block;
}
#bloodPill {
  border-color: rgba(200, 70, 70, .35);
  color: #e8b4b4;
}
/* круг уровня (главная на аватаре + уведомления / тосты) */
.lvl-badge {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
}
.lvl-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.lvl-badge-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  color: #f5e6c8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
  pointer-events: none;
}
.lvl-badge.is-lg { width: 36px; height: 36px; }
.lvl-badge.is-lg .lvl-badge-num { font-size: 13px; }
.app-toast-loot-ico.lvl-badge {
  width: 36px;
  height: 36px;
  border-radius: 0;
  background: transparent;
}

/* —— Достижения —— */
.ach-summary {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
}
.ach-summary-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ach-blood-ico {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: none;
}
.ach-summary-points {
  font-weight: 750;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.ach-summary-bar,
.ach-cat-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}
.ach-summary-bar > i,
.ach-cat-bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b2e2e, #d45a3a);
  transition: width .25s var(--ease, ease);
}
.ach-cat-bar {
  margin: 0 0 10px;
  height: 6px;
}
/* категории — те же горизонтальные чипы, что этажи/задания */
.ach-cats {
  margin-bottom: 10px;
}
.ach-main {
  min-width: 0;
}
.ach-cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-weight: 750;
  font-size: 14px;
}
.ach-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ach-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
}
.ach-row.done {
  border-color: rgba(61, 186, 122, .28);
}
.ach-row.is-child {
  margin-left: 14px;
  background: rgba(255, 255, 255, .015);
}
.ach-row.is-parent.is-open {
  border-color: rgba(240, 196, 58, .22);
}
.ach-row-ico {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 10px;
  background: #121216;
}
.ach-row-body {
  min-width: 0;
}
.ach-row-name {
  font-weight: 750;
  font-size: 13px;
  line-height: 1.25;
  color: #9fd0a8;
}
.ach-row:not(.done) .ach-row-name {
  color: var(--text);
}
.ach-row-desc {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}
.ach-row-prog {
  position: relative;
  margin-top: 8px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}
.ach-row-prog > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #2f7d3f, #5cbc6e);
}
.ach-row:not(.done) .ach-row-prog > i {
  background: linear-gradient(90deg, #9a6a1c, #e0a84a);
}
.ach-row-prog-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: #e8f5ea;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  pointer-events: none;
}
.ach-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  align-self: stretch;
  min-height: 48px;
}
.ach-toggle {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.ach-toggle:hover { color: var(--text); }
.ach-toggle-caret {
  font-size: 12px;
  line-height: 1;
}
.ach-toggle:not(.is-open) {
  font-size: 14px;
  padding: 2px 0;
}
.ach-row-reward {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 750;
  font-size: 12px;
  color: #e8b4b4;
  white-space: nowrap;
}
.ach-row-reward img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.unlock-card {
  margin-bottom: 12px;
  background: linear-gradient(180deg, #16171e 0%, #12131a 100%);
  border: 1px solid rgba(240,196,58,.22);
}
.unlock-head { margin-bottom: 10px; }
.unlock-title-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.unlock-title {
  font-weight: 700; font-size: 15px; color: var(--text);
  display: inline-flex; align-items: center; gap: 6px;
}
.unlock-key { filter: grayscale(.2); }
.unlock-tag { margin-left: 0; }
.unlock-frac {
  margin-left: auto; font-weight: 700; color: var(--yellow); font-size: 13px;
}
.unlock-sub {
  margin-top: 4px; color: var(--muted); font-size: 12px;
}
.unlock-bar {
  margin-top: 8px; height: 6px; border-radius: 999px;
  background: #0c0d11; border: 1px solid var(--line); overflow: hidden;
}
.unlock-bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #a88418, var(--yellow));
  border-radius: inherit;
}
.unlock-reqs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
  margin: 10px 0 12px;
}
@media (max-width: 420px) {
  .unlock-reqs { grid-template-columns: 1fr; }
}
.unlock-req {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12px; color: var(--muted); line-height: 1.35;
}
.unlock-req.met { color: #8fd6ad; }
.unlock-req-text { flex: 1; }
.unlock-check {
  color: var(--ok); font-weight: 800; min-width: 14px;
}
.unlock-dot, .unlock-lock { min-width: 14px; color: var(--muted); }
.unlock-add-btn { margin-top: 4px; }
.unlock-hint { margin-top: 4px; }
.unlock-hints { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.unlock-hints .unlock-req {
  font-size: 11px; line-height: 1.35; color: var(--muted);
}
.unlock-pointer {
  margin-top: 4px; font-size: 11px; line-height: 1.35;
}
.action-goals {
  display: flex; flex-direction: column; gap: 2px; margin-top: 4px;
}
.action-goal {
  font-size: 11px; line-height: 1.35; color: #e8c84a; text-align: left;
}
.unlock-goals-panel { margin-bottom: 10px; }
.unlock-goal-primary {
  margin-bottom: 8px; font-size: 12px; line-height: 1.4;
}
.unlock-goal-primary strong { color: #e8c84a; font-weight: 700; }
.unlock-goal-list { display: flex; flex-direction: column; gap: 8px; }
.unlock-goal-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.unlock-goal-title { font-size: 12px; font-weight: 700; }
.unlock-goal-req { margin-top: 2px; }
.floor-lock-body { padding: 8px 12px 12px; }
.boss-card.locked.unlockable { cursor: not-allowed; opacity: .45; pointer-events: none; }
.boss-card.locked.unlockable:hover { border-color: var(--line); }
.ward-unlock-btn { white-space: nowrap; }
.xp-block { margin-top: 14px; }
.xp-top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px; font-size: 12px;
}
.xp-label { color: var(--muted); }
.xp-text { color: var(--text); font-weight: 700; }
.xp-bar {
  height: 10px; border-radius: 999px; background: #0c0d11;
  border: 1px solid var(--line); overflow: hidden;
}
.xp-bar > i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #a88418, var(--yellow));
  border-radius: inherit;
  transition: width .25s ease;
}
.stat-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.stat-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
.stat-row .k { color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
.stat-row .v { font-weight: 700; }

.stat-upgrade-row {
  width: 100%;
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #1a1b22 0%, #121318 100%);
  border: 1px solid #2e303a;
  border-radius: 12px;
  padding: 8px 10px;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.stat-upgrade-row:hover, .stat-upgrade-row:focus-visible {
  border-color: rgba(240,196,58,.45);
  background: rgba(240,196,58,.05);
  outline: none;
}
.stat-face {
  position: relative;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid #4a4e5a;
  background: #0a0a0c;
  box-shadow: inset 0 0 10px rgba(0,0,0,.55);
}
.stat-face img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 50%;
}
.stat-face-plus {
  position: absolute; right: -3px; bottom: -3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0c43a, #a88418);
  color: #1a1208;
  font-size: 14px; font-weight: 900; line-height: 1;
  display: grid; place-items: center;
  border: 2px solid #121318;
  z-index: 1;
}
.stat-info { min-width: 0; }
.stat-name {
  font-weight: 750; font-size: 14px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.stat-hint { color: var(--muted); font-size: 11px; font-weight: 500; }
.stat-vals {
  margin-top: 2px; font-variant-numeric: tabular-nums;
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.stat-vals .base { font-weight: 750; }
.stat-vals .bonus { color: #8ee6b5; font-weight: 700; }
.stat-real {
  margin-top: 2px; color: var(--muted); font-size: 12px;
}
.stat-real strong { color: var(--text); font-weight: 700; }
.stat-cost {
  color: var(--muted); font-size: 11px; text-align: right; white-space: nowrap;
}
.stat-cost strong { color: var(--yellow); font-weight: 750; }
.stat-modal-body {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px;
}
.stat-modal-line {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 4px 0; font-size: 13px;
}
.stat-modal-line .k { color: var(--muted); }
.stat-modal-line .v { font-weight: 700; }
.stat-modal-line .bonus { color: #8ee6b5; font-weight: 700; }

.gico {
  display: inline-grid; place-items: center;
  width: 1.35em; height: 1.35em; border-radius: 6px;
  font-size: 12px; font-weight: 800; line-height: 1;
  flex: 0 0 auto;
}
.gico.lvl { background: rgba(240,196,58,.18); color: var(--yellow); font-size: 10px; }
.gico.rating { background: rgba(240,196,58,.12); color: #f0c43a; }
.gico.xp { background: rgba(120,160,255,.15); color: #9bb6ff; }
.gico.energy { background: rgba(240,196,58,.18); color: #f5d76e; }
.gico.weapon { background: rgba(180,140,90,.18); color: #d2b48c; }
.gico.dmg { background: rgba(224,87,79,.18); color: #ef857d; }
.gico.crit { background: rgba(180,120,255,.18); color: #c9a0ff; }
.gico.skull { background: rgba(61,186,122,.14); color: #6fd4a0; }
.gico.hp { background: rgba(224,87,79,.14); color: #ef857d; }

.energy-chip {
  margin-top: 14px; width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; color: inherit; cursor: pointer; text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.energy-chip + .energy-chip { margin-top: 8px; }
.energy-chip:hover, .energy-chip:focus-visible {
  border-color: rgba(240,196,58,.45);
  background: rgba(240,196,58,.06);
  outline: none;
}
.energy-chip--static {
  cursor: default;
}
.energy-chip--static:hover, .energy-chip--static:focus-visible {
  border-color: var(--line);
  background: var(--bg2);
}
.energy-chip.broken {
  border-color: rgba(224,87,79,.45);
  background: rgba(224,87,79,.06);
}
.energy-chip.broken .energy-value { border-color: rgba(224,87,79,.4); color: #ef857d; }
.energy-timer {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.energy-value {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px; font-weight: 750; background: #0c0d11;
  flex-shrink: 0;
  white-space: nowrap;
}

.boss-floor-chips {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* тонкий скроллбар всегда: на ПК видно, куда листать; на телефоне свайп как раньше */
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 196, 58, 0.45) transparent;
  margin: 0 0 10px;
  padding: 4px 4px 6px;
  background: #16171c;
  border: 1px solid var(--line);
  border-radius: 12px;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.boss-floor-chips.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.boss-floor-chips::-webkit-scrollbar {
  height: 6px;
}
.boss-floor-chips::-webkit-scrollbar-thumb {
  background: rgba(240, 196, 58, 0.45);
  border-radius: 999px;
}
.boss-floor-chips::-webkit-scrollbar-track {
  background: transparent;
}
.boss-floor-chip {
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-sm);
  min-width: 36px;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}
.boss-floor-chip.active {
  /* Стиль C: плотный жёлтый чип этажа */
  background: #f0c43a;
  color: #17120a;
  box-shadow: none;
  font-weight: 750;
}
.boss-floor-chip.locked {
  opacity: .45;
}
.boss-pick-floor-head {
  margin: 0 0 8px;
}
.boss-pick-flat .boss-pick-grid {
  margin-top: 2px;
}
.boss-pick-flat .floor-lock-body {
  margin-top: 6px;
}

.boss-kills-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.boss-kill-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px;
}
.boss-kill-row.loot-ok {
  border-color: rgba(61,186,122,.28);
}
.boss-kill-row.loot-mid {
  border-color: rgba(232,184,74,.45);
}
.boss-kill-name {
  display: inline-flex;
  align-items: center; /* череп и имя по одной горизонтали */
  gap: 8px;
  font-weight: 700;
  min-width: 0;
  line-height: 1.2;
}
.boss-kill-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boss-kill-count { color: #8ee6b5; font-weight: 750; font-variant-numeric: tabular-nums; }
.boss-kill-row.loot-mid .boss-kill-count { color: #f0d78a; }

.energy-modal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: end center;
}
.energy-modal[hidden] { display: none !important; }
/* модалка прогонов поверх оверлея выбора ходки (z-index 110) */
#workRunModal.energy-modal {
  z-index: 140;
}
.energy-modal-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.62);
}
.energy-modal-sheet {
  position: relative; z-index: 1;
  width: min(440px, 100%);
  margin: 0 10px 18px;
  background: #14151a; border: 1px solid var(--line); border-radius: 18px;
  padding: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.45);
  animation: sheetIn .16s ease;
}
.energy-modal-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  margin-bottom: 12px;
}
.energy-modal-title {
  font-weight: 800; font-size: 16px;
  display: inline-flex; align-items: center; gap: 8px;
}
.energy-boost-list { display: flex; flex-direction: column; gap: 8px; }
.energy-boost-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
.energy-boost-meta { min-width: 0; }
.energy-boost-name { font-weight: 750; }
.energy-boost-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.energy-boost-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
.energy-boost-row .btn { min-width: 72px; }

.confirm-sheet { margin-bottom: max(18px, env(safe-area-inset-bottom, 0px)); }
#confirmModal.energy-modal { z-index: 220; }
.confirm-modal-body {
  margin-top: 8px;
  white-space: pre-wrap;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
  max-height: 40vh;
  overflow: auto;
}
.confirm-modal-body[hidden] { display: none !important; }
.confirm-modal-actions {
  margin: 14px 0 0;
  display: flex;
  gap: 8px;
}

.section-head { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 10px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.notify-list { display: flex; flex-direction: column; gap: 8px; }
.notify-list.compact .notify-item { padding: 10px 12px; }
.notify-item {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 14px;
  padding: 12px 14px;
  position: relative;
}
.notify-item.is-read {
  opacity: 0.72;
}
.notify-item.unread {
  border-color: rgba(240, 196, 58, 0.55);
  background: linear-gradient(90deg, rgba(240, 196, 58, 0.16), rgba(240, 196, 58, 0.04) 42%);
  box-shadow: inset 3px 0 0 #f0c43a;
}
.notify-item.unread.outcome-won {
  border-color: rgba(61, 186, 122, 0.55);
  background: linear-gradient(90deg, rgba(61, 186, 122, 0.18), rgba(61, 186, 122, 0.04) 42%);
  box-shadow: inset 3px 0 0 #3dba7a;
}
.notify-item.unread.outcome-lost {
  border-color: rgba(224, 87, 79, 0.55);
  background: linear-gradient(90deg, rgba(224, 87, 79, 0.16), rgba(224, 87, 79, 0.04) 42%);
  box-shadow: inset 3px 0 0 #e0574f;
}
.notify-item.unread.outcome-empty {
  border-color: rgba(240, 196, 58, 0.55);
  background: linear-gradient(90deg, rgba(240, 196, 58, 0.16), rgba(240, 196, 58, 0.04) 42%);
  box-shadow: inset 3px 0 0 #f0c43a;
}
.notify-new {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  margin: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #1a1508;
  background: #f0c43a;
}
.notify-cat-ico {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--muted);
  line-height: 0;
  opacity: .95;
}
.notify-cat-ico .nt-svg {
  width: 15px;
  height: 15px;
  display: block;
}
.notify-cat-ico .nt-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}
.notify-tabs .nt-img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
}
.boss-kill-name .boss-skull-ico {
  width: 18px;
  height: 18px;
  object-fit: contain;
  object-position: left center;
  flex: none;
  display: block;
  margin-left: -1px;
}
.notify-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.notify-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.notify-title { font-weight: 700; font-size: 14px; }
.notify-time { color: var(--muted); font-size: 11px; white-space: nowrap; }
.notify-section-head {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin: 12px 4px 6px;
}
.notify-section-head:first-child { margin-top: 2px; }
.notify-detail { color: var(--muted); font-size: 12px; margin-top: 4px; }
.notify-kind {
  display: inline-block; margin-top: 6px; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--yellow); font-weight: 700;
}
.notify-item.outcome-won {
  border-color: rgba(61,186,122,.35);
  background: rgba(61,186,122,.06);
}
.notify-item.outcome-empty {
  border-color: rgba(240,196,58,.4);
  background: rgba(240,196,58,.07);
}
.notify-item.outcome-lost {
  border-color: rgba(224,87,79,.3);
  background: rgba(224,87,79,.05);
}
.notify-item.is-read.outcome-won,
.notify-item.is-read.outcome-lost,
.notify-item.is-read.outcome-empty {
  box-shadow: none;
}
.trash-btn { color: #ef857d; }
.trash-btn:hover, .trash-btn:focus-visible {
  border-color: rgba(224,87,79,.45);
  background: rgba(224,87,79,.1);
  outline: none;
}
.notify-loot {
  margin-top: 10px;
  padding: 10px 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(150, 150, 160, 0.35);
  background: #0b0b0d;
  display: grid;
  gap: 12px;
}
.notify-loot-group {
  display: grid;
  gap: 8px;
}
.notify-loot-sep {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.notify-loot-sep::before,
.notify-loot-sep::after {
  content: "";
  height: 1px;
  background: rgba(150, 150, 160, 0.28);
}
.notify-loot-sep span {
  white-space: nowrap;
}
.notify-loot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}
/* одна награда / длинный текст достижения — на всю ширину, не в полколонки */
.notify-loot-grid > .app-toast-loot-item:only-child {
  grid-column: 1 / -1;
}
.notify-item[data-cat="achievements"] .notify-loot-grid,
.notify-item[data-cat="level"] .notify-loot-grid,
.notify-item[data-kind="level_up"] .notify-loot-grid {
  grid-template-columns: 1fr;
}
.notify-loot-grid .app-toast-loot-item {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
}
.notify-loot-grid .app-toast-loot-ico {
  width: 36px;
  height: 36px;
}
.notify-loot-grid .app-toast-loot-name {
  font-size: 12px;
}
@media (max-width: 380px) {
  .notify-loot-grid { grid-template-columns: 1fr; }
}
.notify-item .notify-title {
  font-weight: 700;
}
.notify-item[data-kind="reward"] .notify-title,
.notify-loot-title {
  color: #f0d24a;
}
.notify-kind.ok { color: #f0d24a; }
.notify-kind.bad { color: #ef857d; }
.notify-kind.warn { color: #f0c43a; }

.fight-card {
  border: 1px solid rgba(224,87,79,.55); background: #121015;
  border-radius: 16px; padding: 14px; margin-bottom: 12px;
}
.fight-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}
.fight-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.fight-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
/* череп и имя босса — одна строка; левый край черепа = левый край «HP босса» */
.fight-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}
.fight-name-row .boss-skull-ico {
  width: 28px;
  height: 28px;
  object-fit: contain;
  object-position: left center;
  display: block;
  flex: none;
  margin: 0;
  margin-left: -1px; /* оптика: мягкий край webp чуть правее глифов текста */
  padding: 0;
}
.fight-name-end {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.fight-invites-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 2px 8px;
  min-width: 32px;
  height: 22px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fight-invites-btn:active {
  background: rgba(255, 255, 255, .14);
}
.fight-invites-btn img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  opacity: 1;
  pointer-events: none;
}
/* на жёлтом активном пункте меню светлые игровые иконки чуть приглушаем */
.menu-item.active[data-page="invites"] .ico-img,
.menu-item.active[data-page="clan"] .ico-img,
.menu-item.active[data-page="achievements"] .ico-img,
.menu-item.active[data-page="wardrobe"] .ico-img,
.menu-item.active[data-page="friends"] .ico-img {
  filter: brightness(0.28) contrast(1.05);
}
.fight-name {
  font-weight: 650;
  font-size: var(--fs-md);
  line-height: 1.2;
  min-width: 0;
}
.fight-name .skull { color: #e0574f; }
.fight-name .boss-tip {
  line-height: 1.2;
}
.fight-timer {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  margin: 0;
  padding-left: 35px; /* 28 иконка −1 margin + 8 gap */
}
.tag {
  font-size: 11px; border-radius: 999px; padding: 3px 8px; font-weight: 700;
  background: rgba(61,186,122,.15); color: #8ee6b5; border: 1px solid rgba(61,186,122,.3);
}
.tag.solo {
  background: rgba(120, 150, 220, .18);
  color: #b8c8f0;
  border-color: rgba(120, 150, 220, .4);
}
.tag.fight-attempt {
  background: rgba(240, 196, 58, .14);
  color: #f0c43a;
  border-color: rgba(240, 196, 58, .35);
  font-variant-numeric: tabular-nums;
}
.hp-block { margin-top: 12px; }
.hp-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; font-size: 13px; font-weight: 600; }
.hp-pct {
  background: rgba(226,59,53,.22); color: #ff8a80; border-radius: 999px;
  padding: 2px 8px; font-size: 12px; font-weight: 700;
}
.hp-top-right { display: inline-flex; align-items: center; gap: 6px; }
.fight-left {
  color: var(--muted); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fight-left[hidden] { display: none; }
.hp-block.player .hp-pct {
  background: rgba(61,186,122,.22); color: #6fd4a0;
}
.hp-bar {
  position: relative;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.hp-bar > i {
  position: absolute;
  left: 3px;
  top: 3px;
  bottom: 3px;
  max-width: calc(100% - 6px);
  border-radius: 999px;
  background: rgba(226,59,53,.82);
  box-shadow: 0 0 12px rgba(226,59,53,.35);
  transition: width .45s ease-out;
}
.hp-bar.player > i {
  background: rgba(61,186,122,.88);
  box-shadow: 0 0 12px rgba(61,186,122,.35);
}
.hp-bar .hp-nums {
  position: relative;
  z-index: 1;
  margin: 0 10px 0 auto;
  color: #f2f2f5;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.75);
}
.fight-my { margin-top: 10px; font-size: 13px; }
.fight-my b { color: #4cde8a; }
.hp-block.dmg .hp-pct { background: rgba(240,196,58,.16); color: #f0c43a; }
.hp-block.dmg.done .hp-pct { background: rgba(61,186,122,.22); color: #6fd4a0; }
.hp-bar.dmg { overflow: visible; margin-top: 11px; }
.hp-bar.dmg > i { background: rgba(240,196,58,.85); box-shadow: 0 0 12px rgba(240,196,58,.35); }
.hp-bar.dmg.done > i { background: rgba(61,186,122,.88); box-shadow: 0 0 12px rgba(61,186,122,.35); }
.dmg-mark {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; z-index: 2;
  background: rgba(240,196,58,.9);
  transition: left .45s ease-out;
}
.dmg-mark::before {
  content: ""; position: absolute; left: 50%; top: -7px; width: 10px; height: 10px;
  transform: translateX(-50%) rotate(45deg); border-radius: 2px;
  background: linear-gradient(135deg, #ffe08a, #e0a91c);
  box-shadow: 0 0 0 2px #121015, 0 0 8px rgba(240,196,58,.7);
}
.hp-bar.dmg.done .dmg-mark { background: rgba(111,212,160,.95); }
.hp-bar.dmg.done .dmg-mark::before {
  background: linear-gradient(135deg, #a8f0c8, #2fae6c);
  box-shadow: 0 0 0 2px #121015, 0 0 8px rgba(61,186,122,.7);
}
.dmg-note { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.dmg-note.ok { color: #4cde8a; }
.fight-items {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.fight-items-title {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.fight-items-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fight-item-btn {
  flex: 1 1 auto;
  min-width: 30%;
}
.fight-howl-hint { margin-top: 6px; }
.fight-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.fight-actions .btn[hidden] { display: none !important; }
.fight-actions .btn {
  flex: 1;
  min-height: 40px;
  border-radius: 12px;
  font-weight: 800;
}
.fight-cd-hint {
  margin-top: 6px;
}
.fight-attacks {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 650;
  color: var(--yellow);
}
.lb { margin-top: 12px; }
.lb-title { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
/* видно ~10 строк (с подписью «от кого» ≈48px), остальных — прокруткой.
   overscroll none: у края нет «резинки» — иначе Telegram ловит жест и сворачивает миниапп.
   На ПК колесо на страницу отдаёт bindLbListScrollChain; на телефоне — touch-guard в JS.
   -webkit-overflow-scrolling — как у меню, иначе скролл «рваный». */
.lb-list {
  max-height: 480px;
  overflow-y: auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}
.lb-row {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 13px;
}
.lb-name-cell { min-width: 0; }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-from {
  margin-top: 1px; font-size: 11px; color: var(--muted); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-rank {
  width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
  background: #2a2a33; font-size: 11px; font-weight: 800;
}
.lb-rank.r1 { background: #c9a227; color: #111; }
.lb-rank.r2 { background: #9aa0a8; color: #111; }
.lb-rank.r3 { background: #a56a3a; color: #111; }
.lb-dmg { color: #8ee6b5; font-weight: 700; }

.tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--line); margin: 8px 0 12px;
}
.tab {
  flex: 1; border: 0; background: transparent; color: var(--muted);
  padding: 8px 6px; cursor: pointer; font-weight: 550; font-size: var(--fs);
  border-bottom: 2px solid transparent;
}
.tab.active { color: var(--yellow); border-bottom-color: var(--yellow); font-weight: 600; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.row.gap { display: flex; gap: 8px; margin: 6px 0 10px; }
.grow { flex: 1; }
.panel.tight { padding: 10px; margin-bottom: 8px; }
.muted.sm { font-size: var(--fs-sm); margin-bottom: 6px; }
.empty.soft { margin-bottom: 10px; padding: 12px; font-size: var(--fs-sm); }
.search {
  flex: 1; min-width: 140px; background: #0c0d11; color: var(--text);
  border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px;
}
.flat-list { display: flex; flex-direction: column; gap: 6px; }
.queue-list { display: flex; flex-direction: column; gap: 6px; }
.queue-list.is-reordering { user-select: none; }
.queue-item, .flat-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
.queue-item {
  cursor: grab;
  touch-action: none;
}
.queue-item:active { cursor: grabbing; }
.queue-item.is-dragging { cursor: grabbing; }
.queue-item.is-active { border-color: rgba(90, 180, 120, .45); background: rgba(90, 180, 120, .07); }
.works-queue-cards .queue-item.is-active {
  border-color: rgba(64, 140, 255, .7);
  background: rgba(40, 100, 200, .22);
  box-shadow: inset 0 0 0 1px rgba(64, 140, 255, .18);
}
.queue-item.is-done {
  border-color: rgba(110, 150, 210, .5);
  background: rgba(90, 130, 200, .1);
}
.queue-item.is-done .qi-name {
  color: #9eb6de;
}
.queue-item.is-done .qi-sub {
  color: rgba(158, 182, 222, .85);
}
.queue-item.is-done .qi-del {
  opacity: 0.7;
}
.qi-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px;
}
.qi-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.qi-thumb {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: #0e0f14;
  border: 1px solid var(--line);
}
.qi-wait {
  font-size: 12px;
  line-height: 1;
  opacity: .7;
  flex-shrink: 0;
}
.qi-card .qi-main {
  flex: 1;
  min-width: 0;
}
.qi-card .qi-name {
  font-weight: 750;
  font-size: 13px;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.qi-card .qi-drag {
  font-size: 11px;
  opacity: .55;
  letter-spacing: -1px;
  padding: 0 2px;
}
.qi-goals .action-goals {
  margin-top: 1px;
}
.qi-goals .action-goal {
  font-size: 11px;
  color: var(--muted);
}
.qi-tools {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
}
.qi-tool {
  min-width: 24px;
  height: 24px;
  padding: 0;
  line-height: 1;
  font-size: 10px;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qi-tool:disabled {
  opacity: .35;
}
.qi-arrow-svg,
.qi-trash-svg {
  width: 16px;
  height: 16px;
  display: block;
  flex: none;
  color: var(--muted);
}
.qi-arrow-svg path,
.qi-trash-svg path {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.qi-tool:hover:not(:disabled) .qi-arrow-svg,
.qi-tool:focus-visible .qi-arrow-svg {
  color: var(--text);
}
.qi-tool.qi-del:hover:not(:disabled) .qi-trash-svg,
.qi-tool.qi-del:focus-visible .qi-trash-svg {
  color: #e0574f;
}
.quest-toggle-link .qi-arrow-svg {
  width: 12px;
  height: 12px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 4px;
}
.stash-toggle-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stash-toggle-arrow .qi-arrow-svg {
  width: 13px;
  height: 13px;
}
.clan-sort-dir-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.clan-sort-dir-btn .qi-arrow-svg {
  width: 12px;
  height: 12px;
}
.qi-status {
  display: inline-flex;
  align-items: center;
  margin-left: 0;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  vertical-align: middle;
}
.qi-status.is-now {
  background: rgba(64, 140, 255, .4);
  color: #d6e7ff;
}
.qi-status.is-ok {
  background: rgba(90, 180, 120, .25);
  color: #b6e6c4;
}
.qi-bar-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.qi-bar-meta {
  display: block;
  padding: 1px 2px 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.works-queue-cards .qi-bar {
  height: 18px;
  border-radius: 8px;
  overflow: hidden;
}
.works-queue-cards .qi-bar-runs {
  height: 18px;
  border-radius: 8px;
}
.works-queue-cards .qi-bar-runs .work-bar-label {
  font-size: 10px;
  line-height: 18px;
}
.works-queue-cards .qi-bar > i {
  background: linear-gradient(90deg, #d4a017, #f5d76e);
}
.works-queue-cards .qi-bar.checkpoint > i {
  background: linear-gradient(90deg, #c9a227, #f0c43a);
}
.works-queue-cards .work-bar-label {
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  white-space: nowrap;
}
.works-queue-empty { padding: 8px 2px; }
.works-queue-panel .queue-ctrl { margin-bottom: 10px; }
.works-queue-panel .queue-meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.works-queue-panel .queue-meta .rico {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

.work-pick-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.work-pick-overlay[hidden] { display: none !important; }
.work-pick-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}
.work-pick-sheet {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(88vh, 720px);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  padding: 14px 14px 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .45);
  display: flex;
  flex-direction: column;
}
.work-pick-sheet #workTree {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.work-pick-sheet #workPickFloorChips {
  flex: 0 0 auto;
  margin: 4px 0 8px;
  position: relative;
  z-index: 2;
}
.work-pick-sheet #workTree.boss-pick-flat {
  display: block;
}
.work-pick-sheet #workTree .boss-pick-grid {
  margin-top: 4px;
}
.work-pick-sheet #workTree .floor {
  overflow: visible;
}
.work-pick-sheet #workTree .floor.open {
  overflow: hidden;
}
.work-pick-sheet #workTree .floor-head {
  min-height: 56px;
  padding: 14px;
}
.work-pick-sheet #workTree .floor-title {
  font-size: 14px;
  line-height: 1.4;
}
.work-pick-sheet .boss-pick-actions {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  margin: 0 -14px;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(11,11,13,0), rgba(11,11,13,.95) 18%, rgba(11,11,13,1) 40%);
}
.work-pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex: 0 0 auto;
}
.work-pick-head h2 {
  margin: 0;
  font-size: 17px;
}
.work-pick-sheet > .muted {
  flex: 0 0 auto;
}
.queue-drop-slot {
  flex: none;
  border: 1px dashed rgba(240,196,58,.4);
  border-radius: 12px;
  background: rgba(240,196,58,.06);
  box-sizing: border-box;
  pointer-events: none;
}
.queue-drag-ghost {
  position: fixed;
  z-index: 1200;
  margin: 0;
  pointer-events: none;
  box-sizing: border-box;
  opacity: 1;
  cursor: grabbing;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(240,196,58,.55);
  border-radius: 12px;
  background: var(--bg2);
  box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(240,196,58,.28);
  transform: translate3d(0,0,0) scale(1);
  transition: box-shadow 0.14s ease;
  will-change: transform;
}
.queue-drag-ghost.is-lifting {
  box-shadow: 0 22px 48px rgba(0,0,0,.62), 0 0 0 1px rgba(240,196,58,.4);
}
.queue-drag-ghost.is-dropping {
  pointer-events: none;
}
.qi-drag {
  flex: none;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: -2px;
  user-select: none;
  padding: 0 2px;
  cursor: grab;
}
.qi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qi-del {
  flex: none;
  min-width: 24px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.qi-del:hover { color: #e0574f; }
.qi-del .qi-trash-svg { color: inherit; }
.flat-item.selected { border-color: rgba(240,196,58,.4); background: rgba(240,196,58,.07); }
.flat-item input { flex: none; }
.qi-name, .fi-name { font-weight: 650; flex: 1; }
.qi-sub, .fi-sub { color: var(--muted); font-size: 12px; }
.boss-tip {
  cursor: pointer;
}
.boss-tip:focus-visible {
  outline: none;
}
.boss-loot-tip {
  position: fixed;
  z-index: 80;
  min-width: 220px;
  max-width: min(380px, calc(100vw - 20px));
  max-height: min(70vh, 420px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: #15161c;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  pointer-events: auto;
}
.blt-group.blt-flat { margin-top: 4px; }
.blt-group.blt-cols .blt-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
}
.blt-group.blt-cols .blt-row-name { white-space: nowrap; }
.boss-loot-tip[hidden] { display: none !important; }
.blt-title {
  font-weight: 800;
  font-size: 15px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.blt-reward {
  color: var(--muted);
  font-size: 11px;
  margin: -2px 0 10px;
}
.blt-group { margin-bottom: 10px; }
.blt-group:last-child { margin-bottom: 0; }
.blt-group-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}
.blt-group-head .blt-count { font-variant-numeric: tabular-nums; }
.blt-group-head .blt-count.ok { color: #6fd4a0; }
.blt-group-head .blt-count.mid { color: var(--yellow); }
.blt-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
  padding: 2px 0;
}
.blt-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blt-row-plain .blt-row-name { white-space: normal; }
.blt-row-val { flex: none; font-variant-numeric: tabular-nums; font-weight: 700; color: #8ee6b5; }
.blt-row-val.miss { color: var(--muted); font-weight: 600; }
.blt-empty { color: var(--muted); font-size: 12px; }
.blt-loading { color: var(--muted); font-size: 13px; padding: 4px 0; }

/* —— Paywall / Admin —— */
body.paywall-open {
  overflow: hidden !important;
  touch-action: none;
}
body.paywall-open .app,
body.paywall-open .content,
body.paywall-open .drawer {
  overflow: hidden !important;
  overscroll-behavior: none;
}
.paywall {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: max(12px, env(safe-area-inset-top, 0px)) 18px max(24px, env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(232, 196, 90, 0.18), transparent 55%),
    linear-gradient(165deg, #0c0c0e 0%, #15131a 45%, #0a0a0c 100%);
}
.paywall[hidden] { display: none !important; }
.paywall-inner {
  position: relative;
  width: min(100%, 360px);
  margin: auto 0;
  flex: 0 0 auto;
  text-align: center;
  padding-bottom: 8px;
}
.paywall-close {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
}
.paywall-close[hidden] { display: none !important; }
.paywall-status {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(61,186,122,.45);
  background: rgba(61,186,122,.1);
  color: #8ee6b5;
  font-size: var(--fs-sm);
  font-weight: 650;
}
.paywall-status[hidden] { display: none !important; }
.paywall-brand {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 8vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f0d78a;
  margin-bottom: 18px;
}
.paywall-title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 650;
}
.paywall-sub {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.4;
  font-size: var(--fs-sm);
}
.paywall-price {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #f0d78a;
}
.paywall-price[hidden] { display: none !important; }
.paywall-manual {
  text-align: left;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
}
.paywall-manual[hidden] { display: none !important; }
.paywall-manual-req {
  margin: 8px 0 12px;
  white-space: pre-wrap;
  line-height: 1.45;
  color: #f0d78a;
  font-weight: 600;
}
#webLoginOverlay .field-label input,
#paywallManualBlock .field-label input {
  width: 100%;
  margin-top: 4px;
  box-sizing: border-box;
}
.paywall-plans {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  text-align: left;
}
.paywall-plan {
  text-align: left;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  color: inherit;
  width: 100%;
}
.paywall-plan.is-selected {
  border-color: rgba(232, 184, 74, 0.55);
  background: rgba(232, 184, 74, 0.10);
  box-shadow: 0 0 0 1px rgba(232, 184, 74, 0.18);
}
.paywall-plan-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.paywall-plan-name {
  font-size: 14px;
  font-weight: 750;
  color: var(--text);
}
.paywall-plan.is-selected .paywall-plan-name { color: #f0d78a; }
.paywall-plan-price {
  font-size: 14px;
  font-weight: 750;
  color: #f0d78a;
  white-space: nowrap;
}
.paywall-plan-desc {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.paywall-plan-list {
  margin: 8px 0 0;
  padding: 0 0 0 16px;
  color: #d8c08a;
  font-size: 11px;
  line-height: 1.45;
}
.paywall-plan-list li { margin: 0 0 2px; }
.paywall-plan[hidden] { display: none !important; }
.premium-lock-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(232, 184, 74, 0.28);
  background: rgba(232, 184, 74, 0.08);
  color: #d8c08a;
  font-size: 11px;
  line-height: 1.35;
}
.premium-lock-hint[hidden] { display: none !important; }
.premium-lock-hint::before {
  content: "★";
  color: var(--yellow);
  font-weight: 800;
  flex: none;
  line-height: 1.2;
}
.heal-seg.is-premium-locked .heal-seg-btn:not([data-friends-add-source="off"]) {
  opacity: 0.4;
  cursor: not-allowed;
}
.switch-row.is-premium-locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.tab-btn.is-premium-locked {
  opacity: 0.55;
}
.tab-btn.is-premium-locked::after {
  content: " ★";
  color: var(--yellow);
  font-size: 10px;
}
.help-topic-card.is-premium-locked {
  opacity: 0.55;
  pointer-events: none;
}
.friends-panel.is-premium-locked .friends-import-area,
.friends-panel.is-premium-locked input,
.friends-panel.is-premium-locked button,
.friends-panel.is-premium-locked textarea {
  opacity: 0.55;
  pointer-events: none;
}
.paywall-disclaimer {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.45;
  font-size: var(--fs-xs, 0.75rem);
  opacity: 0.9;
}
#paywallMsg:empty,
#paywallMsg:not(.is-err) {
  border: none;
  background: transparent;
  padding: 0;
}
#paywallMsg.is-err:not(:empty) {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(220, 80, 80, 0.55);
  background: rgba(120, 24, 24, 0.35);
  color: #ffb4b4;
}
.admin-global-card {
  margin: 12px 0 18px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(232, 168, 74, 0.35);
  background: linear-gradient(180deg, rgba(42, 28, 14, 0.55), rgba(16, 14, 12, 0.9));
}
.admin-global-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.admin-global-title {
  font-weight: 750;
  font-size: var(--fs-lg);
}
.admin-global-pill {
  flex: none;
  font-size: 12px;
  font-weight: 750;
  border-radius: 999px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--muted);
}
.admin-global-pill.is-on {
  border-color: rgba(61,186,122,.45);
  background: rgba(61,186,122,.18);
  color: #8ee6b5;
}
.admin-global-pill.is-off {
  border-color: rgba(220, 80, 80, 0.55);
  background: rgba(120, 24, 24, 0.35);
  color: #ffb4b4;
}
.admin-global-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.admin-global-actions .btn { margin: 0; }
.admin-pause-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(232, 168, 74, 0.22);
}
.admin-pause-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 650;
  margin-bottom: 8px;
}
.admin-pause-label .muted {
  display: inline;
  font-weight: 500;
  margin-left: 4px;
}
.admin-pause-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}
.admin-pause-controls input {
  width: 88px;
  flex: none;
  margin: 0;
}
.admin-pause-controls .btn { margin: 0; flex: none; }
.admin-section-title {
  margin: 8px 0 4px;
  font-size: 1rem;
  font-weight: 700;
}
.admin-users-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 6px 0 4px;
  flex-wrap: wrap;
}
.admin-users-toolbar input[type="search"] {
  flex: 1 1 180px;
  min-width: 0;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  color: inherit;
}
.admin-users-toolbar #adminUsersCount {
  flex: none;
  margin: 0;
  white-space: nowrap;
}
.admin-users {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 4px;
  max-height: min(62vh, 560px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 2px;
}
.admin-user-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.admin-user-meta { min-width: 0; }
.admin-user-name {
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-user-sub {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-top: 2px;
}
.admin-grant {
  display: flex;
  gap: 6px;
  align-items: center;
}
.admin-grant input {
  width: 64px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  color: inherit;
}

.referral-panel {
  margin: 8px 0 12px;
}
.referral-lead {
  margin: 0 0 12px;
  font-size: var(--fs);
  line-height: 1.45;
  color: var(--text);
}
.updates-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0 16px;
}
.updates-day {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.updates-day-title {
  font-size: var(--fs);
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
}
.updates-day-items {
  margin: 0;
  padding-left: 1.15em;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.updates-day-items li {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--muted);
}
.referral-stats-row {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.referral-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.referral-link-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.28);
  color: inherit;
  font-size: var(--fs-sm);
}
.referral-link-row .btn {
  flex-shrink: 0;
}
.referral-note {
  margin-top: 14px;
}
.referral-claim {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.referral-claim[hidden] { display: none !important; }
.referral-claim-title {
  font-weight: 750;
  margin-bottom: 6px;
}
.referral-claim-bound {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(61,186,122,.35);
  background: rgba(61,186,122,.1);
  color: #8ee6b5;
  font-size: var(--fs-sm);
  font-weight: 650;
}
.referral-claim-bound[hidden],
.referral-claim-form[hidden] { display: none !important; }
#referralClaimMsg:empty { display: none; }
#referralMsg:empty {
  display: none;
}
#referralShareBtn:not([hidden]) {
  margin-top: 4px;
}

.clan-panel { margin-top: 8px; }
.clan-card-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.clan-emblem {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  flex: none;
}
.clan-emblem-empty { background: rgba(0,0,0,0.25); }
.clan-rank-badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 750;
  font-size: 15px;
  letter-spacing: -0.02em;
  flex: none;
  color: #ffe7a0;
  background: linear-gradient(160deg, rgba(240, 196, 58, 0.22), rgba(240, 196, 58, 0.06));
  border: 1px solid rgba(240, 196, 58, 0.4);
}
.clan-rating-name {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.clan-rating-name > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clan-rating-name .clan-impact-pill {
  flex: none;
}
.clan-card-name { font-size: 16px; font-weight: 650; }
.clan-desc { margin: 8px 0; white-space: pre-wrap; }
.clan-daily textarea,
.clan-settings textarea,
.clan-create-form input,
.clan-create-form select,
.clan-settings input,
.clan-settings select,
.clan-invite-row input {
  width: 100%;
  margin-top: 4px;
  margin-bottom: 8px;
}
.clan-invite-row {
  display: flex;
  gap: 8px;
  margin: 10px 0;
  align-items: center;
}
.clan-invite-row input { margin: 0; flex: 1; }
.clan-member-actions {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 4px;
  justify-content: flex-start;
  max-width: 108px;
}
.clan-role-select {
  min-width: 96px;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  color: inherit;
}
.clan-event-row {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.clan-event-title { font-size: 13px; }
.clan-settings { margin: 10px 0; }
.clan-settings summary { cursor: pointer; color: var(--muted); }
.clan-danger { margin-top: 12px; }
.clan-week { margin-bottom: 8px; }
.clan-rating-hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(240, 196, 58, 0.18), rgba(240, 196, 58, 0.05));
  border: 1px solid rgba(240, 196, 58, 0.35);
  color: #ffe7a0;
}
.clan-rating-hero .rico {
  width: 22px;
  height: 22px;
  flex: none;
  filter: drop-shadow(0 0 4px rgba(240, 196, 58, 0.45));
}
.clan-rating-hero b {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffe7a0;
}
.clan-rating-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.clan-rating-mine { margin-bottom: 10px; }
.clan-my-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
}
.clan-impact-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  overflow-x: auto;
}
.clan-impact-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(240, 196, 58, 0.12);
  border: 1px solid rgba(240, 196, 58, 0.28);
  font-size: 12px;
  color: #ffe7a0;
}
.clan-impact-pill.soft {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: var(--text);
}
.clan-impact-pill .rico {
  width: 14px;
  height: 14px;
}
.clan-impact-pill b { font-weight: 650; }
.clan-impact-chips { margin: 8px 0 12px; }
.clan-impact-total {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(240, 196, 58, 0.12);
  border: 1px solid rgba(240, 196, 58, 0.3);
  color: #ffe7a0;
}
.clan-impact-total .rico { width: 20px; height: 20px; }
.clan-impact-total b { font-size: 18px; }
.clan-impact-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ffe7a0;
  font-size: 14px;
  flex: none;
}
.clan-impact-value .rico { width: 16px; height: 16px; }
.clan-members-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
.clan-sort-chips { margin: 0; flex: 1 1 auto; }
.clan-kick-days {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
}
.clan-kick-days input {
  width: 72px;
}
.clan-player-stats {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  min-width: 0;
  overflow: hidden;
}
.clan-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 1 auto;
  min-width: 0;
  color: #e8e6df;
  white-space: nowrap;
}
.clan-stat .stat-ico {
  width: 16px;
  height: 16px;
  flex: none;
  object-fit: contain;
}
.clan-stat b {
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  color: #e8e6df;
}

.help-works-energy {
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.help-works-energy-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.help-works-energy-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.28);
  color: inherit;
  font-size: var(--fs-sm);
}
.help-works-energy-row .btn { flex-shrink: 0; }
.help-works-kind-tabs {
  margin: 0 0 10px;
  flex-wrap: wrap;
  gap: 6px;
}
.help-works-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.help-works-table th,
.help-works-table td {
  text-align: left;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: top;
}
.help-works-table th {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.help-works-table .num {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 420px) {
  .help-works-table {
    font-size: calc(var(--fs-sm) - 1px);
  }
  .help-works-table th,
  .help-works-table td {
    padding: 7px 3px;
  }
}
.help-topics {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
}
.help-topic-card {
  text-align: left;
  border: 1px solid var(--line);
  background: var(--bg2);
  border-radius: 12px;
  padding: 10px 12px;
  color: inherit;
  cursor: pointer;
}
.help-topic-card.active {
  border-color: rgba(240,196,58,.45);
  background: rgba(240,196,58,.06);
}
.help-topic-title {
  font-weight: 700;
  font-size: 14px;
}
.help-topic-blurb { margin-top: 2px; }
.help-panel { margin-top: 4px; }
.help-biz-mat-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #121318;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.help-biz-mat-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin-bottom: 8px;
}
.help-biz-mat-step,
.help-biz-mat-tomax {
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.help-biz-mat-step-title { font-size: 13px; margin-bottom: 4px; }
.help-biz-mat-items { display: flex; flex-direction: column; gap: 2px; }
.help-biz-mat-item { font-size: 12px; color: var(--muted, #9aa0a6); }
.help-biz-mat-item.ok { color: #8fd18f; }
.help-biz-mat-item.need { color: #e6b35a; }
#helpBizMatsTable.help-table-wrap {
  border: none;
  background: transparent;
  overflow: visible;
}
.help-biz-mats-floor-chips {
  margin: 8px 0 10px;
}
.help-gear-tabs,
.help-gear-unlock-tabs {
  margin: 8px 0;
}
.help-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #121318;
}
.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 640px;
}
.help-table th,
.help-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
}
.help-table th {
  color: var(--muted);
  font-weight: 650;
  position: sticky;
  top: 0;
  background: #16171c;
  z-index: 1;
}
.help-table tbody tr:last-child td { border-bottom: 0; }
.help-table .help-name {
  font-weight: 650;
  white-space: normal;
  min-width: 110px;
}
.help-table .help-how {
  white-space: normal;
  min-width: 160px;
  color: #cfcabe;
}
.help-table .help-floor {
  white-space: normal;
  min-width: 120px;
  color: var(--muted);
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .drawer {
    position: fixed; left: 0; top: 0; transform: translateX(-105%);
    transition: transform .2s ease; width: min(86vw, var(--drawer));
    pointer-events: none;
  }
  .drawer.open { transform: none; pointer-events: auto; }
  #menuBtn { display: inline-grid; place-items: center; }
  .scrim.open {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 15;
  }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .field-grid { grid-template-columns: 1fr; }
}

/* Раздел «Улучшения» */
.menu-item .ico-upg { display: inline-flex; align-items: center; justify-content: center; height: 22px; color: var(--yellow); }
.menu-item.active .ico-upg { color: #17120a; }
.upg-queue-panel { margin-bottom: 12px; }
.upg-queue-list { margin-top: 8px; }
.upg-q-ph {
  background: rgba(255,255,255,.06);
  border-radius: 8px;
}
.upg-queue-list .qi-tools { display: flex; gap: 2px; flex: none; }
.upg-now-wrap { display: grid; gap: 10px; }
.upg-run-ctrl { margin: 0; }
.upg-now { display: grid; gap: 4px; margin-top: 6px; }
.upg-more { margin-top: 12px; }
.upg-more-sum {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  user-select: none;
}
.upg-more-sum::-webkit-details-marker { display: none; }
.upg-more-sum::before {
  content: "▸ ";
  color: var(--muted);
  font-weight: 400;
}
.upg-more[open] .upg-more-sum::before { content: "▾ "; }
.upg-now-main { font-weight: 600; }
.upg-now-main.warn, .upg-wait { color: var(--yellow); }
.upg-now-main.live, .upg-live { color: var(--ok); }
.upg-progress { margin: 6px 0 2px; }
.upg-progress-meta { margin: 4px 0 0; }
.ward-item .upg-progress { margin-top: 8px; }
.ward-item .upg-level-bar { margin: 6px 0; }
.upg-gear-scroll {
  max-height: min(64vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}
.upg-stats-panel { margin-bottom: 10px; }
.upg-level-bar.is-live { box-shadow: 0 0 0 1px rgba(80, 200, 120, .55); }
.upg-level-bar.is-max > i { background: linear-gradient(90deg, #c9a24a, #f0cf6e); }
.upg-cur-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.upg-cur-seg .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.upg-chance { font-size: 10px; opacity: .75; font-weight: 600; }
.upg-live-meta { color: var(--ok); margin-top: 4px; }
.upg-dot {
  display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%;
  background: var(--ok); vertical-align: middle; animation: upgPulse 1.2s ease-in-out infinite;
}
@keyframes upgPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.upg-log { display: grid; gap: 2px; max-height: 360px; overflow-y: auto; }
.upg-log-row { display: flex; gap: 8px; font-size: 13px; line-height: 1.35; padding: 3px 0; border-bottom: 1px solid var(--line); }
.upg-log-row:last-child { border-bottom: 0; }
.upg-log-time { flex: none; width: 42px; color: var(--muted); font-variant-numeric: tabular-nums; }
.upg-log-row.tone-ok .upg-log-text { color: var(--ok); }
.upg-log-row.tone-fail .upg-log-text { color: var(--muted); }
.upg-log-row.tone-warn .upg-log-text { color: var(--yellow); }

/* —— UI sections polish —— */
.home-state-block,
.home-stats-block,
.home-kills-block {
  margin-top: 10px;
}
.home-state-block .energy-chip {
  width: 100%;
  margin-top: 6px;
}
.home-stats-block .stat-rows {
  display: grid;
  gap: 8px;
}
.home-stats-sub {
  margin: 2px 0 0;
  line-height: 1.3;
}
.stat-day-row {
  grid-template-columns: 48px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
}
.stat-day-row .stat-face {
  width: 44px;
  height: 44px;
}
.stat-day-row .stat-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin: 0;
}
.stat-day-row.is-limit,
.stat-day-row:disabled {
  opacity: 0.72;
  cursor: default;
  pointer-events: none;
}
.stat-day-row.is-limit:hover,
.stat-day-row:disabled:hover,
.stat-day-row.is-limit:focus-visible,
.stat-day-row:disabled:focus-visible {
  background: transparent;
  border-color: transparent;
  transform: none;
}
.stat-day-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.stat-day-line .stat-now {
  font-size: 20px;
  font-weight: 800;
  color: #8ee6b5;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stat-real-line {
  margin-top: 3px;
  gap: 6px;
}
.stat-real-line .stat-real {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  opacity: 0.88;
  line-height: 1.15;
}
.stat-real-line .stat-delta {
  font-size: 13px;
}
.stat-delta {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.1;
}
.stat-delta.up { color: #8ee6b5; }
.stat-delta.down { color: #ff7b7b; }
.stat-delta.flat { color: var(--muted); font-weight: 600; }
.queue-head-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.queue-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.queue-head-top h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.queue-head-card .queue-meta {
  margin-bottom: 8px;
}
.queue-head-card .queue-actions {
  margin-top: 0;
}
.boss-pick-sticky {
  position: sticky;
  bottom: 0;
  z-index: 6;
}
.boss-card-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.boss-pick-mark {
  flex: none;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 650;
}
.boss-pick-mark.pick {
  color: var(--yellow);
  border-color: #5a4a22;
  background: rgba(232,184,74,.1);
}
.boss-pick-mark.queued {
  color: var(--ok);
  border-color: #2a4a3a;
  background: rgba(61,186,122,.08);
}
.boss-card.selected {
  border-color: rgba(232,184,74,.55);
  background: rgba(232,184,74,.08);
  color: var(--text);
}
.boss-card.selected .boss-tip {
  color: var(--text);
}
.boss-card.queued:not(.selected) {
  border-color: rgba(61,186,122,.45);
  background: rgba(61,186,122,.06);
}
.fight-invite-friends-btn {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  margin-bottom: 8px;
  justify-content: center;
}
.fight-invite-friends-btn[hidden] {
  display: none !important;
}
.fight-more {
  margin-top: 10px;
  border-top: 0;
  padding-top: 0;
}
.fight-more > summary,
.fight-more-btn {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(16, 17, 20, 0.72);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.fight-more > summary::after,
.fight-more-btn::after {
  content: "▾";
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  flex: none;
}
.fight-more[open] > summary::after,
.fight-more[open] .fight-more-btn::after {
  content: "▴";
}
.fight-more > summary::-webkit-details-marker { display: none; }
.fight-more[open] > summary {
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.04);
}
.fight-more .fight-items { margin-top: 6px; }
.fight-more .fight-items-title { display: none; }
.invite-actions {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.invite-more {
  position: relative;
  flex: none;
}
.invite-more-btn {
  min-width: 42px;
  list-style: none;
}
.invite-more-btn::-webkit-details-marker { display: none; }
.invite-more-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 8;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.wardrobe-bucket-row {
  margin: 8px 0;
}
.wardrobe-slot-chips {
  margin: 0 0 8px;
}
.collect-summary {
  background: linear-gradient(180deg, #1a171f, #121218);
  border: 1px solid rgba(232,184,74,.28);
  border-radius: 12px;
  padding: 12px;
  margin: 10px 0;
}
.collect-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.collect-summary-timer {
  margin-top: 8px;
}
.biz-floor-chips-grid {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  overflow: visible !important;
  flex-wrap: unset !important;
  white-space: normal !important;
}
.biz-floor-chips-grid .boss-floor-chip {
  flex: none;
  min-width: 0;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.biz-floor-chips-grid .boss-floor-chip.is-ready {
  box-shadow: inset 0 0 0 1px rgba(61,186,122,.35);
}
.clan-auto-block {
  margin-top: 10px;
}
.quest-now-label {
  margin-bottom: 4px;
}
#workEnergyPanel .work-energy-card + .work-energy-card {
  margin-top: 10px;
}
#workTempoBlock {
  margin-top: 10px;
}
.works-queue-panel .queue-head-card {
  margin-bottom: 10px;
  border: 0;
  background: transparent;
  padding: 0;
}

.admin-bridge-ready { margin-top: 10px; }
.admin-bridge-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.admin-bridge-list li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.admin-bridge-list li span:last-child { color: var(--muted); white-space: nowrap; }
.admin-bridge-list li.is-ok span:last-child { color: var(--ok); }
.admin-bridge-list li.is-off span:last-child { color: var(--danger); }

/* Вариант В: тихие чипы (по одному в ряд) + поиск */
.friend-pick {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 4px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
}
.friend-pick[hidden] { display: none !important; }
.friend-pick.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}
.friend-pick .field-label { margin: 0; }
.friend-pick-except {
  margin: 0 0 2px;
}
.friend-pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.friend-pick-clear {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  padding: 4px 8px;
}
.friend-pick-selected {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 168px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.friend-pick-selected:empty { display: none; }
.friend-pick-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  padding: 7px 10px 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
}
.friend-pick-chip-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.friend-pick-chip-x {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.friend-pick-chip.is-all {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 650;
  justify-content: center;
}
.friend-pick-search {
  width: 100%;
  appearance: none;
  background: #0c0d11;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  padding: 8px 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.friend-pick-search::placeholder {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  opacity: 1;
}
.friend-pick-add-all { align-self: stretch; }
.friend-pick-hits {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.friend-pick-hits[hidden] { display: none !important; }
.friend-pick-hit {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #0c0d11;
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.friend-pick-hit:hover,
.friend-pick-hit:focus-visible {
  background: rgba(255, 255, 255, 0.04);
}
.friend-pick-hit.is-on {
  opacity: 0.55;
  cursor: default;
}
.friend-pick-hit-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.friend-pick-hit-act {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 650;
}
.friend-pick-hit:not(.is-on) .friend-pick-hit-act { color: var(--yellow); }
.friend-pick-empty {
  padding: 10px 8px;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
}
