:root {
  --bg: #08111f;
  --panel: rgba(15, 23, 42, 0.88);
  --panel-strong: #0f172a;
  --panel-soft: #111c31;
  --line: rgba(148, 163, 184, 0.18);
  --text: #e5eefc;
  --muted: #93a4bf;
  --primary: #60a5fa;
  --primary-strong: #2563eb;
  --accent: #14b8a6;
  --danger: #ef4444;
  --success: #22c55e;
  --warning: #f59e0b;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 24px 60px rgba(2, 6, 23, 0.45);
  --shell-gap: 22px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.22), transparent 28%),
    radial-gradient(circle at top right, rgba(20, 184, 166, 0.18), transparent 22%),
    linear-gradient(180deg, #06101c 0%, #09131f 100%);
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

.auth-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth-wrap { width: 100%; max-width: 520px; }
.auth-card {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border-radius: 30px;
  background: rgba(8, 18, 32, 0.9);
  border: 1px solid rgba(96, 165, 250, 0.18);
  box-shadow: var(--shadow);
}
.auth-card__glow {
  position: absolute;
  inset: -30% auto auto -10%;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.26), transparent 66%);
  pointer-events: none;
}
.auth-brand, .brand { display: flex; align-items: center; gap: 14px; }
.brand__mark {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white; font-weight: 800; font-size: 24px;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.35);
}
.brand__name { font-size: 22px; font-weight: 800; letter-spacing: 0.02em; }
.brand__sub { color: var(--muted); font-size: 13px; }
.auth-title { margin-top: 28px; font-size: 30px; line-height: 1.1; }
.auth-text { margin-top: 12px; color: var(--muted); line-height: 1.55; }

.shell {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: var(--shell-gap);
  padding: 22px;
  min-height: 100vh;
}
.sidebar {
  position: sticky;
  top: 22px;
  height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  background: rgba(9, 18, 32, 0.92);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.nav { display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.nav__link {
  padding: 13px 15px;
  color: #d8e4f8;
  border-radius: 16px;
  transition: 0.18s ease;
  border: 1px solid transparent;
}
.nav__link:hover, .nav__link.is-active {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.2);
}
.sidebar__footer { margin-top: auto; display: grid; gap: 12px; }
.content { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: rgba(8, 18, 32, 0.78);
  box-shadow: var(--shadow);
}
.topbar__title { font-size: 28px; font-weight: 800; }
.topbar__subtitle { margin-top: 4px; color: var(--muted); font-size: 14px; }
.topbar__profile { text-align: right; }
.topbar__name { font-weight: 700; }
.topbar__meta { color: var(--muted); font-size: 13px; }
.hamburger {
  display: none;
  background: rgba(96, 165, 250, 0.12);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
}

.cards-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split-grid { display: grid; gap: 16px; grid-template-columns: 1.1fr 0.9fr; }
.panel, .stat-card, .mini-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.panel { padding: 22px; }
.stat-card { padding: 18px 20px; }
.stat-card__label { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.stat-card__value { margin-top: 10px; font-size: 34px; font-weight: 800; line-height: 1; }
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.panel__head h2 { font-size: 20px; font-weight: 750; }
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: #dbeafe;
  background: rgba(37, 99, 235, 0.16);
  border: 1px solid rgba(96, 165, 250, 0.18);
}
.badge--muted {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
}
.muted { color: var(--muted); line-height: 1.6; }
.quick-links, .toolbar { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--line);
}
.stack-list { display: grid; gap: 12px; }
.stack-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid var(--line);
}
.stack-item--block { display: block; }
.stack-item__title { font-weight: 700; }
.stack-item__meta { color: var(--muted); margin-top: 4px; line-height: 1.5; }
.stack-item__side { color: #cbd5e1; font-size: 13px; text-align: right; white-space: nowrap; }
.empty, .empty-cell { color: var(--muted); text-align: center; padding: 12px; }
.empty-cell { padding: 20px; }

.grid-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-form--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-span-3 { grid-column: 1 / -1; }
label { display: grid; gap: 8px; font-size: 14px; color: #dce7fa; }
label span { color: var(--muted); font-size: 13px; }
input, textarea, select {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(7, 14, 26, 0.88);
  color: var(--text);
  border-radius: 16px;
  padding: 12px 14px;
  outline: none;
}
textarea { min-height: 112px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  border-color: rgba(96, 165, 250, 0.42);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.12);
}
.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: end;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(7, 14, 26, 0.5);
  border: 1px solid var(--line);
}
.checkbox input { width: 18px; height: 18px; }
.form-actions { display: flex; align-items: flex-end; gap: 10px; }
.btn {
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.18s ease;
}
.btn--block { width: 100%; }
.btn--primary {
  background: linear-gradient(135deg, var(--primary-strong), var(--primary));
  color: white;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.28);
}
.btn--primary:hover { transform: translateY(-1px); }
.btn--ghost {
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  border-color: var(--line);
}
.alert {
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid transparent;
}
.alert--error {
  color: #fee2e2;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.24);
}
.table-wrap {
  overflow: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
  background: rgba(9, 18, 32, 0.54);
}
.data-table th, .data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.data-table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: rgba(15, 23, 42, 0.86);
}
.link-more {
  color: #bfdbfe;
  font-weight: 600;
}
.meta-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.meta-box {
  padding: 16px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.58);
  border: 1px solid var(--line);
}
.meta-box span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}
.mini-card {
  padding: 14px 16px;
}
.mini-card__label { color: var(--muted); font-size: 12px; }
.mini-card__value { margin-top: 6px; font-weight: 700; }
.card-link { display: block; }
.color-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.06);
}
.log-box {
  margin-top: 12px;
  overflow: auto;
  white-space: pre-wrap;
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid var(--line);
  padding: 14px;
  border-radius: 16px;
  color: #dbeafe;
}
@media (max-width: 1200px) {
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-grid, .meta-grid, .grid-form--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
    padding: 14px;
  }
  .sidebar {
    position: fixed;
    left: 14px;
    top: 14px;
    bottom: 14px;
    width: min(86vw, 320px);
    transform: translateX(-120%);
    z-index: 20;
    transition: transform .22s ease;
    height: auto;
  }
  .sidebar.is-open { transform: translateX(0); }
  .hamburger { display: inline-flex; }
  .cards-grid, .cards-grid--three, .split-grid, .meta-grid, .grid-form, .grid-form--three { grid-template-columns: 1fr; }
  .topbar { padding: 16px; }
  .topbar__title { font-size: 24px; }
  .topbar__profile { display: none; }
}


.nav__link { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.nav__badges { display:flex; align-items:center; gap:8px; }
.nav-badge {
  min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px;
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
  color:#7c2d12; background: rgba(250, 204, 21, 0.88); box-shadow: 0 0 0 8px rgba(250, 204, 21, 0.14);
}
.nav-badge--warn { color:#9a3412; background: rgba(251, 191, 36, 0.95); }
.panel__head--stack { align-items:flex-start; }
.subtabs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.subtab { padding:10px 14px; border-radius:999px; background:rgba(15,23,42,.7); border:1px solid var(--line); }
.subtab.is-active { background: rgba(96,165,250,.14); border-color: rgba(96,165,250,.24); }
.filters-bar { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)) auto auto; gap:10px; margin-bottom:16px; }
.data-table--tasks { min-width: 1220px; }
.task-title { font-weight:700; }
.task-sub { margin-top:4px; font-size:12px; }
.task-actions { display:grid; gap:8px; min-width:220px; }
.inline-status-form { display:grid; grid-template-columns: 1fr 1fr auto; gap:8px; }
.btn--sm { padding:10px 12px; }
.comment-cell { max-width:240px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-overdue td { background: rgba(245, 158, 11, 0.06); }
.badge--done { color:#14532d; background: rgba(34,197,94,.16); border-color: rgba(34,197,94,.26); }
.badge--issue { color:#7f1d1d; background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.24); }
.badge--frozen { color:#1d4ed8; background: rgba(96,165,250,.18); border-color: rgba(96,165,250,.28); }
.badge--progress { color:#dbeafe; background: rgba(59,130,246,.14); border-color: rgba(96,165,250,.20); }
.badge--planned { color:#cbd5e1; background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.22); }
.badge--normal { color:#e2e8f0; background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.22); }
.badge--important { color:#854d0e; background: rgba(250,204,21,.16); border-color: rgba(250,204,21,.24); }
.badge--urgent { color:#9a3412; background: rgba(251,146,60,.18); border-color: rgba(251,146,60,.28); }
.badge--critical { color:#7f1d1d; background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.28); }
.badge--warn { color:#9a3412; background: rgba(251,191,36,.20); border-color: rgba(251,191,36,.28); }
@media (max-width: 1100px) {
  .filters-bar { grid-template-columns: 1fr 1fr; }
  .inline-status-form { grid-template-columns: 1fr; }
}

html[data-theme="light"] { --bg:#f4f7fb; --panel:rgba(255,255,255,.92); --panel-strong:#fff; --panel-soft:#eef3fb; --line:rgba(15,23,42,.12); --text:#0f172a; --muted:#64748b; --primary:#2563eb; --primary-strong:#1d4ed8; --accent:#0f766e; }
html[data-theme="light"] body { background: linear-gradient(180deg,#eef4ff 0%,#f8fafc 100%); }
html[data-theme="neon"] { --primary:#7c3aed; --primary-strong:#4f46e5; --accent:#22d3ee; }
body, .sidebar, .topbar, .panel, .stat-card, .mini-card { transition: background .2s ease, border-color .2s ease, color .2s ease; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background: rgba(15,23,42,.35); border-radius:999px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(96,165,250,.65), rgba(20,184,166,.55)); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
.brand__mark--animated { animation: azroxPulse 8s ease-in-out infinite; }
@keyframes azroxPulse { 0%,100%{ transform:translateY(0); box-shadow:0 12px 30px rgba(37,99,235,.35);} 50%{ transform:translateY(-2px); box-shadow:0 16px 38px rgba(20,184,166,.28);} }
.topbar__right { display:flex; align-items:center; gap:12px; position:relative; }
.theme-toggle { width:42px; height:42px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text); cursor:pointer; font-size:18px; }
.theme-menu { position:absolute; top:50px; right:0; display:grid; gap:6px; padding:10px; border-radius:16px; border:1px solid var(--line); background:var(--panel-strong); box-shadow:var(--shadow); z-index:40; }

.theme-menu[hidden] { display:none !important; }
.theme-menu:not([hidden]) { display:grid; }

.theme-menu button { border:none; background:rgba(255,255,255,.03); color:var(--text); padding:10px 12px; border-radius:12px; cursor:pointer; text-align:left; }
.task-mini-nav { display:grid; gap:6px; margin:4px 0 8px 8px; }
.task-mini-link { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); padding:6px 10px; border-radius:12px; }
.task-mini-link:hover { background: rgba(255,255,255,.03); color:var(--text); }
.mini-num { min-width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-size:12px; font-weight:800; color:#6b7280; background:rgba(148,163,184,.12); }
.mini-num.has-value { color:#9a3412; background:rgba(250,204,21,.88); box-shadow:0 0 0 8px rgba(250,204,21,.10); }
.mini-num--warn.has-value { color:#9a3412; background:rgba(251,191,36,.95); }
.mini-num--danger.has-value { color:#7f1d1d; background:rgba(248,113,113,.95); box-shadow:0 0 0 8px rgba(248,113,113,.10); }
.row-actions { display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.btn-delete { width:30px; height:30px; border-radius:999px; border:1px solid rgba(239,68,68,.24); background:rgba(239,68,68,.14); color:#fecaca; cursor:pointer; font-weight:800; }
.filters-bar--users { grid-template-columns: 1.3fr 1fr 1fr auto auto; }
.compact-table th, .compact-table td { padding:10px 12px; }
.inline-status-form--compact { grid-template-columns: minmax(120px,1fr) minmax(120px,1fr) auto; align-items:center; }
.inline-status-form--compact input, .inline-status-form--compact select { padding:9px 10px; border-radius:12px; }
.comment-cell { max-width:180px; }
@media (max-width:1100px){ .filters-bar--users{grid-template-columns:1fr 1fr;} .theme-menu{right:14px;} }


.panel--narrow { max-width: 1040px; }
.nav-badge--danger { color:#7f1d1d; background: rgba(248,113,113,.95); box-shadow: 0 0 0 8px rgba(248,113,113,.14); }
.subtab { display:inline-flex; align-items:center; gap:8px; }
.task-title-link { color: #dbeafe; font-weight: 700; }
.task-title-link:hover { color: #ffffff; }
.task-sub { margin-top:6px; font-size:12px; color: var(--muted); display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.stars-inline { letter-spacing: 1px; color: #facc15; font-weight: 700; white-space: nowrap; }
.badge--self { color:#fce7f3; background: rgba(236,72,153,.18); border-color: rgba(244,114,182,.32); }
.badge--done { color:#dcfce7; background: rgba(34,197,94,.28); border-color: rgba(74,222,128,.44); }
.badge--issue { color:#fee2e2; background: rgba(239,68,68,.28); border-color: rgba(248,113,113,.46); }
.badge--frozen { color:#dbeafe; background: rgba(59,130,246,.28); border-color: rgba(96,165,250,.46); }
.badge--progress { color:#eff6ff; background: rgba(59,130,246,.32); border-color: rgba(147,197,253,.46); }
.badge--planned { color:#e2e8f0; background: rgba(100,116,139,.28); border-color: rgba(148,163,184,.42); }
.badge--normal { color:#e2e8f0; background: rgba(100,116,139,.24); border-color: rgba(148,163,184,.38); }
.badge--important { color:#fef3c7; background: rgba(245,158,11,.26); border-color: rgba(251,191,36,.40); }
.badge--urgent { color:#ffedd5; background: rgba(249,115,22,.28); border-color: rgba(251,146,60,.42); }
.badge--critical { color:#fee2e2; background: rgba(239,68,68,.32); border-color: rgba(248,113,113,.50); }
.badge--warn { color:#fef3c7; background: rgba(245,158,11,.26); border-color: rgba(251,191,36,.40); }
.input-datetime::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.2); opacity: .95; cursor: pointer; }
html[data-theme="light"] .input-datetime::-webkit-calendar-picker-indicator { filter: invert(0); }
.notice-row { display:grid; grid-template-columns: 110px minmax(0,1fr) 150px auto; gap:12px; padding:14px 16px; border-radius:18px; background: rgba(15, 23, 42, 0.55); border: 1px solid var(--line); align-items:center; }
.notice-row.is-unread { border-color: rgba(96,165,250,.32); box-shadow: 0 0 0 1px rgba(96,165,250,.12) inset; }
.notice-row__type { font-size:12px; color: var(--muted); }
.notice-row__title { font-weight:700; margin-bottom:4px; }
.notice-row__body { color: var(--muted); line-height:1.45; }
.notice-row__side { display:grid; gap:6px; justify-items:end; }
.notice-row__time { color: var(--muted); font-size:12px; }
.notice-row__actions { display:flex; align-items:center; gap:8px; justify-content:flex-end; }
@media (max-width: 900px) {
  .notice-row { grid-template-columns: 1fr; }
  .notice-row__side, .notice-row__actions { justify-items:start; justify-content:flex-start; }
}


/* ===== Visual hotfix v1 ===== */
.nav__sub {
  display: grid;
  gap: 6px;
  margin: 4px 0 10px 12px;
}
.nav__sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  min-height: 34px;
  border-radius: 12px;
  color: var(--muted);
  line-height: 1.1;
  white-space: nowrap;
}
.nav__sublink:hover {
  color: var(--text);
  background: rgba(255,255,255,.03);
}
.nav__sub .nav-badge {
  flex: 0 0 auto;
  margin-left: 8px;
}

.nav-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.subtab .nav-badge {
  margin-left: 2px;
  box-shadow: 0 0 0 6px rgba(250, 204, 21, 0.10);
}

.badge {
  white-space: nowrap;
  line-height: 1;
  font-weight: 700;
  padding: 8px 14px;
}
.badge--self {
  color: #f9a8d4;
  background: rgba(190, 24, 93, 0.22);
  border-color: rgba(244, 114, 182, 0.34);
}
.badge--done {
  color: #4ade80;
  background: rgba(20, 83, 45, 0.40);
  border-color: rgba(74, 222, 128, 0.36);
}
.badge--issue {
  color: #f87171;
  background: rgba(127, 29, 29, 0.34);
  border-color: rgba(248, 113, 113, 0.40);
}
.badge--frozen {
  color: #60a5fa;
  background: rgba(30, 64, 175, 0.30);
  border-color: rgba(96, 165, 250, 0.38);
}
.badge--progress {
  color: #93c5fd;
  background: rgba(30, 64, 175, 0.26);
  border-color: rgba(147, 197, 253, 0.34);
}
.badge--planned {
  color: #cbd5e1;
  background: rgba(51, 65, 85, 0.38);
  border-color: rgba(148, 163, 184, 0.30);
}
.badge--normal {
  color: #dbeafe;
  background: rgba(71, 85, 105, 0.34);
  border-color: rgba(148, 163, 184, 0.30);
}
.badge--important {
  color: #facc15;
  background: rgba(133, 77, 14, 0.34);
  border-color: rgba(251, 191, 36, 0.34);
}
.badge--urgent {
  color: #fb923c;
  background: rgba(124, 45, 18, 0.34);
  border-color: rgba(251, 146, 60, 0.34);
}
.badge--critical {
  color: #fca5a5;
  background: rgba(127, 29, 29, 0.42);
  border-color: rgba(248, 113, 113, 0.44);
}
.badge--warn {
  color: #fbbf24;
  background: rgba(120, 53, 15, 0.32);
  border-color: rgba(251, 191, 36, 0.32);
}

.data-table--tasks th,
.data-table--tasks td {
  padding: 12px 12px;
  vertical-align: middle;
}
.data-table--tasks .task-sub {
  margin-top: 4px;
  gap: 5px;
}
.data-table--tasks .task-title-link {
  font-size: 15px;
}
.comment-cell {
  max-width: 160px;
}
.inline-status-form--compact {
  grid-template-columns: minmax(112px, 1fr) minmax(108px, 1fr) auto;
  gap: 6px;
}
.inline-status-form--compact input,
.inline-status-form--compact select {
  padding: 8px 10px;
  min-height: 36px;
}
.btn--sm {
  padding: 8px 11px;
  min-height: 36px;
  border-radius: 12px;
}

.theme-switcher {
  position: relative;
}
.theme-switcher__btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.theme-switcher__btn:hover {
  border-color: rgba(96, 165, 250, 0.28);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.22);
}
.theme-switcher__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 170px;
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(11, 20, 36, 0.96);
  box-shadow: var(--shadow);
  z-index: 50;
}
.theme-switcher__menu[hidden] {
  display: none !important;
}
.theme-switcher__menu button {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
}
.theme-switcher__menu button:hover {
  background: rgba(96,165,250,.12);
  border-color: rgba(96,165,250,.26);
}

.panel--narrow {
  max-width: 980px;
}
.notice-row {
  grid-template-columns: 92px minmax(0, 1fr) 138px auto;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(11, 20, 36, 0.72);
}
.notice-row__type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(96, 165, 250, 0.22);
  color: #bfdbfe;
  font-size: 12px;
}
.notice-row__title {
  font-size: 15px;
}
.notice-row__body {
  font-size: 14px;
}
.notice-row__side .badge {
  min-width: 108px;
}

html[data-theme="light"] {
  --bg: #f3f7fd;
  --panel: rgba(255,255,255,.96);
  --panel-strong: #ffffff;
  --panel-soft: #eef3fb;
  --line: rgba(15,23,42,.10);
  --text: #0f172a;
  --muted: #5b6b82;
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --accent: #0f766e;
  --shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] body {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 26%),
    radial-gradient(circle at top right, rgba(20, 184, 166, 0.08), transparent 22%),
    linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
}
html[data-theme="light"] .sidebar,
html[data-theme="light"] .topbar,
html[data-theme="light"] .panel,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .mini-card,
html[data-theme="light"] .notice-row,
html[data-theme="light"] .table-wrap,
html[data-theme="light"] .data-table {
  background: rgba(255,255,255,.96);
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] .data-table thead th {
  background: #f4f7fb;
}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(15,23,42,.12);
}
html[data-theme="light"] .nav__link:hover,
html[data-theme="light"] .nav__link.is-active,
html[data-theme="light"] .subtab.is-active {
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.18);
}
html[data-theme="light"] .theme-switcher__btn {
  background: #ffffff;
  color: #0f172a;
}
html[data-theme="light"] .theme-switcher__menu {
  background: #ffffff;
}
html[data-theme="light"] .theme-switcher__menu button {
  background: #f8fbff;
  color: #0f172a;
}
html[data-theme="light"] .notice-row__type {
  background: rgba(37, 99, 235, 0.10);
  color: #1d4ed8;
}
html[data-theme="light"] .task-title-link {
  color: #0f172a;
}
html[data-theme="light"] .task-title-link:hover {
  color: #1d4ed8;
}
html[data-theme="light"] .badge--done {
  color: #166534;
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.22);
}
html[data-theme="light"] .badge--issue {
  color: #b91c1c;
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.18);
}
html[data-theme="light"] .badge--frozen,
html[data-theme="light"] .badge--progress {
  color: #1d4ed8;
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.18);
}
html[data-theme="light"] .badge--self {
  color: #be185d;
  background: rgba(236,72,153,.10);
  border-color: rgba(236,72,153,.18);
}
html[data-theme="light"] .badge--normal,
html[data-theme="light"] .badge--planned {
  color: #334155;
  background: rgba(148,163,184,.12);
  border-color: rgba(148,163,184,.20);
}
html[data-theme="light"] .badge--urgent,
html[data-theme="light"] .badge--warn {
  color: #c2410c;
  background: rgba(249,115,22,.10);
  border-color: rgba(249,115,22,.18);
}
html[data-theme="light"] .badge--critical {
  color: #991b1b;
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.20);
}

@media (max-width: 900px) {
  .nav__sub {
    margin-left: 8px;
  }
  .notice-row {
    grid-template-columns: 1fr;
  }
}
/* Azrox safe calendar pack v1 */
.cal-panel { overflow: hidden; }
.cal-toolbar { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.cal-toolbar__main, .cal-toolbar__side { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.cal-title { margin:0; }
.cal-subtitle { color: var(--muted, #8b92a8); font-size: 13px; margin-top: 4px; }
.cal-nav { display:flex; gap:8px; }
.cal-view-switch { display:inline-flex; padding:4px; border-radius:16px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.cal-view-switch__item { padding:8px 12px; border-radius:12px; color: inherit; text-decoration:none; font-weight:600; }
.cal-view-switch__item.is-active { background: rgba(99,102,241,.22); box-shadow: inset 0 0 0 1px rgba(129,140,248,.35); }
.cal-tz-picker label { display:flex; flex-direction:column; gap:6px; min-width:240px; }
.cal-tz-picker span { font-size:12px; color: var(--muted, #8b92a8); }
.cal-month { display:flex; flex-direction:column; gap:10px; }
.cal-weekdays { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; font-size:12px; color:var(--muted,#8b92a8); text-transform:uppercase; }
.cal-month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; }
.cal-day, .cal-column, .cal-row { border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); border-radius:18px; }
.cal-day { min-height:150px; padding:10px; display:flex; flex-direction:column; gap:8px; }
.cal-day.is-today, .cal-column.is-today { box-shadow: inset 0 0 0 1px rgba(99,102,241,.42); }
.cal-day.is-muted { opacity:.65; }
.cal-day__head, .cal-column__head { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted,#8b92a8); }
.cal-day__events, .cal-column__body { display:flex; flex-direction:column; gap:8px; }
.cal-chip { border-radius:12px; padding:8px 10px; color:#fff; display:flex; flex-direction:column; gap:4px; min-height:54px; }
.cal-chip__time { font-size:11px; opacity:.85; }
.cal-chip__title { font-size:12px; font-weight:700; line-height:1.2; }
.cal-more, .cal-empty { font-size:12px; color:var(--muted,#8b92a8); padding:8px 2px; }
.cal-columns { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; }
.cal-columns--day { grid-template-columns:minmax(0,1fr); }
.cal-column { padding:10px; min-height:220px; }
.cal-card { border-radius:14px; padding:12px; color:#fff; display:flex; flex-direction:column; gap:8px; }
.cal-card__top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.cal-card__title { font-weight:700; line-height:1.2; }
.cal-card__type, .cal-card__range, .cal-card__desc { font-size:12px; opacity:.92; }
.cal-card__meta { display:flex; flex-wrap:wrap; gap:6px; }
.cal-meta-pill { display:inline-flex; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.18); font-size:11px; }
.cal-meta-pill--soft { background:rgba(255,255,255,.10); }
.cal-form .checkbox-inline { display:flex; align-items:center; gap:8px; font-weight:500; }
.cal-events-list { display:flex; flex-direction:column; gap:12px; }
.cal-row { padding:14px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; }
.cal-row__title { font-weight:700; margin-bottom:4px; }
.cal-row__range, .cal-row__desc, .cal-row__meta { font-size:12px; color:var(--muted,#8b92a8); }
.cal-row__edit { grid-column:1 / -1; border-top:1px dashed rgba(255,255,255,.10); padding-top:10px; }
.cal-row__edit summary { cursor:pointer; font-weight:600; margin-bottom:10px; }
.cal-inline-form { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:10px; }
.cal-inline-form label span { display:block; margin-bottom:6px; font-size:12px; color:var(--muted,#8b92a8); }
.cal-badge--work { background:linear-gradient(135deg,#2563eb,#1d4ed8); }
.cal-badge--meeting { background:linear-gradient(135deg,#7c3aed,#6d28d9); }
.cal-badge--deadline { background:linear-gradient(135deg,#dc2626,#b91c1c); }
.cal-badge--personal { background:linear-gradient(135deg,#db2777,#be185d); }
.cal-badge--other { background:linear-gradient(135deg,#0f766e,#0d9488); }
@media (max-width: 1100px) {
  .cal-month-grid, .cal-weekdays, .cal-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .cal-month-grid, .cal-weekdays, .cal-columns, .cal-inline-form { grid-template-columns:minmax(0,1fr); }
  .cal-row { grid-template-columns:minmax(0,1fr); }
}

/* === azrox_pack_04_tasks_notifications_polish === */
.notice-counters {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.notice-filter {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}
.panel--notifications {
  max-width: 980px;
}
.notice-list {
  gap: 10px;
}
.notice-row {
  grid-template-columns: 96px minmax(0, 1fr) 132px auto;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(11, 20, 36, 0.72);
}
.notice-row.is-read {
  opacity: 0.92;
}
.notice-row__titleline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.notice-row__time--mobile {
  display: none;
}
.notice-row__type {
  min-height: 32px;
  padding: 6px 10px;
}
.notice-row__type--task {
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(96, 165, 250, 0.22);
  color: #bfdbfe;
}
.notice-row__type--system {
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.20);
  color: #cbd5e1;
}
.notice-row__type--calendar {
  background: rgba(20, 184, 166, 0.14);
  border: 1px solid rgba(45, 212, 191, 0.20);
  color: #99f6e4;
}
.notice-row__type--delivery,
.notice-row__type--flow {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.20);
  color: #fde68a;
}
.notice-row__side {
  min-width: 0;
}
.notice-row__side .badge {
  min-width: 110px;
}
.inline-status-form--compact {
  align-items: center;
}
.inline-status-form--compact input,
.inline-status-form--compact select {
  min-width: 0;
}
.comment-cell {
  max-width: 180px;
}
@media (max-width: 980px) {
  .notice-row {
    grid-template-columns: 1fr;
  }
  .notice-row__titleline {
    display: block;
  }
  .notice-row__time--mobile {
    display: block;
    margin-top: 4px;
  }
  .notice-row__side {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
  }
  .notice-row__time {
    display: none;
  }
  .notice-row__actions {
    justify-content: flex-start;
  }
}
html[data-theme="light"] .notice-row__type--task {
  background: rgba(37, 99, 235, 0.10);
  color: #1d4ed8;
}
html[data-theme="light"] .notice-row__type--system {
  background: rgba(148, 163, 184, 0.10);
  color: #475569;
}
html[data-theme="light"] .notice-row__type--calendar {
  background: rgba(20, 184, 166, 0.10);
  color: #0f766e;
}
html[data-theme="light"] .notice-row__type--delivery,
html[data-theme="light"] .notice-row__type--flow {
  background: rgba(245, 158, 11, 0.10);
  color: #a16207;
}

/* === azrox_pack_05_calendar_phase_a === */
.cal-panel--hero {
  overflow: visible;
}
.cal-title-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cal-day__head a,
.cal-mini-month__head a {
  color: inherit;
  text-decoration: none;
}
.cal-day__head-right,
.cal-column__head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cal-day-add {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.26);
  background: rgba(37, 99, 235, 0.12);
  color: #bfdbfe;
  text-decoration: none;
  font-weight: 700;
}
.cal-day-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(250, 204, 21, 0.26);
  background: rgba(234, 179, 8, 0.14);
  color: #fde68a;
}
.cal-day-pill--birthday {
  border-color: rgba(244, 114, 182, 0.26);
  background: rgba(244, 114, 182, 0.14);
  color: #fbcfe8;
}
.cal-badge--birthday,
.cal-card.cal-badge--birthday,
.cal-row.cal-badge--birthday,
.cal-chip.cal-badge--birthday {
  background: linear-gradient(180deg, rgba(131,24,67,0.45), rgba(76,5,25,0.45));
  border-color: rgba(244, 114, 182, 0.24);
}
.cal-year-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.cal-mini-month {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  padding: 12px;
  background: rgba(8, 15, 29, 0.56);
}
.cal-mini-month__head {
  font-weight: 700;
  margin-bottom: 10px;
}
.cal-mini-month__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.cal-mini-day {
  min-height: 34px;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.6);
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cal-mini-day.is-today {
  outline: 2px solid rgba(96,165,250,0.45);
}
.cal-mini-mark {
  font-size: 10px;
  line-height: 1;
  opacity: 0.9;
}
.cal-mini-mark--birthday {
  color: #f9a8d4;
  font-weight: 700;
}
.cal-month-grid .cal-day {
  min-height: 164px;
}
.cal-day__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cal-column__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
@media (max-width: 1180px) {
  .cal-year-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .cal-year-grid {
    grid-template-columns: 1fr;
  }
}
html[data-theme="light"] .cal-day-add {
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
}
html[data-theme="light"] .cal-mini-month {
  background: rgba(255, 255, 255, 0.82);
}
html[data-theme="light"] .cal-mini-day {
  background: rgba(248, 250, 252, 0.95);
}

/* === azrox_pack_06_calendar_phase_b === */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.cal-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  font-size: 12px;
  font-weight: 600;
}
.cal-legend__code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.58);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.cal-month-grid--compact .cal-day {
  min-height: 108px;
}
.cal-day--compact .cal-day__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.cal-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: rgba(15, 23, 42, 0.62);
}
.cal-mark--more {
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
}
.cal-mark--inline {
  min-width: 40px;
}
.cal-badge--work.cal-mark,
.cal-badge--work.cal-mini-pill,
.cal-badge--work.cal-legend__item {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(96, 165, 250, 0.25);
  color: #bfdbfe;
}
.cal-badge--meeting.cal-mark,
.cal-badge--meeting.cal-mini-pill,
.cal-badge--meeting.cal-legend__item {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(52, 211, 153, 0.24);
  color: #a7f3d0;
}
.cal-badge--deadline.cal-mark,
.cal-badge--deadline.cal-mini-pill,
.cal-badge--deadline.cal-legend__item {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(251, 191, 36, 0.24);
  color: #fde68a;
}
.cal-badge--personal.cal-mark,
.cal-badge--personal.cal-mini-pill,
.cal-badge--personal.cal-legend__item {
  background: rgba(168, 85, 247, 0.14);
  border-color: rgba(192, 132, 252, 0.24);
  color: #e9d5ff;
}
.cal-badge--other.cal-mark,
.cal-badge--other.cal-mini-pill,
.cal-badge--other.cal-legend__item {
  background: rgba(148, 163, 184, 0.14);
  border-color: rgba(148, 163, 184, 0.20);
  color: #cbd5e1;
}
.cal-badge--birthday.cal-mark,
.cal-badge--birthday.cal-mini-pill,
.cal-badge--birthday.cal-legend__item {
  background: rgba(244, 114, 182, 0.14);
  border-color: rgba(244, 114, 182, 0.24);
  color: #fbcfe8;
}
.cal-mini-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-start;
}
.cal-mini-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.cal-mini-more {
  font-size: 9px;
  opacity: 0.9;
}
.cal-row__titleline {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.cal-mini-month__head a {
  font-size: 15px;
  letter-spacing: 0.02em;
}
html[data-theme="light"] .cal-mark--more,
html[data-theme="light"] .cal-mini-more {
  color: #475569;
}

/* === azrox_pack_07_department_flow_phase_a === */
.flow-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.flow-card {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 22px;
  background: rgba(8, 15, 29, 0.58);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.flow-card--danger {
  border-color: rgba(244, 63, 94, 0.22);
  box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.06);
}
.flow-card--muted {
  opacity: 0.86;
}
.flow-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.flow-card__title a {
  color: inherit;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
}
.flow-card__sub {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: rgba(203, 213, 225, 0.82);
  font-size: 13px;
}
.flow-card__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.flow-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.flow-card__grid > div {
  display: grid;
  gap: 4px;
}
.flow-card__grid span {
  font-size: 12px;
  color: rgba(148, 163, 184, 0.92);
}
.flow-card__grid strong {
  font-size: 14px;
  color: rgba(248, 250, 252, 0.96);
}
.flow-card__comment {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.54);
  border: 1px solid rgba(148, 163, 184, 0.14);
  color: rgba(226, 232, 240, 0.92);
  white-space: pre-wrap;
}
.flow-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.flow-panel .subtabs {
  margin-bottom: 12px;
}
@media (max-width: 1040px) {
  .flow-cards {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .flow-card__head,
  .flow-card__grid {
    grid-template-columns: 1fr;
    display: grid;
  }
  .flow-card__badges {
    justify-content: flex-start;
  }
}
html[data-theme="light"] .flow-card {
  background: rgba(255, 255, 255, 0.84);
}
html[data-theme="light"] .flow-card__sub {
  color: rgba(71, 85, 105, 0.88);
}
html[data-theme="light"] .flow-card__comment {
  background: rgba(248, 250, 252, 0.92);
  color: rgba(30, 41, 59, 0.92);
}

/* === azrox_pack_08_department_flow_phase_b === */
.filters-bar--wide {
  grid-template-columns: minmax(240px, 1.5fr) repeat(2, minmax(180px, 1fr)) auto;
}
.flow-card__timeline {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.38);
}
.flow-card__timeline-label {
  font-size: 12px;
  color: rgba(148, 163, 184, 0.88);
}
.flow-card__timeline-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.flow-card__timeline-main span {
  color: rgba(148, 163, 184, 0.88);
  font-size: 12px;
}
.flow-card__timeline-comment {
  color: rgba(226, 232, 240, 0.9);
  white-space: pre-wrap;
}
.flow-quickbox {
  width: 100%;
}
.flow-quickbox summary {
  list-style: none;
  cursor: pointer;
}
.flow-quickbox summary::-webkit-details-marker {
  display: none;
}
.flow-quick-form {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(160px, 1fr) minmax(180px, 1.4fr) auto;
  gap: 8px;
  margin-top: 10px;
}
.flow-timeline {
  display: grid;
  gap: 12px;
}
.flow-timeline__item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
}
.flow-timeline__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  margin-top: 6px;
  background: rgba(59, 130, 246, 0.82);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}
.flow-timeline__dot.is-danger {
  background: rgba(244, 63, 94, 0.9);
  box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.14);
}
.flow-timeline__dot.is-muted {
  background: rgba(148, 163, 184, 0.82);
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.14);
}
.flow-timeline__body {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.42);
  padding: 12px 14px;
}
.flow-timeline__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.flow-timeline__top span {
  font-size: 12px;
  color: rgba(148, 163, 184, 0.88);
}
.flow-timeline__comment {
  margin-top: 6px;
  color: rgba(226, 232, 240, 0.9);
  white-space: pre-wrap;
}
@media (max-width: 980px) {
  .filters-bar--wide,
  .flow-quick-form {
    grid-template-columns: 1fr;
  }
  .flow-card__timeline-main,
  .flow-timeline__top {
    display: grid;
  }
}
html[data-theme="light"] .flow-card__timeline,
html[data-theme="light"] .flow-timeline__body {
  background: rgba(248, 250, 252, 0.92);
}

/* === azrox_pack_09_department_chat_phase_a === */
.dept-chat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.8fr);
  gap: 16px;
}
.dept-chat-panel .panel--inner {
  background: rgba(8, 15, 29, 0.42);
}
.dept-chat-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.dept-chat-department {
  font-size: 18px;
  font-weight: 700;
}
.dept-chat-stream {
  min-height: 360px;
  max-height: 62vh;
  overflow: auto;
  display: grid;
  gap: 10px;
  padding: 6px 2px 6px 0;
}
.dept-msg {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(8, 15, 29, 0.58);
}
.dept-msg.is-mine {
  border-color: rgba(59, 130, 246, 0.28);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.08);
}
.dept-msg__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: baseline;
  margin-bottom: 6px;
}
.dept-msg__author {
  font-weight: 700;
}
.dept-msg__meta {
  color: rgba(148, 163, 184, 0.92);
  font-size: 12px;
}
.dept-msg__body {
  white-space: pre-wrap;
  color: rgba(226, 232, 240, 0.95);
}
.dept-chat-form {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.dept-chat-form textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
}
.dept-member-list {
  display: grid;
  gap: 10px;
}
.dept-member {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.42);
}
.dept-member__name {
  font-weight: 700;
}
.dept-member__meta {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(148, 163, 184, 0.92);
}
@media (max-width: 980px) {
  .dept-chat-layout {
    grid-template-columns: 1fr;
  }
}
html[data-theme="light"] .dept-msg,
html[data-theme="light"] .panel--inner,
html[data-theme="light"] .dept-member {
  background: rgba(255, 255, 255, 0.86);
}

/* === azrox_pack_10f_department_chat_phase_b_stabilize === */
.dept-chat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.8fr);
  gap: 16px;
}
.dept-chat-panel .panel--inner {
  background: rgba(8, 15, 29, 0.42);
}
.dept-chat-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.dept-chat-department {
  font-size: 18px;
  font-weight: 700;
}
.dept-chat-stream {
  min-height: 360px;
  max-height: 62vh;
  overflow: auto;
  display: grid;
  gap: 10px;
  padding: 6px 2px 6px 0;
}
.dept-msg {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(8, 15, 29, 0.58);
}
.dept-msg.is-mine {
  border-color: rgba(59, 130, 246, 0.28);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.08);
}
.dept-msg__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: baseline;
  margin-bottom: 6px;
}
.dept-msg__author {
  font-weight: 700;
}
.dept-msg__meta {
  color: rgba(148, 163, 184, 0.92);
  font-size: 12px;
}
.dept-msg__body {
  white-space: pre-wrap;
  color: rgba(226, 232, 240, 0.95);
}
.dept-chat-form {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.dept-chat-form textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
}
.dept-member-list {
  display: grid;
  gap: 10px;
}
.dept-member {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.42);
}
.dept-member__name {
  font-weight: 700;
}
.dept-member__meta {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(148, 163, 184, 0.92);
}
@media (max-width: 980px) {
  .dept-chat-layout {
    grid-template-columns: 1fr;
  }
}
html[data-theme="light"] .dept-msg,
html[data-theme="light"] .panel--inner,
html[data-theme="light"] .dept-member {
  background: rgba(255, 255, 255, 0.86);
}

/* === azrox_pack_11_department_chat_compact_messages === */
.dept-chat-stream {
  align-items: start;
}

.dept-msg {
  width: fit-content;
  max-width: min(74%, 760px);
  min-width: 360px;
}

.dept-msg:not(.is-mine) {
  margin-right: auto;
}

.dept-msg.is-mine {
  margin-left: auto;
}

.dept-msg__bodywrap {
  position: relative;
  overflow: hidden;
  transition: max-height 0.18s ease;
}

.dept-msg__bodywrap.is-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32px;
  background: linear-gradient(to bottom, rgba(8, 15, 29, 0), rgba(8, 15, 29, 0.96));
  pointer-events: none;
}

.dept-msg__body {
  white-space: pre-wrap;
  color: rgba(226, 232, 240, 0.95);
  line-height: 1.5;
  word-break: break-word;
}

.dept-msg__toggle {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7fb0ff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.dept-msg__toggle:hover {
  text-decoration: underline;
}

html[data-theme="light"] .dept-msg__bodywrap.is-collapsed::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.96));
}

@media (max-width: 980px) {
  .dept-msg {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
}

/* === azrox_pack_12_department_chat_bubbles_grouping === */
.dept-chat-stream {
  align-items: start;
  gap: 8px;
}

.dept-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
}

.dept-msg-row.is-mine {
  justify-content: flex-end;
}

.dept-msg-row.is-mine .dept-msg-avatar {
  order: 2;
}

.dept-msg-row.is-mine .dept-msg {
  order: 1;
}

.dept-msg-row.is-grouped {
  margin-top: -2px;
}

.dept-msg-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.24);
  color: #dbeafe;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.dept-msg-avatar.is-hidden {
  visibility: hidden;
}

.dept-msg {
  width: fit-content;
  max-width: min(68%, 720px);
  min-width: 280px;
  border-radius: 18px;
  padding: 10px 12px;
}

.dept-msg.is-grouped {
  padding-top: 8px;
}

.dept-msg:not(.is-mine) {
  border-top-left-radius: 8px;
}

.dept-msg.is-mine {
  margin-left: auto;
  border-top-right-radius: 8px;
  background: rgba(16, 45, 93, 0.72);
  border-color: rgba(96, 165, 250, 0.30);
}

.dept-msg__head {
  margin-bottom: 6px;
}

.dept-msg__meta--grouped {
  margin-bottom: 6px;
  opacity: 0.75;
}

.dept-msg__author {
  font-size: 14px;
}

.dept-msg__meta {
  font-size: 11px;
}

@media (max-width: 980px) {
  .dept-msg {
    min-width: 0;
    max-width: calc(100% - 48px);
    width: auto;
  }
}

@media (max-width: 720px) {
  .dept-msg-row {
    gap: 8px;
  }

  .dept-msg-avatar {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    font-size: 11px;
  }

  .dept-msg {
    max-width: calc(100% - 36px);
    padding: 9px 11px;
  }
}

html[data-theme="light"] .dept-msg.is-mine {
  background: rgba(219, 234, 254, 0.92);
}

/* === azrox_pack_13_department_chat_enter_send === */
.dept-chat-form textarea {
  min-height: 88px;
  max-height: 220px;
  overflow-y: auto;
}

.dept-chat-form__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.dept-chat-form__hint {
  font-size: 12px;
  color: rgba(148, 163, 184, 0.92);
}

.dept-chat-form button[disabled] {
  opacity: 0.72;
  cursor: wait;
}

@media (max-width: 720px) {
  .dept-chat-form__bar {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* === azrox_pack_14_department_chat_live_scroll === */
.dept-chat-stream-wrap {
  position: relative;
}

.dept-chat-stream {
  height: clamp(360px, 54vh, 560px);
  max-height: clamp(360px, 54vh, 560px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  scroll-behavior: smooth;
}

.dept-chat-stream::-webkit-scrollbar {
  width: 10px;
}

.dept-chat-stream::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.38);
  border-radius: 999px;
}

.dept-chat-stream::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.34);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.dept-chat-newbadge {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  background: rgba(15, 23, 42, 0.95);
  color: #dbeafe;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.35);
  cursor: pointer;
  z-index: 5;
}

.dept-chat-newbadge:hover {
  background: rgba(23, 37, 84, 0.98);
}

@media (max-width: 720px) {
  .dept-chat-stream {
    height: 46vh;
    max-height: 46vh;
  }

  .dept-chat-newbadge {
    bottom: 10px;
    font-size: 12px;
    padding: 0 12px;
  }
}

html[data-theme="light"] .dept-chat-stream::-webkit-scrollbar-track {
  background: rgba(226, 232, 240, 0.7);
}

html[data-theme="light"] .dept-chat-newbadge {
  background: rgba(255, 255, 255, 0.96);
  color: #1e3a8a;
}

/* === azrox_pack_15_department_chat_dates_time === */
.dept-chat-daysep {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 6px;
}

.dept-chat-daysep span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.56);
  color: rgba(203, 213, 225, 0.92);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.dept-msg__meta,
.dept-msg__meta--grouped {
  cursor: default;
}

html[data-theme="light"] .dept-chat-daysep span {
  background: rgba(255, 255, 255, 0.92);
  color: rgba(51, 65, 85, 0.92);
}

/* === azrox_pack_16_department_chat_copy_menu === */
.dept-msg {
  position: relative;
}

.dept-msg__tools {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
}

.dept-msg.is-mine .dept-msg__tools {
  right: 8px;
}

.dept-msg__menu-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.36);
  color: rgba(226, 232, 240, 0.92);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.dept-msg__menu-btn:hover {
  background: rgba(30, 41, 59, 0.58);
}

.dept-msg__menu {
  position: absolute;
  top: 34px;
  right: 0;
  min-width: 150px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(8, 15, 29, 0.98);
  box-shadow: 0 16px 40px rgba(2, 6, 23, 0.34);
}

.dept-msg__menu-item {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(226, 232, 240, 0.96);
  text-align: left;
  padding: 0 10px;
  font-size: 13px;
  cursor: pointer;
}

.dept-msg__menu-item:hover {
  background: rgba(30, 41, 59, 0.72);
}

.dept-chat-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(10px);
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.96);
  color: #e2e8f0;
  border: 1px solid rgba(96, 165, 250, 0.24);
  box-shadow: 0 12px 36px rgba(2, 6, 23, 0.36);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 50;
}

.dept-chat-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

html[data-theme="light"] .dept-msg__menu {
  background: rgba(255, 255, 255, 0.98);
}

html[data-theme="light"] .dept-msg__menu-btn {
  background: rgba(248, 250, 252, 0.92);
  color: rgba(30, 41, 59, 0.92);
}

html[data-theme="light"] .dept-msg__menu-item {
  color: rgba(30, 41, 59, 0.96);
}

html[data-theme="light"] .dept-msg__menu-item:hover {
  background: rgba(226, 232, 240, 0.88);
}

html[data-theme="light"] .dept-chat-toast {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(30, 41, 59, 0.96);
}

/* === azrox_pack_17_department_chat_visual_polish === */
.dept-chat-main {
  display: grid;
  gap: 12px;
}

.dept-chat-stream-wrap {
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(8, 15, 29, 0.18);
  padding: 12px;
}

.dept-chat-form {
  position: sticky;
  bottom: 0;
  z-index: 4;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(8, 15, 29, 0.72);
  backdrop-filter: blur(8px);
}

.dept-msg-row {
  transition: transform 0.14s ease;
}

.dept-msg-row:hover {
  transform: translateY(-1px);
}

.dept-msg {
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.12);
  transition: box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.dept-msg:hover {
  box-shadow: 0 14px 32px rgba(2, 6, 23, 0.22);
  border-color: rgba(148, 163, 184, 0.24);
}

.dept-msg.is-mine {
  box-shadow: 0 10px 28px rgba(30, 64, 175, 0.16);
}

.dept-msg.is-mine:hover {
  box-shadow: 0 16px 36px rgba(30, 64, 175, 0.24);
}

.dept-msg__menu-btn {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.14s ease, transform 0.14s ease, background 0.14s ease;
}

.dept-msg:hover .dept-msg__menu-btn,
.dept-msg__menu-btn:focus,
.dept-msg__menu[hidden="false"] + .dept-msg__menu-btn {
  opacity: 1;
  transform: scale(1);
}

.dept-msg__menu {
  animation: deptChatMenuIn 0.14s ease;
}

@keyframes deptChatMenuIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dept-chat-stream .empty-state {
  min-height: 180px;
  display: grid;
  place-items: center;
}

.dept-chat-daysep {
  margin: 14px 0 8px;
}

.dept-chat-daysep span {
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.08);
}

@media (max-width: 720px) {
  .dept-chat-stream-wrap,
  .dept-chat-form {
    padding: 10px;
    border-radius: 16px;
  }

  .dept-msg__menu-btn {
    opacity: 1;
    transform: scale(1);
  }
}

html[data-theme="light"] .dept-chat-stream-wrap {
  background: rgba(255, 255, 255, 0.62);
}

html[data-theme="light"] .dept-chat-form {
  background: rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .dept-msg:hover {
  box-shadow: 0 12px 28px rgba(148, 163, 184, 0.18);
}

/* === azrox_pack_18_department_chat_search_filter === */
.dept-chat-filterbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 0.8fr) auto;
  gap: 10px;
  align-items: center;
}

.dept-chat-filterbar__search,
.dept-chat-filterbar__author {
  width: 100%;
}

.dept-chat-filterbar__reset {
  white-space: nowrap;
}

@media (max-width: 860px) {
  .dept-chat-filterbar {
    grid-template-columns: 1fr;
  }

  .dept-chat-filterbar__reset {
    width: 100%;
  }
}

/* === azrox_pack_18f_chat_search_fix_notifications_hide === */
.dept-chat-filterbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px 110px;
  gap: 10px;
  align-items: center;
}

.dept-chat-filterbar__search,
.dept-chat-filterbar__author {
  width: 100%;
  min-width: 0;
}

.dept-chat-filterbar__reset {
  white-space: nowrap;
  width: 100%;
}

@media (max-width: 860px) {
  .dept-chat-filterbar {
    grid-template-columns: 1fr;
  }
}

/* === azrox_pack_19_chat_search_notifications_cleanup === */
.panel__head--chat {
  justify-content: space-between;
  gap: 12px;
}

.dept-chat-filterbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px 110px;
  gap: 10px;
  align-items: center;
}

.dept-chat-filterbar__searchwrap {
  position: relative;
  min-width: 0;
}

.dept-chat-filterbar__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(148, 163, 184, 0.92);
  pointer-events: none;
  font-size: 14px;
}

.dept-chat-filterbar__search {
  width: 100%;
  padding-left: 38px;
  min-width: 0;
}

.dept-chat-filterbar__author {
  width: 100%;
  min-width: 0;
}

.dept-chat-filterbar__reset {
  width: 100%;
  white-space: nowrap;
}

.dept-chat-mark {
  background: rgba(250, 204, 21, 0.34);
  color: inherit;
  border-radius: 6px;
  padding: 0 2px;
}

.dept-chat-noresults {
  min-height: 120px;
  display: grid;
  place-items: center;
  color: rgba(148, 163, 184, 0.92);
  font-size: 14px;
  font-weight: 600;
}

.dept-chat-stream {
  height: clamp(280px, 42vh, 440px);
  max-height: clamp(280px, 42vh, 440px);
}

.dept-chat-form {
  position: static;
  margin-top: 12px;
}

@media (max-width: 860px) {
  .dept-chat-filterbar {
    grid-template-columns: 1fr;
  }
}

/* === azrox_pack_20_chat_search_nav_notifications_fix === */
body.page-dept-chat .topbar__title {
  font-size: 32px;
  line-height: 1.05;
}

.dept-chat-panel {
  padding-top: 14px;
}

.dept-chat-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.dept-chat-topline__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dept-chat-filterbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 220px 110px;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.dept-chat-filterbar__searchwrap {
  position: relative;
  min-width: 0;
}

.dept-chat-filterbar__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(148, 163, 184, 0.92);
  font-size: 14px;
  pointer-events: none;
}

.dept-chat-filterbar__search {
  width: 100%;
  padding-left: 36px;
}

.dept-chat-filterbar__nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dept-chat-filterbar__count {
  min-width: 44px;
  height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  background: rgba(15, 23, 42, 0.56);
  color: rgba(226, 232, 240, 0.96);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.dept-chat-filterbar__navbtn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.56);
  color: rgba(226, 232, 240, 0.96);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.dept-chat-filterbar__navbtn:disabled {
  opacity: 0.45;
  cursor: default;
}

.dept-chat-stream {
  height: clamp(290px, 41vh, 430px);
  max-height: clamp(290px, 41vh, 430px);
}

.dept-chat-form {
  position: static;
  margin-top: 10px;
}

.dept-msg.is-search-active {
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.46), 0 16px 36px rgba(250, 204, 21, 0.10);
  border-color: rgba(250, 204, 21, 0.38);
}

.dept-chat-mark {
  background: rgba(250, 204, 21, 0.34);
  color: inherit;
  border-radius: 6px;
  padding: 0 2px;
}

@media (max-width: 980px) {
  .dept-chat-filterbar {
    grid-template-columns: 1fr;
  }

  .dept-chat-filterbar__nav,
  .dept-chat-filterbar__author,
  .dept-chat-filterbar__reset {
    width: 100%;
  }

  .dept-chat-filterbar__nav {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  body.page-dept-chat .topbar__title {
    font-size: 26px;
  }

  .dept-chat-topline {
    flex-direction: column;
    align-items: stretch;
  }
}

/* === azrox_pack_21_tasks_history_workload_ui === */
.nav {
  gap: 4px;
}

.nav__sub {
  gap: 4px;
  margin: -2px 0 8px 8px;
}

.nav__sublink {
  justify-content: flex-start;
  gap: 6px;
  padding: 6px 8px;
  min-height: 30px;
  font-size: 14px;
}

.nav__sub .nav-badge {
  margin-left: 2px;
}

.subtabs--tasks .subtab--history .nav-badge {
  display: none;
  box-shadow: none;
}

.filters-bar--tasks {
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
}

.task-workload-panel {
  margin-bottom: 16px;
}

.data-table--load td,
.data-table--load th {
  white-space: nowrap;
}

.data-table--tasks td {
  vertical-align: top;
}

.comment-cell {
  min-width: 170px;
  max-width: 190px;
}

.comment-cell__text {
  font-size: 12px;
  line-height: 1.34;
  color: var(--muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  word-break: break-word;
}

.row-overdue td {
  background: rgba(239, 68, 68, 0.06) !important;
  border-bottom-color: rgba(239, 68, 68, 0.12);
}

.row-overdue td:first-child {
  box-shadow: inset 3px 0 0 rgba(239, 68, 68, 0.85);
}

.row-today td {
  background: rgba(250, 204, 21, 0.06) !important;
  border-bottom-color: rgba(250, 204, 21, 0.14);
}

.row-today td:first-child {
  box-shadow: inset 3px 0 0 rgba(250, 204, 21, 0.82);
}

.row-progress td {
  background: rgba(59, 130, 246, 0.05) !important;
  border-bottom-color: rgba(59, 130, 246, 0.10);
}

.row-progress td:first-child {
  box-shadow: inset 3px 0 0 rgba(96, 165, 250, 0.72);
}

.row-returned td {
  background: rgba(168, 85, 247, 0.06) !important;
  border-bottom-color: rgba(168, 85, 247, 0.12);
}

.row-returned td:first-child {
  box-shadow: inset 3px 0 0 rgba(168, 85, 247, 0.82);
}

.row-frozen td {
  background: rgba(148, 163, 184, 0.07) !important;
  border-bottom-color: rgba(148, 163, 184, 0.16);
}

.row-frozen td:first-child {
  box-shadow: inset 3px 0 0 rgba(148, 163, 184, 0.82);
}

.stack-list--history {
  gap: 10px;
}

.history-item {
  align-items: flex-start;
}

.history-item__lines {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: #dbe7fb;
}

.history-item__comment {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.12);
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 1180px) {
  .filters-bar--tasks {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .nav__sub {
    margin-left: 4px;
  }
}

/* === azrox_pack_22_tasks_planned_publication === */
.nav a[href*="/tasks?scope=planned"],
.nav a[href*="/tasks?scope=frozen"],
.sidebar a[href*="/tasks?scope=planned"],
.sidebar a[href*="/tasks?scope=frozen"] {
  display: none !important;
}

.task-sub--schedule {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

#planned-publish-wrap,
#planned-visibility-wrap,
#planned-self-note {
  display: none;
}

/* === azrox_pack_22a_tasks_planned_ui_fix === */
#planned-publish-wrap,
#planned-visibility-wrap,
#planned-self-note {
  display: block !important;
}

.planned-optional[hidden] {
  display: none !important;
}

.planned-optional {
  min-width: 0;
}

.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.nav a[href="/tasks"] .nav-badge,
.nav__link[href="/tasks"] .nav-badge,
.sidebar a[href="/tasks"] .nav-badge {
  display: none !important;
}

.nav__sub .nav-badge,
.subtabs .nav-badge {
  margin-left: 6px;
  vertical-align: middle;
}

.subtabs a[href*="scope=planned"],
.subtabs a[href*="scope=frozen"] {
  display: none !important;
}

/* === azrox_pack_22b_tasks_planned_ui_tabs_fix === */
.planned-optional {
  min-width: 0;
}

.planned-optional[hidden] {
  display: none !important;
}

.subtabs a[href*="scope=planned"],
.subtabs a[href*="scope=frozen"] {
  display: inline-flex !important;
}

.nav a[href*="/tasks?scope=planned"],
.nav a[href*="/tasks?scope=frozen"],
.nav__sub a[href*="/tasks?scope=planned"],
.nav__sub a[href*="/tasks?scope=frozen"],
.sidebar a[href*="/tasks?scope=planned"],
.sidebar a[href*="/tasks?scope=frozen"] {
  display: none !important;
}

.nav a[href="/tasks"] .nav-badge,
.nav__link[href="/tasks"] .nav-badge,
.sidebar a[href="/tasks"] .nav-badge {
  display: none !important;
}

.subtabs .nav-badge,
.nav__sub .nav-badge {
  margin-left: 6px;
  vertical-align: middle;
}

/* === azrox_pack_22c_tasks_planned_visibility_hardfix === */
.planned-optional {
  display: none !important;
}

.planned-optional.is-visible {
  display: block !important;
}

label.planned-optional.is-visible {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}

.nav a[href="/tasks"] .nav-badge,
.nav__link[href="/tasks"] .nav-badge,
.sidebar a[href="/tasks"] .nav-badge {
  display: none !important;
}

/* === azrox_pack_22d_tasks_planned_container_fix === */
.planned-options-row {
  display: none !important;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}

.planned-options-row label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.planned-options-row[aria-hidden="false"] {
  display: grid !important;
}

.planned-options-note {
  align-self: center;
  padding-top: 24px;
}

@media (max-width: 980px) {
  .planned-options-row {
    grid-template-columns: 1fr;
  }

  .planned-options-note {
    padding-top: 0;
  }
}

/* === azrox_pack_23_dashboard_compact_header_datetime === */
.topbar__datetime {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 132px;
  margin-right: 10px;
  padding: 8px 12px;
  border-radius: 16px;
  border: 1px solid rgba(125, 211, 252, 0.14);
  background: linear-gradient(180deg, rgba(12, 20, 44, 0.94), rgba(8, 16, 36, 0.82));
  box-shadow: 0 12px 28px rgba(2, 8, 23, 0.22);
}

.topbar__date {
  font-size: 12px;
  color: var(--muted);
  text-transform: lowercase;
}

.topbar__clock {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #eaf2ff;
}

.dash-hero {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 16px;
  margin-bottom: 16px;
}

.dash-hero__main,
.dash-hero__side {
  background: linear-gradient(180deg, rgba(7, 16, 40, 0.92), rgba(6, 14, 34, 0.84));
  border: 1px solid rgba(125, 211, 252, 0.10);
  border-radius: 24px;
  padding: 18px 20px;
  box-shadow: 0 22px 44px rgba(2, 8, 23, 0.20);
}

.dash-hero__label {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.16);
  color: #cfe3ff;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}

.dash-hero__main h2 {
  margin: 0 0 8px;
  font-size: 28px;
}

.dash-hero__side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dash-mini-stat {
  padding: 14px;
  border-radius: 18px;
  background: rgba(8, 15, 34, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.10);
}

.dash-mini-stat span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.dash-mini-stat strong {
  font-size: 24px;
  font-weight: 800;
  color: #f8fbff;
}

.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.dash-kpi {
  display: block;
  padding: 16px 18px;
  border-radius: 22px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, rgba(7, 16, 40, 0.92), rgba(6, 14, 34, 0.84));
  border: 1px solid rgba(125, 211, 252, 0.10);
  box-shadow: 0 20px 40px rgba(2, 8, 23, 0.18);
}

.dash-kpi:hover {
  transform: translateY(-1px);
}

.dash-kpi__label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.dash-kpi__value {
  font-size: 28px;
  font-weight: 800;
  color: #f8fbff;
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.dash-list {
  display: grid;
  gap: 10px;
}

.dash-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  background: rgba(8, 15, 34, 0.72);
}

.dash-list__row--link {
  text-decoration: none;
  color: inherit;
}

.dash-list__title {
  font-size: 14px;
  font-weight: 700;
  color: #f8fbff;
  margin-bottom: 4px;
}

.dash-list__meta {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.dash-list__side {
  font-size: 12px;
  color: #dbeafe;
  white-space: nowrap;
}

.dash-list__side--warn {
  color: #facc15;
}

.dash-empty {
  padding: 16px;
  border-radius: 18px;
  border: 1px dashed rgba(148, 163, 184, 0.18);
  color: var(--muted);
  text-align: center;
}

@media (max-width: 1200px) {
  .dash-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .dash-hero,
  .dash-grid {
    grid-template-columns: 1fr;
  }

  .dash-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar__datetime {
    display: none;
  }
}

@media (max-width: 640px) {
  .dash-kpi-grid {
    grid-template-columns: 1fr;
  }

  .dash-hero__side {
    grid-template-columns: 1fr 1fr;
  }
}

/* === azrox_pack_24_dashboard_employee_compact_header_layout === */
.topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
}

.topbar__center {
  min-width: 0;
}

.topbar__title {
  margin: 0;
  font-size: 24px;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

.topbar__profile {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 220px;
  text-align: right;
}

.topbar__name {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.topbar__meta {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.2;
}

.topbar__datetime {
  min-width: 122px;
  padding: 6px 10px;
  border-radius: 14px;
  margin-right: 2px;
}

.topbar__date {
  font-size: 11px;
}

.topbar__clock {
  font-size: 18px;
}

.theme-switcher {
  align-self: flex-start;
  margin-left: 2px;
}

.theme-switcher__btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.dash-hero--employee {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 12px;
  margin-bottom: 12px;
}

.dash-hero--employee .dash-hero__main,
.dash-hero--employee .dash-hero__side {
  padding: 14px 16px;
  border-radius: 20px;
}

.dash-hero--employee .dash-hero__main h2 {
  margin: 0 0 6px;
  font-size: 24px;
}

.dash-hero__side--compact {
  gap: 10px;
}

.dash-hero__side--compact .dash-mini-stat {
  padding: 12px;
  border-radius: 16px;
}

.dash-hero__side--compact .dash-mini-stat span {
  margin-bottom: 4px;
}

.dash-hero__side--compact .dash-mini-stat strong {
  font-size: 22px;
}

.dash-grid--employee {
  gap: 12px;
  margin-bottom: 12px;
}

.dash-grid--employee-single {
  grid-template-columns: 1fr;
}

.dash-grid--employee .panel {
  border-radius: 20px;
}

.dash-grid--employee .panel__head {
  margin-bottom: 10px;
}

.dash-grid--employee .dash-list {
  gap: 8px;
}

.dash-grid--employee .dash-list__row {
  padding: 10px 12px;
  border-radius: 16px;
}

.dash-grid--employee .dash-list__title {
  font-size: 13px;
  margin-bottom: 2px;
}

.dash-grid--employee .dash-list__meta,
.dash-grid--employee .dash-list__side {
  font-size: 11px;
}

@media (max-width: 980px) {
  .topbar {
    grid-template-columns: auto 1fr;
    align-items: start;
  }

  .topbar__actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    width: 100%;
  }

  .dash-hero--employee {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .topbar__profile {
    min-width: 0;
  }

  .topbar__name {
    font-size: 13px;
  }

  .topbar__title {
    font-size: 20px;
  }
}

/* === azrox_pack_25a_design_lab_rework === */
:root {
  --theme-grad-1: rgba(96, 165, 250, 0.22);
  --theme-grad-2: rgba(20, 184, 166, 0.16);
  --theme-grad-3: rgba(59, 130, 246, 0.10);
  --btn-grad-start: var(--primary-strong);
  --btn-grad-end: var(--primary);
  --glass: rgba(8, 18, 32, 0.72);
  --glow: rgba(96, 165, 250, 0.22);
  --scroll-thumb: rgba(96, 165, 250, 0.46);
  --scroll-track: rgba(15, 23, 42, 0.46);
}
html[data-theme="dark"] { --bg:#06111f; --panel:rgba(9,20,38,.86); --panel-strong:#081425; --panel-soft:#0b1830; --line:rgba(148,163,184,.14); --text:#edf5ff; --muted:#90a6c6; --primary:#73b5ff; --primary-strong:#2c6df8; --accent:#18d2c2; --danger:#ff5c74; --success:#34d399; --warning:#fbbf24; --theme-grad-1:rgba(64,132,255,.20); --theme-grad-2:rgba(24,210,194,.14); --theme-grad-3:rgba(10,24,44,.82); --btn-grad-start:#255eef; --btn-grad-end:#56a2ff; --glass:rgba(8,16,31,.74); --glow:rgba(92,155,255,.22); --scroll-thumb:rgba(115,181,255,.52); --scroll-track:rgba(9,20,38,.52);}
html[data-theme="light"] { --bg:#eef5ff; --panel:rgba(255,255,255,.92); --panel-strong:#fff; --panel-soft:#f7fbff; --line:rgba(15,23,42,.10); --text:#0d1b33; --muted:#62748d; --primary:#2563eb; --primary-strong:#1d4ed8; --accent:#0f9f91; --danger:#dc2626; --success:#16a34a; --warning:#d97706; --theme-grad-1:rgba(37,99,235,.08); --theme-grad-2:rgba(15,159,145,.08); --theme-grad-3:rgba(255,255,255,.92); --btn-grad-start:#2563eb; --btn-grad-end:#4f8bff; --glass:rgba(255,255,255,.75); --glow:rgba(37,99,235,.12); --scroll-thumb:rgba(37,99,235,.36); --scroll-track:rgba(203,213,225,.58);}
html[data-theme="graphite"] { --bg:#0f131a; --panel:rgba(24,29,39,.88); --panel-strong:#181d27; --panel-soft:#202633; --line:rgba(148,163,184,.12); --text:#eef2f8; --muted:#9cabbe; --primary:#8ba7ff; --primary-strong:#5b74ff; --accent:#7dd3fc; --theme-grad-1:rgba(91,116,255,.18); --theme-grad-2:rgba(125,211,252,.10); --btn-grad-start:#4f46e5; --btn-grad-end:#8898ff;}
html[data-theme="neon"] { --bg:#090318; --panel:rgba(22,14,43,.86); --panel-strong:#10091f; --panel-soft:#1a0f31; --line:rgba(34,211,238,.18); --text:#f7f7ff; --muted:#bdb3db; --primary:#8b5cf6; --primary-strong:#7c3aed; --accent:#22d3ee; --success:#4ade80; --warning:#facc15; --theme-grad-1:rgba(124,58,237,.22); --theme-grad-2:rgba(34,211,238,.16); --btn-grad-start:#6d28d9; --btn-grad-end:#22d3ee; --glow:rgba(34,211,238,.24); --scroll-thumb:rgba(34,211,238,.58);}
html[data-theme="amur"] { --bg:#071322; --panel:rgba(10,23,42,.88); --panel-strong:#091a30; --panel-soft:#0d2341; --line:rgba(125,211,252,.14); --text:#eff7ff; --muted:#8eabc7; --primary:#5bb4ff; --primary-strong:#2563eb; --accent:#38bdf8; --btn-grad-start:#225de8; --btn-grad-end:#58c2ff;}
html[data-theme="copper"] { --bg:#1b1110; --panel:rgba(36,20,18,.88); --panel-strong:#261714; --panel-soft:#341f1c; --line:rgba(251,146,60,.18); --text:#fff3ec; --muted:#d8b8a6; --primary:#fb923c; --primary-strong:#ea580c; --accent:#f59e0b; --btn-grad-start:#d97706; --btn-grad-end:#fb923c; --glow:rgba(251,146,60,.20);}
html[data-theme="mint"] { --bg:#0b1a18; --panel:rgba(13,32,28,.86); --panel-strong:#112725; --panel-soft:#173632; --line:rgba(45,212,191,.16); --text:#f2fffb; --muted:#95b9b0; --primary:#2dd4bf; --primary-strong:#0f766e; --accent:#7dd3fc; --btn-grad-start:#0f766e; --btn-grad-end:#34d399;}
html[data-theme="royal"] { --bg:#0f1023; --panel:rgba(19,20,45,.88); --panel-strong:#17173a; --panel-soft:#21224e; --line:rgba(129,140,248,.18); --text:#f7f8ff; --muted:#b6b9d8; --primary:#818cf8; --primary-strong:#6366f1; --accent:#c084fc; --btn-grad-start:#6366f1; --btn-grad-end:#c084fc;}
html[data-theme="sand"] { --bg:#f6efe3; --panel:rgba(255,251,244,.92); --panel-strong:#fffaf2; --panel-soft:#f7f0e4; --line:rgba(120,88,51,.12); --text:#352518; --muted:#8c7159; --primary:#c08457; --primary-strong:#9a6235; --accent:#caa574; --btn-grad-start:#9a6235; --btn-grad-end:#d59a67; --glow:rgba(192,132,87,.12);}
html[data-theme="plum"] { --bg:#140d1b; --panel:rgba(31,19,42,.88); --panel-strong:#251731; --panel-soft:#341f46; --line:rgba(217,70,239,.16); --text:#fbf4ff; --muted:#c5add0; --primary:#d946ef; --primary-strong:#a21caf; --accent:#8b5cf6; --btn-grad-start:#a21caf; --btn-grad-end:#d946ef;}
html[data-theme="ember"] { --bg:#110b0c; --panel:rgba(29,17,18,.90); --panel-strong:#211213; --panel-soft:#331a1c; --line:rgba(248,113,113,.18); --text:#fff4f4; --muted:#c6adb0; --primary:#f97316; --primary-strong:#dc2626; --accent:#fb7185; --btn-grad-start:#dc2626; --btn-grad-end:#fb923c;}
html[data-theme="arctic"] { --bg:#eef8ff; --panel:rgba(245,251,255,.92); --panel-strong:#fff; --panel-soft:#e9f4ff; --line:rgba(56,189,248,.16); --text:#0e2435; --muted:#6c879d; --primary:#38bdf8; --primary-strong:#0284c7; --accent:#2dd4bf; --btn-grad-start:#0284c7; --btn-grad-end:#38bdf8;}

body { background:radial-gradient(circle at top left, var(--theme-grad-1), transparent 30%),radial-gradient(circle at top right, var(--theme-grad-2), transparent 24%),linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, #020617 18%) 100%); transition:background .28s ease,color .22s ease; }
body, .sidebar, .topbar, .panel, .stat-card, .table-wrap, .mini-card, .data-table, .notice-row, input, textarea, select, .btn, .nav__link, .nav__sublink, .theme-switcher__btn, .theme-switcher__menu, .auth-card { transition: background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .18s ease; }
::selection { background: color-mix(in srgb, var(--primary) 36%, transparent); color: var(--text); }
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: var(--scroll-track); border-radius: 999px; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--scroll-thumb), color-mix(in srgb, var(--scroll-thumb) 62%, white 38%)); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.sidebar, .topbar, .panel, .table-wrap, .auth-card, .theme-switcher__menu, .notice-row { background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 94%, white 6%), color-mix(in srgb, var(--panel-strong) 90%, transparent 10%)); backdrop-filter: blur(18px); border-color: color-mix(in srgb, var(--line) 100%, transparent); }
.sidebar, .topbar, .panel, .table-wrap, .auth-card { box-shadow: 0 20px 48px rgba(2, 8, 23, 0.18), inset 0 1px 0 rgba(255,255,255,0.04); }
.topbar { position: sticky; top: 22px; z-index: 20; }
.nav__link, .nav__sublink { position: relative; overflow: hidden; }
.nav__link::after, .btn::after, .chip::after, .theme-switcher__btn::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.12) 30%, transparent 60%); transform:translateX(-120%); opacity:0; transition:transform .36s ease, opacity .24s ease; pointer-events:none; }
.nav__link:hover::after, .btn:hover::after, .chip:hover::after, .theme-switcher__btn:hover::after { opacity:1; transform:translateX(120%); }
.btn, .theme-switcher__btn, .chip { position: relative; overflow: hidden; }
.btn { border-radius: 18px; font-weight: 800; }
.btn--primary { background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end)); border: 1px solid color-mix(in srgb, var(--primary) 30%, white 14%); box-shadow: 0 14px 28px color-mix(in srgb, var(--glow) 80%, transparent); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 18px 34px color-mix(in srgb, var(--glow) 95%, transparent); }
.btn--ghost { background: color-mix(in srgb, var(--panel-soft) 82%, transparent); border: 1px solid color-mix(in srgb, var(--line) 100%, transparent); color: var(--text); }
input, textarea, select { border-radius: 18px; background: color-mix(in srgb, var(--panel-soft) 88%, transparent); }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 86%, transparent); }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.theme-switcher__btn { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--accent) 16%, transparent)); border: 1px solid color-mix(in srgb, var(--line) 100%, transparent); }
.topbar__online { display:inline-flex; align-items:center; gap:8px; min-width:60px; padding:7px 12px; border-radius:999px; background:linear-gradient(135deg, rgba(34,197,94,.18), rgba(34,197,94,.10)); border:1px solid rgba(34,197,94,.28); box-shadow:0 0 0 6px rgba(34,197,94,.08); }
.topbar__online-dot { width:10px; height:10px; border-radius:999px; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.16), 0 0 16px rgba(34,197,94,.44); }
.topbar__online-count { font-size:14px; font-weight:900; color:#dcfce7; }
.topbar__datetime { padding:8px 12px; border-radius:16px; border:1px solid color-mix(in srgb, var(--line) 100%, transparent); background: color-mix(in srgb, var(--panel-soft) 76%, transparent); }
.theme-marquee { margin-top:-8px; margin-bottom:12px; overflow:hidden; border-radius:18px; border:1px solid color-mix(in srgb, var(--line) 100%, transparent); background:linear-gradient(90deg, color-mix(in srgb, var(--panel-soft) 88%, transparent), color-mix(in srgb, var(--panel) 94%, transparent)); box-shadow:0 12px 28px rgba(2,8,23,0.12); }
.theme-marquee__track { white-space:nowrap; padding:9px 0; font-size:12px; font-weight:800; color: color-mix(in srgb, var(--text) 88%, var(--accent) 12%); animation: azroxMarquee 34s linear infinite; }
@keyframes azroxMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.theme-lab { position:fixed; inset:0; z-index:80; }
.theme-lab__backdrop { position:absolute; inset:0; background:rgba(3,7,18,.54); backdrop-filter: blur(12px); }
.theme-lab__panel { position:absolute; top:50%; left:50%; width:min(1080px, calc(100vw - 32px)); max-height: calc(100vh - 36px); transform:translate(-50%, -50%); overflow:hidden; display:grid; grid-template-rows:auto auto 1fr; border-radius:30px; border:1px solid color-mix(in srgb, var(--line) 100%, transparent); background:radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 16%, transparent), transparent 24%),radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 18%, transparent), transparent 22%),linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, white 4%), color-mix(in srgb, var(--panel-strong) 94%, transparent)); box-shadow:0 32px 90px rgba(2,8,23,.42); }
.theme-lab__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:22px 24px 18px; border-bottom:1px solid color-mix(in srgb, var(--line) 100%, transparent); }
.theme-lab__eyebrow { font-size:12px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.theme-lab__head h2 { font-size:28px; margin-bottom:8px; }
.theme-lab__sub { color:var(--muted); line-height:1.45; }
.theme-lab__close { width:42px; height:42px; border:1px solid color-mix(in srgb, var(--line) 100%, transparent); border-radius:14px; background:color-mix(in srgb, var(--panel-soft) 82%, transparent); color:var(--text); font-size:18px; cursor:pointer; }
.theme-lab__tabs { display:flex; gap:10px; padding:16px 24px 0; }
.theme-lab__tab { border:1px solid color-mix(in srgb, var(--line) 100%, transparent); background:color-mix(in srgb, var(--panel-soft) 78%, transparent); color:var(--text); border-radius:16px; padding:11px 16px; font-weight:800; cursor:pointer; }
.theme-lab__tab.is-active { background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, transparent), color-mix(in srgb, var(--accent) 20%, transparent)); border-color: color-mix(in srgb, var(--primary) 46%, transparent); box-shadow:0 12px 30px color-mix(in srgb, var(--glow) 88%, transparent); }
.theme-lab__body { padding:20px 24px 24px; overflow:auto; }
.theme-lab__pane { display:none; }
.theme-lab__pane.is-active { display:block; }
.theme-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.theme-grid--small { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.theme-card, .tool-toggle, .theme-extra-mode { position:relative; overflow:hidden; border:1px solid color-mix(in srgb, var(--line) 100%, transparent); background:color-mix(in srgb, var(--panel-soft) 74%, transparent); color:var(--text); border-radius:22px; padding:16px; text-align:left; cursor:pointer; }
.theme-card:hover, .tool-toggle:hover, .theme-extra-mode:hover { transform:translateY(-1px); box-shadow:0 16px 38px rgba(2,8,23,.18); }
.theme-card.is-active, .tool-toggle.is-active, .theme-extra-mode.is-active { border-color: color-mix(in srgb, var(--primary) 52%, transparent); background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 16%, transparent), color-mix(in srgb, var(--panel-soft) 72%, transparent)); box-shadow:0 18px 42px color-mix(in srgb, var(--glow) 92%, transparent); }
.theme-card__preview { display:block; width:100%; height:74px; border-radius:18px; margin-bottom:14px; border:1px solid rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.preview-dark { background:linear-gradient(135deg, #0a1426, #1f5de9 44%, #14d2c2); } .preview-light { background:linear-gradient(135deg, #ffffff, #d8e8ff 48%, #97c7ff); } .preview-graphite { background:linear-gradient(135deg, #191e27, #39435c 48%, #8ba7ff); } .preview-neon { background:linear-gradient(135deg, #16092f, #7c3aed 44%, #22d3ee); } .preview-amur { background:linear-gradient(135deg, #081629, #225de8 48%, #58c2ff); } .preview-copper { background:linear-gradient(135deg, #221210, #d97706 52%, #fb923c); } .preview-mint { background:linear-gradient(135deg, #102a25, #0f766e 48%, #34d399); } .preview-royal { background:linear-gradient(135deg, #151634, #6366f1 44%, #c084fc); } .preview-sand { background:linear-gradient(135deg, #fffaf2, #efd9b9 48%, #d59a67); } .preview-plum { background:linear-gradient(135deg, #231535, #a21caf 48%, #d946ef); } .preview-ember { background:linear-gradient(135deg, #251313, #dc2626 48%, #fb923c); } .preview-arctic { background:linear-gradient(135deg, #ffffff, #cfefff 48%, #38bdf8); }
.theme-card__title, .tool-toggle__title { display:block; font-size:15px; font-weight:900; margin-bottom:6px; }
.theme-card__desc, .tool-toggle__desc, .theme-note { font-size:12px; line-height:1.45; color:var(--muted); }
.mascot-swatch { width:64px; height:64px; display:grid; place-items:center; font-size:28px; border-radius:18px; margin-bottom:14px; background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--accent) 14%, transparent)); border:1px solid color-mix(in srgb, var(--line) 100%, transparent); }
.mascot-none { font-size:22px; color:var(--muted); }
.theme-tools { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; margin-bottom:16px; }
.theme-extra-box { padding:16px; border-radius:22px; border:1px solid color-mix(in srgb, var(--line) 100%, transparent); background:color-mix(in srgb, var(--panel-soft) 74%, transparent); margin-bottom:12px; }
.theme-extra-box__label { font-size:13px; font-weight:800; margin-bottom:12px; }
.theme-extra-modes { display:flex; gap:10px; flex-wrap:wrap; }
.theme-extra-mode { padding:11px 14px; }
.mascot-layer { position:fixed; right:18px; bottom:18px; z-index:55; pointer-events:none; }
.mascot { position:absolute; right:0; bottom:0; display:flex; align-items:flex-end; gap:10px; transition: transform .22s ease; }
.mascot--secondary { right:130px; bottom:86px; opacity:.86; }
.mascot__body { width:58px; height:58px; display:grid; place-items:center; border-radius:22px; font-size:28px; background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 28%, transparent), color-mix(in srgb, var(--accent) 18%, transparent)); border:1px solid color-mix(in srgb, var(--line) 100%, transparent); box-shadow:0 20px 40px rgba(2,8,23,.20); }
.mascot__bubble { max-width:200px; padding:10px 12px; border-radius:18px 18px 18px 8px; background:color-mix(in srgb, var(--panel) 94%, white 6%); border:1px solid color-mix(in srgb, var(--line) 100%, transparent); box-shadow:0 16px 34px rgba(2,8,23,.18); color:var(--text); font-size:12px; font-weight:700; }
body.theme-fx-neon .sidebar, body.theme-fx-neon .topbar, body.theme-fx-neon .panel, body.theme-fx-neon .table-wrap, body.theme-fx-neon .theme-card.is-active, body.theme-fx-neon .tool-toggle.is-active { box-shadow:0 24px 54px rgba(2,8,23,.18),0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),0 0 30px color-mix(in srgb, var(--glow) 100%, transparent); }
body.theme-fx-gloss .sidebar, body.theme-fx-gloss .topbar, body.theme-fx-gloss .panel, body.theme-fx-gloss .table-wrap, body.theme-fx-gloss .btn, body.theme-fx-gloss .theme-card, body.theme-fx-gloss .tool-toggle { position:relative; }
body.theme-fx-gloss .sidebar::before, body.theme-fx-gloss .topbar::before, body.theme-fx-gloss .panel::before, body.theme-fx-gloss .table-wrap::before, body.theme-fx-gloss .btn::before, body.theme-fx-gloss .theme-card::before, body.theme-fx-gloss .tool-toggle::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 10%, rgba(255,255,255,.08) 30%, transparent 56%); transform:translateX(-120%); animation:azroxGloss 8s linear infinite; pointer-events:none; }
@keyframes azroxGloss { 0% { transform:translateX(-120%);} 55%,100% { transform:translateX(140%);} }
body.theme-fx-sparkles::after { content:""; position:fixed; inset:0; pointer-events:none; opacity:.44; background-image:radial-gradient(circle at 10% 20%, rgba(255,255,255,.34) 0 1px, transparent 1.8px),radial-gradient(circle at 30% 75%, rgba(255,255,255,.22) 0 1px, transparent 1.8px),radial-gradient(circle at 65% 18%, rgba(255,255,255,.26) 0 1px, transparent 1.8px),radial-gradient(circle at 82% 62%, rgba(255,255,255,.20) 0 1px, transparent 1.8px),radial-gradient(circle at 56% 48%, rgba(255,255,255,.24) 0 1px, transparent 1.8px); animation: azroxSparkles 18s linear infinite; }
@keyframes azroxSparkles { 0% { transform:translateY(0);} 50% { transform:translateY(6px);} 100% { transform:translateY(0);} }
body.theme-lab-open { overflow:hidden; }
@media (max-width:1100px) { .theme-grid,.theme-grid--small { grid-template-columns:repeat(2, minmax(0, 1fr)); } .theme-tools { grid-template-columns:1fr; } }
@media (max-width:760px) { .theme-lab__panel { width: calc(100vw - 16px); max-height: calc(100vh - 16px); } .theme-grid,.theme-grid--small { grid-template-columns:1fr; } .theme-lab__tabs { overflow:auto; } .topbar__online { display:none; } .mascot--secondary { display:none; } }

/* === azrox_pack_25c_mascots_drawn_animals === */

:root {
  --mz-dark: #0b1020;
  --mz-light: #eef4ff;
}

.mascot-layer {
  position: fixed;
  inset: 0;
  z-index: 56;
  pointer-events: none;
}

.live-mascot {
  position: fixed;
  left: 18px;
  top: 18px;
  width: 116px;
  height: 84px;
  transition:
    left var(--travel-ms, 2600ms) cubic-bezier(.22,.84,.27,1.02),
    top var(--travel-ms, 2600ms) cubic-bezier(.22,.84,.27,1.02),
    transform .45s ease,
    filter .35s ease,
    opacity .35s ease;
  transform-origin: center bottom;
  pointer-events: none;
}

.live-mascot .mcore,
.live-mascot .mcore * {
  position: absolute;
  box-sizing: border-box;
}

.live-mascot.is-left {
  transform: scaleX(-1);
}

.live-mascot[data-action="run"] .m-leg,
.live-mascot[data-action="run"] .m-arm,
.live-mascot[data-action="run"] .m-tail {
  animation: azroxMascotRun .42s ease-in-out infinite alternate;
}

.live-mascot[data-action="run"] {
  animation: azroxMascotBodyRun .42s ease-in-out infinite alternate;
}

.live-mascot[data-action="jump"] {
  animation: azroxMascotJump .8s ease-out infinite alternate;
}

.live-mascot[data-action="climb"] {
  animation: azroxMascotClimb 1.1s ease-in-out infinite alternate;
}

.live-mascot[data-action="idle"] {
  animation: azroxMascotIdle 2.2s ease-in-out infinite;
}

.live-mascot[data-action="sit"] .m-body,
.live-mascot[data-action="sit"] .m-torso {
  transform: scaleY(.92);
  transform-origin: center bottom;
}
.live-mascot[data-action="sit"] .m-leg {
  height: 20px !important;
  top: auto !important;
  bottom: 3px;
}

.live-mascot[data-action="sleep"] {
  animation: azroxMascotSleep 3.6s ease-in-out infinite;
}
.live-mascot[data-action="sleep"] .m-tail {
  transform: rotate(95deg) !important;
}
.live-mascot[data-action="sleep"] .m-head {
  transform: rotate(32deg) scale(.92);
  left: 54px !important;
  top: 30px !important;
}
.live-mascot[data-action="sleep"] .m-body {
  width: 44px !important;
  height: 30px !important;
  border-radius: 50% !important;
  left: 28px !important;
  top: 30px !important;
}
.live-mascot[data-action="sleep"] .m-leg {
  opacity: 0;
}
.live-mascot[data-action="sleep"] .m-eye {
  height: 2px !important;
  border-radius: 2px;
  top: 17px !important;
}
.live-mascot[data-action="sleep"].mascot-cat {
  filter: saturate(1.05);
}

.live-mascot[data-action="hide"] {
  opacity: .34;
  transform: translateY(8px) scale(.78);
}
.live-mascot[data-action="hide"] .m-head {
  top: 24px !important;
}
.live-mascot[data-action="hide"] .m-body,
.live-mascot[data-action="hide"] .m-torso {
  opacity: .22;
}

/* animal core */
.m-animal {
  inset: 0;
  --fur: #a7b1c4;
  --fur-2: #dce4f4;
  --nose: #1e293b;
}
.mascot-cat .m-animal { --fur: #98a8bd; --fur-2: #dbe5f2; --nose: #1b2233; }
.mascot-fox .m-animal { --fur: #e47f37; --fur-2: #fff0e2; --nose: #52270d; }

.m-animal .m-body {
  left: 26px;
  top: 30px;
  width: 50px;
  height: 28px;
  border-radius: 18px 22px 18px 18px;
  background: var(--fur);
  box-shadow: inset 0 -5px 0 rgba(255,255,255,.08);
}
.m-animal .m-body-spot {
  left: 42px;
  top: 36px;
  width: 16px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fur-2) 72%, transparent);
  opacity: .5;
}
.m-animal .m-head {
  left: 62px;
  top: 18px;
  width: 30px;
  height: 26px;
  border-radius: 14px 15px 12px 12px;
  background: var(--fur);
  box-shadow: inset 0 -4px 0 rgba(255,255,255,.06);
}
.m-animal .m-ear {
  top: -8px;
  width: 10px;
  height: 12px;
  background: var(--fur);
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
.m-animal .m-ear--left { left: 2px; transform: rotate(-8deg); }
.m-animal .m-ear--right { right: 2px; transform: rotate(8deg); }
.m-animal .m-eye {
  top: 10px;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  background: #111827;
}
.m-animal .m-eye--left { left: 8px; }
.m-animal .m-eye--right { right: 8px; }
.m-animal .m-nose {
  left: 12px;
  top: 16px;
  width: 6px;
  height: 4px;
  border-radius: 999px;
  background: var(--nose);
}
.m-animal .m-mouth {
  left: 11px;
  top: 19px;
  width: 8px;
  height: 4px;
  border-bottom: 1.5px solid color-mix(in srgb, var(--nose) 76%, transparent);
  border-radius: 0 0 8px 8px;
}
.m-animal .m-tail {
  left: 12px;
  top: 24px;
  width: 30px;
  height: 9px;
  border-radius: 999px;
  background: var(--fur);
  transform-origin: 28px center;
  box-shadow: inset -8px 0 0 color-mix(in srgb, var(--fur-2) 32%, transparent);
}
.mascot-fox .m-tail {
  height: 11px;
  width: 34px;
  box-shadow: inset -8px 0 0 var(--fur-2);
}
.m-animal .m-leg {
  top: 52px;
  width: 8px;
  height: 18px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--fur) 82%, #0f172a 18%);
  transform-origin: top center;
}
.m-animal .m-leg--1 { left: 34px; }
.m-animal .m-leg--2 { left: 48px; }
.m-animal .m-leg--3 { left: 62px; }
.m-animal .m-leg--4 { left: 76px; }

/* humanoid core */
.m-humanoid {
  inset: 0;
  --skin: #e6b189;
  --suit: #3859d6;
  --suit-2: #92a7ff;
  --metal: #dce5ff;
}
.mascot-ninja .m-humanoid { --skin: #dca781; --suit: #161b28; --suit-2: #3e465a; --metal: #ff4d6d; }
.mascot-bot .m-humanoid { --skin: #d8e4ff; --suit: #64748b; --suit-2: #38bdf8; --metal: #f8fbff; }
.mascot-mechanic .m-humanoid { --skin: #ebb38b; --suit: #c96c1c; --suit-2: #f2b06d; --metal: #ffe5be; }

.m-humanoid .m-shadow {
  left: 34px; top: 68px; width: 38px; height: 8px; border-radius: 50%;
  background: rgba(15,23,42,.18);
}
.m-humanoid .m-head {
  left: 42px; top: 12px; width: 24px; height: 24px;
  border-radius: 12px;
  background: var(--skin);
  border: 2px solid color-mix(in srgb, var(--suit) 18%, transparent);
}
.m-humanoid .m-faceplate {
  left: 2px; top: 6px; width: 20px; height: 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--suit-2) 65%, transparent);
}
.mascot-ninja .m-faceplate { background: #111827; height: 12px; top: 7px; }
.mascot-mechanic .m-faceplate { background: #facc15; top: -2px; height: 8px; border-radius: 8px 8px 2px 2px; }
.m-humanoid .m-eye {
  top: 10px; width: 4px; height: 4px; border-radius: 50%; background: #ffffff;
}
.m-humanoid .m-eye--left { left: 6px; }
.m-humanoid .m-eye--right { right: 6px; }
.m-humanoid .m-torso {
  left: 38px; top: 34px; width: 32px; height: 24px; border-radius: 10px;
  background: var(--suit);
}
.m-humanoid .m-belt {
  left: 40px; top: 52px; width: 28px; height: 4px; border-radius: 999px; background: var(--suit-2);
}
.m-humanoid .m-arm,
.m-humanoid .m-leg {
  background: var(--suit);
  transform-origin: top center;
}
.m-humanoid .m-arm {
  top: 36px; width: 8px; height: 22px; border-radius: 8px;
}
.m-humanoid .m-arm--left { left: 30px; }
.m-humanoid .m-arm--right { right: 30px; }
.m-humanoid .m-leg {
  top: 54px; width: 9px; height: 24px; border-radius: 8px;
}
.m-humanoid .m-leg--left { left: 44px; }
.m-humanoid .m-leg--right { left: 58px; }
.m-humanoid .m-accessory {
  left: 68px; top: 40px; width: 12px; height: 4px; border-radius: 999px; background: var(--suit-2);
}
.mascot-bot .m-accessory {
  top: 8px; left: 50px; width: 3px; height: 8px; background: var(--metal);
  box-shadow: 0 -4px 0 1px var(--suit-2);
}
.mascot-mechanic .m-accessory {
  top: 46px; left: 72px; width: 12px; height: 6px; background: var(--metal);
  transform: rotate(22deg);
}

/* animations */
@keyframes azroxMascotRun {
  from { transform: rotate(18deg); }
  to { transform: rotate(-18deg); }
}
@keyframes azroxMascotBodyRun {
  from { transform: translateY(0); }
  to { transform: translateY(-4px); }
}
@keyframes azroxMascotJump {
  0% { transform: translateY(0); }
  100% { transform: translateY(-22px); }
}
@keyframes azroxMascotClimb {
  from { transform: rotate(-8deg) translateY(0); }
  to { transform: rotate(8deg) translateY(-6px); }
}
@keyframes azroxMascotIdle {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.015); }
}
@keyframes azroxMascotSleep {
  0%,100% { transform: translateY(0) scale(.92); }
  50% { transform: translateY(1px) scale(.95); }
}

/* soften previous flashy borders */
body.theme-fx-neon :is(.panel, .table-wrap, .btn--primary, .theme-card.is-active, .tool-toggle.is-active, .nav__link.is-active, .dash-kpi, .theme-lab__panel) {
  box-shadow:
    0 18px 40px rgba(2, 8, 23, 0.16),
    0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent),
    0 0 14px color-mix(in srgb, var(--glow) 42%, transparent) !important;
}

body.theme-fx-gloss :is(.panel, .table-wrap, .btn, .theme-card, .tool-toggle, .theme-lab__panel, .dash-kpi, .topbar, .sidebar)::before {
  opacity: .72;
}

@media (max-width: 860px) {
  .live-mascot {
    width: 92px;
    height: 68px;
  }
}

/* === azrox_pack_25b_design_lab_polish_live_mascots === */

/* full theme propagation */
html[data-theme] body,
html[data-theme] .content {
  color: var(--text);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 12%, transparent), transparent 32%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 26%),
    var(--bg);
}

html[data-theme] :is(.panel, .table-wrap, .mini-card, .meta-box, .stack-item, .dash-kpi, .dash-list__row, .theme-lab__panel, .theme-card, .tool-toggle, .theme-extra-box, .alert, .empty, .calendar-card, .calendar-month, .profile-card, .subtab, .data-table tbody tr, .comment-cell__text) {
  background: color-mix(in srgb, var(--panel) 92%, transparent) !important;
  border-color: color-mix(in srgb, var(--line) 100%, transparent) !important;
  color: var(--text) !important;
}

html[data-theme] :is(.sidebar, .topbar, .brand, .nav__sub, .theme-marquee, .theme-lab__tabs, .panel__head) {
  border-color: color-mix(in srgb, var(--line) 100%, transparent) !important;
}

html[data-theme] :is(input, textarea, select, button, .btn, .chip, .nav__link, .nav__sublink, .theme-extra-mode, .theme-lab__tab, .hamburger, .theme-switcher__btn, .tool-toggle, .theme-card) {
  color: var(--text);
  border-color: color-mix(in srgb, var(--line) 100%, transparent) !important;
}

html[data-theme] :is(input, textarea, select) {
  background: color-mix(in srgb, var(--panel-soft) 82%, transparent) !important;
}

html[data-theme] :is(th, td, thead, tbody, table, .data-table) {
  border-color: color-mix(in srgb, var(--line) 100%, transparent) !important;
  color: var(--text);
}

html[data-theme] :is(.muted, .dash-list__meta, .topbar__meta, .mini-card__label, .task-sub, .theme-card__desc, .tool-toggle__desc, .theme-note) {
  color: var(--muted) !important;
}

html[data-theme] :is(.badge, .nav-badge) {
  border-color: transparent !important;
}

.theme-card,
.tool-toggle,
.theme-extra-mode,
.btn,
.panel,
.table-wrap,
.sidebar,
.topbar,
.theme-lab__panel {
  overflow: hidden;
  isolation: isolate;
}

.theme-card,
.tool-toggle,
.theme-extra-mode,
.btn,
.panel,
.table-wrap {
  border-radius: 22px;
}

.theme-card:hover,
.tool-toggle:hover,
.theme-extra-mode:hover,
.btn:hover {
  transform: translateY(-1px);
}

.theme-card.is-active,
.tool-toggle.is-active,
.theme-extra-mode.is-active {
  box-shadow:
    0 20px 44px rgba(2, 8, 23, 0.18),
    0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent) inset,
    0 10px 22px color-mix(in srgb, var(--glow) 60%, transparent);
}

.theme-lab__panel {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 15%, transparent), transparent 24%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 14%, transparent), transparent 24%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 97%, white 3%), color-mix(in srgb, var(--panel-strong) 96%, transparent));
}

.theme-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.theme-grid--small {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.theme-tools {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.preview-obsidian { background: linear-gradient(135deg, #090b12, #0f172a 46%, #38bdf8); }
.preview-aurora { background: linear-gradient(135deg, #07111f, #0ea5a4 36%, #8b5cf6 72%, #67e8f9); }
.preview-rose { background: linear-gradient(135deg, #fff7fb, #fbcfe8 52%, #f472b6); }

html[data-theme="obsidian"] {
  --bg: #05070c;
  --panel: #0a1018;
  --panel-soft: #0f1620;
  --panel-strong: #111b27;
  --text: #edf4ff;
  --muted: #95a5bf;
  --line: rgba(110, 138, 175, 0.18);
  --primary: #38bdf8;
  --accent: #60a5fa;
  --glow: rgba(56, 189, 248, 0.28);
}

html[data-theme="aurora"] {
  --bg: #07111f;
  --panel: #0b1727;
  --panel-soft: #112036;
  --panel-strong: #14263d;
  --text: #edf8ff;
  --muted: #96b7c7;
  --line: rgba(122, 199, 211, 0.18);
  --primary: #0ea5a4;
  --accent: #8b5cf6;
  --glow: rgba(103, 232, 249, 0.26);
}

html[data-theme="rose"] {
  --bg: #fff7fb;
  --panel: #ffffff;
  --panel-soft: #fff1f7;
  --panel-strong: #ffe5f1;
  --text: #4b1230;
  --muted: #8b5d73;
  --line: rgba(190, 114, 149, 0.20);
  --primary: #ec4899;
  --accent: #fb7185;
  --glow: rgba(236, 72, 153, 0.20);
}

/* polished extras */
body.theme-fx-neon :is(.panel, .table-wrap, .btn--primary, .theme-card.is-active, .tool-toggle.is-active, .nav__link.is-active, .dash-kpi, .theme-lab__panel) {
  box-shadow:
    0 18px 40px rgba(2, 8, 23, 0.18),
    0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent),
    0 0 22px color-mix(in srgb, var(--glow) 58%, transparent) !important;
}

body.theme-fx-gloss :is(.panel, .table-wrap, .btn, .theme-card, .tool-toggle, .theme-lab__panel, .dash-kpi, .topbar, .sidebar)::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 12%, rgba(255,255,255,.055) 28%, rgba(255,255,255,.02) 38%, transparent 54%);
  transform: translateX(-140%);
  animation: azroxSilkGloss 8.5s linear infinite;
  pointer-events: none;
}

@keyframes azroxSilkGloss {
  0% { transform: translateX(-140%); }
  55%, 100% { transform: translateX(140%); }
}

body.theme-fx-sparkles::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.22) 0 1px, transparent 1.8px),
    radial-gradient(circle at 25% 75%, rgba(255,255,255,.16) 0 1px, transparent 1.8px),
    radial-gradient(circle at 48% 42%, rgba(255,255,255,.18) 0 1px, transparent 1.8px),
    radial-gradient(circle at 72% 24%, rgba(255,255,255,.22) 0 1px, transparent 1.8px),
    radial-gradient(circle at 84% 66%, rgba(255,255,255,.18) 0 1px, transparent 1.8px);
  animation: azroxSparklesGentle 16s linear infinite;
}

@keyframes azroxSparklesGentle {
  0% { transform: translateY(0); }
  50% { transform: translateY(5px); }
  100% { transform: translateY(0); }
}

body.theme-fx-scanlines::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.04) 0px,
      rgba(255,255,255,.04) 1px,
      transparent 1px,
      transparent 4px
    );
  mix-blend-mode: soft-light;
}

body.theme-fx-pulse :is(.btn--primary, .nav-badge, .dash-kpi__value, .badge--warn, .badge--danger, .theme-card.is-active, .tool-toggle.is-active) {
  animation: azroxPulse 2.6s ease-in-out infinite;
}

@keyframes azroxPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.theme-floaters {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 44;
}

.theme-floater {
  position: absolute;
  left: var(--f-left);
  bottom: -24px;
  font-size: 14px;
  color: color-mix(in srgb, var(--primary) 70%, white 30%);
  opacity: .20;
  animation: azroxFloatUp var(--f-duration) linear infinite;
  animation-delay: var(--f-delay);
}

@keyframes azroxFloatUp {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  15% { opacity: .22; }
  85% { opacity: .20; }
  100% { transform: translateY(-110vh) rotate(220deg); opacity: 0; }
}

body.theme-fx-tickerchips .theme-marquee {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--panel-soft) 88%, transparent), color-mix(in srgb, var(--panel) 92%, transparent));
  border-style: dashed;
}

body.theme-fx-tickerchips .theme-marquee__track {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  white-space: nowrap;
}

/* living mascots */
.mascot-layer {
  position: fixed;
  inset: 0;
  z-index: 56;
  pointer-events: none;
}

.mascot {
  position: fixed;
  left: 24px;
  top: 24px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  transition:
    left 1.15s cubic-bezier(.22,.84,.27,1.02),
    top 1.15s cubic-bezier(.22,.84,.27,1.02),
    transform .45s ease,
    opacity .35s ease;
  will-change: left, top, transform, opacity;
}

.mascot--secondary { transition-duration: 1.35s; }
.mascot--third { transition-duration: 1.55s; }

.mascot__body {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  font-size: 28px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 26%, transparent), color-mix(in srgb, var(--accent) 14%, transparent));
  border: 1px solid color-mix(in srgb, var(--line) 100%, transparent);
  box-shadow:
    0 18px 36px rgba(2, 8, 23, 0.18),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.mascot__bubble {
  max-width: 220px;
  padding: 10px 12px;
  border-radius: 18px 18px 18px 9px;
  background: color-mix(in srgb, var(--panel) 96%, white 4%);
  border: 1px solid color-mix(in srgb, var(--line) 100%, transparent);
  box-shadow: 0 14px 30px rgba(2, 8, 23, 0.14);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.mascot.is-hide {
  opacity: .12;
  transform: scale(.62) translateY(8px);
}

.mascot.is-freeze {
  transform: scale(1);
}

.mascot.is-jump {
  transform: translateY(-18px) rotate(-4deg);
}

.mascot.is-cling {
  transform: translateY(-8px) rotate(6deg);
}

.theme-lab__body::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.content::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.theme-lab__body::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--panel-soft) 68%, transparent);
  border-radius: 999px;
}

.theme-lab__body::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--panel-soft) 68%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 74%, white 26%), color-mix(in srgb, var(--accent) 70%, transparent));
}

@media (max-width: 1180px) {
  .theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .theme-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .theme-grid,
  .theme-grid--small,
  .theme-tools {
    grid-template-columns: 1fr;
  }
  .mascot--third {
    display: none;
  }
}


/* === azrox_upgrade_theme_audit_fix_v1 === */
.dash-hero__main,
.dash-hero__side,
.dash-kpi,
.dash-list__row {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--panel) 96%, white 4%),
    color-mix(in srgb, var(--panel-strong) 92%, transparent 8%)
  );
  border-color: color-mix(in srgb, var(--line) 100%, transparent);
  box-shadow: 0 22px 44px color-mix(in srgb, var(--glow, rgba(2, 8, 23, 0.12)) 68%, transparent);
}

.dash-hero__label {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--primary) 20%, transparent);
  color: color-mix(in srgb, var(--text) 88%, var(--primary) 12%);
}

.dash-mini-stat {
  background: color-mix(in srgb, var(--panel-soft) 84%, transparent);
  border-color: color-mix(in srgb, var(--line) 100%, transparent);
}

.dash-mini-stat strong,
.dash-kpi__value,
.dash-list__title,
.dash-list__side {
  color: var(--text);
}

.dash-list__side--warn {
  color: var(--warning, #f59e0b);
}

.cal-title-line--compact {
  min-height: 28px;
}

.cal-view-switch,
.cal-day,
.cal-column,
.cal-row,
.cal-mini-month,
.cal-mini-day {
  background: color-mix(in srgb, var(--panel-soft) 76%, transparent);
  border-color: color-mix(in srgb, var(--line) 100%, transparent);
}

.cal-view-switch__item.is-active {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent);
}

.cal-day.is-today,
.cal-column.is-today,
.cal-mini-day.is-today {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 48%, transparent);
}

.cal-row__edit {
  border-top-color: color-mix(in srgb, var(--line) 100%, transparent);
}

.cal-mark--more,
.cal-mini-more {
  color: var(--muted);
}

.cal-meta-pill {
  background: color-mix(in srgb, var(--panel) 74%, white 26%);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--line) 100%, transparent);
}

.cal-meta-pill--soft {
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}

html[data-theme="light"] .dash-hero__main,
html[data-theme="light"] .dash-hero__side,
html[data-theme="light"] .dash-kpi,
html[data-theme="light"] .dash-list__row,
html[data-theme="sand"] .dash-hero__main,
html[data-theme="sand"] .dash-hero__side,
html[data-theme="sand"] .dash-kpi,
html[data-theme="sand"] .dash-list__row,
html[data-theme="arctic"] .dash-hero__main,
html[data-theme="arctic"] .dash-hero__side,
html[data-theme="arctic"] .dash-kpi,
html[data-theme="arctic"] .dash-list__row,
html[data-theme="rose"] .dash-hero__main,
html[data-theme="rose"] .dash-hero__side,
html[data-theme="rose"] .dash-kpi,
html[data-theme="rose"] .dash-list__row {
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .cal-view-switch,
html[data-theme="light"] .cal-day,
html[data-theme="light"] .cal-column,
html[data-theme="light"] .cal-row,
html[data-theme="sand"] .cal-view-switch,
html[data-theme="sand"] .cal-day,
html[data-theme="sand"] .cal-column,
html[data-theme="sand"] .cal-row,
html[data-theme="arctic"] .cal-view-switch,
html[data-theme="arctic"] .cal-day,
html[data-theme="arctic"] .cal-column,
html[data-theme="arctic"] .cal-row,
html[data-theme="rose"] .cal-view-switch,
html[data-theme="rose"] .cal-day,
html[data-theme="rose"] .cal-column,
html[data-theme="rose"] .cal-row {
  background: color-mix(in srgb, var(--panel) 96%, white 4%);
}

/* === azrox_pack_31_character_studio_premium_live_pets === */

.mascot-studio {
  display: grid;
  gap: 18px;
}

.mascot-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
  gap: 18px;
  padding: 20px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--line) 100%, transparent);
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--primary) 16%, transparent) 0, transparent 42%),
    radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--accent) 18%, transparent) 0, transparent 40%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 90%, black 10%), color-mix(in srgb, var(--panel-soft) 92%, black 8%));
  box-shadow: 0 30px 70px rgba(2, 8, 23, .24);
}

.mascot-hero__copy {
  display: grid;
  align-content: start;
  gap: 12px;
}

.mascot-hero__eyebrow,
.mascot-console__eyebrow {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 74%, var(--muted));
  font-weight: 900;
}

.mascot-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: color-mix(in srgb, var(--text) 92%, transparent);
  background: color-mix(in srgb, var(--panel-soft) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 100%, transparent);
}

.mascot-hero h3,
.mascot-console h4 {
  margin: 0;
  font-size: 28px;
  line-height: 1.05;
}

.mascot-hero__desc,
.mascot-console__sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.mascot-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mascot-hero__tag {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--text) 88%, transparent);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 100%, transparent);
}

.mascot-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.mascot-hero__stat {
  min-height: 84px;
  padding: 14px 16px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--panel-soft) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 100%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.mascot-hero__stat-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 800;
}

.mascot-hero__stat strong {
  display: block;
  font-size: 14px;
  line-height: 1.35;
}

.mascot-stage {
  --stage-accent: color-mix(in srgb, var(--accent) 56%, transparent);
  position: relative;
  min-height: 310px;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--line) 100%, transparent);
  background:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 56%),
    radial-gradient(circle at 24% 22%, rgba(255,255,255,.08), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 85%, black 15%) 0%, color-mix(in srgb, var(--panel-soft) 84%, black 16%) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 46px rgba(2,8,23,.24);
}

.mascot-stage__lights,
.mascot-stage__mesh,
.mascot-stage__ring,
.mascot-stage__platform,
.mascot-stage__preview,
.mascot-stage__chips {
  position: absolute;
}

.mascot-stage__lights {
  inset: 0;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--stage-accent) 72%, white 28%) 0, transparent 38%),
    radial-gradient(circle at 10% 8%, rgba(255,255,255,.16), transparent 24%),
    radial-gradient(circle at 92% 10%, rgba(255,255,255,.14), transparent 24%);
  opacity: .9;
}

.mascot-stage__mesh {
  inset: 14px;
  border-radius: 24px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 88%);
  opacity: .45;
}

.mascot-stage__ring {
  left: 50%;
  top: 46%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--stage-accent) 78%, transparent);
  box-shadow:
    0 0 0 12px color-mix(in srgb, var(--stage-accent) 8%, transparent),
    0 0 42px color-mix(in srgb, var(--stage-accent) 26%, transparent);
  opacity: .74;
}

.mascot-stage__preview {
  left: 50%;
  bottom: 54px;
  width: 220px;
  height: 176px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
}

.mascot-stage__platform {
  left: 50%;
  bottom: 28px;
  width: 248px;
  height: 50px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--stage-accent) 34%, white 6%), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.02));
  border: 1px solid color-mix(in srgb, var(--stage-accent) 54%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--stage-accent) 22%, transparent);
}

.mascot-stage__chips {
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mascot-stage__chip,
.mascot-card__badge,
.mascot-card__meta,
.mascot-option {
  border-radius: 999px;
  font-weight: 800;
}

.mascot-stage__chip {
  padding: 8px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(7, 12, 22, .58);
  color: color-mix(in srgb, var(--text) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 100%, transparent);
  backdrop-filter: blur(10px);
}

.mascot-stage[data-mascot-stage="none"] {
  --stage-accent: rgba(148, 163, 184, .55);
}

.mascot-stage[data-mascot-stage="bot"] {
  --stage-accent: rgba(56, 189, 248, .82);
}

.mascot-stage[data-mascot-stage="fox"] {
  --stage-accent: rgba(244, 136, 57, .88);
}

.mascot-stage[data-mascot-stage="cat"] {
  --stage-accent: rgba(168, 185, 207, .88);
}

.mascot-stage[data-mascot-stage="ninja"] {
  --stage-accent: rgba(255, 77, 109, .88);
}

.mascot-stage[data-mascot-stage="mechanic"] {
  --stage-accent: rgba(250, 204, 21, .82);
}

.mascot-collection {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.mascot-card.mascot-card--premium {
  position: relative;
  min-height: 268px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 18px;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 16%, transparent), transparent 34%),
    linear-gradient(165deg, color-mix(in srgb, var(--panel) 92%, black 8%), color-mix(in srgb, var(--panel-soft) 88%, black 12%));
}

.mascot-card.mascot-card--premium::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(255,255,255,.1), transparent 34%, transparent 68%, rgba(255,255,255,.03));
  opacity: .48;
  pointer-events: none;
}

.mascot-card.is-active {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
  box-shadow: 0 24px 54px rgba(2,8,23,.22), 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), 0 0 28px color-mix(in srgb, var(--accent) 18%, transparent);
}

.mascot-card__badge {
  position: relative;
  z-index: 2;
  margin-bottom: 12px;
  padding: 7px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: color-mix(in srgb, var(--text) 86%, transparent);
  background: color-mix(in srgb, var(--panel-soft) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 100%, transparent);
}

.mascot-card__art {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 110px;
  margin-bottom: 12px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 66%);
  border: 1px solid color-mix(in srgb, var(--line) 100%, transparent);
  overflow: hidden;
}

.mascot-card__art--none {
  font-size: 34px;
  color: var(--muted);
  font-weight: 900;
}

.mascot-card__meta {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 9px 12px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 82%, transparent);
  background: color-mix(in srgb, var(--panel-soft) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 100%, transparent);
}

.mascot-console {
  display: grid;
  gap: 16px;
  padding: 20px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--line) 100%, transparent);
  background:
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%),
    linear-gradient(150deg, color-mix(in srgb, var(--panel) 90%, black 10%), color-mix(in srgb, var(--panel-soft) 84%, black 16%));
}

.mascot-console__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.mascot-console__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mascot-control {
  padding: 16px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--line) 100%, transparent);
  background: color-mix(in srgb, var(--panel-soft) 80%, transparent);
}

.mascot-control--wide {
  grid-column: 1 / -1;
}

.mascot-control__label {
  margin-bottom: 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 900;
}

.mascot-control__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mascot-option {
  padding: 10px 14px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--line) 100%, transparent);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--text);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.mascot-option:hover,
.mascot-option.is-active {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 16%, transparent);
}

.mascot-studio__note {
  margin: 0;
}

.live-mascot-shell {
  --travel-ms: 2400ms;
  position: fixed;
  left: 18px;
  top: 18px;
  z-index: 60;
  width: 144px;
  height: 116px;
  pointer-events: none;
  transition:
    left var(--travel-ms) cubic-bezier(.22,.84,.27,1.02),
    top var(--travel-ms) cubic-bezier(.22,.84,.27,1.02),
    opacity .32s ease,
    filter .32s ease;
}

.live-mascot-shell.is-hidden {
  opacity: 0;
  filter: saturate(.72) blur(2px);
}

.live-mascot-shell.is-left .mascot-figure {
  transform: scaleX(-1);
}

.live-mascot-bubble {
  position: absolute;
  left: -12px;
  top: -38px;
  max-width: 220px;
  padding: 10px 12px;
  border-radius: 18px 18px 18px 10px;
  background: color-mix(in srgb, var(--panel) 90%, white 10%);
  border: 1px solid color-mix(in srgb, var(--line) 100%, transparent);
  box-shadow: 0 16px 34px rgba(2,8,23,.22);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
  opacity: 0;
  transform: translateY(10px) scale(.96);
  transition: opacity .2s ease, transform .2s ease;
}

.live-mascot-bubble.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.mascot-figure {
  position: relative;
  width: 144px;
  height: 108px;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 26px rgba(2,8,23,.22));
}

.live-mascot,
.mascot-preview-figure,
.mascot-card-figure {
  position: relative;
}

.mascot-preview-figure {
  width: 168px;
  height: 126px;
}

.mascot-card-figure {
  width: 112px;
  height: 84px;
}

.mascot-preview-empty {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 30px;
  font-size: 34px;
  font-weight: 900;
  color: color-mix(in srgb, var(--muted) 78%, transparent);
  border: 1px dashed color-mix(in srgb, var(--line) 100%, transparent);
  background: color-mix(in srgb, var(--panel-soft) 84%, transparent);
}

.mascot-figure .mcore,
.mascot-figure .mcore * {
  position: absolute;
  box-sizing: border-box;
}

.mascot-figure .m-eye {
  animation: azxMascotBlink 5.8s linear infinite;
}

.mascot-figure[data-action="idle"] {
  animation: azxMascotFloatIdle 2.8s ease-in-out infinite;
}

.mascot-figure[data-action="run"] {
  animation: azxMascotBodyStep .42s ease-in-out infinite alternate;
}

.mascot-figure[data-action="run"] .m-leg--1,
.mascot-figure[data-action="run"] .m-leg--3,
.mascot-figure[data-action="run"] .m-arm--left,
.mascot-figure[data-action="run"] .m-tail {
  animation: azxMascotStrideA .42s ease-in-out infinite alternate;
}

.mascot-figure[data-action="run"] .m-leg--2,
.mascot-figure[data-action="run"] .m-leg--4,
.mascot-figure[data-action="run"] .m-arm--right {
  animation: azxMascotStrideB .42s ease-in-out infinite alternate;
}

.mascot-figure[data-action="jump"] {
  animation: azxMascotJump .72s ease-out infinite alternate;
}

.mascot-figure[data-action="climb"] {
  animation: azxMascotClimb 1s ease-in-out infinite alternate;
}

.mascot-figure[data-action="sit"] .m-body,
.mascot-figure[data-action="sit"] .m-torso {
  transform: scaleY(.92);
  transform-origin: center bottom;
}

.mascot-figure[data-action="sit"] .m-leg {
  height: 18px !important;
  top: auto !important;
  bottom: 8px !important;
}

.mascot-figure[data-action="sleep"] {
  animation: azxMascotSleep 3.3s ease-in-out infinite;
}

.mascot-figure[data-action="sleep"] .m-tail {
  transform: rotate(84deg) !important;
}

.mascot-figure[data-action="sleep"] .m-head {
  transform: rotate(26deg) scale(.94);
  left: 66px !important;
  top: 40px !important;
}

.mascot-figure[data-action="sleep"] .m-body {
  width: 52px !important;
  height: 34px !important;
  border-radius: 50% !important;
  left: 34px !important;
  top: 38px !important;
}

.mascot-figure[data-action="sleep"] .m-leg {
  opacity: 0;
}

.mascot-figure[data-action="hide"] {
  opacity: .4;
  transform: translateY(8px) scale(.84);
}

.mascot-figure[data-action="hide"] .m-head {
  top: 26px !important;
}

.mascot-figure[data-action="hide"] .m-body,
.mascot-figure[data-action="hide"] .m-torso {
  opacity: .18;
}

.m-animal {
  inset: 0;
  --fur: #a7b1c4;
  --fur-2: #dce4f4;
  --nose: #1e293b;
}

.mascot-cat .m-animal {
  --fur: #98a8bd;
  --fur-2: #dbe5f2;
  --nose: #1b2233;
}

.mascot-fox .m-animal {
  --fur: #e47f37;
  --fur-2: #fff0e2;
  --nose: #52270d;
}

.m-animal .m-body {
  left: 32px;
  top: 36px;
  width: 58px;
  height: 30px;
  border-radius: 20px 24px 18px 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fur) 94%, white 6%), color-mix(in srgb, var(--fur) 88%, black 12%));
  box-shadow: inset 0 -6px 0 rgba(255,255,255,.08);
}

.m-animal .m-body-spot {
  left: 50px;
  top: 42px;
  width: 18px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fur-2) 72%, transparent);
  opacity: .6;
}

.m-animal .m-head {
  left: 74px;
  top: 22px;
  width: 34px;
  height: 30px;
  border-radius: 16px 17px 14px 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fur) 96%, white 4%), color-mix(in srgb, var(--fur) 88%, black 12%));
  box-shadow: inset 0 -4px 0 rgba(255,255,255,.08);
}

.m-animal .m-ear {
  top: -10px;
  width: 12px;
  height: 14px;
  background: var(--fur);
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

.m-animal .m-ear--left {
  left: 2px;
  transform: rotate(-8deg);
}

.m-animal .m-ear--right {
  right: 2px;
  transform: rotate(8deg);
}

.m-animal .m-eye {
  top: 12px;
  width: 5px;
  height: 6px;
  border-radius: 50%;
  background: #101826;
}

.m-animal .m-eye--left { left: 9px; }
.m-animal .m-eye--right { right: 9px; }

.m-animal .m-nose {
  left: 14px;
  top: 18px;
  width: 7px;
  height: 5px;
  border-radius: 999px;
  background: var(--nose);
}

.m-animal .m-mouth {
  left: 13px;
  top: 22px;
  width: 10px;
  height: 4px;
  border-bottom: 1.5px solid color-mix(in srgb, var(--nose) 76%, transparent);
  border-radius: 0 0 8px 8px;
}

.m-animal .m-tail {
  left: 14px;
  top: 28px;
  width: 36px;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fur) 92%, black 8%), color-mix(in srgb, var(--fur-2) 26%, var(--fur)));
  transform-origin: 30px center;
}

.mascot-fox .m-tail {
  width: 40px;
  height: 13px;
  box-shadow: inset -8px 0 0 var(--fur-2);
}

.m-animal .m-leg {
  top: 58px;
  width: 8px;
  height: 22px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--fur) 80%, #0f172a 20%);
  transform-origin: top center;
}

.m-animal .m-leg--1 { left: 40px; }
.m-animal .m-leg--2 { left: 56px; }
.m-animal .m-leg--3 { left: 72px; }
.m-animal .m-leg--4 { left: 88px; }

.m-humanoid {
  inset: 0;
  --skin: #dca781;
  --suit: #161b28;
  --suit-2: #3e465a;
  --metal: #f1f5f9;
}

.mascot-ninja .m-humanoid { --skin: #dca781; --suit: #161b28; --suit-2: #3e465a; --metal: #ff4d6d; }
.mascot-bot .m-humanoid { --skin: #d8e4ff; --suit: #64748b; --suit-2: #38bdf8; --metal: #f8fbff; }
.mascot-mechanic .m-humanoid { --skin: #ebb38b; --suit: #c96c1c; --suit-2: #f2b06d; --metal: #ffe5be; }

.m-humanoid .m-shadow {
  left: 38px;
  bottom: 8px;
  width: 56px;
  height: 14px;
  border-radius: 50%;
  background: rgba(15, 23, 42, .18);
}

.m-humanoid .m-head {
  left: 52px;
  top: 18px;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--skin) 96%, white 4%), color-mix(in srgb, var(--skin) 90%, black 10%));
  box-shadow: inset 0 -5px 0 rgba(255,255,255,.08);
}

.m-humanoid .m-faceplate {
  left: 4px;
  top: 8px;
  width: 26px;
  height: 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--suit) 90%, black 10%);
}

.mascot-bot .m-faceplate {
  background: linear-gradient(90deg, #0f172a, #38bdf8);
}

.mascot-mechanic .m-faceplate {
  top: -2px;
  height: 8px;
  border-radius: 8px 8px 2px 2px;
  background: #facc15;
}

.m-humanoid .m-eye {
  top: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--metal);
  box-shadow: 0 0 8px color-mix(in srgb, var(--metal) 42%, transparent);
}

.m-humanoid .m-eye--left { left: 7px; }
.m-humanoid .m-eye--right { right: 7px; }

.m-humanoid .m-torso {
  left: 46px;
  top: 48px;
  width: 46px;
  height: 28px;
  border-radius: 16px 16px 12px 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--suit) 94%, white 6%), color-mix(in srgb, var(--suit) 86%, black 14%));
}

.m-humanoid .m-belt {
  left: 50px;
  top: 69px;
  width: 38px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--suit-2) 88%, white 12%);
}

.m-humanoid .m-arm,
.m-humanoid .m-leg {
  background: linear-gradient(180deg, color-mix(in srgb, var(--suit-2) 94%, white 6%), color-mix(in srgb, var(--suit) 78%, black 22%));
  transform-origin: top center;
}

.m-humanoid .m-arm {
  top: 50px;
  width: 10px;
  height: 26px;
  border-radius: 8px;
}

.m-humanoid .m-arm--left { left: 40px; }
.m-humanoid .m-arm--right { right: 40px; }

.m-humanoid .m-leg {
  top: 72px;
  width: 11px;
  height: 26px;
  border-radius: 8px;
}

.m-humanoid .m-leg--left { left: 54px; }
.m-humanoid .m-leg--right { right: 54px; }

.m-humanoid .m-accessory {
  right: 28px;
  top: 62px;
  width: 20px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--metal) 72%, transparent);
}

.mascot-bot .m-accessory {
  top: 16px;
  right: 54px;
  width: 10px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(56,189,248,.4));
}

.mascot-mechanic .m-accessory {
  right: 24px;
  top: 58px;
  width: 22px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b, #fcd34d);
}

@keyframes azxMascotStrideA {
  from { transform: rotate(-14deg) translateY(0); }
  to { transform: rotate(16deg) translateY(2px); }
}

@keyframes azxMascotStrideB {
  from { transform: rotate(14deg) translateY(2px); }
  to { transform: rotate(-16deg) translateY(0); }
}

@keyframes azxMascotBodyStep {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}

@keyframes azxMascotFloatIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes azxMascotJump {
  0% { transform: translateY(0) scaleY(1); }
  35% { transform: translateY(-18px) scaleY(.96); }
  100% { transform: translateY(-4px) scaleY(1.02); }
}

@keyframes azxMascotClimb {
  0% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
  100% { transform: translateY(-2px) rotate(-1deg); }
}

@keyframes azxMascotSleep {
  0%, 100% { transform: translateY(0) scale(.98); }
  50% { transform: translateY(-3px) scale(1); }
}

@keyframes azxMascotBlink {
  0%, 46%, 48%, 100% { transform: scaleY(1); }
  47% { transform: scaleY(.15); }
}

@media (max-width: 1180px) {
  .mascot-hero {
    grid-template-columns: 1fr;
  }

  .mascot-collection {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .mascot-hero__stats,
  .mascot-console__grid,
  .mascot-collection {
    grid-template-columns: 1fr;
  }

  .mascot-console__head {
    flex-direction: column;
  }
}

.live-mascot {
  left: 0;
  top: 0;
  width: 144px;
  height: 108px;
  transition: none;
}

/* === azrox_pack_31b_character_studio_grounded_fix === */
.theme-lab__body {
  scroll-padding-top: 18px;
}

.mascot-studio {
  gap: 20px;
}

.mascot-hero {
  align-items: stretch;
}

.mascot-console__head {
  align-items: flex-start;
}

.mascot-collection {
  align-items: stretch;
}

.mascot-card.mascot-card--premium {
  display: grid;
  grid-template-rows: auto 118px auto 1fr auto;
  gap: 10px;
  min-height: 326px;
  padding: 18px 18px 16px;
}

.mascot-card__badge,
.mascot-card__art,
.mascot-card__meta,
.mascot-card .theme-card__title,
.mascot-card .theme-card__desc {
  margin: 0;
}

.mascot-card .theme-card__title {
  position: relative;
  z-index: 2;
  display: block;
  font-size: 15px;
  line-height: 1.2;
}

.mascot-card .theme-card__desc {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  min-height: 52px;
  font-size: 12px;
  line-height: 1.42;
}

.mascot-card__meta {
  align-self: end;
}

.mascot-stage__chips {
  row-gap: 8px;
}

.live-mascot-shell,
.live-mascot {
  will-change: left, top, transform;
}

.live-mascot-shell {
  transition: opacity .28s ease, filter .28s ease;
}

.live-mascot {
  transition: transform .16s linear, filter .24s ease, opacity .24s ease;
}

.live-mascot[data-action="run"] {
  animation: azroxMascotBodyRunGround .34s linear infinite alternate;
}

.live-mascot[data-action="run"] .m-leg,
.live-mascot[data-action="run"] .m-arm {
  animation-duration: .34s;
  animation-timing-function: linear;
}

.live-mascot[data-action="idle"],
.mascot-figure[data-action="idle"] {
  animation-name: azxMascotIdleGround;
}

.live-mascot[data-action="jump"],
.mascot-figure[data-action="jump"] {
  animation-duration: .52s;
}

.mascot-figure[data-action="run"] {
  animation-name: azxMascotBodyRunGround;
  animation-duration: .34s;
  animation-timing-function: linear;
}

.mascot-figure[data-action="run"] .m-leg--1,
.mascot-figure[data-action="run"] .m-leg--3,
.mascot-figure[data-action="run"] .m-arm--left,
.mascot-figure[data-action="run"] .m-tail {
  animation-name: azxMascotStrideGroundA;
  animation-duration: .34s;
  animation-timing-function: linear;
}

.mascot-figure[data-action="run"] .m-leg--2,
.mascot-figure[data-action="run"] .m-leg--4,
.mascot-figure[data-action="run"] .m-arm--right {
  animation-name: azxMascotStrideGroundB;
  animation-duration: .34s;
  animation-timing-function: linear;
}

.m-animal {
  inset: 0;
}

.m-animal .m-shadow {
  left: 26px;
  top: 66px;
  width: 52px;
  height: 10px;
  border-radius: 50%;
  background: rgba(15, 23, 42, .16);
}

.m-animal .m-body {
  left: 30px;
  top: 28px;
  width: 50px;
  height: 28px;
  border-radius: 18px 20px 17px 16px;
}

.m-animal .m-body-spot {
  left: 47px;
  top: 35px;
}

.m-animal .m-head {
  left: 73px;
  top: 17px;
  width: 28px;
  height: 24px;
}

.m-animal .m-tail {
  left: 11px;
  top: 30px;
  width: 28px;
  height: 8px;
  transform-origin: 24px center;
}

.m-animal .m-leg {
  top: 52px;
  width: 7px;
  height: 18px;
  border-radius: 5px;
}

.m-animal .m-leg--1 { left: 36px; }
.m-animal .m-leg--2 { left: 48px; }
.m-animal .m-leg--3 { left: 62px; }
.m-animal .m-leg--4 { left: 75px; }

.m-humanoid .m-shadow {
  left: 34px;
  top: 70px;
  width: 40px;
  height: 10px;
}

.m-humanoid .m-head {
  left: 44px;
  top: 11px;
  width: 24px;
  height: 24px;
}

.m-humanoid .m-torso {
  left: 39px;
  top: 34px;
  width: 34px;
  height: 24px;
  border-radius: 10px;
}

.m-humanoid .m-arm {
  top: 37px;
  width: 7px;
  height: 20px;
  border-radius: 7px;
}

.m-humanoid .m-arm--left { left: 32px; }
.m-humanoid .m-arm--right { left: 73px; }

.m-humanoid .m-leg {
  top: 55px;
  width: 8px;
  height: 24px;
  border-radius: 7px;
}

.m-humanoid .m-leg--left { left: 47px; }
.m-humanoid .m-leg--right { left: 58px; }

.m-humanoid .m-accessory {
  left: 73px;
  top: 45px;
}

.mascot-figure[data-action="sleep"] .m-leg,
.live-mascot[data-action="sleep"] .m-leg {
  opacity: .06;
}

.mascot-figure[data-action="hide"] .m-body,
.mascot-figure[data-action="hide"] .m-torso,
.live-mascot[data-action="hide"] .m-body,
.live-mascot[data-action="hide"] .m-torso {
  opacity: .42;
}

@keyframes azxMascotStrideGroundA {
  from { transform: rotate(-12deg) translateY(0); }
  to { transform: rotate(12deg) translateY(1px); }
}

@keyframes azxMascotStrideGroundB {
  from { transform: rotate(12deg) translateY(1px); }
  to { transform: rotate(-12deg) translateY(0); }
}

@keyframes azxMascotBodyRunGround {
  from { transform: translateY(0); }
  to { transform: translateY(-2px); }
}

@keyframes azxMascotIdleGround {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

@keyframes azroxMascotBodyRunGround {
  from { transform: translateY(0); }
  to { transform: translateY(-2px); }
}

@media (max-width: 1180px) {
  .mascot-card.mascot-card--premium {
    min-height: 312px;
  }

  .mascot-console__head {
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .mascot-card.mascot-card--premium {
    min-height: auto;
  }

  .mascot-card .theme-card__desc {
    -webkit-line-clamp: 4;
  }
}

/* === azrox_pack_31c_grounded_cursor_rebuild === */
.mascot-collection {
  align-items: stretch;
}

.mascot-card.mascot-card--premium {
  display: grid;
  grid-template-rows: auto 128px auto minmax(4.8em, auto) auto;
  row-gap: 12px;
  min-height: 332px;
  align-content: start;
}

.mascot-card__badge {
  width: max-content;
  margin-bottom: 0;
}

.mascot-card__art {
  min-height: 128px;
  margin-bottom: 0;
  overflow: hidden;
}

.mascot-card .theme-card__title {
  margin: 0;
  line-height: 1.08;
}

.mascot-card .theme-card__desc {
  margin: 0;
  min-height: 4.8em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mascot-card__meta {
  margin-top: 0;
  align-self: end;
  width: max-content;
  max-width: 100%;
}

.mascot-preview-figure,
.mascot-card-figure {
  width: 144px;
  height: 108px;
  transform-origin: center bottom;
}

.mascot-preview-figure {
  scale: 1.06;
}

.mascot-card-figure {
  scale: 0.76;
}

.live-mascot-shell {
  width: 148px;
  height: 112px;
  will-change: left, top;
  transition: opacity .28s ease, filter .28s ease;
}

.live-mascot-bubble {
  left: -8px;
  top: -42px;
}

.mascot-figure {
  filter: drop-shadow(0 14px 22px rgba(2,8,23,.18));
}

.mascot-figure[data-action="run"] {
  animation: azxMascotBodyStep .52s linear infinite alternate;
}

.mascot-figure[data-action="run"] .m-leg--1,
.mascot-figure[data-action="run"] .m-leg--3,
.mascot-figure[data-action="run"] .m-arm--left,
.mascot-figure[data-action="run"] .m-tail {
  animation: azxMascotStrideA .52s linear infinite alternate;
}

.mascot-figure[data-action="run"] .m-leg--2,
.mascot-figure[data-action="run"] .m-leg--4,
.mascot-figure[data-action="run"] .m-arm--right {
  animation: azxMascotStrideB .52s linear infinite alternate;
}

.mascot-figure[data-action="prowl"] {
  animation: azxMascotProwlBody .66s linear infinite alternate;
}

.mascot-figure[data-action="prowl"] .m-leg--1,
.mascot-figure[data-action="prowl"] .m-leg--3,
.mascot-figure[data-action="prowl"] .m-arm--left,
.mascot-figure[data-action="prowl"] .m-tail {
  animation: azxMascotProwlA .66s linear infinite alternate;
}

.mascot-figure[data-action="prowl"] .m-leg--2,
.mascot-figure[data-action="prowl"] .m-leg--4,
.mascot-figure[data-action="prowl"] .m-arm--right {
  animation: azxMascotProwlB .66s linear infinite alternate;
}

.mascot-figure[data-action="prowl"] .m-body,
.mascot-figure[data-action="prowl"] .m-torso {
  top: 38px;
}

.mascot-figure[data-action="jump"] {
  animation: azxMascotJump .68s ease-out infinite alternate;
}

.m-animal .m-leg {
  top: 56px;
  height: 20px;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.07);
}

.m-humanoid .m-arm {
  top: 49px;
  height: 24px;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.07);
}

.m-humanoid .m-leg {
  top: 70px;
  height: 24px;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.07);
}

@keyframes azxMascotStrideA {
  from { transform: rotate(-9deg) translateY(0); }
  to { transform: rotate(11deg) translateY(1px); }
}

@keyframes azxMascotStrideB {
  from { transform: rotate(9deg) translateY(1px); }
  to { transform: rotate(-11deg) translateY(0); }
}

@keyframes azxMascotBodyStep {
  from { transform: translateY(0); }
  to { transform: translateY(-1.5px); }
}

@keyframes azxMascotProwlA {
  from { transform: rotate(-6deg) translateY(1px); }
  to { transform: rotate(7deg) translateY(0); }
}

@keyframes azxMascotProwlB {
  from { transform: rotate(6deg) translateY(0); }
  to { transform: rotate(-7deg) translateY(1px); }
}

@keyframes azxMascotProwlBody {
  from { transform: translateY(0) scaleY(.99); }
  to { transform: translateY(1px) scaleY(.97); }
}

@keyframes azxMascotJump {
  0% { transform: translateY(0) scaleY(1); }
  35% { transform: translateY(-14px) scaleY(.97); }
  100% { transform: translateY(-3px) scaleY(1.01); }
}

@media (max-width: 1180px) {
  .mascot-card.mascot-card--premium {
    min-height: 316px;
  }
}

@media (max-width: 860px) {
  .mascot-card.mascot-card--premium {
    min-height: 300px;
  }
}


/* === azrox_pack_32_premium_svg_grounded_humor_v4 === */
.mascot-studio {
  display: grid;
  gap: 22px;
}

.mascot-hero {
  display: grid;
  grid-template-columns: minmax(320px, 1.1fr) minmax(360px, 0.95fr);
  gap: 20px;
  align-items: stretch;
}

.mascot-hero__copy,
.mascot-stage,
.mascot-console,
.mascot-card {
  overflow: hidden;
}

.mascot-stage {
  min-height: 298px;
}

.mascot-stage__preview {
  min-height: 206px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mascot-collection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.mascot-card {
  min-height: 312px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px;
}

.mascot-card__art {
  width: 100%;
  min-height: 162px;
  height: 162px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px 10px 6px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 35%, rgba(67, 145, 255, 0.24), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  box-shadow: inset 0 0 0 1px rgba(104, 156, 238, 0.16);
}

.mascot-card .theme-card__title {
  display: block;
  min-height: 1.5em;
}

.mascot-card .theme-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.42;
  min-height: 4.2em;
  max-width: 100%;
}

.mascot-card__meta {
  margin-top: auto;
  max-width: 100%;
  display: block;
  white-space: normal;
  line-height: 1.35;
}

.mascot-console__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.mascot-control--wide {
  grid-column: 1 / -1;
}

.mascot-control__options {
  flex-wrap: wrap;
  gap: 10px;
}

.mascot-option {
  min-width: 0;
}

.mascot-preview-empty {
  width: 136px;
  height: 104px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  border: 1px solid rgba(145, 171, 210, 0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  color: rgba(235, 240, 255, 0.88);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.live-mascot-shell {
  position: fixed;
  left: 0;
  top: 0;
  width: 176px;
  height: 138px;
  z-index: 51;
  pointer-events: none;
  will-change: transform;
  transition: opacity 0.24s ease;
}

.live-mascot-shell.is-hidden {
  opacity: 0;
}

.live-mascot-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 6px);
  transform: translateX(-50%) translateY(8px);
  min-width: 160px;
  max-width: 300px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(6, 13, 27, 0.92);
  color: rgba(244, 247, 255, 0.96);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(129, 178, 255, 0.18);
  font-size: 13px;
  line-height: 1.36;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.live-mascot-bubble.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.live-mascot-prop {
  position: absolute;
  right: 22px;
  top: 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 24px;
  opacity: 0;
  transform: scale(0.7) translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.25));
}

.live-mascot-shell.is-left .live-mascot-prop {
  right: auto;
  left: 22px;
}

.live-mascot-prop.is-visible {
  opacity: 1;
}

.live-mascot-prop.is-carry {
  transform: scale(1) translateY(0) rotate(-8deg);
}

.live-mascot-prop.is-eat {
  transform: scale(1.05) translateY(0);
  animation: mascotFoodNibble 0.88s ease-in-out infinite;
}

@keyframes mascotFoodNibble {
  0%, 100% { transform: scale(1.05) translateY(0) rotate(-4deg); }
  50% { transform: scale(1.1) translateY(-2px) rotate(4deg); }
}

.mascot-figure--svg {
  position: relative;
  width: 168px;
  height: 124px;
  display: block;
  transform-origin: 50% 100%;
}

.mascot-card-figure {
  width: 150px;
  height: 110px;
}

.mascot-preview-figure {
  width: 240px;
  height: 174px;
}

.live-mascot {
  width: 176px;
  height: 128px;
}

.live-mascot-shell.is-left .mascot-figure--svg {
  transform: scaleX(-1);
}

.pet-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 18px 30px rgba(7, 17, 33, 0.26));
}

.pet-svg .pet-part,
.pet-svg .pet-shadow,
.pet-svg .pet-mouth,
.pet-svg .pet-eye,
.pet-svg .pet-nose,
.pet-svg .pet-sheen,
.pet-svg .pet-stroke-soft,
.pet-svg .pet-tool {
  transform-box: fill-box;
  transform-origin: center;
}

.pet-shadow {
  fill: rgba(3, 8, 18, 0.28);
}

.pet-fill-main { fill: var(--pet-main, #9ba6bd); }
.pet-fill-soft { fill: var(--pet-soft, #dbe6f7); }
.pet-fill-accent { fill: var(--pet-accent, #6cc7ff); }
.pet-eye { fill: var(--pet-eye, #16213d); }
.pet-nose { fill: rgba(29, 39, 64, 0.86); }
.pet-mouth,
.pet-stroke-soft,
.pet-tool { stroke: rgba(255, 255, 255, 0.5); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.pet-sheen { stroke: rgba(255,255,255,0.36); stroke-width: 3.2; stroke-linecap: round; fill: none; }

.mascot-cat {
  --pet-main: #9ea8be;
  --pet-soft: #eef3ff;
  --pet-accent: #7b86a0;
  --pet-eye: #293246;
}

.mascot-fox {
  --pet-main: #d98947;
  --pet-soft: #fff0d6;
  --pet-accent: #f6b56e;
  --pet-eye: #2c1d14;
}

.mascot-bot {
  --pet-main: #8fa8c8;
  --pet-soft: #e8f4ff;
  --pet-accent: #4ec6ff;
  --pet-eye: #1d3155;
}

.mascot-ninja {
  --pet-main: #3a425f;
  --pet-soft: #f5d3b8;
  --pet-accent: #ff5b77;
  --pet-eye: #ff6c86;
}

.mascot-mechanic {
  --pet-main: #ca8d48;
  --pet-soft: #ffd79a;
  --pet-accent: #f6bb4c;
  --pet-eye: #4a2f13;
}

.mascot-figure--svg[data-action="idle"] .pet-svg,
.mascot-figure--svg[data-action="sit"] .pet-svg,
.mascot-figure--svg[data-action="sleep"] .pet-svg,
.mascot-figure--svg[data-action="eat"] .pet-svg {
  animation: mascotIdleWhole 2.8s ease-in-out infinite;
}

.mascot-figure--svg[data-action="run"] .pet-svg,
.mascot-figure--svg[data-action="prowl"] .pet-svg,
.mascot-figure--svg[data-action="jump"] .pet-svg {
  animation: none;
}

@keyframes mascotIdleWhole {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.mascot-figure--svg .pet-head {
  animation: mascotHeadIdle 3s ease-in-out infinite;
}

.mascot-figure--svg .pet-tail {
  animation: mascotTailIdle 2.4s ease-in-out infinite;
}

@keyframes mascotHeadIdle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  40% { transform: rotate(1.8deg) translateY(-1px); }
  70% { transform: rotate(-1.6deg) translateY(0); }
}

@keyframes mascotTailIdle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(6deg); }
}

.mascot-figure--svg[data-action="run"] .pet-svg {
  animation: mascotRunWhole 0.56s linear infinite;
}

.mascot-figure--svg[data-action="prowl"] .pet-svg {
  animation: mascotProwlWhole 0.82s ease-in-out infinite;
}

.mascot-figure--svg[data-action="jump"] .pet-svg {
  animation: mascotJumpWhole 0.72s ease-in-out infinite;
}

.mascot-figure--svg[data-action="eat"] .pet-svg {
  animation: mascotEatWhole 0.74s ease-in-out infinite;
}

@keyframes mascotRunWhole {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-3px); }
  50% { transform: translateY(-5px); }
  75% { transform: translateY(-2px); }
}

@keyframes mascotProwlWhole {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(1px) scaleY(0.985); }
}

@keyframes mascotJumpWhole {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-7px); }
  55% { transform: translateY(-11px); }
  80% { transform: translateY(-4px); }
}

@keyframes mascotEatWhole {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1px); }
}

.mascot-figure--svg[data-action="run"] .pet-leg--a,
.mascot-figure--svg[data-action="run"] .pet-leg--c,
.mascot-figure--svg[data-action="prowl"] .pet-leg--a,
.mascot-figure--svg[data-action="run"] .pet-arm--a,
.mascot-figure--svg[data-action="prowl"] .pet-arm--a {
  animation: mascotLimbForward 0.56s ease-in-out infinite;
}

.mascot-figure--svg[data-action="run"] .pet-leg--b,
.mascot-figure--svg[data-action="run"] .pet-leg--d,
.mascot-figure--svg[data-action="prowl"] .pet-leg--b,
.mascot-figure--svg[data-action="prowl"] .pet-leg--c,
.mascot-figure--svg[data-action="run"] .pet-arm--b,
.mascot-figure--svg[data-action="prowl"] .pet-arm--b {
  animation: mascotLimbBack 0.56s ease-in-out infinite;
}

.mascot-figure--svg[data-action="prowl"] .pet-leg--a,
.mascot-figure--svg[data-action="prowl"] .pet-leg--b,
.mascot-figure--svg[data-action="prowl"] .pet-leg--c,
.mascot-figure--svg[data-action="prowl"] .pet-leg--d,
.mascot-figure--svg[data-action="prowl"] .pet-arm--a,
.mascot-figure--svg[data-action="prowl"] .pet-arm--b {
  animation-duration: 0.82s;
}

@keyframes mascotLimbForward {
  0%, 100% { transform: rotate(7deg) translateY(0); }
  50% { transform: rotate(-10deg) translateY(1px); }
}

@keyframes mascotLimbBack {
  0%, 100% { transform: rotate(-8deg) translateY(1px); }
  50% { transform: rotate(9deg) translateY(0); }
}

.mascot-figure--svg[data-action="jump"] .pet-leg,
.mascot-figure--svg[data-action="jump"] .pet-arm {
  animation: mascotJumpLimbs 0.72s ease-in-out infinite;
}

@keyframes mascotJumpLimbs {
  0%, 100% { transform: rotate(0deg); }
  45% { transform: rotate(-12deg) translateY(-2px); }
  65% { transform: rotate(10deg) translateY(1px); }
}

.mascot-figure--svg[data-action="sit"] .pet-head {
  animation: mascotSitHead 2.6s ease-in-out infinite;
}

.mascot-figure--svg[data-action="sit"] .pet-tail {
  animation: mascotSitTail 2.2s ease-in-out infinite;
}

.mascot-figure--svg[data-action="sit"] .pet-leg--a,
.mascot-figure--svg[data-action="sit"] .pet-leg--b,
.mascot-figure--svg[data-action="sit"] .pet-leg--c,
.mascot-figure--svg[data-action="sit"] .pet-leg--d {
  transform: translateY(3px) scaleY(0.9);
}

@keyframes mascotSitHead {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2deg) translateY(-1px); }
}

@keyframes mascotSitTail {
  0%, 100% { transform: rotate(2deg); }
  50% { transform: rotate(8deg); }
}

.mascot-figure--svg[data-action="sleep"] .pet-head {
  animation: mascotSleepHead 3.1s ease-in-out infinite;
}

.mascot-figure--svg[data-action="sleep"] .pet-eye {
  transform: scaleY(0.22);
  opacity: 0.8;
}

.mascot-figure--svg[data-action="sleep"] .pet-leg {
  transform: translateY(5px) scaleY(0.84);
}

@keyframes mascotSleepHead {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(2px); }
}

.mascot-figure--svg[data-action="eat"] .pet-head {
  animation: mascotEatHead 0.74s ease-in-out infinite;
}

.mascot-figure--svg[data-action="eat"] .pet-tail {
  animation: mascotEatTail 1s ease-in-out infinite;
}

@keyframes mascotEatHead {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(2px); }
}

@keyframes mascotEatTail {
  0%, 100% { transform: rotate(3deg); }
  50% { transform: rotate(12deg); }
}

@media (max-width: 1180px) {
  .mascot-hero {
    grid-template-columns: 1fr;
  }

  .mascot-console__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .mascot-card {
    min-height: 292px;
  }

  .live-mascot-shell {
    width: 148px;
    height: 118px;
  }

  .live-mascot {
    width: 150px;
    height: 110px;
  }

  .live-mascot-bubble {
    max-width: 240px;
    font-size: 12px;
  }
}

/* === azrox_pack_33_grounded_personality_cursor_hunt_v5 === */
.live-mascot-shell {
  width: 170px;
  height: 134px;
}

.live-mascot-bubble {
  min-width: 178px;
  max-width: min(340px, calc(100vw - 28px));
  padding: 12px 15px;
  font-size: 12.5px;
  line-height: 1.42;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-wrap: pretty;
}

.live-mascot-effect {
  position: absolute;
  right: 18px;
  bottom: 34px;
  min-width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  border-radius: 999px;
  transform: scale(0.72) translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  color: rgba(237,244,255,.96);
  text-shadow: 0 0 18px rgba(118,178,255,.42);
}
.live-mascot-effect.is-visible { opacity: 1; transform: scale(1) translateY(0); }
.live-mascot-effect.effect-scan {
  background: radial-gradient(circle, rgba(113,195,255,.28), rgba(113,195,255,.08) 52%, transparent 68%);
  box-shadow: 0 0 0 1px rgba(113,195,255,.18), 0 0 24px rgba(90,170,255,.22);
  font-size: 19px;
}
.live-mascot-effect.effect-repair {
  background: radial-gradient(circle, rgba(255,196,87,.28), rgba(255,170,77,.08) 52%, transparent 68%);
  box-shadow: 0 0 0 1px rgba(255,196,87,.18), 0 0 24px rgba(255,181,90,.22);
  font-size: 18px;
}
.live-mascot-effect.effect-smoke,
.live-mascot-effect.effect-paw,
.live-mascot-effect.effect-glow {
  width: 44px;
  height: 44px;
  background: radial-gradient(circle, rgba(125,178,255,.18), transparent 70%);
}
.live-mascot-effect.effect-smoke { background: radial-gradient(circle, rgba(172,182,255,.16), transparent 70%); }
.live-mascot-effect.effect-paw { background: radial-gradient(circle, rgba(255,198,126,.16), transparent 70%); }

.live-mascot-cursor-prey {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 55;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .2s ease;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.28));
}
.live-mascot-cursor-prey.is-visible {
  opacity: 1;
}

.mascot-figure--svg {
  width: 162px;
  height: 118px;
}
.mascot-card-figure {
  width: 136px;
  height: 98px;
}
.mascot-preview-figure {
  width: 220px;
  height: 156px;
}
.live-mascot {
  width: 168px;
  height: 120px;
}

.mascot-cat .pet-svg {
  transform: scale(.86) translateY(8px) translateX(2px);
}
.mascot-fox .pet-svg {
  transform: scale(.9) translateY(5px);
}
.mascot-bot .pet-svg,
.mascot-ninja .pet-svg,
.mascot-mechanic .pet-svg {
  transform: scale(.94) translateY(2px);
}

.pet-svg .pet-leg,
.pet-svg .pet-arm,
.pet-svg .pet-tail {
  transform-origin: 50% 0%;
}
.pet-svg .pet-head {
  transform-origin: 44% 72%;
}
.pet-svg .pet-body,
.pet-svg .pet-torso {
  transform-origin: 50% 70%;
}

.mascot-figure--svg[data-action="run"] .pet-svg {
  animation: mascotRunWholeV5 .74s linear infinite;
}
.mascot-figure--svg[data-action="stalk"] .pet-svg {
  animation: mascotStalkWholeV5 1.1s ease-in-out infinite;
}
.mascot-figure--svg[data-action="peek"] .pet-svg {
  animation: mascotPeekWholeV5 1.35s ease-in-out infinite;
}
.mascot-figure--svg[data-action="hide"] .pet-svg {
  animation: mascotHideWholeV5 1.5s ease-in-out infinite;
}
.mascot-figure--svg[data-action="scan"] .pet-svg {
  animation: mascotScanWholeV5 1.45s ease-in-out infinite;
}
.mascot-figure--svg[data-action="inspect"] .pet-svg,
.mascot-figure--svg[data-action="repair"] .pet-svg {
  animation: mascotInspectWholeV5 1.25s ease-in-out infinite;
}
.mascot-figure--svg[data-action="blink"] .pet-svg {
  animation: mascotBlinkWholeV5 .72s ease-in-out infinite;
}
.mascot-figure--svg[data-action="perch"] .pet-svg {
  animation: mascotPerchWholeV5 1.6s ease-in-out infinite;
}

@keyframes mascotRunWholeV5 {
  0%,100% { transform: translateY(0); }
  25% { transform: translateY(-2px); }
  50% { transform: translateY(-4px); }
  75% { transform: translateY(-1px); }
}
@keyframes mascotStalkWholeV5 {
  0%,100% { transform: translateY(0) scaleY(1) translateX(0); }
  50% { transform: translateY(1px) scaleY(.985) translateX(2px); }
}
@keyframes mascotPeekWholeV5 {
  0%,100% { transform: translateY(0) translateX(0); }
  45% { transform: translateY(-1px) translateX(4px); }
  70% { transform: translateY(0) translateX(1px); }
}
@keyframes mascotHideWholeV5 {
  0%,100% { opacity: 1; transform: translateY(0); }
  45% { opacity: .72; transform: translateY(2px) scale(.985); }
  60% { opacity: .58; transform: translateY(3px) scale(.975); }
}
@keyframes mascotScanWholeV5 {
  0%,100% { transform: translateY(0) rotate(0deg); }
  35% { transform: translateY(-1px) rotate(-1deg); }
  68% { transform: translateY(0) rotate(1deg); }
}
@keyframes mascotInspectWholeV5 {
  0%,100% { transform: translateY(0) rotate(0deg); }
  40% { transform: translateY(0) rotate(-2deg); }
  68% { transform: translateY(-1px) rotate(2deg); }
}
@keyframes mascotBlinkWholeV5 {
  0%,100% { opacity: 1; transform: translateY(0) scale(1); }
  40% { opacity: .35; transform: translateY(-2px) scale(.95); }
  65% { opacity: 1; transform: translateY(0) scale(1.02); }
}
@keyframes mascotPerchWholeV5 {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.mascot-figure--svg[data-action="run"] .pet-leg--a,
.mascot-figure--svg[data-action="run"] .pet-leg--c,
.mascot-figure--svg[data-action="run"] .pet-arm--a {
  animation: mascotLegForwardV5 .74s ease-in-out infinite;
}
.mascot-figure--svg[data-action="run"] .pet-leg--b,
.mascot-figure--svg[data-action="run"] .pet-leg--d,
.mascot-figure--svg[data-action="run"] .pet-arm--b {
  animation: mascotLegBackV5 .74s ease-in-out infinite;
}
.mascot-figure--svg[data-action="stalk"] .pet-leg--a,
.mascot-figure--svg[data-action="stalk"] .pet-leg--c,
.mascot-figure--svg[data-action="stalk"] .pet-arm--a,
.mascot-figure--svg[data-action="peek"] .pet-tail {
  animation: mascotLegForwardV5 1.1s ease-in-out infinite;
}
.mascot-figure--svg[data-action="stalk"] .pet-leg--b,
.mascot-figure--svg[data-action="stalk"] .pet-leg--d,
.mascot-figure--svg[data-action="stalk"] .pet-arm--b {
  animation: mascotLegBackV5 1.1s ease-in-out infinite;
}
.mascot-figure--svg[data-action="scan"] .pet-head,
.mascot-figure--svg[data-action="inspect"] .pet-head,
.mascot-figure--svg[data-action="repair"] .pet-head {
  animation: mascotScanHeadV5 1.1s ease-in-out infinite;
}
.mascot-figure--svg[data-action="inspect"] .pet-arm--a,
.mascot-figure--svg[data-action="repair"] .pet-arm--a,
.mascot-figure--svg[data-action="repair"] .pet-tool {
  animation: mascotToolArmV5 .9s ease-in-out infinite;
}
.mascot-figure--svg[data-action="blink"] .pet-head,
.mascot-figure--svg[data-action="blink"] .pet-body,
.mascot-figure--svg[data-action="blink"] .pet-leg,
.mascot-figure--svg[data-action="blink"] .pet-arm {
  animation: mascotBlinkPartsV5 .72s ease-in-out infinite;
}
.mascot-figure--svg[data-action="perch"] .pet-tail,
.mascot-figure--svg[data-action="peek"] .pet-head,
.mascot-figure--svg[data-action="hide"] .pet-head {
  animation: mascotPerchHeadV5 1.35s ease-in-out infinite;
}

@keyframes mascotLegForwardV5 {
  0%,100% { transform: rotate(5deg); }
  50% { transform: rotate(-8deg) translateY(1px); }
}
@keyframes mascotLegBackV5 {
  0%,100% { transform: rotate(-5deg) translateY(1px); }
  50% { transform: rotate(8deg); }
}
@keyframes mascotScanHeadV5 {
  0%,100% { transform: rotate(0deg); }
  35% { transform: rotate(-4deg) translateY(-1px); }
  65% { transform: rotate(5deg); }
}
@keyframes mascotToolArmV5 {
  0%,100% { transform: rotate(8deg); }
  50% { transform: rotate(-12deg) translateY(-1px); }
}
@keyframes mascotBlinkPartsV5 {
  0%,100% { opacity: 1; }
  40% { opacity: .15; }
  60% { opacity: 1; }
}
@keyframes mascotPerchHeadV5 {
  0%,100% { transform: rotate(0deg); }
  50% { transform: rotate(4deg) translateY(-1px); }
}

.mascot-card {
  min-height: 332px;
}
.mascot-card .theme-card__desc {
  -webkit-line-clamp: 4;
  min-height: 5.7em;
}
.mascot-card__meta {
  min-height: 3.2em;
}
.mascot-card__art {
  min-height: 154px;
  height: 154px;
  padding: 8px 10px 4px;
}
.mascot-collection {
  gap: 16px;
}

@media (max-width: 860px) {
  .live-mascot-bubble {
    max-width: min(280px, calc(100vw - 20px));
    font-size: 12px;
  }
  .mascot-card {
    min-height: 316px;
  }
}

.mascot-figure--svg[data-action="hunt"] .pet-svg { animation: mascotStalkWholeV5 .92s ease-in-out infinite; }
.mascot-figure--svg[data-action="hunt"] .pet-leg--a,
.mascot-figure--svg[data-action="hunt"] .pet-leg--c,
.mascot-figure--svg[data-action="hunt"] .pet-arm--a { animation: mascotLegForwardV5 .92s ease-in-out infinite; }
.mascot-figure--svg[data-action="hunt"] .pet-leg--b,
.mascot-figure--svg[data-action="hunt"] .pet-leg--d,
.mascot-figure--svg[data-action="hunt"] .pet-arm--b { animation: mascotLegBackV5 .92s ease-in-out infinite; }


/* === azrox_pack_34_sassy_cursor_walk_v6 === */
.live-mascot-shell {
  width: 178px;
  height: 138px;
}
.live-mascot-bubble {
  left: 50%;
  right: auto;
  bottom: calc(100% - 2px);
  transform: translateX(-50%) translateY(10px);
  width: min(380px, calc(100vw - 24px));
  min-width: 220px;
  max-width: min(380px, calc(100vw - 24px));
  padding: 12px 16px;
  font-size: 12.5px;
  line-height: 1.46;
  letter-spacing: .01em;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-wrap: balance;
  hyphens: auto;
}
.live-mascot-bubble.is-visible {
  transform: translateX(-50%) translateY(0);
}
.live-mascot-cursor-prey {
  width: 34px;
  height: 34px;
  font-size: 28px;
  transition: opacity .16s ease, transform .08s linear;
}
.mascot-figure--svg[data-action="run"] .pet-svg,
.mascot-figure--svg[data-action="stalk"] .pet-svg,
.mascot-figure--svg[data-action="peek"] .pet-svg,
.mascot-figure--svg[data-action="scan"] .pet-svg,
.mascot-figure--svg[data-action="inspect"] .pet-svg,
.mascot-figure--svg[data-action="repair"] .pet-svg,
.mascot-figure--svg[data-action="blink"] .pet-svg {
  animation-duration: .82s;
}
@media (max-width: 860px) {
  .live-mascot-bubble {
    width: min(310px, calc(100vw - 18px));
    min-width: 180px;
    max-width: min(310px, calc(100vw - 18px));
    font-size: 12px;
    line-height: 1.42;
  }
}


/* === azrox_pack_35_sassy_lines_food_cooldown_v7 === */
.live-mascot-bubble {
  left: 50%;
  right: auto;
  bottom: calc(100% - 2px);
  transform: translateX(-50%) translateY(10px);
  display: block;
  width: min(440px, calc(100vw - 26px));
  min-width: 240px;
  max-width: min(440px, calc(100vw - 26px));
  max-height: none;
  overflow: visible;
  padding: 13px 17px;
  font-size: 13px;
  line-height: 1.42;
  letter-spacing: .01em;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-wrap: pretty;
  hyphens: auto;
}
.live-mascot-bubble.is-visible {
  transform: translateX(-50%) translateY(0);
}
.live-mascot-cursor-prey {
  width: 36px;
  height: 36px;
  font-size: 29px;
}
@media (max-width: 860px) {
  .live-mascot-bubble {
    width: min(320px, calc(100vw - 16px));
    min-width: 184px;
    max-width: min(320px, calc(100vw - 16px));
    font-size: 12.2px;
    line-height: 1.38;
  }
}


/* === azrox_pack_36_sassy_cursor_balance_v8 === */
.live-mascot-shell {
  width: 182px;
  height: 140px;
}
.live-mascot-bubble {
  left: 50%;
  right: auto;
  bottom: calc(100% + 2px);
  transform: translateX(-50%) translateY(12px);
  display: block;
  width: min(520px, calc(100vw - 18px));
  min-width: 260px;
  max-width: min(520px, calc(100vw - 18px));
  padding: 13px 18px;
  font-size: 12.8px;
  line-height: 1.5;
  letter-spacing: .005em;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-wrap: pretty;
  hyphens: auto;
  box-sizing: border-box;
}
.live-mascot-bubble::after {
  left: 50%;
  transform: translateX(-50%);
}
.live-mascot-bubble.is-visible {
  transform: translateX(-50%) translateY(0);
}
.live-mascot-cursor-prey {
  width: 34px;
  height: 34px;
  font-size: 27px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.24));
}
@media (max-width: 860px) {
  .live-mascot-bubble {
    width: min(360px, calc(100vw - 12px));
    min-width: 190px;
    max-width: min(360px, calc(100vw - 12px));
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.42;
  }
}


/* === azrox_pack_37_bubble_wrap_mouth_fix_v9 === */
.live-mascot-shell[data-mascot="cat"] .live-mascot-prop {
  top: 48px;
  right: 42px;
}
.live-mascot-shell[data-mascot="cat"].is-left .live-mascot-prop {
  left: 42px;
  right: auto;
}
.live-mascot-shell[data-mascot="fox"] .live-mascot-prop {
  top: 46px;
  right: 40px;
}
.live-mascot-shell[data-mascot="fox"].is-left .live-mascot-prop {
  left: 40px;
  right: auto;
}
.live-mascot-bubble {
  left: 50%;
  right: auto;
  bottom: calc(100% + 4px);
  width: min(348px, calc(100vw - 16px));
  min-width: 196px;
  max-width: min(348px, calc(100vw - 16px));
  padding: 10px 13px;
  border-radius: 16px 16px 16px 10px;
  font-size: 12.2px;
  line-height: 1.34;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-wrap: balance;
  box-sizing: border-box;
}
.live-mascot-bubble::after {
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 860px) {
  .live-mascot-bubble {
    width: min(286px, calc(100vw - 12px));
    min-width: 168px;
    max-width: min(286px, calc(100vw - 12px));
    padding: 9px 11px;
    font-size: 11.6px;
    line-height: 1.3;
  }
}