@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";
:root {
  --ml-bg-card: var(--bg-card);
  --ml-bg-elev: var(--bg-elev);
  --ml-text: var(--text-primary);
  --ml-text-muted: var(--text-muted);
  --ml-text-faint: var(--text-muted);
  --ml-border-subtle: #ffffff14;
  --ml-border: #ffffff14;
  --ml-radius-card: 12px;
  --ml-radius-pill: 999px;
  --ml-space-tile: 12px;
  --ml-btn-primary-bg: var(--accent);
  --ml-btn-primary-text: #0a0d14;
  --ml-btn-danger-bg: #ef44441f;
  --ml-btn-danger-text: #ef4444;
  --ml-btn-outline-border: #ffffff26;
}

:root[data-theme="light"] {
  --ml-border-subtle: #00000014;
  --ml-btn-outline-border: #00000026;
  --ml-btn-primary-text: #fff;
}

.ml-btn {
  border-radius: var(--ml-radius-pill);
  cursor: pointer;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  border: 0;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background .12s, transform 80ms, box-shadow .12s;
  display: inline-flex;
}

.ml-btn:active {
  transform: scale(.98);
}

.ml-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ml-btn[disabled] {
  opacity: .5;
  pointer-events: none;
  cursor: default;
}

.ml-btn--primary {
  background: var(--ml-btn-primary-bg);
  color: var(--ml-btn-primary-text);
}

.ml-btn--primary:hover {
  box-shadow: 0 4px 12px #00000026;
}

.ml-btn--danger {
  background: var(--ml-btn-danger-bg);
  color: var(--ml-btn-danger-text);
  border: 1px solid #ef444440;
}

.ml-btn--danger:hover {
  background: #ef44442e;
}

.ml-btn--outline {
  color: inherit;
  border: 1px solid var(--ml-btn-outline-border);
  background: none;
}

.ml-btn--outline:hover {
  background: #7f7f7f0f;
}

.ml-btn--ghost {
  color: inherit;
  background: none;
  padding: 8px 12px;
}

.ml-btn--ghost:hover {
  background: #7f7f7f14;
}

.ml-btn--icon {
  border-radius: var(--ml-radius-pill);
  width: 40px;
  height: 40px;
  padding: 0;
}

.ml-btn--small {
  padding: 6px 12px;
  font-size: .8rem;
}

.ma-topbar {
  z-index: 20;
  background: var(--bg-page);
  border-bottom: 1px solid var(--ml-border-subtle);
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  display: flex;
  position: sticky;
  top: 0;
}

.ma-return {
  color: inherit;
  cursor: pointer;
  border-radius: var(--ml-radius-pill);
  background: none;
  border: 0;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  transition: background .12s;
  display: inline-flex;
}

.ma-return:hover {
  background: #7f7f7f14;
}

.ma-return .mdi {
  font-size: 1.35rem;
}

.ma-title {
  color: var(--text-primary);
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  display: inline-flex;
}

.ma-title .mdi {
  color: var(--accent);
  font-size: 1.15rem;
}

.ma-tabs {
  top: var(--header-h);
  z-index: 19;
  background: var(--bg-page);
  border-bottom: 1px solid var(--ml-border-subtle);
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 4px;
  padding: 6px 8px;
  display: flex;
  position: sticky;
  overflow-x: auto;
}

.ma-tabs::-webkit-scrollbar {
  display: none;
}

.ma-tab {
  min-width: 64px;
  color: var(--text-secondary, var(--text-primary));
  cursor: pointer;
  opacity: .75;
  background: none;
  border: 0;
  border-radius: 10px;
  flex-direction: column;
  flex: auto;
  align-items: center;
  gap: 3px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 500;
  transition: background .12s, color .12s;
  display: inline-flex;
}

.ma-tab .mdi {
  font-size: 1.2rem;
}

.ma-tab:hover {
  opacity: 1;
  background: #7f7f7f0f;
}

.ma-tab--active {
  background: rgba(var(--accent-rgb, 82, 172, 244), .14);
  color: var(--accent);
  opacity: 1;
  font-weight: 600;
}

.ma-tab--active .mdi {
  color: var(--accent);
}

.ma-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.ma-tab-content {
  padding: 12px 0;
}

.ma-tab-empty {
  text-align: center;
  color: var(--text-secondary, var(--text-primary));
  background: var(--ml-bg-card);
  border: 1px dashed var(--ml-border-subtle);
  border-radius: var(--ml-radius-card);
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 12px;
  padding: 40px 24px;
  display: flex;
}

.ma-tab-empty .mdi {
  color: var(--accent);
  opacity: .7;
  font-size: 2.4rem;
}

.ma-tab-empty h3 {
  color: var(--text-primary);
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.ma-tab-empty p {
  max-width: 42ch;
  margin: 0;
  font-size: .9rem;
  line-height: 1.45;
}

.ma-tab-empty--soft {
  background: none;
  border: 0;
  padding: 24px;
}

.ma-tab-empty--soft .mdi {
  opacity: .5;
  font-size: 1.4rem;
}

.ma-tab-empty--soft p {
  font-size: .85rem;
}

.ma-mem-card {
  padding: 0;
  overflow: hidden;
}

.ma-mem-card-head {
  border-bottom: 1px solid var(--ml-border-subtle);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 12px;
  display: flex;
}

.ma-mem-card-title {
  flex: auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.ma-mem-card-title .mdi {
  color: var(--accent);
  flex-shrink: 0;
  font-size: 1.6rem;
}

.ma-mem-card-title strong {
  color: var(--ml-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  display: block;
}

.ma-mem-card-cadence {
  color: var(--ml-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 2px;
  font-size: .75rem;
  display: block;
}

.ma-mem-pill {
  border-radius: var(--ml-radius-pill);
  white-space: nowrap;
  border: 1px solid #0000;
  flex-shrink: 0;
  align-items: center;
  padding: 4px 12px;
  font-size: .75rem;
  font-weight: 600;
  display: inline-flex;
}

.ma-mem-pill--ok {
  color: #22c55e;
  background: #22c55e24;
  border-color: #22c55e4d;
}

.ma-mem-pill--warn {
  color: #f59e0b;
  background: #f59e0b24;
  border-color: #f59e0b4d;
}

.ma-mem-pill--danger {
  color: #ef4444;
  background: #ef444424;
  border-color: #ef44444d;
}

.ma-mem-pill--muted {
  color: var(--ml-text-muted);
  border-color: var(--ml-border-subtle);
  background: #7f7f7f1a;
}

.ma-mem-card-body {
  flex-direction: column;
  gap: 14px;
  padding: 12px 18px 16px;
  display: flex;
}

.ma-mem-card-dl {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0;
  display: grid;
}

.ma-mem-card-dl > div {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.ma-mem-card-dl dt {
  color: var(--ml-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0;
  font-size: .7rem;
}

.ma-mem-card-dl dd {
  color: var(--ml-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  overflow: hidden;
}

.ma-mem-card-actions {
  border-top: 1px solid var(--ml-border-subtle);
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  display: flex;
}

.ma-mem-payfast-btn {
  border-width: 1.5px;
  border-radius: 10px;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  font-size: .95rem;
  font-weight: 600;
}

.ma-mem-payfast-btn .mdi {
  font-size: 1.15rem;
}

.ma-mem-autorenew {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.ma-mem-autorenew > span:first-child {
  flex-direction: column;
  flex: auto;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.ma-mem-autorenew strong {
  color: var(--ml-text);
  font-size: .9rem;
  font-weight: 600;
}

.ma-mem-autorenew em {
  color: var(--ml-text-muted);
  font-size: .75rem;
  font-style: normal;
}

.ma-mem-pending {
  color: var(--ml-text);
  background: #f59e0b0f;
  border-top: 1px solid #f59e0b33;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 18px;
  display: flex;
}

.ma-mem-pending .mdi {
  color: #f59e0b;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1.2rem;
}

.ma-mem-pending strong {
  color: #f59e0b;
  margin-bottom: 2px;
  font-size: .85rem;
  font-weight: 600;
  display: block;
}

.ma-mem-pending span {
  color: var(--ml-text-muted);
  font-size: .8rem;
  line-height: 1.4;
}

.ma-mem-pending em {
  color: var(--ml-text);
  font-style: normal;
  font-weight: 600;
}

.ma-mem-family-list {
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.ma-mem-family-row {
  border: 1px solid var(--ml-border-subtle);
  background: none;
  border-radius: 8px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  display: flex;
}

.ma-mem-family-row .mdi {
  color: var(--accent);
  opacity: .7;
  flex-shrink: 0;
  font-size: 1.2rem;
}

.ma-mem-family-row strong {
  color: var(--ml-text);
  font-size: .9rem;
  font-weight: 600;
  display: block;
}

.ma-mem-family-row span {
  color: var(--ml-text-muted);
  margin-top: 2px;
  font-size: .75rem;
  display: block;
}

.ma-hist-row-chip--retro {
  color: #a78bfa;
  border-radius: var(--ml-radius-pill);
  white-space: nowrap;
  vertical-align: middle;
  background: #8b5cf624;
  border: 1px solid #8b5cf64d;
  margin-left: 4px;
  padding: 2px 8px;
  font-size: .7rem;
  font-weight: 500;
  display: inline-block;
}

.ma-hist-row-chip--payer {
  background: rgba(var(--accent-rgb, 82, 172, 244), .1);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb, 82, 172, 244), .25);
  border-radius: var(--ml-radius-pill);
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 4px;
  padding: 2px 8px;
  font-size: .7rem;
  font-weight: 500;
  display: inline-block;
}

.ma-money-detail {
  padding: 0;
  overflow: hidden;
}

.ma-money-detail > .ma-strip-head {
  padding: 14px 16px 8px;
}

.ma-money-sub {
  border-top: 1px solid var(--ml-border-subtle);
}

.ma-money-sub-head {
  width: 100%;
  color: var(--ml-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-weight: 600;
  transition: background .12s;
  display: flex;
}

.ma-money-sub-head:hover {
  background: #7f7f7f0a;
}

.ma-money-sub-head .mdi {
  color: var(--accent);
  flex-shrink: 0;
  font-size: 1.1rem;
}

.ma-money-sub-label {
  flex: auto;
  font-size: .9rem;
}

.ma-money-sub-count {
  background: var(--ml-border-subtle);
  color: var(--ml-text-muted);
  border-radius: var(--ml-radius-pill);
  text-align: center;
  min-width: 26px;
  padding: 2px 10px;
  font-size: .75rem;
  font-weight: 600;
}

.ma-money-sub-chev {
  transition: transform .15s;
  color: var(--ml-text-muted) !important;
  font-size: 1.2rem !important;
}

.ma-money-sub.is-expanded .ma-money-sub-chev {
  color: var(--accent) !important;
}

.ma-money-sub-body {
  flex-direction: column;
  gap: 6px;
  padding: 0 16px 12px;
  display: flex;
}

.ma-money-empty {
  color: var(--ml-text-muted);
  padding: 10px 4px;
  font-size: .8rem;
  font-style: italic;
}

.ma-money-row {
  border: 1px solid var(--ml-border-subtle);
  background: none;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}

.ma-money-row-body {
  flex: auto;
  min-width: 0;
}

.ma-money-row-body strong {
  color: var(--ml-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .85rem;
  font-weight: 600;
  display: block;
  overflow: hidden;
}

.ma-money-row-meta {
  color: var(--ml-text-muted);
  margin-top: 2px;
  font-size: .72rem;
  display: block;
}

.ma-money-row-amount {
  color: var(--ml-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: .9rem;
  font-weight: 700;
}

.ma-money-row-amount--refund {
  color: #22c55e;
}

.ma-money-row-status {
  color: var(--ml-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
  font-size: .7rem;
}

.ma-loading--inline, .ma-error--inline {
  color: var(--ml-text-muted);
  align-items: center;
  gap: 10px;
  padding: 16px;
  font-size: .85rem;
  display: flex;
}

.ma-upgrade-picker {
  flex-direction: column;
  gap: 0;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.ma-upgrade-picker > .ma-strip-head {
  padding: 14px 16px 4px;
}

.ma-upgrade-list {
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px 12px;
  display: flex;
}

.ma-upgrade-tile {
  border: 1px solid var(--ml-border-subtle);
  border-radius: var(--ml-radius-card);
  width: 100%;
  color: var(--ml-text);
  cursor: pointer;
  text-align: left;
  font: inherit;
  background: none;
  align-items: center;
  gap: 12px;
  padding: 14px;
  transition: background .15s, border-color .15s, transform 80ms;
  display: flex;
}

.ma-upgrade-tile:hover {
  background: rgba(var(--accent-rgb, 82, 172, 244), .06);
  border-color: rgba(var(--accent-rgb, 82, 172, 244), .4);
}

.ma-upgrade-tile:active {
  transform: scale(.99);
}

.ma-upgrade-tile.is-requesting {
  opacity: .6;
  cursor: default;
}

.ma-upgrade-tile-icon {
  background: rgba(var(--accent-rgb, 82, 172, 244), .14);
  width: 40px;
  height: 40px;
  color: var(--accent);
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.ma-upgrade-tile-icon .mdi {
  font-size: 1.35rem;
}

.ma-upgrade-tile-body {
  flex: auto;
  min-width: 0;
}

.ma-upgrade-tile-body strong {
  color: var(--ml-text);
  font-size: .95rem;
  font-weight: 600;
  display: block;
}

.ma-upgrade-tile-price {
  color: var(--accent);
  margin-top: 2px;
  font-size: .78rem;
  font-weight: 500;
  display: block;
}

.ma-upgrade-tile-body p {
  color: var(--ml-text-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 6px 0 0;
  font-size: .78rem;
  line-height: 1.4;
  display: -webkit-box;
  overflow: hidden;
}

.ma-upgrade-tile-action {
  color: var(--ml-text-muted);
  flex-shrink: 0;
  font-size: 1.2rem;
}

.ma-upgrade-tile:hover .ma-upgrade-tile-action {
  color: var(--accent);
}

.ma-upgrade-hint {
  background: rgba(var(--accent-rgb, 82, 172, 244), .06);
  border: 1px solid var(--ml-border-subtle);
  color: var(--ml-text-muted);
  border-radius: 8px;
  align-items: flex-start;
  gap: 8px;
  margin: 0 12px 12px;
  padding: 10px 12px;
  font-size: .78rem;
  line-height: 1.5;
  display: flex;
}

.ma-upgrade-hint .mdi {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 1rem;
}

.ml-linkbtn {
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
}

.ml-linkbtn:hover {
  opacity: .85;
}

@media (width <= 480px) {
  .ma-mem-card-dl {
    grid-template-columns: 1fr;
  }

  .ma-mem-card-dl > div {
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
  }

  .ma-mem-card-dl dt {
    flex: none;
  }

  .ma-mem-card-dl dd {
    text-align: right;
  }
}

.ma-mem-family-row > div:first-of-type {
  flex: auto;
  min-width: 0;
}

.ma-mem-family-actions {
  flex: none;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.ma-mem-family-empty {
  color: var(--ml-text-muted);
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: .9rem;
  font-style: italic;
  display: inline-flex;
}

.ma-mem-family-empty .mdi {
  opacity: .7;
  font-size: 1.15rem;
}

.ma-fam-editor-backdrop {
  z-index: 500;
  background: #0000008c;
  justify-content: center;
  align-items: stretch;
  padding: 0;
  animation: .14s ease-out ma-fade-in;
  display: flex;
  position: fixed;
  inset: 0;
}

:root[data-theme="light"] .ma-fam-editor-backdrop {
  background: #14192380;
}

@keyframes ma-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.ma-fam-editor {
  background: var(--bg-page);
  color: var(--ml-text);
  width: 100%;
  max-width: 100%;
  height: 100%;
  box-shadow: none;
  border: none;
  border-radius: 0;
  flex-direction: column;
  animation: .18s ease-out ma-slide-up;
  display: flex;
}

@media (width >= 720px) {
  .ma-fam-editor {
    border-left: 1px solid var(--ml-border-subtle);
    border-right: 1px solid var(--ml-border-subtle);
    max-width: 560px;
    box-shadow: 0 0 40px #00000080;
  }
}

@keyframes ma-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ma-fam-editor-head {
  border-bottom: 1px solid var(--ml-border-subtle);
  flex: none;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  display: flex;
}

.ma-fam-editor-head h3 {
  color: var(--ml-text);
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  display: inline-flex;
}

.ma-fam-editor-head h3 .mdi {
  color: var(--accent);
  font-size: 1.2rem;
}

.ma-fam-editor-body {
  flex-direction: column;
  flex: auto;
  gap: 12px;
  padding: 16px;
  display: flex;
  overflow-y: auto;
}

.ma-fam-editor-error {
  color: #fecaca;
  border-radius: var(--ml-radius-md, 8px);
  background: #ef44441f;
  border: 1px solid #ef444459;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: .88rem;
  display: inline-flex;
}

:root[data-theme="light"] .ma-fam-editor-error {
  color: #991b1b;
  background: #dc262614;
  border-color: #dc262659;
}

.ma-fam-editor-error .mdi {
  font-size: 1.05rem;
}

.ma-fam-current {
  border: 1px solid var(--ml-border-subtle);
  background: #7f7f7f0f;
  border-radius: 10px;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  display: flex;
}

.ma-fam-current-label {
  color: var(--ml-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
  font-weight: 600;
}

.ma-fam-current-body {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.ma-fam-current-name {
  color: var(--ml-text);
  font-size: 1rem;
  font-weight: 700;
}

.ma-fam-current-body--none {
  color: var(--ml-text-muted);
  justify-content: flex-start;
  font-size: .9rem;
  font-style: italic;
}

.ma-fam-current-body--none .mdi {
  color: var(--accent);
  opacity: .7;
  font-size: 1.15rem;
}

.ma-fam-picker-label {
  color: var(--ml-text-muted);
  margin-top: 4px;
  font-size: .85rem;
  font-weight: 600;
}

.ma-fam-editor-note {
  border: 1px solid var(--ml-border-subtle);
  color: var(--ml-text-muted);
  background: #7f7f7f0f;
  border-radius: 10px;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  font-size: .88rem;
  line-height: 1.45;
  display: flex;
}

.ma-fam-editor-note .mdi {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 1.15rem;
}

.ma-fam-editor-note p {
  margin: 0;
}

.ma-fam-editor-note--pending {
  color: var(--ml-text);
  background: #ff980014;
  border-color: #ff980059;
}

.ma-fam-editor-note--pending .mdi {
  color: var(--warning);
}

.ma-fam-success {
  text-align: center;
  color: var(--ml-text);
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 16px;
  display: flex;
}

.ma-fam-success .mdi {
  color: var(--success);
  font-size: 2.4rem;
}

.ma-fam-success strong {
  font-size: 1.05rem;
  font-weight: 700;
}

.ma-fam-success p {
  color: var(--ml-text-muted);
  margin: 0;
  font-size: .9rem;
  line-height: 1.45;
}

.ma-mem-family-row-sub {
  color: var(--ml-text-muted);
  margin-top: 2px;
  font-size: .78rem;
  display: block;
}

.ma-mem-family-row-pills {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  display: flex;
}

.ma-fam-editor-foot {
  border-top: 1px solid var(--ml-border-subtle);
  flex: none;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  display: flex;
}

.ma-fam-editor-foot .mdi-spin {
  animation: 1s linear infinite ma-spin;
}

@keyframes ma-spin {
  to {
    transform: rotate(360deg);
  }
}

::view-transition-group(*) {
  animation-duration: .22s;
}

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .18s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation-duration: .001ms !important;
  }
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb, 79 195 247), .35) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb, 79 195 247), .3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb, 79 195 247), .5);
}

:root {
  --bg-dark: #0a0d14;
  --bg-page: #0a0d14;
  --bg-card: #00000059;
  --bg-card-hover: #00000073;
  --border: rgba(var(--accent-rgb), .18);
  --accent: #f5a623;
  --accent-rgb: 245, 166, 35;
  --accent-dark: #e07b18;
  --accent-glow: #f5a6234d;
  --accent-text: #0a0d14;
  --off-color: #5a64788c;
  --text-primary: #f0f4ff;
  --text-muted: #b4bed2b3;
  --danger: #e05c5c;
  --success: #5ce07c;
  --warning: #ff9800;
  --header-h: 64px;
  --stats-h: 56px;
  --color-primary: var(--accent);
  --color-primary-rgb: 245, 166, 35;
  --color-text: var(--text-primary);
  --color-text-muted: var(--text-muted);
  --color-surface: var(--bg-card);
  --color-surface-hover: var(--bg-card-hover);
  --color-border: var(--border);
}

:root[data-theme="light"] {
  --bg-dark: #f4f5f7;
  --bg-page: #f4f5f7;
  --bg-card: #0000000a;
  --bg-card-hover: #00000012;
  --border: #0000001a;
  --text-primary: var(--text-on-bg-light, #0f1729);
  --text-muted: #0f17299e;
  --off-color: #788291a6;
  --color-text: var(--text-primary);
  --color-text-muted: var(--text-muted);
  --color-surface: var(--bg-card);
  --color-surface-hover: var(--bg-card-hover);
  --color-border: var(--border);
}

:root[data-theme="light"] .ml-side-menu {
  background: #fff;
}

:root[data-theme="light"] .ml-pw-card, :root[data-theme="light"] .ml-overlay {
  background: #f4f5f7eb;
}

:root[data-theme="light"] .ml-overlay > .ml-pw-card {
  background: #fff;
  box-shadow: 0 12px 36px #0f17292e;
}

:root:not([data-theme="light"]) .ml-overlay > .ml-pw-card {
  background: var(--bg-elev);
  box-shadow: 0 20px 60px #0000008c;
}

:root[data-theme="light"] .ml-push-prompt {
  color: var(--text-primary);
  background: #fffffff5;
  box-shadow: 0 12px 36px #0f17292e;
}

:root[data-theme="light"] .ml-em-sheet {
  background: #fff;
  box-shadow: 0 20px 60px #0f172938;
}

:root[data-theme="light"] .ml-em-member-results {
  background: #fff;
  box-shadow: 0 8px 32px #0f172924;
}

:root[data-theme="light"] .ml-em-member-row:active {
  background: #0f17290d;
}

:root[data-theme="light"] .ml-em-search-input {
  background: #f4f5f7;
}

:root[data-theme="light"] {
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;
}

:root[data-theme="light"] .ml-profile-card-title, :root[data-theme="light"] .pf-prefs-section-label, :root[data-theme="light"] .cm-section-label, :root[data-theme="light"] .ml-section-label, :root[data-theme="light"] .ml-sub-label, :root[data-theme="light"] .ml-stat-value {
  color: var(--accent);
}

:root[data-theme="light"] .ml-header {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .18) 0%, transparent 70%),
        #f4f5f7;
}

:root[data-theme="light"] .ml-profile-card-title {
  background: rgba(var(--accent-rgb), .08);
}

:root[data-theme="light"] .ml-onb-input, :root[data-theme="light"] .ml-onb-picker, :root[data-theme="light"] .ml-onb-radio, :root[data-theme="light"] .ml-profile-input, :root[data-theme="light"] .ml-profile-picker-trigger {
  background: #fff;
  border-color: #0f172924;
}

:root[data-theme="light"] .ml-onb-backdrop {
  background: #0f172973;
}

*, :before, :after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-dark);
  color: var(--text-primary);
  overscroll-behavior-y: contain;
  overscroll-behavior-x: contain;
  touch-action: pan-y;
  background-image: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(var(--accent-rgb), .06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 110%, #6478ff0d 0%, transparent 60%);
  background-attachment: fixed;
  min-height: 100dvh;
  font-family: Inter, sans-serif;
  overflow-x: hidden;
}

.ml-header {
  min-height: var(--header-h);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .22) 0%, transparent 70%),
        var(--bg-dark);
  z-index: 1000;
  border-bottom: none;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 20px 6px 10px;
  display: flex;
  position: sticky;
  top: 0;
}

.ml-header-left {
  align-items: center;
  gap: 8px;
  display: flex;
}

.ml-menu-btn {
  color: var(--text-primary);
  width: min(2.375rem, 44px);
  height: min(2.375rem, 44px);
  box-shadow: 0 0 8px 2px rgba(var(--accent-rgb), .9);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: min(1.3rem, 22px);
  transition: color .2s;
  display: flex;
  position: relative;
}

.ml-menu-btn:hover {
  color: var(--accent);
}

.ml-header-back-btn {
  color: var(--text-primary);
  width: min(2.375rem, 44px);
  height: min(2.375rem, 44px);
  box-shadow: 0 0 8px 2px rgba(var(--accent-rgb), .9);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: min(1.3rem, 22px);
  transition: color .2s;
  display: flex;
}

.ml-header-back-btn:hover {
  color: var(--accent);
}

.ml-portal-switch-wrap {
  align-items: center;
  display: flex;
  position: relative;
}

.ml-portal-switch-wrap[hidden] {
  display: none !important;
}

.ml-portal-switch {
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 9px;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 6px;
  font-weight: 600;
  transition: background .15s, border-color .15s;
  display: flex;
}

.ml-portal-switch:hover {
  background: #ffffff0f;
  border-color: #ffffff14;
}

.ml-portal-switch > i:first-child {
  color: var(--accent);
  font-size: 1.05rem;
}

.ml-portal-switch-label {
  white-space: nowrap;
  font-size: .95rem;
}

.ml-portal-caret {
  transition: transform .18s;
  color: var(--text-muted, var(--text-secondary)) !important;
  font-size: 1.05rem !important;
}

.ml-portal-switch.is-open .ml-portal-caret {
  transform: rotate(180deg);
}

.ml-portal-menu {
  z-index: 120;
  background: #11141b;
  border: 1px solid #ffffff14;
  border-radius: 11px;
  flex-direction: column;
  gap: 1px;
  min-width: 220px;
  margin: 0;
  padding: 6px;
  list-style: none;
  animation: .14s ml-portal-fade;
  display: flex;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  box-shadow: 0 18px 44px #00000080;
}

:root[data-theme="light"] .ml-portal-menu {
  background: #fff;
  border-color: #00000014;
  box-shadow: 0 18px 44px #0000002e;
}

.ml-portal-opt {
  appearance: none;
  text-align: left;
  width: 100%;
  font: inherit;
  background: none;
  border: 0;
}

.ml-portal-opt[disabled] {
  opacity: 1;
}

.ml-portal-menu.hidden {
  display: none;
}

@keyframes ml-portal-fade {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.ml-portal-opt {
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 7px;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  font-size: .85rem;
  transition: background .12s, color .12s;
  display: flex;
}

.ml-portal-opt:hover {
  color: var(--text-primary);
  background: #ffffff0f;
}

.ml-portal-opt > i:first-child {
  color: var(--accent);
  font-size: 1.05rem;
}

.ml-portal-opt.is-current {
  color: var(--accent);
  cursor: default;
}

.ml-portal-opt.is-current:hover {
  background: none;
}

.ml-portal-tick, .ml-portal-arrow {
  color: var(--text-muted, var(--text-secondary));
  margin-left: auto;
  font-size: .95rem;
}

.ml-portal-opt.is-current .ml-portal-tick {
  color: var(--accent);
}

@media (width <= 540px) {
  .ml-portal-switch-label {
    display: none;
  }

  .ml-portal-switch {
    padding: 4px 6px;
  }
}

.ml-logo-wrap {
  align-items: center;
  gap: 10px;
  display: flex;
}

.ml-logo {
  object-fit: contain;
  height: 38px;
}

.ml-logo-text {
  letter-spacing: -.5px;
  background: linear-gradient(135deg, var(--accent), #fff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 1.1rem;
  font-weight: 700;
}

.ml-header-center {
  color: var(--text-primary);
  text-align: center;
  flex: 1;
  justify-content: center;
  align-items: center;
  min-width: 0;
  padding-left: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
}

#ml-header-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ml-header-home-btn {
  color: inherit;
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 4px 10px;
  font-weight: 700;
  transition: background .15s, color .15s;
  display: inline-flex;
}

.ml-header-home-btn:hover {
  background: rgba(var(--accent-rgb), .1);
  color: var(--accent);
}

.ml-header-home-icon {
  opacity: .85;
  flex-shrink: 0;
  font-size: 1.05rem;
}

.ml-header-home-btn[disabled], body.is-editing-form .ml-header-home-btn {
  pointer-events: none;
  cursor: default;
}

body.is-editing-form .ml-header-home-icon {
  display: none;
}

@media (width >= 640px) {
  .ml-header-center {
    text-align: center;
    pointer-events: none;
    flex: none;
    width: auto;
    padding-left: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .ml-header-home-btn {
    pointer-events: auto;
  }
}

@media (width <= 768px) {
  .ml-header-center {
    flex: 0 0 100%;
    order: 4;
    margin-top: -2px;
    padding: 16px 0 2px;
    position: static;
    transform: none;
  }

  .ml-header-home-btn {
    padding: 0 10px;
    font-size: 1.1rem;
    line-height: 1.25;
  }
}

.ml-header-right {
  align-items: center;
  gap: 8px;
  display: flex;
}

.ml-greeting {
  color: var(--text-muted);
  font-size: .9rem;
  font-weight: 500;
}

.ml-logout-btn {
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  background: #ffffff0a;
  border-radius: 20px;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}

.ml-logout-btn:hover {
  color: var(--danger);
  background: #e05c5c26;
  border-color: #e05c5c66;
}

.ml-logout-btn i {
  font-size: 1rem;
}

.ml-stats-strip {
  top: var(--header-h);
  z-index: 99;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  height: auto;
  padding: 16px 20px 18px;
  display: flex;
  position: sticky;
}

.ml-stats-top-row {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.ml-stats-bottom-row {
  border: 1px solid var(--border);
  background: #ffffff0a;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 420px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 4px 12px #0000001a;
}

:root[data-theme="light"] .ml-stats-strip {
  border-bottom-color: #00000014;
  box-shadow: 0 4px 12px #0000000d;
}

:root[data-theme="light"] .ml-stats-bottom-row {
  background: #00000009;
  border-color: #0000001a;
  box-shadow: 0 2px 8px #0000000d;
}

.ml-period-trigger, .ml-failsafe-trigger, .ml-balance-trigger, .ml-topup-trigger {
  cursor: pointer;
  user-select: none;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  transition: all .2s;
  display: flex;
}

.ml-period-trigger, .ml-failsafe-trigger, .ml-balance-trigger {
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
}

.ml-period-trigger:hover, .ml-failsafe-trigger:hover, .ml-balance-trigger:hover, .ml-topup-trigger:hover {
  background: #ffffff0f;
}

.ml-period-trigger label, .ml-failsafe-trigger label, .ml-balance-trigger label {
  color: var(--text-muted);
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  font-size: .68rem;
  font-weight: 600;
  display: flex;
}

.ml-period-trigger label i, .ml-failsafe-trigger label i {
  color: var(--accent);
  font-size: 1rem;
}

.ml-balance-trigger label i {
  color: var(--success);
  font-size: 1rem;
}

.ml-trigger-value {
  align-items: center;
  gap: 4px;
  display: flex;
}

.ml-trigger-value span {
  color: var(--text-primary);
  font-size: .9rem;
  font-weight: 600;
}

.ml-trigger-value .ml-dropdown-icon {
  color: var(--text-muted);
  font-size: 1rem;
}

.ml-stat-year {
  color: var(--text-muted) !important;
  font-weight: 500 !important;
}

.ml-stat {
  text-align: center;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 4px;
  display: flex;
}

.ml-stat label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  font-size: .7rem;
  font-weight: 600;
  display: flex;
}

.ml-stat label i {
  color: var(--accent);
  font-size: .95rem;
}

.ml-stat > span {
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.ml-stat-divider {
  background: var(--border);
  flex-shrink: 0;
  width: 1px;
  height: 24px;
}

.ml-topup-trigger {
  color: var(--success);
  letter-spacing: .5px;
  font-size: .72rem;
  font-weight: 800;
}

.ml-topup-trigger i {
  font-size: 1.1rem;
  color: inherit !important;
}

.ml-topup-trigger:hover {
  background: #5ce07c1a !important;
}

@keyframes topup-pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .8;
    transform: scale(1.04);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.ml-topup-trigger.pulse {
  animation: 2s ease-in-out infinite topup-pulse;
}

.ml-period-tabs {
  background: #0000004d;
  border-radius: 10px;
  width: 100%;
  margin-bottom: 16px;
  padding: 4px;
  display: flex;
}

.ml-period-tab {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 6px;
  flex: 1;
  padding: 8px;
  font-size: .9rem;
  font-weight: 600;
  transition: all .2s;
}

.ml-period-tab.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 2px 8px #0003;
}

.ml-period-content {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  display: grid;
}

.ml-period-btn {
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  text-align: center;
  background: #ffffff08;
  border-radius: 8px;
  padding: 10px 0;
  font-size: .85rem;
  font-weight: 500;
  transition: all .2s;
}

.ml-period-btn:hover {
  background: #ffffff14;
  border-color: #fff3;
}

.ml-period-btn.selected {
  background: rgba(var(--accent-rgb), .15);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

.ml-failsafe-options {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
  display: grid;
}

.ml-failsafe-opt {
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  text-align: center;
  background: #ffffff0a;
  border-radius: 12px;
  padding: 12px;
  font-size: .85rem;
  font-weight: 600;
  transition: all .25s;
}

.ml-failsafe-opt:hover {
  background: #ffffff14;
  border-color: #ffffff26;
}

.ml-failsafe-opt.active {
  background: rgba(var(--accent-rgb), .1);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 15px rgba(var(--accent-rgb), .15);
}

.ml-courts-wrap {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 16px 12px;
  display: flex;
}

.ml-outside-distraction {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 14px;
}

.ml-outside-distraction.hidden {
  display: none;
}

.ml-od-card {
  background: var(--bg-card, #00000059);
  border: 1px solid var(--border, #ffffff1a);
  border-radius: 12px;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: grid;
}

.ml-od-card.is-active {
  background: #f59e0b1a;
  border-color: #f59e0b66;
  grid-template-columns: 44px 1fr;
}

.ml-od-icon {
  width: 44px;
  height: 44px;
  color: var(--accent, #f5a623);
  background: #ffffff14;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  display: flex;
}

.ml-od-card.is-active .ml-od-icon {
  color: #fcd34d;
  background: #f59e0b2e;
}

.ml-od-copy {
  min-width: 0;
}

.ml-od-title {
  color: var(--text, #fff);
  font-size: 14px;
  font-weight: 700;
}

.ml-od-sub {
  color: var(--text-muted, #ffffffb3);
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
}

.ml-od-btn {
  background: var(--accent, #f5a623);
  color: #0a0d14;
  cursor: pointer;
  border: none;
  border-radius: 10px;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  transition: transform .15s;
  display: inline-flex;
}

.ml-od-btn:hover {
  transform: translateY(-1px);
}

.ml-od-btn:active {
  transform: translateY(0);
}

@media (width <= 500px) {
  .ml-od-card {
    grid-template-rows: auto auto;
    grid-template-columns: 40px 1fr;
  }

  .ml-od-btn {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .ml-od-card.is-active {
    grid-template-rows: auto;
  }
}

.ml-loading, .ml-error {
  color: var(--text-muted);
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  display: flex;
}

.ml-loading i, .ml-error i {
  color: var(--accent);
  font-size: 2.5rem;
}

.ml-loading p, .ml-error p {
  font-size: .95rem;
}

.ml-loading-bulbs {
  justify-content: center;
  align-items: center;
  gap: 18px;
  display: flex;
}

.ml-bulb {
  color: var(--text-muted);
  opacity: .25;
  font-size: 2.2rem;
  animation: 1.8s ease-in-out infinite bulb-glow;
}

.ml-bulb:first-child {
  animation-delay: 0s;
}

.ml-bulb:nth-child(2) {
  animation-delay: .6s;
}

.ml-bulb:nth-child(3) {
  animation-delay: 1.2s;
}

@keyframes bulb-glow {
  0%, 100% {
    opacity: .25;
    color: var(--text-muted);
    filter: none;
  }

  50% {
    opacity: 1;
    color: var(--accent);
    filter: drop-shadow(0 0 10px var(--accent)) drop-shadow(0 0 22px var(--accent-glow));
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.ml-spin {
  animation: 1.5s linear infinite spin;
  display: inline-block;
}

.ml-courts-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 700px;
  display: grid;
}

.ml-court-btn {
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 20px;
  outline: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 16px 12px;
  transition: transform .15s, background .25s, border-color .25s, box-shadow .25s;
  display: flex;
  position: relative;
}

.ml-court-btn:active {
  transform: scale(.93);
}

.ml-court-btn:hover:not(:disabled) {
  background: var(--bg-card-hover);
  border-color: #ffffff26;
}

.ml-court-btn.is-on {
  background: linear-gradient(145deg, rgba(var(--accent-rgb), .15), rgba(var(--accent-rgb), .05));
  border-color: rgba(var(--accent-rgb), .45);
  box-shadow: 0 0 28px var(--accent-glow), inset 0 0 20px rgba(var(--accent-rgb), .07);
}

.ml-court-icon {
  color: var(--text-muted);
  font-size: 2.6rem;
  line-height: 1;
  transition: color .25s, text-shadow .25s;
}

.ml-court-btn.is-on .ml-court-icon {
  color: var(--accent);
  text-shadow: 0 0 18px var(--accent-glow);
}

.ml-court-label {
  color: var(--text-primary);
  text-align: center;
  letter-spacing: .2px;
  font-size: .85rem;
  font-weight: 600;
}

.ml-court-status {
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-muted);
  background: #ffffff0f;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: .7rem;
  font-weight: 600;
  transition: background .25s, color .25s;
}

.ml-court-btn.is-on .ml-court-status {
  background: rgba(var(--accent-rgb), .18);
  color: var(--accent);
}

.ml-court-btn.loading {
  cursor: wait;
  opacity: .7;
}

@keyframes pulse-shadow {
  0%, 100% {
    box-shadow: 0 0 12px var(--accent-glow);
  }

  50% {
    box-shadow: 0 0 32px rgba(var(--accent-rgb), .6);
  }
}

.ml-court-btn.loading.is-on {
  animation: 1.2s ease-in-out infinite pulse-shadow;
}

.ml-court-btn.is-offline {
  cursor: not-allowed;
  opacity: .6;
  background: #ffffff05;
  border-color: #ffffff0d;
}

.ml-court-btn.is-offline .ml-court-icon {
  color: #b4bed24d;
}

.ml-court-btn.is-offline .ml-court-label {
  color: #b4bed280;
}

.ml-court-btn.is-offline .ml-court-status {
  color: #b4bed266;
  text-transform: none;
  letter-spacing: 0;
  background: none;
  padding: 0;
  font-size: .65rem;
  font-weight: 500;
}

.ml-court-btn.is-offline:hover:not(:disabled) {
  box-shadow: none;
  background: #ffffff05;
  border-color: #ffffff0d;
  transform: none;
}

.ml-analytics-wrap {
  border-top: 1px solid #ffffff0f;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
  padding: 0 16px 40px;
  display: flex;
}

.ml-analytics-header {
  flex-shrink: 0;
  width: 100%;
  max-width: 700px;
  padding: 12px 4px 0;
}

.ml-activity-list {
  width: 100%;
  max-width: 700px;
}

.ml-analytics-header h3 {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: .9rem;
  font-weight: 700;
}

.ml-activity-list {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.ml-activity-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem;
  font-size: .9rem;
}

.ml-activity-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color .2s;
}

.ml-activity-card.ml-card-active {
  border-color: rgba(var(--accent-rgb), .45);
  background: rgba(var(--accent-rgb), .04);
}

.ml-card-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.ml-card-duration {
  color: var(--text-primary);
  font-size: .95rem;
  font-weight: 700;
}

.ml-card-duration-active {
  color: var(--accent);
}

.ml-card-times {
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
  display: flex;
}

.ml-card-time-on, .ml-card-time-off {
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: .84rem;
  display: flex;
}

.ml-card-time-on {
  color: var(--success);
}

.ml-card-time-off {
  color: var(--danger);
  opacity: .85;
}

.ml-card-time-active {
  color: var(--accent);
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  font-weight: 600;
  display: flex;
}

.ml-card-footer {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  display: flex;
}

.ml-card-badges {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.ml-card-off-source {
  text-transform: uppercase;
  letter-spacing: .4px;
  border-radius: 20px;
  flex-shrink: 0;
  align-items: center;
  padding: 1px 7px;
  font-size: .68rem;
  font-weight: 700;
  display: inline-flex;
}

.ml-off-user {
  color: var(--success);
  background: #5ce07c26;
  border: 1px solid #5ce07c4d;
}

.ml-off-external {
  color: var(--text-muted);
  background: #ffffff12;
  border: 1px solid #ffffff1a;
}

.ml-off-social {
  background: rgba(var(--accent-rgb), .15);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .3);
}

.ml-off-auto {
  color: #8bb0ff;
  background: #6496ff26;
  border: 1px solid #6496ff4d;
}

.ml-off-safety {
  color: var(--danger);
  background: #e05c5c26;
  border: 1px solid #e05c5c4d;
}

.ml-off-committee {
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .3);
}

.ml-card-autooff {
  text-transform: uppercase;
  color: var(--text-muted);
  background: #b4bed21a;
  border: 1px solid #b4bed22e;
  border-radius: 20px;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: .72rem;
  font-weight: 700;
  display: inline-flex;
}

@media (width >= 640px) {
  .ml-analytics-header, .ml-activity-list {
    max-width: 700px;
  }
}

.ml-analytics-badge {
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 20px;
  align-items: center;
  padding: 4px 10px;
  font-size: .7rem;
  font-weight: 600;
  display: inline-flex;
}

.ml-badge-manual {
  color: var(--success);
  background: #5ce07c26;
  border: 1px solid #5ce07c4d;
}

.ml-badge-auto {
  background: rgba(var(--accent-rgb), .15);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .3);
}

.ml-badge-system {
  color: var(--danger);
  background: #e05c5c26;
  border: 1px solid #e05c5c4d;
}

.ml-badge-active {
  color: #8bb0ff;
  background: #6496ff26;
  border: 1px solid #6496ff4d;
}

.ml-badge-prepaid {
  color: var(--success);
  background: #5ce07c26;
  border: 1px solid #5ce07c4d;
}

.ml-badge-postpaid {
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .25);
}

.ml-court-btn.is-locked {
  opacity: .6;
  cursor: pointer;
  background: rgba(var(--accent-rgb), .05);
  border-color: rgba(var(--accent-rgb), .2);
  box-shadow: none;
}

.ml-court-btn.is-locked .ml-court-icon {
  color: var(--accent);
  opacity: .7;
}

.ml-court-btn.is-locked .ml-court-status {
  color: var(--accent);
  font-size: .72rem;
  font-weight: 600;
}

.ml-overlay {
  z-index: 9000;
  -webkit-backdrop-filter: blur(12px);
  background: #0a0d14eb;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
  position: fixed;
  inset: 0;
}

@keyframes ml-pop-in {
  from {
    opacity: 0;
    transform: scale(.85) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.hidden {
  display: none !important;
}

.ml-overlay.hidden {
  display: none;
}

.ml-pw-card {
  background: var(--bg-page, #0a0d14);
  border: 1px solid var(--border);
  overscroll-behavior: contain;
  border-radius: 24px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 700px;
  max-height: calc(100dvh - 32px);
  padding: 36px 28px 28px;
  display: flex;
  overflow-y: auto;
  box-shadow: 0 20px 60px #00000080;
}

.ml-pw-icon {
  background: rgba(var(--accent-rgb), .12);
  border: 1px solid rgba(var(--accent-rgb), .3);
  width: 64px;
  height: 64px;
  color: var(--accent);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  display: flex;
}

.ml-pw-card h2 {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
}

.ml-pw-card p {
  color: var(--text-muted);
  text-align: center;
  font-size: .85rem;
  line-height: 1.5;
}

.ml-pw-form {
  flex-direction: column;
  gap: 12px;
  width: 100%;
  display: flex;
}

.ml-input-group {
  border: 1px solid var(--border);
  background: #ffffff0a;
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  transition: border-color .2s;
  display: flex;
}

.ml-input-group:focus-within {
  border-color: var(--accent);
}

.ml-input-group > i {
  color: var(--text-muted);
  flex-shrink: 0;
  font-size: 1rem;
}

.ml-input-group input {
  color: var(--text-primary);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  padding: 12px 0;
  font-family: inherit;
  font-size: .9rem;
}

.ml-input-group input::placeholder {
  color: #b4bed266;
}

.ml-eye-btn {
  cursor: pointer;
  color: var(--text-muted);
  background: none;
  border: none;
  align-items: center;
  padding: 4px;
  transition: color .2s;
  display: flex;
}

.ml-eye-btn:hover {
  color: var(--text-primary);
}

.ml-pw-error {
  color: var(--danger);
  text-align: center;
  min-height: 18px;
  font-size: .8rem;
}

.ml-submit-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  width: 100%;
  min-height: 2.6em;
  color: var(--accent-text);
  cursor: pointer;
  border: none;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: .5em;
  margin-top: 4px;
  padding: .9em 1.1em;
  font-family: inherit;
  font-size: 1em;
  font-weight: 700;
  transition: opacity .2s, transform .15s;
  display: flex;
}

.ml-pw-card .ml-submit-btn {
  z-index: 1;
  position: sticky;
  bottom: 0;
}

.ml-submit-btn:hover {
  opacity: .9;
}

.ml-submit-btn:active {
  transform: scale(.97);
}

.ml-submit-btn:disabled {
  opacity: .55;
  cursor: wait;
}

.ml-toast {
  border: 1px solid var(--border);
  color: var(--text-primary);
  pointer-events: none;
  opacity: 0;
  z-index: 1000;
  white-space: nowrap;
  text-align: center;
  background: #1e2332f2;
  border-radius: 30px;
  max-width: calc(100vw - 40px);
  padding: 10px 22px;
  font-size: .85rem;
  font-weight: 500;
  transition: opacity .3s, transform .3s;
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  box-shadow: 0 8px 32px #0006;
}

.ml-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.ml-toast.success {
  color: var(--success);
  border-color: #5ce07c66;
}

.ml-toast.error {
  color: var(--danger);
  border-color: #e05c5c66;
}

:root[data-theme="light"] .ml-toast {
  color: var(--text-primary);
  background: #fff;
  border-color: #0f17291a;
  box-shadow: 0 12px 36px #0f17292e;
}

:root[data-theme="light"] .ml-toast.success {
  color: var(--success);
  background: #16a34a0f;
  border-color: #16a34a73;
}

:root[data-theme="light"] .ml-toast.error {
  color: var(--danger);
  background: #dc26260f;
  border-color: #dc262673;
}

.ml-verify-hint {
  color: var(--text-secondary);
  text-align: center;
  margin: 8px 0 4px;
  font-size: .9rem;
}

.ml-otp-wrapper {
  justify-content: center;
  margin: 16px 0 8px;
  display: flex;
}

.ml-otp-input {
  text-align: center;
  letter-spacing: 12px;
  border: 2px solid var(--accent);
  width: 200px;
  color: var(--text-primary);
  background: #ffffff14;
  border-radius: 12px;
  outline: none;
  padding: 12px 16px;
  font-size: 2rem;
  font-weight: 700;
  transition: box-shadow .2s;
}

.ml-otp-input:focus {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .3);
}

.ml-verify-attempts {
  color: var(--text-secondary);
  text-align: center;
  min-height: 1.2em;
  font-size: .82rem;
}

.ml-text-btn {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  text-decoration: underline;
  transition: color .15s;
}

.ml-text-btn:hover {
  color: var(--text-primary);
}

.ml-disclaimer-body {
  color: var(--text-secondary);
  text-align: left;
  width: 100%;
  font-size: .85rem;
  line-height: 1.6;
}

.ml-disclaimer-body p {
  margin: 0 0 8px;
}

.ml-disclaimer-body ul {
  margin: 0 0 8px;
  padding-left: 18px;
}

.ml-disclaimer-body li {
  margin-bottom: 4px;
}

.ml-disclaimer-body strong {
  color: var(--text-primary);
}

#ml-disclaimer-overlay .ml-pw-card {
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-height: 90vh;
  overflow-y: auto;
}

#ml-disclaimer-overlay .ml-pw-card::-webkit-scrollbar {
  display: none;
}

.ml-disclaimer-section-title {
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: .82rem;
  font-weight: 700;
  margin: 10px 0 2px !important;
}

.ml-disclaimer-checkbox {
  color: var(--text-secondary);
  cursor: pointer;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  font-size: .82rem;
  line-height: 1.4;
  display: flex;
}

.ml-disclaimer-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}

.ml-loading-small {
  color: var(--text-muted);
  grid-column: 1 / -1;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 20px;
  font-size: .9rem;
  display: flex;
}

@media (width <= 600px) {
  .ml-court-pill {
    padding: 2px 8px;
    font-size: .75rem;
  }
}

.ml-court-pill {
  border: 1px solid var(--border);
  color: var(--text-primary);
  background: #ffffff14;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  min-width: 28px;
  padding: 3px 10px;
  font-size: .8rem;
  font-weight: 700;
  display: inline-flex;
}

.ml-topup-amounts {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
  display: grid;
}

.ml-topup-amt-btn {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 12px;
  padding: 13px;
  font-size: 1rem;
  font-weight: 700;
  transition: border-color .2s, background .2s, box-shadow .2s, color .2s;
}

.ml-topup-amt-btn:hover, .ml-topup-amt-btn.selected {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), .1);
  box-shadow: 0 0 14px var(--accent-glow);
  color: var(--accent);
}

.ml-topup-custom-field {
  border: 1px solid var(--border);
  background: var(--bg-card);
  width: 100%;
  color: var(--text-primary);
  box-sizing: border-box;
  border-radius: 10px;
  margin-bottom: 6px;
  padding: 11px 14px;
  font-size: 1rem;
}

.ml-topup-custom-field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
  outline: none;
}

.ml-topup-pill {
  text-transform: uppercase;
  color: #8bb0ff;
  background: #6496ff1f;
  border: 1px solid #6496ff40;
  border-radius: 20px;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: .72rem;
  font-weight: 700;
  display: inline-flex;
}

.ml-topup-pill--wallet {
  color: #b478ff;
  background: #b478ff1f;
  border-color: #b478ff47;
}

.ml-topup-paid {
  color: var(--success);
  background: #5ce07c26;
  border: 1px solid #5ce07c4d;
}

.ml-topup-pending {
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .3);
}

.ml-topup-failed {
  color: var(--danger);
  background: #e05c5c1f;
  border: 1px solid #e05c5c40;
}

.ml-topup-amount-badge {
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .25);
  border-radius: 20px;
  align-items: center;
  padding: 2px 8px;
  font-size: .78rem;
  font-weight: 700;
  display: inline-flex;
}

.ml-topup-mins-badge {
  color: var(--success);
  background: #5ce07c1a;
  border: 1px solid #5ce07c40;
  border-radius: 20px;
  align-items: center;
  padding: 2px 8px;
  font-size: .78rem;
  font-weight: 700;
  display: inline-flex;
}

.ml-push-prompt {
  z-index: 850;
  border: 1px solid var(--accent-glow);
  -webkit-backdrop-filter: blur(12px);
  max-width: 640px;
  color: var(--text-primary);
  background: #0f121cf5;
  border-radius: 14px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
  padding: 12px 20px;
  font-size: .88rem;
  animation: .32s cubic-bezier(.16, 1, .3, 1) ml-push-prompt-rise;
  display: flex;
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  box-shadow: 0 12px 36px #0000008c;
}

@keyframes ml-push-prompt-rise {
  from {
    opacity: 0;
    transform: translateY(110%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ml-push-prompt-actions {
  flex-shrink: 0;
  gap: 8px;
  display: flex;
}

.ml-push-btn-yes {
  background: var(--accent);
  color: var(--accent-text);
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: .82rem;
  font-weight: 700;
}

.ml-push-btn-no {
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: pointer;
  background: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: .82rem;
}

.ml-offline-banner {
  background: rgba(var(--danger-rgb, 224, 92, 92), .92);
  background: color-mix(in srgb, var(--danger) 85%, transparent);
  color: #fff;
  text-align: center;
  z-index: 9999;
  backdrop-filter: blur(8px);
  border-top: 1px solid #e05c5c66;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: .85rem;
  font-weight: 600;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.ml-analytics-header {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.ml-active-filter-pill {
  background: rgba(var(--accent-rgb), .15);
  border: 1px solid var(--accent);
  color: var(--accent);
  cursor: pointer;
  border-radius: 20px;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 700;
  transition: all .2s;
  animation: .3s ease-out fadeInSlideRight;
  display: inline-flex;
}

.ml-active-filter-pill:hover {
  background: rgba(var(--accent-rgb), .25);
  transform: translateY(-1px);
}

.ml-active-filter-pill i:last-child {
  opacity: .7;
  font-size: 1rem;
}

@keyframes fadeInSlideRight {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ml-court-pill, .ml-topup-pill, .ml-analytics-badge {
  cursor: pointer;
  transition: transform .1s, filter .2s;
}

.ml-court-pill:hover, .ml-topup-pill:hover, .ml-analytics-badge:hover {
  filter: brightness(1.2);
  transform: scale(1.02);
}

.ml-court-pill:active, .ml-topup-pill:active, .ml-analytics-badge:active {
  transform: scale(.96);
}

.ml-update-toast {
  z-index: 2000;
  justify-content: center;
  animation: .6s cubic-bezier(.16, 1, .3, 1) slide-up-glow;
  display: flex;
  position: fixed;
  bottom: 24px;
  left: 20px;
  right: 20px;
}

.ml-update-toast.hidden {
  display: none;
}

.ml-update-content {
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--accent-rgb), .4);
  box-shadow: 0 16px 48px #0009, 0 0 24px rgba(var(--accent-rgb), .15);
  background: #0a0d14e6;
  border-radius: 18px;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 480px;
  padding: 14px 18px;
  display: flex;
}

.ml-update-icon {
  color: var(--accent);
  filter: drop-shadow(0 0 10px var(--accent-glow));
  font-size: 1.6rem;
}

.ml-update-text {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  display: flex;
}

.ml-update-text strong {
  color: var(--text-primary);
  font-size: .92rem;
}

.ml-update-text span {
  color: var(--text-muted);
  font-size: .78rem;
}

.ml-update-btn {
  background: var(--accent);
  color: var(--accent-text);
  cursor: pointer;
  border: none;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: .85rem;
  font-weight: 700;
  transition: all .25s cubic-bezier(.175, .885, .32, 1.275);
  display: flex;
}

.ml-update-btn:hover {
  box-shadow: 0 6px 16px var(--accent-glow);
  transform: translateY(-2px);
}

:root[data-theme="light"] .ml-update-content, :root[data-theme="light"] .ml-update-loading-card {
  border-color: rgba(var(--accent-rgb), .45);
  box-shadow: 0 16px 48px #0f17292e, 0 0 24px rgba(var(--accent-rgb), .18);
  background: #fff;
}

:root[data-theme="light"] .ml-update-content {
  color: var(--text-primary);
}

.ml-update-btn:active {
  transform: translateY(0);
}

.ml-update-close {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  padding: 6px;
  font-size: 1.3rem;
  transition: all .2s;
  display: flex;
}

.ml-update-close:hover {
  color: var(--text-primary);
  transform: rotate(90deg);
}

@keyframes slide-up-glow {
  from {
    opacity: 0;
    transform: translateY(120px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#ml-update-loading-overlay {
  z-index: 100000;
}

.ml-update-skip {
  border: 1px solid var(--border, #ffffff2e);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border-radius: 999px;
  margin-top: 12px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: .82rem;
  transition: color .15s, border-color .15s;
}

.ml-update-skip.hidden {
  display: none !important;
}

.ml-update-skip:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}

.ml-update-loading-card {
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(var(--accent-rgb), .35);
  text-align: center;
  width: 90%;
  max-width: 320px;
  box-shadow: 0 24px 64px #000000b3, 0 0 32px rgba(var(--accent-rgb), .1);
  background: #0a0d14f2;
  border-radius: 24px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 36px;
  animation: .35s cubic-bezier(.16, 1, .3, 1) fade-in-scale;
  display: flex;
}

.ml-update-loading-card h2 {
  color: var(--text-primary);
  margin: 0;
  font-size: 1.3rem;
}

.ml-update-loading-card p {
  color: var(--text-muted);
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
}

.ml-update-loading-icon {
  color: var(--accent);
  filter: drop-shadow(0 0 14px var(--accent-glow));
  font-size: 2.8rem;
}

@keyframes rocket-launch {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-6px) rotate(-8deg);
  }

  60% {
    opacity: 1;
    transform: translateY(-14px) rotate(8deg);
  }

  100% {
    opacity: 0;
    transform: translateY(-36px) rotate(0);
  }
}

@keyframes rocket-reappear {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.ml-update-loading-icon.launching {
  animation: .9s ease-in forwards rocket-launch, .5s ease-out 1s forwards rocket-reappear;
}

.ml-update-spinner {
  color: var(--accent);
  opacity: .85;
  margin-top: 8px;
  font-size: 2rem;
}

@keyframes fade-in-scale {
  from {
    opacity: 0;
    transform: scale(.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.ml-menu-overlay {
  -webkit-backdrop-filter: blur(8px);
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  background: #0006;
  transition: all .4s cubic-bezier(.16, 1, .3, 1);
  position: fixed;
  inset: 0;
}

.ml-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.ml-side-menu {
  top: var(--header-h);
  border-right: 1px solid var(--sun-pill-border);
  z-index: 910;
  background: #000;
  flex-direction: column;
  width: 75vw;
  max-width: 320px;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
}

@media (width <= 768px) {
  :root {
    --header-h: 110px;
  }

  .ml-menu-content {
    padding-top: 0;
  }
}

.ml-portal-burger-section {
  margin: 0 8px 8px;
  padding: 0;
  list-style: none;
  display: none;
  position: relative;
}

.ml-portal-burger-toggle {
  width: 100%;
  color: var(--text-primary, #fff);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 9px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 6px;
  font-weight: 600;
  transition: background .15s, border-color .15s;
  display: flex;
}

.ml-portal-burger-toggle:hover {
  background: var(--bg-card-hover, #ffffff0f);
  border-color: var(--border, #ffffff1f);
}

.ml-portal-burger-toggle > i:first-child {
  color: var(--accent);
  text-align: center;
  width: 22px;
  font-size: 1.1rem;
}

.ml-portal-burger-current {
  text-align: left;
  flex: 1;
}

.ml-portal-burger-caret {
  color: var(--text-muted, #fff9);
  font-size: 1.05rem;
  transition: transform .18s;
}

.ml-portal-burger-section.is-open .ml-portal-burger-caret {
  transform: rotate(180deg);
}

.ml-portal-burger-menu {
  background: var(--bg-elev, #000);
  border: 1px solid var(--border, #ffffff1f);
  border-radius: 11px;
  flex-direction: column;
  min-width: 220px;
  margin: 6px 0 0;
  padding: 6px;
  list-style: none;
  animation: .14s ml-portal-burger-fade;
  display: flex;
  box-shadow: 0 18px 44px #00000080;
}

.ml-portal-burger-menu.hidden {
  display: none;
}

@keyframes ml-portal-burger-fade {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.ml-portal-burger-item {
  color: var(--text-muted, #ffffffb8);
  cursor: pointer;
  border-radius: 7px;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  font-size: .85rem;
  transition: background .12s, color .12s;
  display: flex;
}

.ml-portal-burger-item:hover {
  background: var(--bg-card-hover, #ffffff0f);
  color: var(--text-primary, #fff);
}

.ml-portal-burger-item > i:first-child {
  color: var(--accent);
  text-align: center;
  width: 22px;
  font-size: 1.05rem;
}

.ml-portal-burger-item > span {
  flex: 1;
}

.ml-portal-burger-item.is-current {
  color: var(--accent);
  cursor: default;
}

.ml-portal-burger-item.is-current:hover {
  background: none;
}

.ml-portal-burger-tick, .ml-portal-burger-arrow {
  color: var(--text-faint, #fff6);
  margin-left: auto;
  font-size: .95rem;
}

.ml-portal-burger-item.is-current .ml-portal-burger-tick {
  color: var(--accent);
}

.ml-portal-burger-divider {
  background: var(--border, #ffffff14);
  height: 1px;
  margin: 10px 6px 6px;
}

@media (width <= 768px) {
  .ml-portal-burger-section {
    display: block;
  }

  .ml-portal-switch-wrap {
    display: none !important;
  }
}

:root[data-theme="light"] .ml-portal-burger-menu {
  background: #fff;
  border-color: #0000001f;
  box-shadow: 0 18px 44px #0000002e;
}

:root[data-theme="light"] .ml-portal-burger-toggle:hover {
  background: #0000000a;
  border-color: #0000001f;
}

:root[data-theme="light"] .ml-portal-burger-item:hover {
  background: #0000000a;
}

.ml-side-menu.active {
  transform: translateX(0);
  box-shadow: 20px 0 60px #00000080;
}

:root {
  --ml-rail-w: 240px;
  --ml-rail-w-collapsed: 64px;
}

@media (width >= 1100px) {
  body.ml-rail-pinned {
    padding-left: var(--ml-rail-w);
    transition: padding-left .18s;
  }

  body.ml-rail-pinned.ml-rail-collapsed-shell {
    padding-left: var(--ml-rail-w-collapsed);
  }

  body.ml-rail-pinned .ml-header {
    margin-left: calc(-1 * var(--ml-rail-w));
    width: calc(100% + var(--ml-rail-w));
    transition: margin-left .18s, width .18s;
  }

  body.ml-rail-pinned.ml-rail-collapsed-shell .ml-header {
    margin-left: calc(-1 * var(--ml-rail-w-collapsed));
    width: calc(100% + var(--ml-rail-w-collapsed));
  }

  body.ml-rail-pinned .ml-header-center {
    margin-left: calc(var(--ml-rail-w) / 2);
    transition: margin-left .18s;
  }

  body.ml-rail-pinned.ml-rail-collapsed-shell .ml-header-center {
    margin-left: calc(var(--ml-rail-w-collapsed) / 2);
  }

  body.ml-rail-pinned .ml-menu-btn {
    box-shadow: none;
    background: none;
    border-radius: 8px;
  }

  body.ml-rail-pinned .ml-menu-btn:hover {
    background: rgba(var(--accent-rgb), .1);
  }

  body.ml-rail-pinned .ml-menu-header {
    display: none;
  }

  body.ml-rail-pinned .ml-side-menu {
    width: var(--ml-rail-w);
    max-width: none;
    box-shadow: none;
    transition: transform .18s, width .18s;
    transform: translateX(0) !important;
  }

  body.ml-rail-pinned .ml-side-menu.ml-rail-collapsed {
    width: var(--ml-rail-w-collapsed);
  }

  body.ml-rail-pinned .ml-menu-overlay {
    display: none !important;
  }

  body.ml-rail-pinned .ml-side-menu.ml-rail-collapsed .ml-nav-item span, body.ml-rail-pinned .ml-side-menu.ml-rail-collapsed .ml-menu-section-label, body.ml-rail-pinned .ml-side-menu.ml-rail-collapsed .ml-menu-header-text, body.ml-rail-pinned .ml-side-menu.ml-rail-collapsed .ml-portal-switcher-text {
    display: none;
  }

  body.ml-rail-pinned .ml-side-menu.ml-rail-collapsed .ml-nav-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  body.ml-rail-pinned .ml-side-menu.ml-rail-collapsed .ml-menu-content {
    padding-left: 4px;
    padding-right: 4px;
  }

  body.ml-rail-pinned .ml-side-menu.ml-rail-collapsed .ml-nav-sub-label, body.ml-rail-pinned .ml-side-menu.ml-rail-collapsed .ml-menu-footer p {
    display: none;
  }

  body.ml-rail-pinned .ml-side-menu.ml-rail-collapsed .ml-nav-item.ml-nav-section-label {
    border-top: 1px solid var(--border, #ffffff14);
    cursor: default;
    pointer-events: none;
    gap: 0;
    margin-top: 8px;
    padding: 6px 8px;
    font-size: 0;
  }

  body.ml-rail-pinned .ml-side-menu.ml-rail-collapsed .ml-nav-item.ml-nav-section-label i, body.ml-rail-pinned .ml-side-menu.ml-rail-collapsed .ml-nav-item.ml-nav-section-label .ml-nav-section-chevron {
    display: none;
  }

  body.ml-rail-pinned .ml-side-menu.ml-rail-collapsed .ml-sign-out-btn {
    justify-content: center;
    gap: 0;
    padding: 8px 4px;
    font-size: 0;
  }

  body.ml-rail-pinned .ml-side-menu.ml-rail-collapsed .ml-sign-out-btn i {
    margin: 0;
    font-size: 1.1rem;
  }

  body.ml-rail-pinned .ml-side-menu.ml-rail-collapsed .ml-menu-footer {
    padding: 8px 4px;
  }
}

.ml-menu-header {
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  display: flex;
}

.ml-menu-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb, 79 195 247), .3) transparent;
  flex: 1;
  padding: 0 0 24px;
  overflow-y: auto;
}

.ml-menu-content::-webkit-scrollbar {
  width: 6px;
}

.ml-menu-content::-webkit-scrollbar-track {
  background: none;
}

.ml-menu-content::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb, 79 195 247), .3);
  border-radius: 10px;
}

.ml-menu-content:hover::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb, 79 195 247), .5);
}

.ml-nav-list {
  flex-direction: column;
  gap: 4px;
  list-style: none;
  display: flex;
}

.ml-nav-item {
  color: var(--text-muted);
  cursor: pointer;
  align-items: center;
  gap: 14px;
  padding: 9px 20px;
  font-size: .88rem;
  font-weight: 500;
  transition: all .2s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.ml-nav-item:hover {
  color: var(--text-primary);
  background: #ffffff0a;
}

.ml-nav-item.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), .08);
}

.ml-nav-item.ml-nav-item--home {
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .3);
  color: var(--accent);
  border-radius: 12px;
  margin: 4px 12px 8px;
  padding: 10px 14px;
  font-weight: 600;
}

.ml-nav-item.ml-nav-item--home:hover {
  background: rgba(var(--accent-rgb), .16);
  color: var(--accent);
  border-color: var(--accent);
}

.ml-nav-item.ml-nav-item--home i {
  color: var(--accent);
  opacity: 1;
}

.ml-nav-item.ml-nav-item--home:before {
  display: none;
}

.ml-nav-item.active:before {
  content: "";
  background: var(--accent);
  width: 3px;
  color: var(--accent-text);
  box-shadow: 2px 0 10px var(--accent-glow);
  border-radius: 0 4px 4px 0;
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
}

.ml-nav-divider {
  background: var(--color-border);
  pointer-events: none;
  height: 1px;
  margin: 6px 16px;
}

.ml-nav-item.ml-nav-section-label {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 1;
  cursor: pointer;
  gap: 8px;
  padding: 10px 20px 4px;
  font-size: .7rem;
  font-weight: 700;
}

.ml-nav-item.ml-nav-section-label i {
  color: var(--accent);
  opacity: 1;
  font-size: 1.1rem;
}

.ml-nav-item.ml-nav-section-label:hover {
  background: rgba(var(--accent-rgb), .06);
}

.ml-nav-sub-label {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .55;
  pointer-events: none;
  padding: 10px 20px 2px;
  font-size: .6rem;
  font-weight: 700;
  list-style: none;
}

.ml-nav-portal-switch {
  z-index: 5;
  border-bottom: 1px solid var(--border, #ffffff0f);
  background: #000;
  padding: 12px 12px 8px;
  list-style: none;
  position: sticky;
  top: 0;
}

:root[data-theme="light"] .ml-nav-portal-switch {
  background: #fff;
}

.ml-nav-portal-btn {
  background: rgba(var(--accent-rgb), .1);
  border: 1px solid rgba(var(--accent-rgb), .35);
  width: 100%;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 11px;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: .86rem;
  font-weight: 600;
  transition: background .15s, border-color .15s;
  display: flex;
}

.ml-nav-portal-btn:hover {
  background: rgba(var(--accent-rgb), .16);
}

.ml-nav-portal-btn > i:first-child {
  color: var(--accent);
  font-size: 1.2rem;
}

.ml-nav-portal-current {
  text-align: left;
  flex: 1;
  min-width: 0;
}

.ml-nav-portal-caret {
  color: var(--text-muted);
  font-size: 1.05rem;
  transition: transform .18s;
}

.ml-nav-portal-switch.is-open .ml-nav-portal-caret {
  transform: rotate(180deg);
}

.ml-nav-portal-menu {
  border: 1px solid var(--border);
  background: #11141b;
  border-radius: 11px;
  margin: 6px 0 0;
  padding: 6px;
  list-style: none;
  animation: .14s ml-portal-fade;
  box-shadow: 0 12px 32px #00000073;
}

:root[data-theme="light"] .ml-nav-portal-menu {
  background: #fff;
  border-color: #0000001a;
  box-shadow: 0 14px 36px #0000002e;
}

.ml-nav-portal-menu.hidden {
  display: none;
}

.ml-nav-portal-opt {
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: .84rem;
  transition: background .12s, color .12s;
  display: flex;
}

.ml-nav-portal-opt:hover {
  background: rgba(var(--accent-rgb), .12);
  color: var(--text-primary);
}

.ml-nav-portal-opt > i:first-child {
  color: var(--accent);
  font-size: 1.1rem;
}

.ml-nav-portal-opt.is-current {
  color: var(--accent);
  cursor: default;
}

.ml-nav-portal-opt.is-current:hover {
  background: none;
}

.ml-nav-portal-tick, .ml-nav-portal-arrow {
  color: #fff6;
  margin-left: auto;
  font-size: .95rem;
}

:root[data-theme="light"] .ml-nav-portal-tick, :root[data-theme="light"] .ml-nav-portal-arrow {
  color: #00000059;
}

.ml-nav-portal-opt.is-current .ml-nav-portal-tick {
  color: var(--accent);
}

.ml-nav-section-chevron {
  opacity: .65;
  margin-left: auto;
  font-size: .95rem;
  transition: transform .2s;
}

.ml-nav-item.ml-nav-section-toggle {
  align-items: center;
  display: flex;
}

.ml-nav-item i {
  opacity: .8;
  font-size: 1.4rem;
}

.ml-nav-item.active i {
  opacity: 1;
}

.ml-nav-dot {
  background: #c8e63a;
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-left: auto;
}

:root[data-theme="light"] .ml-nav-dot {
  background: var(--accent);
}

.ml-menu-btn.has-notif:after {
  content: "";
  border: 1.5px solid var(--bg-dark);
  background: #c8e63a;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  position: absolute;
  top: 2px;
  right: 2px;
}

:root[data-theme="light"] .ml-menu-btn.has-notif:after {
  background: var(--accent);
}

.ml-menu-footer {
  border-top: 1px solid var(--border);
  padding: 20px;
}

.ml-menu-footer p {
  color: #b4bed266;
  text-align: center;
  margin-bottom: 12px;
  font-size: .75rem;
}

.ml-sign-out-btn {
  color: #e05c5cb3;
  cursor: pointer;
  letter-spacing: .3px;
  background: none;
  border: 1px solid #e05c5c33;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  transition: all .25s;
  display: flex;
}

.ml-sign-out-btn i {
  opacity: .85;
  font-size: 1.2rem;
}

.ml-sign-out-btn:hover {
  color: #e05c5c;
  background: #e05c5c1a;
  border-color: #e05c5c73;
  box-shadow: 0 0 16px #e05c5c1f;
}

.ml-sign-out-btn:active {
  transform: scale(.98);
}

.ml-soon-card {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  text-align: center;
  border-radius: 28px;
  flex-direction: column;
  align-items: center;
  width: 90%;
  max-width: 340px;
  padding: 48px 32px;
  display: flex;
  box-shadow: 0 32px 64px #0006;
}

.ml-soon-icon-wrap {
  background: rgba(var(--accent-rgb), .1);
  border: 1px solid var(--accent-glow);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
  display: flex;
  position: relative;
}

.ml-soon-icon-wrap i {
  color: var(--accent);
  filter: drop-shadow(0 0 10px var(--accent-glow));
  font-size: 2.5rem;
}

.ml-directory-filter-area {
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: 8px;
  padding: 0 24px 12px;
  display: flex;
}

.ml-role-pill {
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  background: #ffffff0d;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: .72rem;
  font-weight: 600;
  transition: all .2s;
}

.ml-role-pill:hover, .ml-role-pill.active {
  background: rgba(var(--accent-rgb), .1);
  border-color: var(--accent);
  color: var(--accent);
}

.ml-active-filter-pill {
  background: rgba(var(--accent-rgb), .15);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 20px;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: .8rem;
  font-weight: 600;
  display: inline-flex;
}

.ml-active-filter-pill i {
  cursor: pointer;
  opacity: .8;
  font-size: 1rem;
}

.ml-active-filter-pill i:hover {
  opacity: 1;
}

.ml-active-filter-pill--court {
  border-color: var(--border);
  color: var(--text-primary);
  background: #ffffff14;
}

.ml-active-filter-pill--court:hover {
  background: #ffffff24;
}

.ml-active-filter-pill--topup {
  color: #8bb0ff;
  background: #6496ff1f;
  border-color: #6496ff40;
}

.ml-active-filter-pill--topup:hover {
  background: #6496ff38;
}

.ml-active-filter-pill--prepaid {
  color: var(--success);
  background: #5ce07c26;
  border-color: #5ce07c4d;
}

.ml-active-filter-pill--prepaid:hover {
  background: #5ce07c40;
}

.ml-active-filter-pill--wallet {
  color: #b478ff;
  background: #b478ff1f;
  border-color: #b478ff47;
}

.ml-active-filter-pill--wallet:hover {
  background: #b478ff38;
}

.ml-directory-info .ml-directory-name span {
  white-space: nowrap;
}

.ml-directory-role {
  cursor: pointer;
  padding: 2px 0;
  display: inline-block;
}

.ml-directory-role:hover {
  text-decoration: underline;
}

.ml-chat-actions {
  justify-content: center;
  padding: 10px 15px;
  display: flex;
}

button.ml-chat-new-btn, .ml-chat-new-btn {
  margin: 0 auto;
  background: var(--amber-gradient) !important;
  color: var(--deep-blue) !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  border: none !important;
  border-radius: 30px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  padding: 12px 28px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275) !important;
  display: flex !important;
  box-shadow: 0 4px 15px #ffbf004d !important;
}

.ml-chat-new-btn:hover {
  filter: brightness(1.1) !important;
  color: var(--deep-blue) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 25px #ffbf0066 !important;
}

.ml-chat-new-btn:active {
  transform: translateY(0) scale(.98) !important;
}

.ml-directory-modal {
  flex-direction: column !important;
  width: 100% !important;
  max-width: 400px !important;
  height: 75vh !important;
  padding: 0 !important;
  display: flex !important;
  overflow: hidden !important;
}

.ml-modal-header {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 24px 24px 16px;
  display: flex;
}

.ml-modal-title {
  color: var(--text-primary);
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
}

.ml-directory-search-wrap {
  border: 1px solid var(--border);
  background: #ffffff08;
  border-radius: 12px;
  flex-shrink: 0;
  align-items: center;
  height: 42px;
  margin: 0 24px 16px;
  padding: 0 16px;
  display: flex;
}

.ml-directory-search-wrap i {
  color: var(--text-muted);
  margin-right: 12px;
  font-size: 1.2rem;
}

.ml-directory-search {
  color: var(--text-primary);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  font-family: inherit;
  font-size: .95rem;
}

.ml-directory-search::placeholder {
  color: var(--text-muted);
}

.ml-directory-list {
  box-sizing: border-box;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  width: 100%;
  padding: 0 12px 24px;
  display: flex;
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(#0000 0, #000 28px calc(100% - 28px), #0000 100%);
  mask-image: linear-gradient(#0000 0, #000 28px calc(100% - 28px), #0000 100%);
}

.ml-message.deleted {
  opacity: .6;
  font-style: italic;
}

.ml-message-content {
  position: relative;
}

.ml-message-delete-btn {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  background: #1e1e28d9;
  border: 1px solid #ffffff1f;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: .6rem;
  line-height: 1;
  transition: opacity .15s, background .15s;
  display: flex;
  position: absolute;
  top: -7px;
  right: -7px;
}

.ml-message:hover .ml-message-delete-btn {
  opacity: 1;
}

.ml-message-delete-btn:hover {
  border-color: #0000;
  color: #fff !important;
  background: #dc3232bf !important;
}

:root[data-theme="light"] .ml-message-delete-btn {
  color: #0f17298c;
  background: #fff;
  border-color: #0f17292e;
  box-shadow: 0 2px 6px #0f172926;
}

.ml-directory-list::-webkit-scrollbar {
  display: none;
}

.ml-directory-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ml-directory-item {
  cursor: pointer;
  box-sizing: border-box;
  background: #ffffff08;
  border: 1px solid #ffffff0f;
  border-radius: 16px;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-bottom: 2px;
  padding: 14px 12px;
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
  display: flex;
}

.ml-directory-item:hover {
  background: rgba(var(--accent-rgb), .08);
  border-color: rgba(var(--accent-rgb), .3);
  transform: translateX(4px);
}

.ml-directory-info {
  flex-direction: column;
  flex: 1;
  gap: 1px;
  line-height: 1.25;
  display: flex;
}

.ml-directory-name {
  color: var(--text-primary);
  align-items: baseline;
  gap: 6px;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
}

.ml-dir-surname {
  opacity: .9;
  font-size: 1rem;
}

.ml-directory-role {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 2px;
  font-size: .75rem;
  font-weight: 600;
}

.ml-directory-arrow {
  opacity: .4;
  color: var(--text-muted);
  font-size: 1.2rem;
  transition: transform .2s;
}

.ml-directory-item:hover .ml-directory-arrow {
  opacity: 1;
  color: var(--accent);
  transform: translateX(2px);
}

.ml-soon-card h2 {
  background: linear-gradient(135deg, var(--text-primary), var(--accent));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 12px;
  font-size: 1.5rem;
  font-weight: 800;
}

.ml-soon-card p {
  color: var(--text-muted);
  margin-bottom: 24px;
  font-size: .95rem;
  line-height: 1.6;
}

.ml-soon-badge {
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), .1);
  border: 1px solid rgba(var(--accent-rgb), .2);
  border-radius: 20px;
  margin-bottom: 20px;
  padding: 4px 12px;
  font-size: .7rem;
  font-weight: 700;
}

.mdi-spin-slow {
  animation: 3s linear infinite mdi-spin;
}

.ml-chat-view {
  width: 100%;
  max-width: 712px;
  height: calc(100vh - var(--header-h));
  padding: 16px;
  padding-bottom: env(safe-area-inset-bottom, 16px);
  z-index: 100;
  flex-direction: column;
  gap: 16px;
  margin: 0 auto;
  display: flex;
  position: relative;
  pointer-events: auto !important;
}

@media (width >= 640px) {
  .ml-chat-view {
    padding: 24px 20px;
  }
}

.ml-chat-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.ml-chat-header h2 {
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: 700;
}

.ml-chat-list-container {
  flex-direction: column;
  gap: 16px;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.ml-chat-list-container.hidden {
  display: none;
}

.ml-chat-search-wrap {
  border: 1px solid var(--border);
  background: #ffffff0a;
  border-radius: 28px;
  flex-shrink: 0;
  align-items: center;
  gap: 16px;
  height: auto;
  min-height: 52px;
  padding: 6px 16px 6px 8px;
  transition: all .2s;
  display: flex;
}

.ml-chat-search-wrap:focus-within {
  border-color: rgba(var(--accent-rgb), .4);
  box-shadow: 0 0 15px rgba(var(--accent-rgb), .1);
  background: #ffffff14;
}

.ml-chat-search-wrap i.mdi-magnify {
  color: var(--text-muted);
  pointer-events: none;
  opacity: .6;
  font-size: 1.3rem;
}

.ml-chat-search {
  color: var(--text-primary);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  font-size: .95rem;
}

.ml-chat-search::placeholder {
  color: var(--text-muted);
}

.ml-chat-fab {
  background: var(--accent);
  width: 60px;
  height: 60px;
  color: var(--accent-text);
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), .3);
  cursor: pointer;
  z-index: 50;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
}

.ml-chat-fab:hover {
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), .45);
  transform: translateX(-50%) translateY(-3px) scale(1.05);
}

.ml-chat-fab:active {
  transform: translateY(0) scale(.95);
}

.ml-chat-actions, .ml-chat-new-btn {
  display: none;
}

.ml-list-mask.is-scrolling {
  -webkit-mask-image: linear-gradient(to bottom, var(--mask-top, black 0), black var(--mask-f-top, 28px), black calc(100% - var(--mask-f-bottom, 28px)), var(--mask-bottom, black 100%));
  mask-image: linear-gradient(to bottom, var(--mask-top, black 0), black var(--mask-f-top, 28px), black calc(100% - var(--mask-f-bottom, 28px)), var(--mask-bottom, black 100%));
}

.ml-threads-fade-top, .ml-list-fade-top {
  --mask-top: transparent 0, black var(--mask-f-top, 28px);
}

.ml-threads-fade-bottom, .ml-list-fade-bottom {
  --mask-bottom: black calc(100% - var(--mask-f-bottom, 28px)), transparent 100%;
}

.ml-chat-threads {
  scrollbar-width: none;
  -ms-overflow-style: none;
  --mask-f-bottom: 60px;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  min-height: 0;
  padding-bottom: 80px;
  display: flex;
  overflow-y: auto;
}

.ml-chat-threads::-webkit-scrollbar {
  display: none;
}

.ml-chat-thread-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 16px;
  align-items: center;
  gap: 16px;
  padding: 16px;
  transition: all .2s;
  display: flex;
}

.ml-chat-thread-card:hover {
  background: var(--bg-card-hover);
  border-color: #ffffff26;
}

.ml-chat-avatar {
  width: 48px;
  height: 48px;
  color: var(--accent);
  border: 1px solid var(--border);
  background: #ffffff1a;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  display: flex;
}

.ml-chat-avatar-img {
  object-fit: cover;
  background: none;
  border: none;
  padding: 0;
}

.ml-chat-header-avatar {
  object-fit: cover;
  border: 1px solid var(--border);
  cursor: pointer;
  background: #ffffff1a;
  border-radius: 50%;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  transition: transform .2s;
}

.ml-chat-header-avatar:hover {
  transform: scale(1.05);
}

.ml-chat-header-avatar.hidden {
  display: none;
}

.ml-chat-thread-info {
  flex: 1;
  min-width: 0;
}

.ml-chat-thread-header {
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  display: flex;
}

.ml-chat-thread-info h4 {
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  overflow: hidden;
}

.ml-chat-time {
  color: var(--text-muted);
  font-size: .75rem;
}

.ml-chat-snippet {
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-size: .85rem;
  overflow: hidden;
}

.ml-chat-thread-body {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.ml-chat-thread-meta {
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  display: flex;
}

.ml-chat-unread-badge {
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 10px;
  margin-left: 8px;
  padding: 2px 7px;
  font-size: .7rem;
  font-weight: 800;
}

.ml-chat-conversation {
  z-index: 110;
  background: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
  transition: transform .3s, opacity .3s;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto !important;
}

.ml-chat-date-separator {
  justify-content: center;
  margin: 16px 0;
  display: flex;
}

.ml-chat-date-separator span {
  backdrop-filter: blur(8px);
  color: var(--text-muted);
  background: #ffffff14;
  border-radius: 12px;
  padding: 6px 14px;
  font-size: .75rem;
  font-weight: 600;
  box-shadow: 0 2px 8px #0003;
}

.ml-chat-threads.hidden {
  display: none;
}

.ml-chat-conversation.hidden {
  pointer-events: none;
  opacity: 0;
  transform: translateX(100%);
}

.ml-chat-conversation-header {
  border: 1px solid var(--border);
  backdrop-filter: blur(15px);
  background: #ffffff08;
  border-radius: 24px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 16px;
  padding: 12px 16px;
  display: flex;
}

.ml-chat-delete-conv {
  width: 36px;
  height: 36px;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  transition: all .2s;
  display: flex;
}

#ml-chat-back, .ml-back-btn, #ml-chat-list-back {
  background: rgba(var(--accent-rgb), .1);
  width: 36px;
  height: 36px;
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .2);
  cursor: pointer;
  z-index: 20;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: all .2s;
  display: flex;
}

#ml-chat-back:hover, .ml-back-btn:hover, #ml-chat-list-back:hover {
  background: rgba(var(--accent-rgb), .2);
  border-color: rgba(var(--accent-rgb), .4);
  transform: translateY(-1px);
}

.ml-chat-active-name {
  color: var(--text-muted);
  font-size: 1.05rem;
  font-weight: 600;
}

.ml-chat-messages {
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding: 16px;
  display: flex;
  overflow-y: auto;
}

.ml-chat-messages::-webkit-scrollbar {
  display: none;
}

.ml-message {
  border-radius: 18px;
  flex-direction: column;
  gap: 4px;
  max-width: 85%;
  padding: 10px 14px;
  font-size: .94rem;
  line-height: 1.4;
  display: flex;
  position: relative;
  box-shadow: 0 2px 5px #0000001a;
}

.ml-message.them {
  color: var(--text-primary);
  background: #ffffff14;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}

.typing-indicator-msg {
  border: 1px dashed #ffffff1a;
  margin-bottom: 8px;
  background: #ffffff0d !important;
  padding: 8px 14px !important;
}

.typing-indicator-msg .ml-message-content {
  align-items: center;
  gap: 10px;
  display: flex;
  padding-right: 0 !important;
}

.ml-typing-text {
  color: var(--text-muted);
  font-size: .8rem;
  font-style: italic;
}

.ml-typing-dots {
  align-items: center;
  gap: 4px;
  display: flex;
}

.ml-typing-dots span {
  background: var(--accent);
  width: 6px;
  height: 6px;
  color: var(--accent-text);
  opacity: .4;
  border-radius: 50%;
  animation: 1.4s ease-in-out infinite both typing-bounce;
}

.ml-typing-dots span:first-child {
  animation-delay: -.32s;
}

.ml-typing-dots span:nth-child(2) {
  animation-delay: -.16s;
}

@keyframes typing-bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }

  40% {
    opacity: .8;
    transform: scale(1);
  }
}

.ml-message.me {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .15), rgba(var(--accent-rgb), .08));
  border: 1px solid rgba(var(--accent-rgb), .3);
  color: var(--accent);
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

.ml-message-content {
  word-break: break-word;
}

.ml-message-text {
  white-space: pre-wrap;
  display: block;
}

.ml-message-text em {
  color: inherit;
  font-style: italic;
}

.ml-message-text del {
  opacity: .7;
  text-decoration: line-through;
}

.ml-message-text code {
  background: #ffffff14;
  border-radius: 3px;
  padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
}

.ml-message-text pre {
  background: #ffffff0f;
  border-radius: 6px;
  margin: 4px 0;
  padding: 8px 10px;
  overflow-x: auto;
}

.ml-message-text pre code {
  background: none;
  padding: 0;
}

.ml-chat-link {
  color: var(--accent);
  word-break: break-all;
  overflow-wrap: anywhere;
  text-decoration: underline;
}

.ml-chat-link:hover {
  filter: brightness(1.15);
}

.ml-og-card {
  background: var(--bg-elev, #ffffff0a);
  border: 1px solid var(--border-color, #ffffff14);
  border-left: 3px solid var(--accent);
  color: inherit;
  border-radius: 8px;
  max-width: 100%;
  margin-top: 8px;
  text-decoration: none;
  transition: filter .15s;
  display: flex;
  overflow: hidden;
}

.ml-og-card:hover {
  filter: brightness(1.08);
}

.ml-og-card-img {
  background: var(--bg-card, #0000000a);
  flex: 0 0 80px;
  height: 80px;
  overflow: hidden;
}

.ml-og-card-img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.ml-og-card-body {
  flex-direction: column;
  flex: auto;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  display: flex;
}

.ml-og-card-title {
  color: inherit;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
}

.ml-og-card-desc {
  opacity: .75;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  font-size: .74rem;
  line-height: 1.3;
  display: -webkit-box;
  overflow: hidden;
}

.ml-og-card-site {
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .6;
  margin-top: 2px;
  font-size: .68rem;
  font-weight: 600;
}

@media (width <= 460px) {
  .ml-og-card {
    flex-direction: column;
  }

  .ml-og-card-img {
    flex: none;
    width: 100%;
    height: 140px;
  }
}

.ml-message-sender {
  color: var(--accent);
  opacity: .9;
  margin-bottom: 2px;
  font-size: .72rem;
  font-weight: 700;
  display: block;
}

.ml-message-meta {
  opacity: .7;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: .72rem;
  display: flex;
}

.ml-message.me .ml-message-meta {
  color: var(--accent);
}

.ml-message.system-notif {
  align-self: center;
  width: 100%;
  max-width: 98%;
}

.ml-message.system-notif .ml-message-content {
  background: #ffffff0d;
  border: 1px solid #ffffff17;
  border-radius: 12px;
  width: 100%;
  padding: 12px 14px 8px;
  position: relative;
}

.ml-message.system-notif .ml-message-meta {
  justify-content: flex-end;
}

.ml-notif-delete-btn {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  background: #1e1e28d9;
  border: 1px solid #ffffff1f;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: .6rem;
  line-height: 1;
  transition: opacity .15s, background .15s;
  display: flex;
  position: absolute;
  top: -7px;
  right: -7px;
}

.ml-message.system-notif:hover .ml-notif-delete-btn {
  opacity: 1;
}

.ml-notif-delete-btn:hover {
  border-color: #0000;
  color: #fff !important;
  background: #dc3232bf !important;
}

.ml-message.emoji-only {
  max-width: 100%;
  margin: 4px 0;
  box-shadow: none !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.ml-message.emoji-only .ml-message-content {
  filter: drop-shadow(0 4px 8px #0000004d);
  flex-direction: column;
  padding: 0;
  font-size: 3.5rem;
  line-height: 1;
  display: flex;
}

.ml-message.emoji-only .ml-message-meta {
  -webkit-backdrop-filter: blur(10px);
  background: #1e2332cc;
  border: 1px solid #ffffff1a;
  border-radius: 20px;
  align-self: flex-start;
  margin-top: 6px;
  padding: 4px 10px;
  font-weight: 500;
  display: inline-flex;
  color: #fff !important;
}

.ml-message.me.emoji-only .ml-message-meta {
  background: rgba(var(--accent-rgb), .2);
  border: 1px solid rgba(var(--accent-rgb), .3);
  align-self: flex-end;
  color: var(--accent) !important;
}

.ml-message.me.emoji-only {
  align-items: flex-end;
}

.ml-message.them.emoji-only {
  align-items: flex-start;
}

.ml-message-status {
  align-items: center;
  font-size: .85rem;
  display: flex;
}

.ml-message-status.sent {
  color: var(--text-muted);
  opacity: .5;
}

.ml-message-status.delivered {
  color: var(--text-muted);
  opacity: .9;
}

.ml-message-status.read {
  color: var(--accent);
}

.ml-chat-input-area {
  -webkit-backdrop-filter: blur(15px);
  border-top: 1px solid var(--border);
  z-index: 120;
  background: #0a0d1466;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 16px;
  display: flex;
  position: relative;
  pointer-events: auto !important;
}

.ml-chat-emoji-btn {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  margin-bottom: 6px;
  padding: 4px;
  font-size: 1.4rem;
  transition: all .2s;
  display: flex;
}

.ml-chat-emoji-btn:hover {
  color: var(--accent);
  transform: scale(1.1);
}

.ml-chat-input {
  border: 1px solid var(--border);
  color: var(--text-primary);
  resize: none;
  background: #ffffff0d;
  border-radius: 18px;
  outline: none;
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  padding: 10px 16px;
  font-size: .92rem;
  line-height: 1.4;
  transition: border-color .2s, background .2s;
  overflow: hidden;
}

.ml-chat-input::-webkit-scrollbar {
  width: 6px;
}

.ml-chat-input::-webkit-scrollbar-track {
  background: none;
}

.ml-chat-input::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb, 79 195 247), .3);
  border-radius: 10px;
  transition: background .2s;
}

.ml-chat-input:hover::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb, 79 195 247), .5);
}

.ml-chat-send {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  width: 40px;
  height: 40px;
  color: var(--accent-text);
  cursor: pointer;
  border: none;
  border-radius: 12px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  transition: all .2s;
  display: flex;
}

.ml-chat-send:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale();
}

.ml-chat-send:active:not(:disabled) {
  transform: scale(.9);
}

.ml-emoji-popover {
  background: var(--bg-elev);
  color: var(--text-primary);
  font-family: Segoe UI Emoji, Segoe UI Symbol, Apple Color Emoji, Noto Color Emoji, sans-serif;
  animation: .2s ease-out ml-fade-in;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 30px #00000080 !important;
}

.ml-emoji-opt {
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  padding: 5px;
  font-size: 1.5rem;
  transition: transform .2s;
  display: flex;
}

.ml-emoji-opt:hover {
  border-radius: 8px;
  transform: scale(1.2);
  background: #ffffff1a !important;
}

@keyframes ml-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ml-chat-send:active {
  transform: scale(.9);
}

.ml-chat-send:hover {
  box-shadow: 0 0 15px var(--accent-glow);
}

.ml-chat-conversation-header {
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  background: #282d414d;
  border-radius: 30px;
  justify-content: space-between;
  align-items: center;
  margin: 10px;
  padding: 12px 16px;
  display: flex;
}

.ml-chat-header-actions {
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  display: flex;
}

.ml-chat-conversation-header > div {
  gap: 16px !important;
}

.ml-chat-delete-conv {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 8px;
  font-size: 1.2rem;
  transition: all .2s;
  display: flex;
}

.ml-chat-delete-conv:hover {
  color: #ff4d4d;
  background: #ff4d4d1a;
}

@keyframes em-flash-red {
  0%, 7.6% {
    opacity: 0;
    filter: none;
  }

  7.7%, 15.3% {
    opacity: 1;
    filter: drop-shadow(0 0 10px #e53e3e) drop-shadow(0 0 24px #e53e3ecc);
  }

  15.4%, 38.4% {
    opacity: 0;
    filter: none;
  }

  38.5%, 46.1% {
    opacity: 1;
    filter: drop-shadow(0 0 10px #e53e3e) drop-shadow(0 0 24px #e53e3ecc);
  }

  46.2%, 53.8% {
    opacity: 0;
    filter: none;
  }

  53.9%, 61.5% {
    opacity: 1;
    filter: drop-shadow(0 0 10px #e53e3e) drop-shadow(0 0 24px #e53e3ecc);
  }

  61.6%, 84.5% {
    opacity: 0;
    filter: none;
  }

  84.6%, 92.2% {
    opacity: 1;
    filter: drop-shadow(0 0 10px #e53e3e) drop-shadow(0 0 24px #e53e3ecc);
  }

  92.3%, 100% {
    opacity: 0;
    filter: none;
  }
}

@keyframes em-flash-blue {
  0%, 15.3% {
    opacity: 0;
    filter: none;
  }

  15.4%, 23% {
    opacity: 1;
    filter: drop-shadow(0 0 10px #3b82f6) drop-shadow(0 0 24px #3b82f6cc);
  }

  23.1%, 30.7% {
    opacity: 0;
    filter: none;
  }

  30.8%, 38.4% {
    opacity: 1;
    filter: drop-shadow(0 0 10px #3b82f6) drop-shadow(0 0 24px #3b82f6cc);
  }

  38.5%, 61.5% {
    opacity: 0;
    filter: none;
  }

  61.6%, 69.1% {
    opacity: 1;
    filter: drop-shadow(0 0 10px #3b82f6) drop-shadow(0 0 24px #3b82f6cc);
  }

  69.2%, 76.8% {
    opacity: 0;
    filter: none;
  }

  76.9%, 84.5% {
    opacity: 1;
    filter: drop-shadow(0 0 10px #3b82f6) drop-shadow(0 0 24px #3b82f6cc);
  }

  84.6%, 100% {
    opacity: 0;
    filter: none;
  }
}

@keyframes em-strobe-white {
  0%, 7.6% {
    opacity: .4;
    filter: drop-shadow(0 0 3px #fff);
  }

  7.7%, 23% {
    opacity: 0;
    filter: none;
  }

  23.1%, 30.7% {
    opacity: .4;
    filter: drop-shadow(0 0 3px #fff);
  }

  30.8%, 46.1% {
    opacity: 0;
    filter: none;
  }

  46.2%, 53.8% {
    opacity: .4;
    filter: drop-shadow(0 0 3px #fff);
  }

  53.9%, 69.1% {
    opacity: 0;
    filter: none;
  }

  69.2%, 76.8% {
    opacity: .4;
    filter: drop-shadow(0 0 3px #fff);
  }

  76.9%, 92.2% {
    opacity: 0;
    filter: none;
  }

  92.3%, 100% {
    opacity: .4;
    filter: drop-shadow(0 0 3px #fff);
  }
}

.ml-emergency-header-btn {
  cursor: pointer;
  width: min(2.375rem, 44px);
  height: min(2.375rem, 44px);
  box-shadow: 0 0 8px 2px rgba(var(--accent-rgb), .9);
  background: none;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-family: inherit;
  transition: background .2s;
  display: flex;
}

.ml-gate-header-btn {
  cursor: pointer;
  width: min(2.375rem, 44px);
  height: min(2.375rem, 44px);
  color: var(--text-primary);
  box-shadow: 0 0 8px 2px rgba(var(--accent-rgb), .9);
  background: none;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-family: inherit;
  transition: background .2s, color .2s, transform .15s;
  display: flex;
}

.ml-gate-header-btn .mdi {
  font-size: min(1.25rem, 22px);
  line-height: 1;
}

.ml-gate-header-btn:hover {
  background: rgba(var(--accent-rgb), .15);
  color: var(--accent);
}

.ml-gate-header-btn:active {
  transform: scale(.9);
}

.ml-gate-picker-overlay {
  -webkit-backdrop-filter: blur(6px);
  z-index: 1050;
  background: #0009;
  justify-content: center;
  align-items: flex-end;
  padding: 0;
  animation: .18s ease-out ml-gate-picker-fade;
  display: flex;
  position: fixed;
  inset: 0;
}

@keyframes ml-gate-picker-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.ml-gate-picker {
  background: var(--bg-dark);
  border: 1px solid var(--border, #ffffff1a);
  border-radius: 18px 18px 0 0;
  width: 100%;
  max-width: 520px;
  padding: 18px 18px 24px;
  animation: .22s cubic-bezier(.16, 1, .3, 1) ml-gate-picker-slide;
  box-shadow: 0 -8px 32px #00000080;
}

@keyframes ml-gate-picker-slide {
  from {
    transform: translateY(40px);
  }

  to {
    transform: translateY(0);
  }
}

@media (width >= 720px) {
  .ml-gate-picker-overlay {
    align-items: center;
    padding: 24px;
  }

  .ml-gate-picker {
    border-radius: 18px;
  }
}

.ml-gate-picker-handle {
  background: var(--border, #ffffff2e);
  border-radius: 999px;
  width: 40px;
  height: 4px;
  margin: 0 auto 14px;
}

.ml-gate-picker-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  display: flex;
}

.ml-gate-picker-title {
  color: var(--text-primary);
  font-size: .95rem;
  font-weight: 700;
}

.ml-gate-picker-close {
  cursor: pointer;
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  display: flex;
}

.ml-gate-picker-close:hover {
  color: var(--text-primary);
  background: #ffffff0f;
}

.ml-gate-picker-list {
  grid-template-columns: 1fr;
  gap: 10px;
  display: grid;
}

@media (width >= 480px) {
  .ml-gate-picker-list {
    grid-template-columns: 1fr 1fr;
  }
}

.ml-gate-picker-tile {
  border: 1px solid var(--border, #ffffff1a);
  cursor: pointer;
  color: var(--text-primary);
  background: #000;
  border-radius: 12px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 14px;
  font-weight: 600;
  transition: transform .12s, border-color .12s, opacity .15s;
  display: flex;
}

:root[data-theme="light"] .ml-gate-picker-tile {
  background: #fff;
  border-color: #0000001a;
}

.ml-gate-picker-tile:hover:not(:disabled) {
  border-color: var(--accent, #f5a623);
  transform: translateY(-1px);
}

.ml-gate-picker-tile:disabled {
  opacity: .7;
  cursor: wait;
}

.ml-gate-picker-tile--locked {
  opacity: .55;
  background: #0c0c0c;
}

.ml-gate-picker-tile--locked:hover:not(:disabled) {
  opacity: .9;
  border-color: var(--color-warning, #d97706);
}

.ml-gate-picker-icon {
  font-size: 1.7rem;
  line-height: 1;
}

.ml-gate-picker-name {
  text-align: center;
  font-size: .85rem;
}

.ml-gate-picker-cta {
  color: var(--accent, #f5a623);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .68rem;
  font-weight: 700;
}

.ml-gate-picker-tile--locked .ml-gate-picker-cta {
  color: var(--color-warning, #d97706);
}

.ml-gate-picker-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 24px 8px;
  font-size: .85rem;
}

.ml-gate-picker-feedback {
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .3);
  color: var(--text-primary);
  border-radius: 10px;
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: .85rem;
  display: flex;
}

.ml-gate-picker-feedback-btn {
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  background: none;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .8rem;
}

.ml-gate-picker-feedback-btn:hover {
  border-color: var(--accent);
}

.ml-gate-picker-feedback-ask {
  flex: 1;
}

.ml-gate-picker-feedback-thanks {
  color: var(--accent, #f5a623);
  font-weight: 600;
}

.ml-gate-picker-feedback--yes-no {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 14px 14px 16px;
}

.ml-gate-picker-feedback--yes-no .ml-gate-picker-feedback-ask {
  text-align: center;
  flex: none;
  font-size: .92rem;
}

.ml-gate-picker-feedback--yes-no .ml-gate-picker-yn-row {
  justify-content: center;
  gap: 12px;
  display: flex;
}

.ml-gate-picker-feedback-btn--big {
  border-radius: 14px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: 160px;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 600;
  transition: transform .1s, border-color .15s, background .15s;
  display: flex;
}

.ml-gate-picker-feedback-btn--big .ml-gate-picker-yn-emoji {
  font-size: 1.6rem;
  line-height: 1;
}

.ml-gate-picker-feedback-btn--big:active {
  transform: scale(.96);
}

.ml-gate-picker-feedback-btn--yes:hover {
  background: #4ade801a;
  border-color: #4ade80;
}

.ml-gate-picker-feedback-btn--no:hover {
  background: #ef53501a;
  border-color: #ef5350;
}

.ml-gate-picker-feedback--pause {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.ml-gate-picker-pause-wrap {
  flex-direction: column;
  gap: 6px;
  width: 100%;
  display: flex;
}

.ml-gate-picker-pause-text {
  color: var(--text-primary);
  font-size: .85rem;
}

.ml-gate-picker-pause-bar {
  background: #ffffff14;
  border-radius: 999px;
  height: 4px;
  overflow: hidden;
}

.ml-gate-picker-pause-fill {
  background: var(--accent, #f5a623);
  border-radius: inherit;
  width: 0;
  height: 100%;
}

.ml-gate-picker-feedback-btn--retry {
  background: rgba(var(--accent-rgb), .15);
  border-color: rgba(var(--accent-rgb), .45);
  color: var(--accent);
}

.ml-gate-picker-feedback-btn--retry:hover {
  border-color: var(--accent);
}

.ml-gate-picker-contact {
  color: var(--text-primary);
  background: #e53e3e0f;
  border: 1px solid #e53e3e4d;
  border-radius: 12px;
  flex-direction: column;
  grid-column: 1 / -1;
  gap: 8px;
  padding: 12px 14px;
  font-size: .88rem;
  display: flex;
}

.ml-gate-picker-contact-head {
  color: #ef5350;
  font-weight: 700;
}

.ml-gate-picker-contact-body {
  color: var(--text-muted);
  line-height: 1.4;
}

.ml-gate-picker-contact-tip {
  color: var(--text-muted);
  opacity: .7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
}

.ml-gate-picker-contact-link {
  color: var(--accent);
  margin-left: 4px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
}

.ml-gate-picker-contact-link:hover {
  text-decoration: underline;
}

.ml-gate-picker-contact-reset {
  align-self: flex-start;
  margin-top: 4px;
}

.ml-gate-picker-tile--final {
  opacity: .6;
  cursor: not-allowed;
  border-color: #e53e3e59;
}

.ml-gate-picker-contact--final {
  background: #e53e3e1a;
  border-color: #e53e3e8c;
}

.em-beacon-wrap {
  justify-content: center;
  align-items: center;
  width: min(1.25rem, 22px);
  height: min(1.25rem, 22px);
  display: flex;
  position: relative;
}

.em-beacon {
  justify-content: center;
  align-items: center;
  margin: auto;
  font-size: min(1.25rem, 22px);
  line-height: 1;
  display: flex;
  position: absolute;
  inset: 0;
}

.em-beacon--white {
  color: var(--text-primary);
  animation: 2s linear infinite em-strobe-white;
}

.em-beacon--red {
  color: #e53e3e;
  animation: 2s linear infinite em-flash-red;
}

.em-beacon--blue {
  color: #3b82f6;
  animation: 2s linear infinite em-flash-blue;
}

.ml-emergency-header-btn:hover {
  background: #e53e3e1f;
}

.ml-emergency-header-btn:active {
  transform: scale(.9);
}

.em-beacon-wrap--idle .em-beacon {
  opacity: 0;
  transition: opacity 1.5s;
  animation: none;
}

.em-beacon-wrap--idle .em-beacon--white {
  opacity: 1;
  color: var(--text-primary);
}

.ml-em-sheet-overlay {
  z-index: 3000;
  box-sizing: border-box;
  pointer-events: none;
  background: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  transition: background .25s;
  display: flex;
  position: fixed;
  inset: 0;
}

.ml-em-sheet-overlay.visible {
  pointer-events: auto;
  background: #000000a6;
}

.ml-em-sheet {
  opacity: 0;
  scrollbar-width: none;
  background: #161b27;
  border-radius: 20px;
  width: 100%;
  max-width: 700px;
  max-height: 88vh;
  padding: 16px 0 20px;
  transition: transform .26s cubic-bezier(.32, .72, 0, 1), opacity .22s;
  overflow-y: auto;
  transform: scale(.92) translateY(16px);
  box-shadow: 0 20px 60px #0009;
}

.ml-em-sheet::-webkit-scrollbar {
  display: none;
}

.ml-em-sheet-overlay.visible .ml-em-sheet {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.ml-em-sheet-header {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  padding: 0 16px 12px;
  display: flex;
}

.ml-em-sheet-title {
  color: var(--text-primary);
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
}

.ml-em-sheet-title .mdi {
  color: #e53e3e;
  font-size: 1.2rem;
}

.ml-em-sheet-close {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  font-family: inherit;
  font-size: 1.3rem;
  display: flex;
}

.ml-em-section-label {
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: 14px 16px 6px;
  font-size: .7rem;
  font-weight: 700;
}

.ml-em-body {
  align-items: flex-start;
  gap: 0;
  display: flex;
}

.ml-em-col--left {
  border-right: 1px solid var(--border);
  flex: none;
  width: 220px;
  padding-bottom: 16px;
}

.ml-em-col--right {
  flex: 1;
  min-width: 0;
}

@media (width <= 520px) {
  .ml-em-body {
    flex-direction: column;
  }

  .ml-em-col--left {
    border-right: none;
    border-bottom: 1px solid var(--border);
    width: 100%;
  }
}

.ml-em-quick-row {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 12px 0 16px;
  display: grid;
}

.ml-em-col--left .ml-em-quick-row {
  grid-template-columns: 1fr;
  padding: 0 12px 0 16px;
}

.ml-em-divider {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 0;
  font-size: .82rem;
  font-weight: 600;
  display: flex;
}

.ml-em-divider:before, .ml-em-divider:after {
  content: "";
  background: var(--border);
  flex: 1;
  height: 1px;
}

.ml-em-search-wrap {
  z-index: 20;
  padding: 10px 16px 16px;
  position: relative;
}

.ml-em-search-icon {
  color: var(--text-muted);
  pointer-events: none;
  font-size: 1.1rem;
  position: absolute;
  top: 50%;
  left: 28px;
  transform: translateY(-30%);
}

.ml-em-search-input {
  box-sizing: border-box;
  border: 1px solid var(--border);
  background: var(--bg-input);
  width: 100%;
  color: var(--text-primary);
  border-radius: 12px;
  outline: none;
  padding: 11px 12px 11px 36px;
  font-family: inherit;
  font-size: .9rem;
}

.ml-em-search-input:focus {
  border-color: var(--accent);
}

.ml-em-member-results {
  border: 1px solid var(--border);
  background: var(--bg-card);
  z-index: 100;
  border-radius: 12px;
  max-height: 240px;
  position: absolute;
  top: calc(100% - 6px);
  left: 16px;
  right: 16px;
  overflow-y: auto;
  box-shadow: 0 8px 32px #000000a6;
}

.ml-em-member-results::-webkit-scrollbar {
  width: 4px;
}

.ml-em-member-results::-webkit-scrollbar-track {
  background: none;
}

.ml-em-member-results::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.ml-em-member-results::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.ml-em-member-row {
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: var(--text-primary);
  background: none;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  font-family: inherit;
  display: flex;
}

.ml-em-member-row:last-child {
  border-bottom: none;
}

.ml-em-member-row:active {
  background: #ffffff0a;
}

.ml-em-member-avatar {
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}

.ml-em-member-avatar--initials {
  background: var(--accent);
  color: var(--accent-text);
  justify-content: center;
  align-items: center;
  font-size: .75rem;
  font-weight: 700;
  display: flex;
}

.ml-em-member-name {
  flex: 1;
  font-size: .9rem;
  font-weight: 500;
}

.ml-em-no-results {
  text-align: center;
  color: var(--text-muted);
  padding: 14px;
  font-size: .85rem;
}

.ml-em-suggest-wrap {
  max-height: 130px;
  padding: 4px 16px 8px;
  overflow-y: auto;
}

.ml-em-suggest-wrap::-webkit-scrollbar {
  width: 4px;
}

.ml-em-suggest-wrap::-webkit-scrollbar-track {
  background: none;
}

.ml-em-suggest-wrap::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.ml-em-suggest-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.ml-em-suggest-loading {
  text-align: center;
  color: var(--text-muted);
  padding: 12px 0;
  font-size: 1.2rem;
}

.ml-em-suggest-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 10px 0 4px;
  font-size: .78rem;
}

.ml-em-suggest-grid {
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  display: grid;
}

.ml-em-suggest-card {
  cursor: pointer;
  text-align: center;
  background: #ffffff0a;
  border: 1px solid #ffffff12;
  border-radius: 12px;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 4px 8px;
  font-family: inherit;
  transition: background .15s, border-color .15s;
  display: flex;
}

.ml-em-suggest-card:active {
  background: #e53e3e1a;
  border-color: #e53e3e66;
}

.ml-em-suggest-avatar {
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}

.ml-em-suggest-avatar--initials {
  background: rgba(var(--accent-rgb),.15);
  border: 1px solid rgba(var(--accent-rgb),.3);
  color: var(--accent);
  justify-content: center;
  align-items: center;
  font-size: .85rem;
  font-weight: 700;
  display: flex;
}

.ml-em-suggest-name {
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  width: 100%;
  font-size: .65rem;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
}

.ml-em-confirm-overlay {
  z-index: 3100;
  box-sizing: border-box;
  pointer-events: none;
  background: none;
  justify-content: center;
  align-items: center;
  padding: 24px;
  transition: background .2s;
  display: flex;
  position: fixed;
  inset: 0;
}

.ml-em-confirm-overlay.visible {
  pointer-events: auto;
  background: #000000d1;
}

.ml-em-confirm-card {
  background: #161b27;
  border: 1px solid #e53e3e4d;
  border-radius: 20px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 300px;
  padding: 24px 20px 20px;
  display: flex;
  box-shadow: 0 20px 60px #000000b3;
}

.ml-em-confirm-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 700;
}

.ml-em-confirm-avatar {
  object-fit: cover;
  border: 3px solid #e53e3e66;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

.ml-em-confirm-avatar--initials {
  background: rgba(var(--accent-rgb),.15);
  color: var(--accent);
  border: 3px solid #e53e3e66;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 700;
  display: flex;
}

.ml-em-confirm-name {
  color: var(--text-primary);
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
}

.ml-em-confirm-actions {
  gap: 8px;
  width: 100%;
  margin-top: 4px;
  display: flex;
}

.ml-em-confirm-back {
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border-radius: 12px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 11px 10px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  display: flex;
}

.ml-em-confirm-report {
  color: #fff;
  cursor: pointer;
  background: #c53030;
  border: none;
  border-radius: 12px;
  flex: 2;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 11px 10px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  display: flex;
}

.ml-em-confirm-report:active {
  filter: brightness(.9);
}

.ml-global-chat-badge {
  cursor: pointer;
  width: min(2.375rem, 44px);
  height: min(2.375rem, 44px);
  color: var(--text-primary);
  box-shadow: 0 0 8px 2px rgba(var(--accent-rgb), .9);
  background: none;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-family: inherit;
  transition: background .2s, color .2s, transform .15s;
  display: flex;
  position: relative;
}

.ml-global-chat-badge:hover {
  background: rgba(var(--accent-rgb), .15);
  color: var(--accent);
}

.ml-global-chat-badge:active {
  transform: scale(.9);
}

.ml-global-chat-badge i {
  color: inherit;
  font-size: min(1.25rem, 22px);
  line-height: 1;
  display: inline-flex;
}

.ml-chat-badge-count {
  color: #fff;
  text-align: center;
  pointer-events: none;
  background: linear-gradient(135deg, #ff8c00, #ff4c00);
  border: 1px solid #00000059;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  min-width: 16px;
  height: 16px;
  padding: 1px 5px;
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  position: absolute;
  top: -4px;
  right: -6px;
  box-shadow: 0 2px 6px #ff4c0066;
}

.ml-global-approvals-badge i {
  font-size: min(1.25rem, 22px);
}

.ml-chat-scroll-bottom {
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  width: 40px;
  height: 40px;
  color: var(--accent);
  cursor: pointer;
  z-index: 130;
  opacity: 0;
  visibility: hidden;
  background: #1e2332e6;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
  display: flex;
  position: absolute;
  bottom: 80px;
  right: 20px;
  transform: translateY(10px) scale(.8);
  box-shadow: 0 4px 15px #0000004d;
}

.ml-chat-scroll-bottom.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.ml-chat-scroll-bottom:hover {
  background: var(--accent);
  color: var(--accent-text);
  transform: translateY(-2px) scale(1.1);
}

:root[data-theme="light"] .ml-chat-scroll-bottom {
  background: #fff;
  border-color: #0f17291f;
  box-shadow: 0 6px 18px #0f17292e;
}

.ml-move-modal-card {
  width: calc(100vw - 32px);
  max-width: 400px;
  padding: 20px;
}

#ml-move-body {
  box-sizing: border-box;
  width: 100%;
  display: block;
}

.ml-bk-move-header-pill {
  border: 1px solid var(--border);
  color: var(--text-primary);
  background: #ffffff12;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 14px;
  font-size: .9rem;
  font-weight: 600;
  display: flex;
}

.ml-bk-move-time {
  color: var(--text-secondary);
  margin-left: auto;
  font-size: .82rem;
  font-weight: 500;
}

.ml-bk-move-hint {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin: 0 0 10px;
  font-size: .82rem;
  font-weight: 600;
}

.ml-bk-date-picker-strip {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.ml-bk-date-chip {
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  background: #ffffff12;
  border-radius: 20px;
  padding: 7px 14px;
  font-size: .82rem;
  font-weight: 600;
  transition: background .15s, border-color .15s, color .15s;
}

.ml-bk-date-chip:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.ml-bk-move-back {
  border: 1px solid var(--border);
  color: var(--accent);
  cursor: pointer;
  letter-spacing: .2px;
  background: #ffffff12;
  border-radius: 20px;
  align-items: center;
  gap: 2px;
  margin-bottom: 14px;
  padding: 5px 12px 5px 8px;
  font-size: .78rem;
  font-weight: 700;
  transition: background .15s, border-color .15s;
  display: inline-flex;
}

.ml-bk-move-back:hover {
  border-color: var(--accent);
  background: #ffffff21;
}

.ml-bk-checking-row {
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  display: flex;
}

.ml-bk-avail-section {
  width: 100%;
  margin-bottom: 6px;
  display: block;
}

.ml-bk-avail-label {
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-size: .72rem;
  font-weight: 700;
}

.ml-bk-avail-option {
  box-sizing: border-box;
  border: 1px solid var(--border);
  cursor: pointer;
  background: #ffffff0d;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 6px;
  padding: 12px 14px;
  transition: background .15s, border-color .15s;
  display: flex;
}

.ml-bk-avail-option:hover {
  border-color: var(--accent);
  background: #ffffff1a;
}

.ml-bk-avail-option.same-court {
  background: #00c8ff0f;
  border-color: #00c8ff59;
}

.ml-bk-avail-opt-label {
  color: var(--text-primary);
  font-size: .88rem;
  font-weight: 600;
}

.ml-bk-avail-opt-badge {
  background: var(--accent);
  color: var(--accent-text);
  white-space: nowrap;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: .7rem;
  font-weight: 700;
}

.ml-bk-avail-time-delta {
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 500;
}

.ml-bk-avail-empty {
  color: var(--text-muted);
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 0 8px;
  font-size: .88rem;
  display: flex;
}

.ml-bk-avail-empty i {
  opacity: .5;
  font-size: 2rem;
}

.ml-bk-move-confirm-card {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 12px;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  display: flex;
}

.ml-bk-move-confirm-row {
  color: var(--text-primary);
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  font-weight: 600;
  display: flex;
}

.ml-chat-avatar-group {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.25), #ffc10726);
  border: 1px solid rgba(var(--accent-rgb),.35);
  color: var(--accent);
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  display: flex;
}

.ml-chat-group-badge {
  background: rgba(var(--accent-rgb),.15);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),.3);
  vertical-align: middle;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 10px;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: .65rem;
  font-weight: 700;
  display: inline-block;
}

.ml-chat-active-subtitle {
  color: var(--text-muted);
  margin-top: 1px;
  font-size: .78rem;
}

.ml-chat-header-btn {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 6px;
  font-size: 1.3rem;
  transition: color .2s, background .2s;
  display: flex;
}

.ml-chat-header-btn:hover {
  color: var(--text-primary);
  background: #ffffff14;
}

.ml-chat-mode-tabs {
  border-bottom: 1px solid var(--border);
  gap: 8px;
  padding: 0 16px 12px;
  display: flex;
}

.ml-chat-mode-tab {
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border-radius: 10px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: .88rem;
  font-weight: 600;
  transition: all .2s;
  display: flex;
}

.ml-chat-mode-tab:hover {
  color: var(--text-primary);
  background: #ffffff0f;
}

.ml-chat-mode-tab.active {
  background: rgba(var(--accent-rgb),.15);
  border-color: rgba(var(--accent-rgb),.5);
  color: var(--accent);
}

.ml-group-name-row {
  padding: 12px 16px 0;
}

.ml-group-name-input {
  border: 1px solid var(--border);
  width: 100%;
  color: var(--text-primary);
  box-sizing: border-box;
  background: #ffffff0f;
  border-radius: 10px;
  outline: none;
  padding: 10px 14px;
  font-size: .92rem;
  transition: border-color .2s;
}

.ml-group-name-input:focus {
  border-color: var(--accent);
}

.ml-directory-item-check {
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  transition: background .15s, border-color .15s;
}

.ml-directory-item--selected {
  background: rgba(var(--accent-rgb),.1) !important;
  border-color: rgba(var(--accent-rgb),.35) !important;
}

.ml-group-check-icon {
  color: var(--text-muted);
  flex-shrink: 0;
  margin-left: auto;
  font-size: 1.3rem;
  transition: color .15s;
}

.ml-group-check-icon--on {
  color: var(--accent);
}

.ml-group-create-footer {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
}

.ml-group-create-footer .ml-btn-primary, .ml-group-create-footer .ml-group-create-btn, .ml-group-create-footer .ml-group-confirm-add-btn {
  background: var(--accent);
  width: 100%;
  color: var(--accent-text);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(var(--accent-rgb), .25);
  border: none;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px;
  font-size: .92rem;
  font-weight: 600;
  transition: background .2s, transform .15s, box-shadow .2s;
  display: flex;
}

.ml-group-create-footer .ml-btn-primary:hover:not(:disabled), .ml-group-create-footer .ml-group-create-btn:hover:not(:disabled), .ml-group-create-footer .ml-group-confirm-add-btn:hover:not(:disabled) {
  background: var(--accent-hover, #f5b31a);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), .4);
  transform: translateY(-1px);
}

.ml-group-create-footer .ml-btn-primary:disabled, .ml-group-create-footer .ml-group-create-btn:disabled, .ml-group-create-footer .ml-group-confirm-add-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.ml-group-info-card {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb, 79 195 247), .3) transparent;
  max-height: 85vh;
  overflow-y: auto;
  max-width: 700px !important;
  padding: 0 !important;
}

.ml-group-info-card::-webkit-scrollbar {
  width: 6px;
}

.ml-group-info-card::-webkit-scrollbar-track {
  background: none;
}

.ml-group-info-card::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb, 79 195 247), .3);
  border-radius: 10px;
}

.ml-group-info-card:hover::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb, 79 195 247), .5);
}

.ml-group-info-body {
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 0 16px 16px;
  display: flex;
}

.ml-group-rename-row {
  align-items: center;
  gap: 8px;
  display: flex;
}

.ml-group-rename-row .ml-group-name-input {
  margin: 0;
}

.ml-group-save-name-btn {
  border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb),.15);
  width: 38px;
  height: 38px;
  color: var(--accent);
  cursor: pointer;
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  transition: background .2s;
  display: flex;
}

.ml-group-save-name-btn:hover {
  background: rgba(var(--accent-rgb),.25);
}

.ml-group-name-display {
  color: var(--text-primary);
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
}

.ml-group-members-header {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  justify-content: space-between;
  align-items: center;
  font-size: .82rem;
  font-weight: 600;
  display: flex;
}

.ml-group-add-btn {
  border: 1px solid rgba(var(--accent-rgb),.4);
  background: rgba(var(--accent-rgb),.1);
  color: var(--accent);
  cursor: pointer;
  border-radius: 8px;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: .82rem;
  font-weight: 600;
  transition: background .2s;
  display: flex;
}

.ml-group-add-btn:hover {
  background: rgba(var(--accent-rgb),.2);
}

.ml-group-members-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb, 79 195 247), .3) transparent;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  max-height: 260px;
  display: flex;
  overflow-y: auto;
}

.ml-group-members-list::-webkit-scrollbar {
  width: 6px;
}

.ml-group-members-list::-webkit-scrollbar-track {
  background: none;
}

.ml-group-members-list::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb, 79 195 247), .3);
  border-radius: 10px;
  transition: background .2s;
}

.ml-group-members-list:hover::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb, 79 195 247), .5);
}

.ml-group-member-row {
  border: 1px solid var(--border);
  box-sizing: border-box;
  background: #ffffff0a;
  border-radius: 10px;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  display: flex;
}

.ml-group-member-info {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.ml-group-member-name {
  color: var(--text-primary);
  font-size: .9rem;
  font-weight: 600;
}

.ml-group-member-name em {
  color: var(--text-muted);
  font-style: normal;
  font-weight: 400;
}

.ml-group-role-badge {
  background: rgba(var(--accent-rgb),.15);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),.3);
  letter-spacing: .03em;
  border-radius: 8px;
  align-self: flex-start;
  padding: 1px 7px;
  font-size: .68rem;
  font-weight: 700;
}

.ml-group-remove-btn {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 6px;
  flex-shrink: 0;
  padding: 4px 6px;
  font-size: 1.1rem;
  transition: color .2s, background .2s;
}

.ml-group-remove-btn:hover {
  color: #ef5350;
  background: #ef53501a;
}

.ml-group-role-btn {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 6px;
  flex-shrink: 0;
  padding: 4px 6px;
  font-size: 1.1rem;
  transition: color .2s, background .2s;
}

.ml-group-role-btn:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb), .1);
}

.ml-group-leave-btn {
  color: #ef5350;
  cursor: pointer;
  background: #ef535014;
  border: 1px solid #ef535066;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  font-size: .9rem;
  font-weight: 600;
  transition: background .2s;
  display: flex;
}

.ml-group-leave-btn:hover {
  background: #ef535026;
}

.ml-notif-actions {
  gap: 8px;
  margin-top: 10px;
  display: flex;
}

.ml-notif-action-btn {
  cursor: pointer;
  border: 1px solid;
  border-radius: 10px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  font-size: .82rem;
  font-weight: 600;
  transition: background .15s;
  display: flex;
}

.ml-notif-action-btn.accept {
  color: #22c55e;
  background: #22c55e1f;
  border-color: #22c55e59;
}

.ml-notif-action-btn.accept:hover {
  background: #22c55e38;
}

.ml-notif-action-btn.decline {
  color: #ef4444;
  background: #ef44441a;
  border-color: #ef44444d;
}

.ml-notif-action-btn.decline:hover {
  background: #ef444433;
}

.ml-notif-action-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.ml-notif-action-done {
  align-items: center;
  gap: 5px;
  padding: 4px 0;
  font-size: .82rem;
  font-weight: 600;
  display: flex;
}

.ml-notif-action-done.accept {
  color: #22c55e;
}

.ml-notif-action-done.decline {
  color: #ef4444;
}

.ml-notif-day-picker {
  margin-bottom: 8px;
}

.ml-notif-day-label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
  font-size: .72rem;
}

.ml-notif-day-chips {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.ml-notif-day-chip {
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: .78rem;
  font-weight: 600;
  transition: background .15s, border-color .15s, color .15s;
}

.ml-notif-day-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.ml-notif-day-chip.active {
  background: rgba(var(--accent-rgb),.18);
  border-color: var(--accent);
  color: var(--accent);
}

.ml-notif-date-picker {
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  display: flex;
}

.ml-notif-date-chips {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.ml-notif-date-chip {
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  background: none;
  border-radius: 20px;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: .78rem;
  font-weight: 600;
  transition: background .15s, border-color .15s, color .15s;
  display: flex;
}

.ml-notif-date-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.ml-notif-date-chip.selected {
  background: rgba(var(--accent-rgb),.18);
  border-color: var(--accent);
  color: var(--accent);
}

.ml-notif-date-chip-name {
  opacity: .75;
  font-size: .68rem;
  font-weight: 400;
}

.ml-notif-action-btn.disabled, .ml-notif-action-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

.ml-chat-event-pill {
  justify-content: center;
  margin: 4px 0;
  padding: 4px 16px;
  display: flex;
}

.ml-chat-event-pill span {
  color: var(--text-muted);
  text-align: center;
  background: #ffffff0f;
  border: 1px solid #ffffff17;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: .72rem;
}

.ml-chat-event-pill strong {
  color: var(--text-primary);
  font-weight: 600;
}

.ml-chat-poll-strip {
  background: rgba(var(--accent-rgb), .1);
  border-top: 1px solid rgba(var(--accent-rgb), .28);
  border-bottom: 1px solid rgba(var(--accent-rgb), .28);
  flex-wrap: wrap;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 6px 32px;
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #0000 0%, #000 10% 90%, #0000 100%);
  mask-image: linear-gradient(to right, #0000 0%, #000 10% 90%, #0000 100%);
}

.ml-poll-pill {
  border: 1px solid rgba(var(--accent-rgb),.35);
  background: rgba(var(--accent-rgb),.08);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 20px;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: .8rem;
  font-weight: 500;
  transition: background .15s, border-color .15s;
  display: inline-flex;
}

.ml-poll-pill i {
  color: var(--accent);
  font-size: 1rem;
}

.ml-poll-pill:hover {
  background: rgba(var(--accent-rgb),.15);
  border-color: var(--accent);
}

.ml-poll-pill--yes {
  background: #4caf5014;
  border-color: #4caf5080;
}

.ml-poll-pill--yes i {
  color: #4caf50;
}

.ml-poll-pill--no {
  background: #f443360f;
  border-color: #f4433666;
}

.ml-poll-pill--no i {
  color: #f44336;
}

.ml-poll-pill--food {
  background: #9c27b00f;
  border-color: #9c27b059;
}

.ml-poll-pill--food i {
  color: #9c27b0;
}

.ml-poll-pill--sub {
  background: #ff980014;
  border-color: #ff980073;
}

.ml-poll-pill--sub i {
  color: #ff9800;
}

.ml-poll-pill-badge {
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 10px;
  margin-left: 2px;
  padding: 2px 6px;
  font-size: .66rem;
  font-weight: 700;
}

.ml-poll-modal-overlay {
  justify-content: center;
  align-items: flex-end;
  display: flex;
}

.ml-poll-modal-centered {
  align-items: center;
}

.ml-poll-modal-centered .ml-poll-modal-card {
  max-height: 88vh;
  border-radius: 20px !important;
}

.ml-overlay--fullpage {
  justify-content: center;
  align-items: stretch;
  padding: 0;
  overflow-y: hidden;
}

.ml-overlay--fullpage .ml-pw-card, .ml-overlay--fullpage .ml-poll-modal-card, .ml-overlay--fullpage .ml-group-info-card {
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  overflow: hidden;
  box-shadow: 0 0 40px #00000059;
  border-radius: 0 !important;
  max-width: 720px !important;
  max-height: 100% !important;
  padding: 0 !important;
  animation: none !important;
}

.ml-overlay--fullpage .ml-modal-header {
  z-index: 2;
  background: var(--bg-elev, var(--bg-page, #0a0d14));
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 20px;
  display: flex;
  position: sticky;
  top: 0;
}

.ml-overlay--fullpage .ml-group-info-body, .ml-overlay--fullpage .ml-poll-modal-body {
  overscroll-behavior: contain;
  min-height: 0;
  padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  flex: 1 1 0;
  overflow-y: auto;
  max-height: none !important;
}

.ml-overlay--fullpage .ml-modal-close {
  cursor: pointer;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  min-width: 44px;
  transition: background .15s, border-color .15s, transform .1s;
  display: flex;
  background: rgba(var(--accent-rgb, 79 195 247), .14) !important;
  border: 1px solid rgba(var(--accent-rgb, 79 195 247), .42) !important;
  width: 44px !important;
  height: 44px !important;
  color: var(--accent) !important;
  border-radius: 50% !important;
  padding: 0 !important;
  font-size: 1.3rem !important;
}

.ml-overlay--fullpage .ml-modal-close:hover {
  background: rgba(var(--accent-rgb, 79 195 247), .28) !important;
  border-color: rgba(var(--accent-rgb, 79 195 247), .65) !important;
}

.ml-overlay--fullpage .ml-modal-close:active {
  transform: scale(.94);
}

.ml-overlay--fullpage .ml-modal-close i {
  font-size: 1.35rem;
  line-height: 1;
}

@media (width <= 480px) {
  .ml-overlay--fullpage .ml-modal-header {
    padding: 12px 14px;
  }

  .ml-overlay--fullpage .ml-group-info-body, .ml-overlay--fullpage .ml-poll-modal-body {
    padding: 12px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  }
}

.ml-poll-modal-card {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 700px;
  max-height: 80vh;
  display: flex;
  overflow: hidden;
  box-shadow: 0 -4px 40px #00000080;
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px 20px 0 0 !important;
  gap: 0 !important;
  padding: 0 !important;
}

.ml-poll-modal-body {
  scrollbar-width: none;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  padding: 8px 16px 20px;
  display: flex;
  overflow-y: auto;
}

.ml-poll-modal-body::-webkit-scrollbar {
  display: none;
}

.ml-poll-modal-card .ml-modal-header {
  border-bottom: 1px solid var(--border);
  padding: 16px 16px 12px;
}

.ml-poll-date-label {
  color: var(--accent);
  padding: 8px 0 4px;
  font-size: .88rem;
  font-weight: 600;
}

.ml-poll-confirmed-badge {
  color: #4caf50;
  background: #4caf501f;
  border: 1px solid #4caf504d;
  border-radius: 12px;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: .78rem;
  font-weight: 600;
  display: inline-flex;
}

.ml-poll-section-title {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  padding-top: 4px;
  font-size: .72rem;
  font-weight: 700;
}

.ml-poll-roster-row {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  display: flex;
}

.ml-poll-roster-row:last-child {
  border-bottom: none;
}

.ml-poll-roster-avatar {
  background: rgba(var(--accent-rgb),.12);
  border: 1px solid rgba(var(--accent-rgb),.25);
  width: 32px;
  height: 32px;
  color: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .85rem;
  font-weight: 700;
  display: flex;
}

.ml-poll-roster-name {
  color: var(--text-primary);
  flex: 1;
  font-size: .88rem;
}

.ml-poll-roster-vote {
  margin-left: auto;
  font-size: 1.1rem;
}

.ml-poll-playing-badge {
  background: rgba(var(--accent-rgb),.15);
  border: 1px solid rgba(var(--accent-rgb),.3);
  color: var(--accent);
  border-radius: 8px;
  padding: 2px 6px;
  font-size: .68rem;
  font-weight: 700;
}

.ml-poll-vote-actions {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  display: grid;
}

.ml-poll-vote-btn {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 12px;
  font-size: .88rem;
  font-weight: 600;
  transition: background .15s, border-color .15s;
  display: flex;
}

.ml-poll-vote-yes.active, .ml-poll-vote-yes:hover {
  color: #4caf50;
  background: #4caf5024;
  border-color: #4caf5080;
}

.ml-poll-vote-no.active, .ml-poll-vote-no:hover {
  color: #f44336;
  background: #f443361a;
  border-color: #f4433666;
}

.ml-poll-vote-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.ml-poll-submit-btn {
  background: rgba(var(--accent-rgb),.15);
  border: 1px solid rgba(var(--accent-rgb),.4);
  width: 100%;
  color: var(--accent);
  cursor: pointer;
  border-radius: 14px;
  margin-top: 4px;
  padding: 13px;
  font-size: .9rem;
  font-weight: 600;
  transition: background .15s;
}

.ml-poll-submit-btn:hover {
  background: rgba(var(--accent-rgb),.22);
}

.ml-poll-submit-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.ml-food-submitted-notice {
  color: #4caf50;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: .82rem;
  font-weight: 600;
  display: flex;
}

.ml-food-submitted-notice i {
  font-size: 1rem;
}

.ml-food-results-list {
  flex-direction: column;
  width: 100%;
  display: flex;
}

.ml-food-member-order {
  border-bottom: 1px solid var(--border);
  width: 100%;
  padding: 8px 0;
}

.ml-food-member-order:last-child {
  border-bottom: none;
}

.ml-food-member-name {
  color: var(--accent);
  margin-bottom: 4px;
  font-size: .78rem;
  font-weight: 700;
}

.ml-food-member-items {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.ml-food-member-item-row {
  color: var(--text-primary);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: .82rem;
  display: flex;
}

.ml-food-member-item-qty {
  color: var(--text-muted);
  flex-shrink: 0;
  margin-left: 8px;
  font-weight: 600;
}

.ml-food-no-orders {
  color: var(--text-muted);
  text-align: center;
  padding: 16px 0;
  font-size: .82rem;
}

.ml-food-item-row {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  display: flex;
}

.ml-food-item-row:last-of-type {
  border-bottom: none;
}

.ml-food-item-info {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  display: flex;
}

.ml-food-item-name {
  color: var(--text-primary);
  font-size: .9rem;
  font-weight: 600;
}

.ml-food-item-by {
  color: var(--text-muted);
  font-size: .72rem;
}

.ml-food-item-price {
  color: var(--accent);
  font-size: .78rem;
  font-weight: 600;
}

.ml-food-item-desc {
  color: var(--text-muted);
  font-size: .72rem;
  font-style: italic;
}

.ml-food-qty-row {
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  display: flex;
}

.ml-food-qty-btn {
  border: 1px solid rgba(var(--accent-rgb),.3);
  background: rgba(var(--accent-rgb),.08);
  width: 28px;
  height: 28px;
  color: var(--accent);
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
}

.ml-food-qty-btn:hover {
  background: rgba(var(--accent-rgb),.18);
}

.ml-food-qty-val {
  text-align: center;
  min-width: 22px;
  color: var(--text-primary);
  font-size: .95rem;
  font-weight: 700;
}

.ml-food-items-editor {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.ml-food-item-editor-row {
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 12px;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  display: flex;
  position: relative;
}

.ml-food-item-editor-row + .ml-food-item-editor-row {
  margin-top: 8px;
}

.ml-cfp-row-meta {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  display: grid;
}

.ml-cfp-item-name {
  box-sizing: border-box;
  width: 100%;
}

.ml-cfp-item-name, .ml-cfp-item-by, .ml-cfp-item-price {
  border: 1px solid var(--border);
  background: var(--bg-input, var(--bg-secondary));
  color: var(--text-primary);
  border-radius: 10px;
  outline: none;
  padding: 8px 10px;
  font-size: .84rem;
}

.ml-cfp-item-price {
  flex-shrink: 0;
  width: 90px;
}

.ml-cfp-remove-item {
  color: #f44336;
  cursor: pointer;
  background: #f443360f;
  border: 1px solid #f443364d;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  display: flex;
}

.ml-pickup-settings-section {
  border-top: 1px solid var(--border);
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  display: flex;
}

.ml-pickup-settings-header {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  font-weight: 700;
  display: flex;
}

.ml-pickup-session-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb, 79 195 247), .3) transparent;
  max-height: 135px;
  overflow-y: auto;
}

.ml-pickup-session-list::-webkit-scrollbar {
  width: 5px;
}

.ml-pickup-session-list::-webkit-scrollbar-track {
  background: none;
}

.ml-pickup-session-list::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb, 79 195 247), .3);
  border-radius: 10px;
}

.ml-pickup-session-list:hover::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb, 79 195 247), .5);
}

.ml-pickup-session-row {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: .84rem;
  display: flex;
}

.ml-pickup-session-row:last-child {
  border-bottom: none;
}

.ml-pickup-session-date {
  color: var(--text-primary);
  flex: 1;
  font-weight: 500;
}

.ml-pickup-session-status {
  color: var(--text-muted);
  text-transform: capitalize;
  font-size: .7rem;
}

.ml-pickup-session-row--cancelled {
  opacity: .55;
}

.ml-pickup-session-row--cancelled .ml-pickup-session-date {
  text-decoration: line-through;
}

.ml-pickup-session-row--cancelled .ml-pickup-session-status {
  color: var(--danger, #e05c5c);
  font-weight: 600;
}

.ml-pickup-session-actions {
  gap: 4px;
  display: flex;
}

.ml-pickup-action-btn {
  border: 1px solid rgba(var(--accent-rgb),.3);
  background: rgba(var(--accent-rgb),.08);
  width: 28px;
  height: 28px;
  color: var(--accent);
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: .85rem;
  display: flex;
}

.ml-pickup-action-btn--danger {
  color: #f44336;
  background: #f443360f;
  border-color: #f443364d;
}

.ml-pickup-action-btn--warn {
  border-color: rgba(var(--accent-rgb),.35);
  background: rgba(var(--accent-rgb),.08);
  color: var(--accent);
}

.ml-pickup-admin-actions {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.ml-pickup-admin-btn {
  border: 1px dashed rgba(var(--accent-rgb),.35);
  background: rgba(var(--accent-rgb),.04);
  color: var(--accent);
  cursor: pointer;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: .84rem;
  font-weight: 600;
  transition: background .15s;
  display: flex;
}

.ml-pickup-admin-btn:hover {
  background: rgba(var(--accent-rgb),.1);
}

.ml-pickup-empty {
  color: var(--text-muted);
  padding: 8px 0;
  font-size: .8rem;
  font-style: italic;
}

.ml-pickup-convert-btn {
  border: 1px dashed rgba(var(--accent-rgb),.45);
  background: rgba(var(--accent-rgb),.06);
  width: 100%;
  color: var(--accent);
  cursor: pointer;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  font-size: .88rem;
  font-weight: 600;
  transition: background .15s, border-color .15s;
  display: flex;
}

.ml-pickup-convert-btn:hover {
  background: rgba(var(--accent-rgb),.14);
  border-color: var(--accent);
}

.ml-pickup-convert-btn i {
  font-size: 1.1rem;
}

.ml-pickup-revert-btn {
  width: 100%;
  color: var(--danger);
  cursor: pointer;
  background: #e05c5c0f;
  border: 1px dashed #e05c5c73;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  font-size: .85rem;
  font-weight: 600;
  transition: background .15s, border-color .15s;
  display: flex;
}

.ml-pickup-revert-btn:hover:not(:disabled) {
  border-color: var(--danger);
  background: #e05c5c24;
}

.ml-pickup-revert-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.ml-pickup-revert-btn i {
  font-size: 1.05rem;
}

.ml-cpk-label {
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin: 14px 0 6px;
  font-size: .72rem;
  font-weight: 700;
  display: block;
}

.ml-cpk-pill-row {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.ml-cpk-day-pill, .ml-cpk-court-pill, .ml-cpk-players-pill {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 20px;
  padding: 7px 12px;
  font-size: .82rem;
  font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
}

.ml-cpk-day-pill:hover, .ml-cpk-court-pill:hover, .ml-cpk-players-pill:hover {
  border-color: rgba(var(--accent-rgb),.4);
  color: var(--text-primary);
}

.ml-cpk-day-pill.active, .ml-cpk-court-pill.active, .ml-cpk-players-pill.active {
  background: rgba(var(--accent-rgb),.15);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

.ml-cpk-time-row {
  align-items: center;
  gap: 6px;
  display: flex;
}

.ml-cpk-stepper {
  border: 1px solid rgba(var(--accent-rgb),.3);
  background: rgba(var(--accent-rgb),.06);
  width: 32px;
  height: 32px;
  color: var(--accent);
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  transition: background .12s;
  display: flex;
}

.ml-cpk-stepper:hover {
  background: rgba(var(--accent-rgb),.16);
}

.ml-cpk-time-val {
  text-align: center;
  min-width: 28px;
  color: var(--text-primary);
  font-size: 1.15rem;
  font-weight: 700;
}

.ml-cpk-time-sep {
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 700;
}

.ml-cpk-min-pill {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 14px;
  padding: 5px 9px;
  font-size: .76rem;
  font-weight: 500;
  transition: background .12s, border-color .12s, color .12s;
}

.ml-cpk-min-pill:hover {
  border-color: rgba(var(--accent-rgb),.4);
  color: var(--text-primary);
}

.ml-cpk-min-pill.active {
  background: rgba(var(--accent-rgb),.15);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

.ml-chat-game-banner {
  color: #c8e63a;
  cursor: pointer;
  letter-spacing: .02em;
  background: #c8e63a1a;
  border: 1px solid #c8e63a47;
  border-left: 0;
  border-right: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 24px;
  font-size: .82rem;
  font-weight: 700;
  transition: background .15s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.ml-chat-game-banner:before, .ml-chat-game-banner:after {
  content: "";
  pointer-events: none;
  z-index: 1;
  width: 56px;
  position: absolute;
  top: 0;
  bottom: 0;
}

.ml-chat-game-banner:before {
  background: linear-gradient(to right, #0a0a0abf 0%, #0000 100%);
  left: 0;
}

.ml-chat-game-banner:after {
  background: linear-gradient(to left, #0a0a0abf 0%, #0000 100%);
  right: 0;
}

.ml-chat-game-banner:hover {
  background: #c8e63a2e;
}

.ml-chat-game-banner--cancelled {
  color: #ef9a9a;
  background: #f4433614;
  border-color: #f4433647;
}

.ml-chat-game-banner--cancelled:hover {
  background: #f4433624;
}

.ml-chat-game-banner--reminder {
  color: #ffcc80;
  background: #ff980014;
  border-color: #ff980047;
}

.ml-chat-game-banner--reminder:hover {
  background: #ff980024;
}

.ml-chat-game-banner--poll {
  color: #b8a9ff;
  background: #7c6af714;
  border-color: #7c6af747;
}

.ml-chat-game-banner--poll:hover {
  background: #7c6af724;
}

.ml-chat-game-banner--record {
  background: rgba(var(--accent-rgb, 79 195 247), .14);
  border-color: rgba(var(--accent-rgb, 79 195 247), .42);
  color: var(--accent, #4fc3f7);
  margin-top: 6px;
  font-weight: 600;
}

.ml-chat-game-banner--record:hover {
  background: rgba(var(--accent-rgb, 79 195 247), .24);
}

.ml-chat-game-banner--record:active {
  transform: translateY(1px);
}

.ml-chat-game-banner--record .ml-game-banner-label i {
  margin-right: 6px;
}

.ml-game-banner-label {
  text-align: center;
  flex: 1;
}

.ml-game-banner-chevron {
  opacity: .55;
  flex-shrink: 0;
  font-size: .85rem;
}

:root[data-theme="light"] .ml-chat-conversation-header {
  background: #fff;
  border-color: #0f17291a;
  box-shadow: 0 2px 8px #0f17290f;
}

:root[data-theme="light"] .ml-chat-input-area {
  background: #ffffffeb;
  border-top-color: #0f17291a;
}

:root[data-theme="light"] .ml-chat-game-banner {
  color: #4a8200;
  background: #4a82001a;
  border-top-color: #4a820052;
  border-bottom-color: #4a820052;
}

:root[data-theme="light"] .ml-chat-game-banner:hover {
  background: #4a82002e;
}

:root[data-theme="light"] .ml-chat-game-banner:before, :root[data-theme="light"] .ml-chat-game-banner:after {
  display: none;
}

:root[data-theme="light"] .ml-chat-game-banner--cancelled {
  color: #b91c1c;
  background: #dc26261a;
  border-color: #dc262659;
}

:root[data-theme="light"] .ml-chat-game-banner--cancelled:hover {
  background: #dc26262e;
}

:root[data-theme="light"] .ml-chat-game-banner--reminder {
  color: #b45309;
  background: #d977061f;
  border-color: #d9770666;
}

:root[data-theme="light"] .ml-chat-game-banner--reminder:hover {
  background: #d9770633;
}

:root[data-theme="light"] .ml-chat-game-banner--poll {
  color: #5b21b6;
  background: #5b21b61a;
  border-color: #5b21b659;
}

:root[data-theme="light"] .ml-chat-game-banner--poll:hover {
  background: #5b21b62e;
}

.ps-modal {
  background: var(--color-bg, #0f1117);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  flex-direction: column;
  width: 92vw;
  max-width: 700px;
  max-height: 85vh;
  padding: 0;
  display: flex;
  overflow: hidden;
  box-shadow: 0 20px 60px #00000080;
}

.ps-modal .ml-modal-header {
  background: linear-gradient(135deg, #7c6af71f, rgba(var(--accent-rgb),.08));
  border-bottom: 1px solid var(--color-border);
  padding: 16px 20px;
}

.ps-modal .ml-modal-title {
  color: var(--color-text);
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
}

.ps-modal .ml-modal-title i {
  color: var(--accent);
}

.ps-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.ps-label {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 12px;
  font-size: .7rem;
  font-weight: 700;
}

.ps-close-btn {
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border: none;
  font-size: 1.3rem;
  transition: color .15s;
}

.ps-close-btn:hover {
  color: var(--color-text);
}

.ps-pairings {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.ps-pairing-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  text-align: center;
  color: var(--color-text);
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 16px 18px;
  font-size: .88rem;
  font-weight: 600;
  transition: all .2s;
  display: flex;
}

.ps-pairing-card:hover {
  border-color: var(--accent);
  background: #7c6af714;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px #7c6af726;
}

.ps-pairing-card:active {
  transform: translateY(0);
}

.ps-team {
  flex: 1;
  line-height: 1.4;
}

.ps-vs {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
  background: #7c6af71f;
  border-radius: 20px;
  margin: 0 14px;
  padding: 4px 10px;
  font-size: .65rem;
  font-weight: 800;
}

.ps-matchup-label {
  text-align: center;
  color: var(--color-text);
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: .95rem;
  font-weight: 700;
  display: flex;
}

.ps-matchup-vs {
  color: var(--accent);
  letter-spacing: .06em;
  background: #7c6af71f;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .65rem;
  font-weight: 800;
}

.ps-score-row {
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  display: flex;
}

.ps-score-input {
  text-align: center;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  width: 72px;
  height: 64px;
  color: var(--color-text);
  -moz-appearance: textfield;
  border-radius: 14px;
  font-size: 2rem;
  font-weight: 800;
  transition: border-color .15s, box-shadow .15s;
}

.ps-score-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.ps-score-input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px #7c6af726;
}

.ps-score-dash {
  color: var(--color-text-muted);
  font-size: 1.5rem;
  font-weight: 800;
}

.ps-save-btn {
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 14px;
  font-size: .9rem;
  font-weight: 700;
  transition: all .15s;
  display: flex;
}

.ps-save-btn:hover {
  opacity: .9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #7c6af74d;
}

.ps-save-btn:active {
  transform: translateY(0);
}

.ps-save-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.ps-game-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 10px 12px;
  font-size: .8rem;
  display: flex;
}

.ps-game-num {
  color: var(--color-text-muted);
  white-space: nowrap;
  min-width: 75px;
  font-size: .72rem;
  font-weight: 700;
}

.ps-game-detail {
  flex: 1;
  font-weight: 500;
}

.ps-delete-btn {
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 6px;
  flex-shrink: 0;
  padding: 2px 4px;
  font-size: .9rem;
  transition: color .15s, background .15s;
}

.ps-delete-btn:hover {
  color: var(--color-danger, #ef4444);
  background: #ef44441a;
}

.ps-winner {
  color: var(--color-success, #22c55e);
  font-weight: 700;
}

.ps-footer {
  gap: 10px;
  margin-top: 16px;
  display: flex;
}

.ps-another-btn, .ps-finish-btn {
  cursor: pointer;
  border: none;
  border-radius: 12px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 12px;
  font-size: .82rem;
  font-weight: 700;
  transition: all .15s;
  display: flex;
}

.ps-another-btn {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}

.ps-another-btn:hover {
  border-color: var(--accent);
  background: #7c6af70f;
}

.ps-finish-btn {
  background: var(--color-success, #22c55e);
  color: #fff;
}

.ps-finish-btn:hover {
  opacity: .9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #22c55e4d;
}

.ps-another-btn:active, .ps-finish-btn:active {
  transform: translateY(0);
}

.ps-step.hidden {
  display: none;
}

.ps-tiebreak-row {
  text-align: center;
  margin-bottom: 14px;
}

.ps-tiebreak-row.hidden {
  display: none;
}

.ps-tiebreak-row .ps-label {
  margin-bottom: 8px;
}

.ps-tb-input {
  width: 56px;
  height: 48px;
  font-size: 1.4rem;
}

.ps-stats-tabs {
  border-bottom: 1px solid var(--color-border);
  display: flex;
}

.ps-stats-tab {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  flex: 1;
  padding: 10px;
  font-size: .78rem;
  font-weight: 700;
  transition: all .15s;
}

.ps-stats-tab:hover {
  color: var(--color-text);
}

.ps-stats-tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

#pickup-stats-overlay .ps-modal {
  width: 700px;
  min-width: min(700px, 92vw);
  max-width: 700px;
}

#pickup-stats-overlay .ps-body {
  box-sizing: border-box;
  width: 100%;
  padding: 20px 24px;
}

.ps-standings-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  font-size: .85rem;
}

.ps-standings-table th {
  text-align: left;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--color-border);
  padding: 10px 14px;
  font-size: .7rem;
  font-weight: 700;
}

.ps-standings-table th:first-child {
  text-align: center;
  width: 50px;
}

.ps-standings-table th:nth-child(2) {
  width: auto;
}

.ps-standings-table th:nth-child(3), .ps-standings-table th:nth-child(4), .ps-standings-table th:nth-child(5) {
  text-align: center;
  width: 60px;
}

.ps-standings-table td {
  border-bottom: 1px solid var(--color-border);
  padding: 12px 14px;
}

.ps-standings-table td:first-child, .ps-standings-table td:nth-child(3), .ps-standings-table td:nth-child(4), .ps-standings-table td:nth-child(5) {
  text-align: center;
}

.ps-standings-table tr:last-child td {
  border-bottom: none;
}

.ps-standings-table tr:first-child td {
  font-size: .95rem;
}

.ps-history-date {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 8px;
  padding: 14px 0 8px;
  font-size: .7rem;
  font-weight: 700;
}

.ps-history-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-sizing: border-box;
  border-radius: 10px;
  grid-template-columns: 40px 1fr 60px 1fr;
  align-items: center;
  gap: 0;
  width: 100%;
  margin-bottom: 6px;
  padding: 10px 14px;
  font-size: .82rem;
  display: grid;
}

.ps-history-num {
  color: var(--color-text-muted);
  font-size: .72rem;
  font-weight: 700;
}

.ps-history-team {
  font-weight: 500;
}

.ps-history-team.ps-winner {
  color: var(--color-success, #22c55e);
  font-weight: 700;
}

.ps-history-team:last-child {
  text-align: right;
}

.ps-history-score {
  text-align: center;
  font-size: .9rem;
  font-weight: 800;
}

.ml-chat-stats-btn {
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 1.2rem;
  transition: background .15s;
}

.ml-chat-stats-btn:hover {
  background: #7c6af71a;
}

@keyframes ml-pin-flash {
  0% {
    background: #c8e63a40;
  }

  100% {
    background: #c8e63a1a;
  }
}

.ml-msg-pinned-highlight {
  border-radius: 8px;
  animation: 1.5s ease-out forwards ml-pin-flash;
}

.ml-dormant-banner {
  color: #ffc107;
  z-index: 50;
  background: #ffc1071f;
  border-bottom: 1px solid #ffc10759;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: .82rem;
  display: flex;
  position: sticky;
  top: 0;
}

.ml-dormant-banner i {
  flex-shrink: 0;
  font-size: 1rem;
}

.ml-dormant-banner span {
  flex: 1;
}

.ml-dormant-banner-link {
  color: #ffc107;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 700;
  text-decoration: underline;
}

.ml-dormant-banner--suspended {
  color: #ef5350;
  background: #f443361f;
  border-bottom-color: #f4433659;
}

.ml-dormant-banner--suspended .ml-dormant-banner-link {
  color: #ef5350;
}

.ml-react-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  display: flex;
}

.ml-react-pill {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  font-family: inherit;
  font-size: .78rem;
  transition: background .15s, border-color .15s;
  display: inline-flex;
}

.ml-react-pill:hover {
  border-color: var(--accent);
}

.ml-react-mine {
  background: rgba(var(--accent-rgb), .15);
  border-color: var(--accent);
}

.ml-react-add {
  border: 1px solid var(--border);
  width: 24px;
  height: 24px;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: .9rem;
  transition: color .15s, border-color .15s;
  display: flex;
}

.ml-react-add:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.ml-react-picker {
  background: var(--bg-surface, #1a1d2e);
  border: 1px solid var(--border);
  z-index: 100;
  border-radius: 14px;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 220px;
  padding: 8px;
  display: flex;
  position: absolute;
  bottom: 100%;
  right: 0;
  box-shadow: 0 8px 24px #00000080;
}

.ml-react-picker-btn {
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  font-size: 1.3rem;
  transition: background .1s;
  display: flex;
}

.ml-react-picker-btn:hover {
  background: #ffffff1a;
}

.mc-view {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px;
}

.mc-tiles {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.mc-tile {
  background: var(--color-surface, #11141b);
  border: 1px solid var(--color-border, #ffffff14);
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: var(--text-primary, #fff);
  font: inherit;
  border-radius: 12px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  transition: background .15s, border-color .15s, transform 50ms;
  display: flex;
}

.mc-tile:hover, .mc-tile:active {
  background: var(--color-surface-hover, #ffffff0d);
  border-color: var(--accent, #00bcd4);
}

.mc-tile:active {
  transform: scale(.995);
}

.mc-tile-icon {
  color: var(--accent, #00bcd4);
  text-align: center;
  flex-shrink: 0;
  width: 36px;
  font-size: 1.5rem;
}

.mc-tile-body {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.mc-tile-label {
  color: var(--text-primary, #fff);
  align-items: center;
  gap: 8px;
  font-size: .95rem;
  font-weight: 600;
  display: flex;
}

.mc-tile-desc {
  color: var(--text-muted, #ffffff8c);
  font-size: .8rem;
}

.mc-tile-arrow {
  color: var(--text-muted, #ffffff73);
  flex-shrink: 0;
  font-size: 1.2rem;
}

.mc-tile-dot {
  background: #d4ff3a;
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 6px #d4ff3a80;
}

.am-page {
  max-width: 700px;
  color: var(--text-primary);
  margin: 0 auto;
  padding: 12px;
}

.am-mode-bar {
  gap: 6px;
  margin: 6px 0 10px;
  display: flex;
}

.am-mode-pill {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  transition: background .12s, color .12s, border-color .12s;
  display: inline-flex;
}

.am-mode-pill:hover {
  color: var(--text-primary);
  border-color: var(--color-primary);
}

.am-mode-pill.is-active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.am-student-primary-coach {
  color: #f59e0b;
  background: #f59e0b26;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.am-sort-bar {
  gap: 6px;
  margin: 6px 0 10px;
  display: flex;
}

.am-sort-pill {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  transition: background .12s, color .12s, border-color .12s;
  display: inline-flex;
}

.am-sort-pill:hover {
  color: var(--text-primary);
  border-color: var(--color-primary);
}

.am-sort-pill.is-active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.am-student-sub {
  color: var(--text-muted);
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: .75rem;
  display: inline-flex;
}

.am-student-sub .mdi {
  opacity: .8;
  font-size: .85rem;
}

.am-student-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.2;
  display: inline-flex;
}

.am-student-chip .mdi {
  opacity: .9;
  font-size: .9rem;
}

.am-student-chip--next {
  color: #22c55e;
  background: #22c55e24;
  border-color: #22c55e4d;
}

.am-student-chip--wa {
  color: #25d366;
  cursor: pointer;
  font: inherit;
  background: #25d3661f;
  border-color: #25d3664d;
  font-size: .72rem;
  font-weight: 600;
}

.am-student-chip--wa:hover {
  background: #25d36638;
  border-color: #25d36680;
}

.am-wa-peek-backdrop {
  z-index: 9500;
  backdrop-filter: blur(8px);
  background: #0a0d14b8;
  justify-content: center;
  align-items: stretch;
  padding: 0;
  display: flex;
  position: fixed;
  inset: 0;
}

:root[data-theme="light"] .am-wa-peek-backdrop {
  background: #14192380;
}

.am-wa-peek-modal {
  background: var(--bg-page);
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  color: var(--text-primary);
  box-shadow: none;
  border: none;
  border-radius: 0;
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

@media (width >= 720px) {
  .am-wa-peek-modal {
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    max-width: 640px;
    box-shadow: 0 0 40px #00000073;
  }
}

.am-wa-peek-header {
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  display: flex;
}

.am-wa-peek-header .mdi {
  color: #25d366;
  font-size: 1.2rem;
}

.am-wa-peek-title {
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  font-size: .95rem;
  font-weight: 700;
  overflow: hidden;
}

.am-wa-peek-close {
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 1.1rem;
}

.am-wa-peek-close:hover {
  color: var(--text-primary);
  background: #7f7f7f1f;
}

.am-wa-peek-sub {
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 2px;
  font-size: .7rem;
  font-weight: 500;
  overflow: hidden;
}

.am-wa-peek-list {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.am-wa-peek-item {
  border-bottom: 1px solid var(--border);
  flex-direction: column;
  gap: 6px;
  padding-bottom: 12px;
  display: flex;
}

.am-wa-peek-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.am-wa-peek-more {
  border: 1px dashed var(--border);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 10px 14px;
  font-size: .85rem;
  font-weight: 600;
  transition: color .15s, border-color .15s;
  display: flex;
}

.am-wa-peek-more:hover:not([disabled]) {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .55);
}

.am-wa-peek-more[disabled] {
  opacity: .55;
  cursor: default;
}

.am-wa-peek-more .mdi {
  font-size: 1rem;
}

.am-wa-peek-body-wrap {
  color: var(--text-secondary);
  padding: 14px 16px;
  overflow-y: auto;
}

.am-wa-peek-meta {
  color: var(--text-muted);
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: .78rem;
  display: flex;
}

.am-wa-peek-meta .mdi {
  color: #25d366;
}

.am-wa-peek-tag {
  color: #25d366;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: #25d3661f;
  border-radius: 999px;
  align-items: center;
  padding: 2px 8px;
  font-size: .68rem;
  font-weight: 600;
  display: inline-flex;
}

.am-wa-peek-body {
  border: 1px solid var(--border);
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
  background: #7f7f7f14;
  border-radius: 8px;
  margin: 0;
  padding: 12px;
  font-family: inherit;
  font-size: .85rem;
  line-height: 1.45;
  overflow-x: auto;
}

.am-student-coach-more {
  opacity: .75;
  margin-left: 4px;
  font-weight: 500;
}

.am-peer-badge {
  color: #a5b4fc;
  background: #6366f126;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}

.am-student-detail-page {
  padding-top: 4px;
}

.am-detail-nav {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  display: flex;
}

.am-detail-back {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.am-jr-badge {
  color: #f59e0b;
  vertical-align: middle;
  background: #f59e0b33;
  border-radius: 999px;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  display: inline-block;
}

.am-detail-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 14px;
}

.am-detail-card--editing {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.am-detail-card-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.am-detail-card-head h4 {
  color: var(--text-primary);
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
}

.am-detail-fields {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 16px;
  display: grid;
}

.am-detail-fields > div, .am-detail-fields > label {
  min-width: 0;
}

.am-detail-fields > div span {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 2px;
  font-size: 11px;
  display: block;
}

.am-detail-fields > div strong {
  color: var(--text-primary);
  word-break: break-word;
  font-size: 14px;
  font-weight: 500;
  display: block;
}

.am-detail-fields--edit label {
  color: var(--text-secondary);
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
}

.am-detail-fields--edit input, .am-detail-fields--edit select {
  background: var(--bg-elev);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
}

.am-detail-fields--edit input:focus, .am-detail-fields--edit select:focus {
  border-color: var(--color-primary);
  outline: none;
}

.am-detail-fields--edit input:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.am-detail-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  display: flex;
}

.am-detail-counters {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px;
  margin-bottom: 12px;
  padding: 10px;
  display: grid;
}

.am-counter {
  text-align: center;
  padding: 6px 4px;
}

.am-counter strong {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  display: block;
}

.am-counter span {
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-secondary);
  margin-top: 2px;
  font-size: 10px;
  display: block;
}

.am-section-title {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 12px 0 8px;
  font-size: 13px;
  font-weight: 600;
}

.am-lesson-list {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 4px;
}

.am-lesson-row {
  border-bottom: 1px solid var(--border-color);
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
  display: flex;
}

.am-lesson-row:last-child {
  border-bottom: none;
}

.am-lesson-when {
  color: var(--text-primary);
}

.am-lesson-coach {
  background: var(--bg-elev);
  color: var(--text-secondary);
  border-radius: 999px;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 11px;
  display: inline-block;
}

.am-lesson-status {
  color: var(--text-secondary);
  text-transform: capitalize;
  font-size: 12px;
}

.am-inline-err {
  color: #f87171;
  background: #ef444426;
  border-radius: 6px;
  margin-bottom: 10px;
  padding: 8px 10px;
  font-size: 13px;
}

.am-guardians-card {
  padding: 12px;
}

.am-guardian-row {
  background: var(--bg-elev);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  padding: 10px 12px;
  display: flex;
}

.am-guardian-row--editing, .am-guardian-row--adding {
  border-color: var(--color-primary);
  display: block;
}

.am-guardian-info {
  flex: 1;
  min-width: 0;
}

.am-guardian-info strong {
  color: var(--text-primary);
  word-break: break-word;
  margin-bottom: 4px;
  font-size: 14px;
  display: block;
}

.am-guardian-info > div {
  color: var(--text-secondary);
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 12px;
  display: flex;
}

.am-guardian-info span {
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.am-guardian-actions {
  flex-shrink: 0;
  gap: 4px;
  display: flex;
}

.am-add-guardian {
  text-align: center;
  width: 100%;
  margin-top: 8px;
  display: block;
}

.am-btn-danger-ghost {
  color: #f87171;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
}

.am-btn-danger-ghost:hover {
  background: #ef44441a;
  border-color: #ef44444d;
}

.am-empty--sm {
  text-align: center;
  color: var(--text-secondary);
  padding: 12px;
  font-size: 13px;
}

.ab-search-result--roster {
  padding: 8px 12px;
}

.ab-roster-jr {
  color: #f59e0b;
  vertical-align: middle;
  background: #f59e0b33;
  border-radius: 999px;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  display: inline-block;
}

.ab-roster-coach {
  color: #f59e0b;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  display: inline-flex;
}

.ab-search-section {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-top: 1px solid var(--border-color);
  margin-top: 6px;
  padding: 10px 12px 4px;
  font-size: 11px;
  font-weight: 600;
}

.am-tiles {
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  display: flex;
}

.am-kpi-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 10px;
  margin-bottom: 12px;
  padding: 12px;
}

.am-kpi-head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  display: flex;
}

.am-kpi-head h4 {
  color: var(--text-primary);
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  display: inline-flex;
}

.am-kpi-head h4 .mdi {
  color: var(--accent);
}

.am-kpi-legend {
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  font-size: .7rem;
  display: flex;
}

.am-kpi-legend-item {
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.am-kpi-legend-item .mdi {
  font-size: .6rem;
}

.am-kpi-rows {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.am-kpi-row {
  border: 1px solid var(--border);
  background: #ffffff08;
  border-radius: 8px;
  grid-template-columns: minmax(120px, 1fr) 3fr;
  align-items: center;
  gap: 10px;
  padding: 10px;
  display: grid;
}

.am-kpi-row--totals {
  background: rgba(var(--accent-rgb), .08);
  border-color: var(--accent);
}

.am-kpi-row-name {
  min-width: 0;
}

.am-kpi-row-title {
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .9rem;
  font-weight: 700;
  overflow: hidden;
}

.am-kpi-row-sub {
  color: var(--text-muted);
  margin-top: 2px;
  font-size: .7rem;
}

.am-kpi-row-metrics {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  display: grid;
}

.am-kpi-metric {
  text-align: center;
  color: var(--text-primary);
  background: #00000026;
  border: 1px solid #0000;
  border-radius: 6px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 8px 4px 6px;
  font-family: inherit;
  display: flex;
}

.am-kpi-metric--completed {
  border-color: #22c55e59;
}

.am-kpi-metric--not-completed {
  border-color: #ef444459;
}

.am-kpi-metric--upcoming {
  border-color: #3b82f666;
}

.am-kpi-metric--total {
  border-color: rgba(var(--accent-rgb), .45);
}

.am-kpi-metric-icon {
  opacity: .95;
  font-size: 1.15rem;
  line-height: 1;
}

.am-kpi-metric--completed .am-kpi-metric-icon {
  color: var(--color-success, #22c55e);
}

.am-kpi-metric--not-completed .am-kpi-metric-icon {
  color: var(--color-danger, #ef4444);
}

.am-kpi-metric--upcoming .am-kpi-metric-icon {
  color: var(--color-info, #3b82f6);
}

.am-kpi-metric--total .am-kpi-metric-icon {
  color: var(--accent);
}

.am-kpi-metric-val {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
}

.am-kpi-metric--completed .am-kpi-metric-val {
  color: var(--color-success, #22c55e);
}

.am-kpi-metric--not-completed .am-kpi-metric-val {
  color: var(--color-danger, #ef4444);
}

.am-kpi-metric--upcoming .am-kpi-metric-val {
  color: var(--color-info, #3b82f6);
}

.am-kpi-metric--total .am-kpi-metric-val {
  color: var(--accent);
}

.am-kpi-metric-sub {
  color: var(--text-faint, var(--text-muted));
  letter-spacing: .01em;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: .62rem;
  font-weight: 500;
  overflow: hidden;
}

button.am-kpi-metric--clickable {
  cursor: pointer;
  transition: background .12s, border-color .12s, transform 80ms;
}

button.am-kpi-metric--clickable:hover {
  background: rgba(var(--accent-rgb), .12);
  filter: brightness(1.08);
  border-width: 1px;
}

button.am-kpi-metric--clickable:active {
  transform: scale(.97);
}

button.am-kpi-metric--clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.am-kpi-loading, .am-kpi-empty, .am-kpi-error {
  text-align: center;
  color: var(--text-muted);
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 16px;
  font-size: .85rem;
  display: flex;
}

.am-kpi-error {
  color: var(--color-danger, #ef4444);
}

@media (width <= 540px) {
  .am-kpi-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .am-kpi-row-metrics {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .am-kpi-row-title {
    font-size: .85rem;
  }

  .am-kpi-metric {
    padding: 6px 3px;
  }

  .am-kpi-metric-icon {
    font-size: 1rem;
  }

  .am-kpi-metric-val {
    font-size: .9rem;
  }

  .am-kpi-metric-sub {
    font-size: .58rem;
  }
}

.am-kpi-head-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.am-kpi-pill {
  background: var(--bg-card);
  border: 1px solid var(--border);
  min-height: 34px;
  color: var(--text-primary);
  border-radius: 10px;
  align-items: stretch;
  transition: border-color .12s, background .12s;
  display: inline-flex;
  position: relative;
}

.am-kpi-pill:hover, .am-kpi-pill--open, .am-kpi-pill:focus-within {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), .06);
}

.am-kpi-pill-label {
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  align-items: center;
  min-width: 0;
  padding: 0 6px;
  font-size: .82rem;
  font-weight: 600;
  display: inline-flex;
  overflow: hidden;
}

.am-kpi-pill-label--month {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  justify-content: center;
  min-width: 90px;
}

.am-kpi-pill-nav {
  color: var(--text-primary);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 32px;
  font-family: inherit;
  font-size: 1rem;
  transition: background .1s, color .1s;
  display: inline-flex;
}

.am-kpi-pill-nav:hover {
  background: rgba(var(--accent-rgb), .15);
  color: var(--accent);
}

.am-kpi-pill-trigger {
  color: var(--text-primary);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 10px;
  flex: auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 8px 4px 10px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  display: inline-flex;
}

.am-kpi-pill-icon, .am-kpi-pill-chev {
  color: var(--accent);
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
}

.am-kpi-pill-trigger .am-kpi-pill-label {
  flex: auto;
  padding: 0;
}

.am-kpi-coach-pill {
  min-width: 180px;
  max-width: 260px;
}

.am-kpi-pill-menu {
  border: 1px solid var(--accent);
  z-index: 200;
  background: #14161f;
  border-radius: 10px;
  max-height: 300px;
  margin: 0;
  padding: 4px;
  list-style: none;
  position: absolute;
  top: calc(100% + 4px);
  left: -1px;
  right: -1px;
  overflow-y: auto;
  box-shadow: 0 10px 24px #00000080;
}

:root[data-theme="light"] .am-kpi-pill-menu {
  background: #fff;
  box-shadow: 0 10px 24px #00000024;
}

.am-kpi-pill-opt {
  cursor: pointer;
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: .85rem;
  transition: background .1s, color .1s;
  display: flex;
  overflow: hidden;
}

.am-kpi-pill-opt > span {
  text-overflow: ellipsis;
  flex: auto;
  overflow: hidden;
}

.am-kpi-pill-opt > .mdi {
  color: var(--accent);
  flex-shrink: 0;
  font-size: .95rem;
}

.am-kpi-pill-opt:hover {
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent);
}

.am-kpi-pill-opt--active {
  background: rgba(var(--accent-rgb), .14);
  color: var(--accent);
}

.am-kpi-pill-opt-check {
  color: var(--accent);
  flex-shrink: 0;
  margin-left: auto;
  font-size: .95rem;
}

@media (width <= 540px) {
  .am-kpi-head-controls {
    justify-content: space-between;
    width: 100%;
  }

  .am-kpi-pill {
    flex-shrink: 1;
    min-width: 0;
  }

  .am-kpi-coach-pill {
    flex: auto;
    min-width: 0;
    max-width: none;
  }

  .am-kpi-monthnav {
    flex-shrink: 0;
  }

  .am-kpi-pill-label {
    font-size: .78rem;
  }

  .am-kpi-pill-label--month {
    min-width: 78px;
  }

  .am-kpi-pill-nav {
    width: 30px;
    font-size: .95rem;
  }

  .am-kpi-pill-trigger {
    padding: 4px 6px 4px 8px;
    font-size: .78rem;
  }
}

.am-kpi-drill-backdrop {
  z-index: 9500;
  background: #0000008c;
  justify-content: center;
  align-items: flex-end;
  padding: 0;
  animation: .15s am-kpi-fade;
  display: flex;
  position: fixed;
  inset: 0;
}

:root[data-theme="light"] .am-kpi-drill-backdrop {
  background: #00000059;
}

@keyframes am-kpi-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.am-kpi-drill {
  background: var(--bg-elev, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 82vh;
  animation: .2s am-kpi-slideup;
  display: flex;
  box-shadow: 0 -20px 60px #0006;
}

:root[data-theme="light"] .am-kpi-drill {
  background: #fff;
  box-shadow: 0 -12px 40px #0000002e;
}

@keyframes am-kpi-slideup {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (width >= 640px) {
  .am-kpi-drill-backdrop {
    align-items: center;
    padding: 16px;
  }

  .am-kpi-drill {
    border-radius: 14px;
    box-shadow: 0 20px 60px #00000073;
  }
}

.am-kpi-drill-head {
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  display: flex;
}

.am-kpi-drill-title {
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.am-kpi-drill-title > .mdi {
  margin-top: 2px;
  font-size: 1.4rem;
  line-height: 1.2;
}

.am-kpi-drill-title h3 {
  color: var(--text-primary);
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}

.am-kpi-drill-meta {
  color: var(--text-muted);
  margin-top: 3px;
  font-size: .75rem;
}

.am-kpi-drill-close {
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  background: none;
  border-radius: 6px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  font-size: 1.1rem;
  transition: background .12s, border-color .12s;
  display: inline-flex;
}

.am-kpi-drill-close:hover {
  background: rgba(var(--accent-rgb), .12);
  border-color: var(--accent);
}

.am-kpi-drill-body {
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 20px;
  display: flex;
  overflow-y: auto;
}

.am-kpi-drill-empty {
  text-align: center;
  color: var(--text-muted);
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  font-size: .9rem;
  display: flex;
}

.am-kpi-drill-empty--error {
  color: var(--color-danger, #ef4444);
}

.am-kpi-drill-card {
  border: 1px solid var(--border);
  background: #ffffff08;
  border-radius: 8px;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  display: flex;
}

:root[data-theme="light"] .am-kpi-drill-card {
  background: #00000005;
}

.am-kpi-drill-card-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.am-kpi-drill-card-when {
  flex-direction: column;
  gap: 1px;
  display: flex;
}

.am-kpi-drill-card-date {
  color: var(--text-primary);
  font-size: .88rem;
  font-weight: 600;
}

.am-kpi-drill-card-time {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
}

.am-kpi-drill-card-meta {
  color: var(--text-secondary, var(--text-muted));
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: .8rem;
  display: flex;
}

.am-kpi-drill-card-meta .mdi {
  color: var(--accent);
  font-size: .95rem;
}

.am-kpi-drill-card-sep {
  opacity: .5;
  margin: 0 4px;
}

.am-kpi-drill-note {
  color: var(--text-secondary, var(--text-muted));
  border-left: 3px solid var(--accent);
  background: #00000026;
  border-radius: 4px;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 8px;
  font-size: .78rem;
  display: flex;
}

:root[data-theme="light"] .am-kpi-drill-note {
  background: #0000000a;
}

.am-kpi-drill-note .mdi {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
  font-size: .95rem;
}

.am-kpi-drill-note--rain {
  border-left-color: var(--color-info, #3b82f6);
}

.am-kpi-drill-note--rain .mdi {
  color: var(--color-info, #3b82f6);
}

.am-kpi-drill-note--plan {
  border-left-color: var(--text-muted);
}

.am-kpi-drill-note--plan .mdi {
  color: var(--text-muted);
}

.am-kpi-drill-pill {
  letter-spacing: .02em;
  white-space: nowrap;
  border-radius: 999px;
  flex-shrink: 0;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  font-size: .7rem;
  font-weight: 600;
  display: inline-flex;
}

.am-kpi-drill-pill .mdi {
  font-size: .85rem;
  line-height: 1;
}

.am-kpi-drill-pill--ok {
  color: var(--color-success, #22c55e);
  background: #22c55e26;
  border: 1px solid #22c55e66;
}

.am-kpi-drill-pill--bad {
  color: var(--color-danger, #ef4444);
  background: #ef444426;
  border: 1px solid #ef444466;
}

.am-kpi-drill-pill--warn {
  color: var(--color-info, #3b82f6);
  background: #3b82f626;
  border: 1px solid #3b82f666;
}

.am-kpi-drill-pill--muted {
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: #94a3b826;
}

.am-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  transition: background .15s, border-color .15s;
  display: flex;
}

.am-tile:hover {
  border-color: var(--accent);
  background: #ffffff0f;
}

.am-tile > .mdi:first-child {
  color: var(--accent);
  flex-shrink: 0;
  font-size: 1.6rem;
}

.am-tile-text {
  flex: 1;
  min-width: 0;
}

.am-tile-label {
  font-size: 1rem;
  font-weight: 600;
}

.am-tile-desc {
  color: var(--text-muted);
  margin-top: 2px;
  font-size: .82rem;
}

.am-tile-chev {
  color: var(--text-faint);
}

.am-portal-link {
  border: 1px dashed var(--accent);
  color: var(--text-primary);
  background: #3b82f60f;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  text-decoration: none;
  display: flex;
}

.am-portal-link small {
  color: var(--text-muted);
  margin-top: 2px;
  font-size: .78rem;
  display: block;
}

.am-portal-link .mdi {
  color: var(--accent);
  font-size: 1.2rem;
}

.am-portal-link--sm {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: .85rem;
}

.am-back-btn {
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  background: none;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 6px 10px;
  font-size: .85rem;
  display: inline-flex;
}

.am-view-title {
  color: var(--text-primary);
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px;
  font-size: 1.1rem;
  display: flex;
}

.am-view-title .mdi {
  color: var(--accent);
}

.am-count {
  color: var(--text-muted);
  background: #ffffff0f;
  border-radius: 12px;
  margin-left: auto;
  padding: 2px 8px;
  font-size: .78rem;
}

.am-search {
  background: var(--bg-input);
  border: 1px solid var(--border);
  width: 100%;
  color: var(--text-primary);
  box-sizing: border-box;
  border-radius: 6px;
  margin-bottom: 10px;
  padding: 10px 12px;
  font-size: .9rem;
}

.am-list {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.am-loading, .am-empty {
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 24px;
}

.am-loading .mdi, .am-empty .mdi {
  margin-bottom: 6px;
  font-size: 1.8rem;
  display: block;
}

.am-coach-fallback {
  border: 1px solid var(--accent);
  text-align: center;
  background: #3b82f60f;
  border-radius: 8px;
  padding: 18px;
}

.am-coach-fallback .mdi {
  color: var(--accent);
  font-size: 2rem;
}

.am-coach-fallback h4 {
  margin: 6px 0;
}

.am-coach-fallback p {
  color: var(--text-muted);
  margin-bottom: 12px;
  font-size: .9rem;
}

.am-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: .9rem;
  text-decoration: none;
  display: inline-flex;
}

.am-student-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 10px 12px;
  text-decoration: none;
  display: block;
}

.am-student-row--coach {
  cursor: default;
}

.am-student-name {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  display: flex;
}

.am-student-meta {
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
  font-size: .78rem;
  display: flex;
}

.am-student-badge {
  text-transform: uppercase;
  letter-spacing: .03em;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: .68rem;
  font-weight: 700;
}

.am-student-badge--jr {
  color: var(--accent);
  background: #f5a62329;
  border: 1px solid #f5a6234d;
}

.am-add-student-btn {
  background: var(--accent);
  color: #0a0d14;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  margin: 8px 0 10px;
  padding: 8px 14px;
  font-size: .9rem;
  font-weight: 600;
  display: inline-flex;
}

.am-add-student-btn:hover {
  filter: brightness(1.08);
}

.am-add-hint {
  background: rgba(var(--accent-rgb), .06);
  border: 1px dashed var(--accent);
  color: var(--text-muted);
  border-radius: 8px;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 0 10px;
  padding: 10px 12px;
  font-size: .82rem;
  line-height: 1.45;
  display: flex;
}

.am-add-hint > .mdi {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1.1rem;
}

.am-add-hint strong {
  color: var(--text-primary);
}

.am-modal-backdrop {
  backdrop-filter: blur(4px);
  z-index: 900;
  background: #0009;
  justify-content: center;
  align-items: flex-start;
  padding: 60px 12px 40px;
  display: flex;
  position: fixed;
  inset: 0;
  overflow-y: auto;
}

.am-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 480px;
  color: var(--text-primary);
  border-radius: 12px;
  padding: 22px 20px 20px;
  position: relative;
  box-shadow: 0 10px 40px #00000080;
}

.am-modal-backdrop--fullpage {
  background: var(--bg-dark);
  backdrop-filter: none;
  z-index: 950;
  align-items: stretch;
  padding: 0;
  overflow-y: hidden;
}

.am-modal-backdrop--fullpage .am-modal--fullpage {
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 0;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  overflow: hidden;
  box-shadow: 0 0 40px #00000059;
}

.am-modal-backdrop--fullpage .am-modal-title {
  z-index: 2;
  background: var(--bg-page, #0a0d14);
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 20px;
  display: flex;
  position: sticky;
  top: 0;
}

.am-modal-backdrop--fullpage .am-modal-close {
  z-index: 3;
  position: fixed;
  top: 10px;
  right: 12px;
}

.am-modal-backdrop--fullpage .am-modal-body {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb, 79 195 247), .35) transparent;
  flex: 1 1 0;
  min-height: 0;
  padding: 14px 20px 20px;
  overflow-y: auto;
}

.am-modal-backdrop--fullpage .am-modal-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.am-modal-backdrop--fullpage .am-modal-body::-webkit-scrollbar-track {
  background: none;
}

.am-modal-backdrop--fullpage .am-modal-body::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb, 79 195 247), .3);
  border-radius: 3px;
}

.am-modal-backdrop--fullpage .am-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb, 79 195 247), .5);
}

.am-modal-backdrop--fullpage .am-modal-actions {
  z-index: 2;
  background: var(--bg-page, #0a0d14);
  border-top: 1px solid var(--border);
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 12px 20px;
  display: flex;
  position: sticky;
  bottom: 0;
  box-shadow: 0 -6px 20px #00000026;
}

@media (width <= 480px) {
  .am-modal-backdrop--fullpage .am-modal-title {
    padding: 12px 14px;
  }

  .am-modal-backdrop--fullpage .am-modal-body {
    padding: 12px 14px 18px;
  }

  .am-modal-backdrop--fullpage .am-modal-actions {
    padding: 10px 14px;
  }
}

.am-modal-close {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 8px;
  font-size: 1.4rem;
  line-height: 1;
  position: absolute;
  top: 10px;
  right: 10px;
}

.am-modal-close:hover {
  color: var(--text-primary);
}

.am-modal-title {
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 1.1rem;
  display: flex;
}

.am-modal-body {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.am-modal-body-text {
  color: var(--text-muted);
  margin: 0 0 14px;
  font-size: .9rem;
  line-height: 1.5;
}

.am-modal-error {
  color: #ff9c9c;
  background: #c8282826;
  border: 1px solid #c8282859;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: .85rem;
  display: flex;
}

.am-modal-actions {
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  display: flex;
}

.am-form-row {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.am-form-label {
  color: var(--text-muted);
  font-size: .82rem;
}

.am-form-input {
  background: var(--bg-elev, #ffffff08);
  border: 1px solid var(--border);
  width: 100%;
  color: var(--text-primary);
  box-sizing: border-box;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: .9rem;
}

.am-form-input:focus {
  border-color: var(--accent);
  outline: none;
}

.am-form-check {
  cursor: pointer;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: .9rem;
  display: flex;
}

.am-form-fieldset {
  border: 1px solid var(--border);
  background: #ffffff05;
  border-radius: 8px;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  display: flex;
}

.am-form-fieldset-title {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 600;
}

.am-btn {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  display: inline-flex;
}

.am-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.am-btn--primary {
  background: var(--accent);
  color: #0a0d14;
  border-color: var(--accent);
}

.am-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

.am-btn--ghost:hover:not(:disabled) {
  background: var(--bg-card-hover, #ffffff0f);
}

.am-student-row--btn {
  text-align: left;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
}

.am-student-row--btn:hover {
  background: var(--bg-card-hover, #ffffff0f);
  border-color: var(--accent);
}

.am-student-chev {
  color: var(--text-muted);
  margin-left: auto;
  font-size: 1.1rem;
}

.am-student-row-wrap {
  align-items: stretch;
  gap: 6px;
  margin-bottom: 6px;
  display: flex;
}

.am-student-row-wrap > .am-student-row {
  flex: auto;
  margin-bottom: 0;
}

.am-student-actions {
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-self: stretch;
  gap: 6px;
  display: flex;
}

.am-student-actions > .am-student-wa-btn, .am-student-actions > .am-student-call-btn {
  flex: auto;
  width: 42px;
  min-height: 40px;
}

.am-student-wa-btn {
  border: 1px solid var(--border-subtle, #ffffff14);
  cursor: pointer;
  border-radius: 12px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 42px;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
  text-decoration: none;
  transition: transform .12s, background .15s, color .15s;
  display: inline-flex;
}

.am-student-call-btn {
  cursor: pointer;
  color: #38bdf8;
  background: #38bdf826;
  border: 1px solid #38bdf859;
  border-radius: 12px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 42px;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
  text-decoration: none;
  transition: transform .12s, background .15s, color .15s;
  display: inline-flex;
}

.am-student-call-btn:hover {
  color: #fff;
  background: #38bdf847;
  transform: translateY(-1px);
}

.am-student-call-btn--disabled {
  color: var(--text-muted);
  border-color: var(--border-subtle, #ffffff14);
  opacity: .5;
  cursor: not-allowed;
  background: #ffffff0a;
}

.am-student-call-btn--fallback, .am-student-wa-btn--fallback {
  opacity: .55;
  cursor: pointer;
}

.am-student-call-btn--fallback:hover, .am-student-wa-btn--fallback:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.am-cp-backdrop {
  z-index: 9500;
  backdrop-filter: blur(8px);
  background: #0a0d14b8;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
  position: fixed;
  inset: 0;
}

.am-cp-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px #00000073;
}

.am-cp-header {
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  display: flex;
}

.am-cp-header > .mdi {
  color: var(--accent);
  font-size: 1.2rem;
}

.am-cp-title {
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  font-size: .95rem;
  font-weight: 700;
  overflow: hidden;
}

.am-cp-close {
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 1.1rem;
}

.am-cp-close:hover {
  color: var(--text-primary);
  background: #ffffff0f;
}

.am-cp-body {
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  display: flex;
}

.am-cp-row {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 10px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  text-decoration: none;
  transition: background .12s, border-color .12s, transform .12s;
  display: flex;
}

.am-cp-row:hover {
  border-color: var(--color-primary);
  background: #ffffff0a;
  transform: translateY(-1px);
}

:root[data-theme="light"] .am-cp-row:hover {
  background: #0000000a;
}

.am-cp-row > .mdi:first-child {
  color: var(--accent);
  flex: none;
  font-size: 1.4rem;
}

.am-cp-row--guardian > .mdi:first-child {
  color: #a5b4fc;
}

.am-cp-row-body {
  flex: auto;
  min-width: 0;
}

.am-cp-row-name {
  color: var(--text-primary);
  font-size: .9rem;
  font-weight: 600;
}

.am-cp-row-phone {
  color: var(--text-muted);
  margin-top: 2px;
  font-size: .78rem;
}

.am-cp-row-chev {
  color: var(--text-muted);
  flex: none;
  font-size: 1.1rem;
}

.am-student-wa-btn--warm {
  color: #fff;
  background: #25d366;
}

.am-student-wa-btn--warm:hover {
  background: #1ebe5a;
  transform: translateY(-1px);
}

.am-student-wa-btn--cold {
  color: #25d366;
  background: #25d36626;
  border-color: #25d36659;
}

.am-student-wa-btn--cold:hover {
  color: #fff;
  background: #25d3664d;
  transform: translateY(-1px);
}

.am-student-wa-btn--disabled {
  color: var(--text-muted);
  opacity: .5;
  cursor: not-allowed;
  background: #ffffff0a;
}

.am-modal--wide {
  max-width: 720px;
}

.am-student-contact {
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 12px;
  margin: -4px 0 14px;
  font-size: .85rem;
  display: flex;
}

.am-tennis-strip {
  background: #60a5fa0f;
  border: 1px dashed #60a5fa59;
  border-radius: 8px;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 8px 10px;
  display: flex;
}

.am-tennis-strip--edit {
  flex-direction: column;
  align-items: stretch;
}

.am-tennis-chips {
  flex-wrap: wrap;
  flex: auto;
  gap: 6px;
  display: flex;
}

.am-tennis-chip {
  border: 1px solid var(--border, #ffffff26);
  color: var(--text-primary);
  background: #ffffff0a;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: .78rem;
  display: inline-flex;
}

:root[data-theme="light"] .am-tennis-chip {
  background: #00000008;
}

.am-tennis-chip-label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .65rem;
  font-weight: 700;
}

.am-tennis-chip--dim {
  opacity: .55;
}

.am-tennis-edit-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

@media (width <= 520px) {
  .am-tennis-edit-row {
    grid-template-columns: 1fr;
  }
}

.am-tennis-edit-field {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.am-tennis-edit-field > span {
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 700;
}

.am-tennis-edit-actions {
  gap: 6px;
  margin-top: 4px;
  display: flex;
}

.am-btn--xs {
  padding: 3px 8px;
  font-size: .72rem;
}

.am-detail-counters {
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
  display: grid;
}

.am-counter {
  background: var(--bg-elev, #ffffff08);
  border: 1px solid var(--border);
  text-align: center;
  border-radius: 8px;
  padding: 10px 8px;
}

.am-counter-value {
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: 700;
  display: block;
}

.am-counter-label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
}

.am-counter--owed {
  border-color: #c8282866;
}

.am-counter--owed .am-counter-value {
  color: #ff9c9c;
}

.am-section-title {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin: 10px 0 8px;
  font-size: .85rem;
  font-weight: 600;
}

.am-lesson-list {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.am-lesson-row {
  background: var(--bg-elev, #ffffff08);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

.am-lesson-row--no_show, .am-lesson-row--cancelled, .am-lesson-row--cancelled_weather {
  opacity: .75;
}

.am-lesson-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.am-lesson-date {
  color: var(--text-primary);
  font-size: .9rem;
  font-weight: 600;
}

.am-lesson-chips {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.am-lesson-status {
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--bg-card);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px 8px;
  font-size: .7rem;
  font-weight: 700;
}

.am-lesson-status--booked {
  color: #6cc26c;
  border-color: #6cc26c66;
}

.am-lesson-status--no_show {
  color: #ff9c9c;
  border-color: #c8282866;
}

.am-lesson-status--rained_out {
  color: #6ea8ff;
  border-color: #6ea8ff66;
}

.am-lesson-status--cancelled, .am-lesson-status--cancelled_weather {
  color: var(--text-muted);
}

.am-lesson-amount {
  color: var(--accent);
  font-size: .85rem;
  font-weight: 700;
}

.am-fee-chip {
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 8px;
  padding: 2px 8px;
  font-size: .68rem;
  font-weight: 700;
}

.am-fee-chip--sub {
  color: #6ea8ff;
  background: #6ea8ff26;
}

.am-fee-chip--owed {
  color: #ff9c9c;
  background: #c8282826;
}

.am-fee-chip--paid {
  color: #6cc26c;
  background: #6cc26c26;
}

.am-fee-chip--waived {
  color: var(--text-muted);
  background: #ffffff14;
}

.am-fee-chip--refund {
  color: var(--accent);
  background: #f5a62326;
}

.am-lesson-meta {
  color: var(--text-muted);
  margin-top: 4px;
  font-size: .78rem;
}

.am-lesson-note {
  color: var(--text-primary);
  margin-top: 6px;
  font-size: .85rem;
  line-height: 1.4;
}

.am-lesson-rating {
  color: var(--accent);
  letter-spacing: 2px;
  margin-top: 6px;
  font-size: .9rem;
}

.am-lesson-review {
  color: var(--text-muted);
  letter-spacing: normal;
  margin-left: 6px;
  font-size: .82rem;
}

.am-scope-banner {
  color: #a4c9ff;
  background: #6ea8ff1f;
  border: 1px solid #6ea8ff59;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  margin: -4px 0 12px;
  padding: 8px 12px;
  font-size: .82rem;
  display: flex;
}

.am-student-coach-chip {
  color: var(--accent);
  background: #f5a6231f;
  border: 1px solid #f5a62340;
  border-radius: 6px;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  font-size: .72rem;
  display: inline-flex;
}

.am-filter-bar {
  background: var(--bg-elev, #ffffff08);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px;
  display: flex;
}

.am-filter-lbl {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-width: 130px;
  display: flex;
}

.am-filter-lbl > span {
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 600;
}

.am-filter-select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: .85rem;
}

.am-filter-select:focus {
  border-color: var(--accent);
  outline: none;
}

.am-filter-select option {
  color: var(--text-primary);
  background: #141824;
}

.am-filter-clear {
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border-radius: 6px;
  align-self: flex-end;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: .82rem;
  display: inline-flex;
}

.am-filter-clear:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.am-search-wrap {
  position: relative;
}

.am-cs-popover {
  z-index: 30;
  background: var(--bg-page, #0a0d14);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-height: min(60vh, 480px);
  padding: 10px 12px 12px;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  overflow-y: auto;
  box-shadow: 0 12px 30px #00000073, 0 2px 6px #0000004d;
}

:root[data-theme="light"] .am-cs-popover {
  background: #fff;
  box-shadow: 0 12px 30px #0000002e, 0 2px 6px #0000001a;
}

.am-cs-body {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.am-cs-close {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  padding: 2px 6px;
  font-family: inherit;
  display: inline-flex;
}

.am-cs-close:hover {
  color: var(--text-primary);
  background: rgba(var(--accent-rgb, 255,255,255), .1);
}

.am-cs-heading {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: .72rem;
  font-weight: 700;
  display: flex;
}

.am-cs-loading, .am-cs-empty {
  color: var(--text-muted);
  text-align: center;
  background: var(--bg-elev, #ffffff08);
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: .85rem;
}

.am-cs-row {
  background: var(--bg-elev, #ffffff08);
  border: 1px solid var(--border);
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 8px 10px;
  display: flex;
}

.am-cs-info {
  flex: 1;
  min-width: 0;
}

.am-cs-name {
  color: var(--text-primary);
  font-size: .9rem;
  font-weight: 600;
}

.am-cs-sub {
  color: var(--text-muted);
  margin-top: 2px;
  font-size: .72rem;
}

.am-cs-add {
  background: var(--accent);
  color: #0a0d14;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  display: inline-flex;
}

.am-cs-add:hover:not(:disabled) {
  filter: brightness(1.08);
}

.am-cs-add:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.am-pills {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  display: flex;
}

.am-pill {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 16px;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: .85rem;
  display: inline-flex;
}

.am-pill--active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.am-pill-count {
  background: #fff3;
  border-radius: 8px;
  padding: 1px 6px;
  font-size: .75rem;
}

.am-lr-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 10px 12px;
  text-decoration: none;
  display: block;
}

.am-lr-line1 {
  align-items: center;
  gap: 8px;
  display: flex;
}

.am-lr-line2 {
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
  font-size: .78rem;
  display: flex;
}

.am-lr-status {
  text-transform: uppercase;
  background: #ffffff14;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: .72rem;
}

.am-status-pending {
  color: #f59e0b;
  background: #f59e0b26;
}

.am-status-booked {
  color: #22c55e;
  background: #22c55e26;
}

.am-status-rained_out {
  color: #9ca3af;
  background: #6b728026;
}

.am-cal-nav {
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  display: flex;
}

.am-cal-datepick {
  text-align: center;
  flex: 1;
}

.am-cal-datepick input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  width: 100%;
  color: var(--text-primary);
  box-sizing: border-box;
  border-radius: 6px;
  padding: 6px;
  font-size: .85rem;
}

.am-cal-datelbl {
  color: var(--text-muted);
  margin-top: 4px;
  font-size: .78rem;
}

.am-nav-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 6px;
  padding: 6px 10px;
}

.am-cal-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  gap: 12px;
  padding: 10px 12px;
  display: flex;
}

.am-cal-time {
  color: var(--accent);
  white-space: nowrap;
  padding-top: 2px;
  font-size: .85rem;
  font-weight: 600;
}

.am-cal-body {
  flex: 1;
}

.am-cal-title {
  font-weight: 500;
}

.am-cal-meta {
  color: var(--text-muted);
  margin-top: 3px;
  font-size: .78rem;
}

.ab-page {
  max-width: 700px;
  color: var(--text-primary);
  margin: 0 auto;
  padding: 12px;
}

.ab-topbar {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  display: flex;
}

.ab-coach-row {
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 16px 0;
  display: flex;
}

.ab-coach-pill {
  max-width: 100%;
}

@media (width <= 700px) {
  .ab-coach-row {
    padding: 6px 12px 0;
  }

  .ab-coach-row .am-kpi-pill.ab-coach-pill {
    flex: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

.ab-date-center, .am-cal-date-center {
  position: relative;
}

.am-cal-datestrip {
  margin: 8px 0 12px;
}

.ab-hours-row {
  grid-template-columns: 1fr auto !important;
}

.ab-coach-pill-club {
  color: var(--text-muted);
  font-size: .85em;
  font-weight: 500;
}

.am-kpi-pill-opt--active .ab-coach-pill-club {
  color: var(--accent);
  opacity: .85;
}

.ab-day-nav {
  align-items: center;
  gap: 6px;
  margin-left: auto;
  display: flex;
}

.ab-day-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: .85rem;
}

.ab-day-label {
  color: var(--text-muted);
  margin: 0 6px;
  font-size: .85rem;
}

.ab-hint {
  border-left: 3px solid var(--accent);
  color: var(--text-muted);
  background: #3b82f60f;
  border-radius: 4px;
  margin: 0 0 12px;
  padding: 8px 12px;
  font-size: .82rem;
}

.ab-hint .mdi {
  color: var(--accent);
  margin-right: 4px;
}

.ab-loading, .ab-empty {
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 24px;
}

.ab-grid {
  grid-template-columns: 60px repeat(calc(var(--ab-cols, 5) - 1), 1fr);
  background: #ffffff0a;
  border-radius: 6px;
  gap: 2px;
  padding: 2px;
  display: grid;
  overflow-x: auto;
}

@media (width <= 900px) {
  .ab-grid {
    max-height: 75vh;
    overflow-y: auto;
  }
}

.ab-grid-cell {
  justify-content: center;
  align-items: center;
  min-height: 24px;
  padding: 0 4px;
  font-size: .72rem;
  display: flex;
}

.ab-grid-h {
  background: var(--bg-card);
  color: var(--text-primary);
  text-align: center;
  padding: 6px 4px;
  font-weight: 600;
}

.ab-grid-time-h {
  background: none;
}

.ab-grid-time-lbl {
  color: var(--text-muted);
  background: none;
  justify-content: flex-end;
  gap: 6px;
  padding-right: 8px;
  font-family: SF Mono, Monaco, Consolas, monospace;
  font-size: .7rem;
}

.ab-grid-time-lbl .mdi {
  opacity: .85;
  font-size: .9rem;
}

.ab-grid-time-lbl--dim {
  opacity: .55;
}

.ab-grid-time-lbl-sub {
  color: var(--text-muted);
  opacity: .85;
  letter-spacing: .02em;
  font-size: .65rem;
}

.ab-sun-strip {
  justify-content: center;
  margin: 0 0 10px;
  display: flex;
}

.ab-past-toggle {
  border-radius: 4px !important;
  min-height: 26px !important;
  margin: 0 !important;
}

button.ab-court-chip {
  border: 1px solid var(--border);
  cursor: pointer;
  gap: 4px;
  transition: background .1s, border-color .1s, color .1s;
}

button.ab-court-chip:hover {
  background: rgba(var(--accent-rgb), .12);
  border-color: var(--accent);
  color: var(--accent);
}

.ab-court-chip strong {
  letter-spacing: .02em;
  font-weight: 700;
}

.ab-court-chip .mdi {
  font-size: .9rem;
  line-height: 1;
}

.ab-court-chip-light {
  color: var(--accent);
}

.ab-court-chip-nolight {
  color: var(--color-danger, #ef4444);
  opacity: .85;
}

.ab-court-strip {
  align-items: stretch;
  gap: 4px;
  margin: 0 0 4px;
  padding: 0 0 6px;
  display: flex;
  overflow-x: auto;
}

.ab-court-strip-back, .ab-court-strip-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  min-width: 42px;
  min-height: 24px;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 4px;
  flex: 1 0 auto;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  font-size: .72rem;
  font-weight: 600;
  transition: background .1s, border-color .1s, color .1s;
  display: inline-flex;
}

.ab-court-strip-back {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), .08);
  flex: none;
}

.ab-court-strip-back:hover {
  background: rgba(var(--accent-rgb), .18);
}

.ab-court-strip-back .mdi {
  font-size: 1rem;
  line-height: 1;
}

.ab-court-strip-chip:hover {
  background: rgba(var(--accent-rgb), .1);
  border-color: var(--accent);
  color: var(--accent);
}

.ab-court-strip-chip--active {
  background: rgba(var(--accent-rgb), .18);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.ab-court-strip-chip strong {
  letter-spacing: .02em;
  font-weight: 700;
}

.ab-court-strip-chip .mdi {
  font-size: .9rem;
  line-height: 1;
}

.ab-court-strip-chip-nolight {
  color: var(--color-danger, #ef4444);
  opacity: .85;
}

.ab-focus-grid {
  grid-template-columns: 76px 1fr;
  overflow-x: hidden;
}

.ab-focus-time {
  justify-content: flex-start;
  padding-left: 6px;
  padding-right: 0;
}

.ab-focus-cell {
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 12px;
  font-size: .85rem;
  display: flex;
}

.ab-focus-cell--free {
  color: #4ade80;
  cursor: pointer;
  text-align: right;
  background: #22c55e14;
  border: 1px solid #22c55e33;
  justify-content: flex-end;
  transition: background .1s, border-color .1s;
}

.ab-focus-cell--free:hover {
  background: #22c55e38;
  border-color: #22c55e73;
}

.ab-focus-cell--selected {
  box-shadow: inset 0 0 0 2px #f5a62359;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.ab-focus-cell--mine {
  color: var(--text-primary);
  background: #3b82f62e;
  border: 1px solid #3b82f680;
  justify-content: flex-start;
}

.ab-focus-cell--mine .mdi {
  color: var(--accent);
  font-size: 1rem;
}

.ab-focus-cell--mine-cont {
  background: #3b82f61a;
  border: 1px dashed #3b82f64d;
}

.ab-focus-cell--other {
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: #ffffff0f;
  justify-content: flex-end;
  font-style: italic;
}

.ab-cell-free {
  cursor: pointer;
  background: #22c55e14;
  border: 1px solid #22c55e33;
  border-radius: 3px;
  transition: background .1s, border-color .1s;
}

.ab-cell-free:hover {
  background: #22c55e40;
}

.ab-cell-selected {
  box-shadow: inset 0 0 0 2px #f5a62359;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.ab-cell-selected:hover {
  filter: brightness(1.1);
  background: var(--accent) !important;
}

.ab-cell-mine {
  background: var(--accent);
  color: #fff;
  border-radius: 3px;
  justify-content: center;
  font-size: .72rem;
  font-weight: 600;
}

.ab-cell-mine-cont {
  background: var(--accent);
  opacity: .6;
  border-radius: 0;
}

.ab-cell-other {
  color: var(--text-faint);
  cursor: not-allowed;
  background: #ffffff14;
  border-radius: 3px;
}

.ab-cell-maint, .ab-cell-dark, .ab-cell-pickup, .ab-cell-overcap {
  cursor: not-allowed;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.ab-cell-maint {
  background: #fb923c24;
}

.ab-cell-maint .mdi {
  color: #fb923cd9;
  font-size: .7rem;
}

.ab-cell-dark {
  background: #1e293b8c;
}

.ab-cell-dark .mdi {
  color: #94a3b8bf;
  font-size: .7rem;
}

.ab-cell-pickup {
  background: #c8e63a2e;
}

.ab-cell-pickup .mdi {
  color: #c8e63ae6;
  font-size: .7rem;
}

.ab-cell-overcap {
  background: repeating-linear-gradient(45deg, #ffffff05, #ffffff05 4px, #ffffff0f 4px 8px);
}

.ab-focus-cell--maint, .ab-focus-cell--dark, .ab-focus-cell--pickup, .ab-focus-cell--overcap {
  cursor: not-allowed;
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  font-size: .82rem;
  display: flex;
}

.ab-focus-cell--maint {
  color: #fb923cf2;
  background: #fb923c1a;
  border: 1px solid #fb923c4d;
}

.ab-focus-cell--dark {
  color: var(--text-muted);
  background: #1e293b66;
  border: 1px solid #94a3b840;
}

.ab-focus-cell--pickup {
  color: #c8e63af2;
  background: #c8e63a1a;
  border: 1px solid #c8e63a59;
}

.ab-focus-cell--overcap {
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: repeating-linear-gradient(45deg, #ffffff08, #ffffff08 5px, #ffffff12 5px 10px);
}

.ab-focus-cell--maint .mdi, .ab-focus-cell--dark .mdi, .ab-focus-cell--pickup .mdi, .ab-focus-cell--overcap .mdi {
  opacity: .85;
  font-size: .95rem;
}

.ab-modal-backdrop {
  z-index: 1050;
  background: #0009;
  justify-content: center;
  align-items: center;
  padding: 12px;
  display: flex;
  position: fixed;
  inset: 0;
}

.ab-modal-backdrop--fullpage {
  background: var(--bg-dark);
  z-index: 1055;
  align-items: stretch;
  padding: 0;
}

.ab-modal-backdrop--fullpage .ab-modal--fullpage {
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 0;
  width: 100%;
  max-width: 720px;
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  box-shadow: 0 0 40px #00000059;
}

.ab-modal-backdrop--fullpage .ab-modal-head {
  z-index: 2;
  background: var(--bg-page, #0a0d14);
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
  position: sticky;
  top: 0;
}

.ab-modal-backdrop--fullpage .ab-modal-body {
  background: var(--bg-dark);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb, 79 195 247), .35) transparent;
  flex: 1 1 0;
  gap: 12px;
  min-height: 0;
  padding: 16px 18px 24px;
  overflow-y: auto;
}

.ab-modal-backdrop--fullpage .ab-modal-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.ab-modal-backdrop--fullpage .ab-modal-body::-webkit-scrollbar-track {
  background: none;
}

.ab-modal-backdrop--fullpage .ab-modal-body::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb, 79 195 247), .3);
  border-radius: 3px;
}

.ab-modal-backdrop--fullpage .ab-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb, 79 195 247), .5);
}

.ab-modal-backdrop--fullpage .ab-modal-foot {
  z-index: 2;
  padding: 12px 18px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  background: var(--bg-page, #0a0d14);
  border-top: 1px solid var(--border);
  flex: none;
  position: sticky;
  bottom: 0;
  box-shadow: 0 -6px 20px #00000026;
}

.ab-x--back {
  color: var(--text-primary);
  margin-right: 8px;
}

.ab-slot-summary--hero {
  background: rgba(var(--accent-rgb, 200,230,58), .06);
  border: 1px solid rgba(var(--accent-rgb, 200,230,58), .28);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 12px 14px;
  font-size: .94rem;
  font-weight: 600;
}

.ab-section--tile {
  background: var(--bg-card, #00000059);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 14px;
}

.ab-modal-backdrop--fullpage .ab-section-h {
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: .06em;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: .72rem;
  font-weight: 700;
  display: flex;
}

.ab-modal-backdrop--fullpage .ab-section-h .mdi {
  color: var(--accent);
  font-size: 1rem;
}

@media (width <= 480px) {
  .ab-modal-backdrop--fullpage .ab-modal-body {
    padding: 12px 12px 20px;
  }

  .ab-section--tile {
    margin-bottom: 10px;
    padding: 12px;
  }

  .ab-slot-summary--hero {
    padding: 10px 12px;
    font-size: .88rem;
  }
}

.ab-modal {
  background: var(--bg-card, #00000059),
        var(--bg-page, #0a0d14);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  overflow: hidden;
}

:root[data-theme="dark"] .ab-modal, :root:not([data-theme="light"]) .ab-modal {
  color: var(--text-primary);
  background: #14161f;
}

:root[data-theme="light"] .ab-modal {
  color: #111;
  background: #fff;
  border-color: #0000001f;
  box-shadow: 0 12px 40px #00000040;
}

#ml-academy-bookings-wrap .ab-alt-select option, #ml-academy-bookings-wrap select option {
  color: #eee;
  background: #141824;
}

:root[data-theme="light"] #ml-academy-bookings-wrap .ab-alt-select option, :root[data-theme="light"] #ml-academy-bookings-wrap select option {
  color: #111;
  background: #fff;
}

.ab-book-pill-wrap {
  z-index: 40;
  pointer-events: none;
  justify-content: center;
  padding: 8px 0;
  display: flex;
  position: sticky;
  bottom: 12px;
}

.ab-book-pill {
  border: 1px solid var(--border);
  pointer-events: auto;
  background: #14161f;
  border-radius: 999px;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 10px 14px;
  display: flex;
  box-shadow: 0 8px 28px #00000059;
}

:root[data-theme="light"] .ab-book-pill {
  background: #fff;
  border-color: #0000001f;
  box-shadow: 0 8px 28px #00000026;
}

.ab-book-pill-meta {
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
  display: flex;
}

.ab-book-pill-time {
  color: var(--text-primary);
  font-size: .95rem;
  font-weight: 700;
}

.ab-book-pill-sub {
  color: var(--text-muted);
  font-size: .72rem;
}

:root[data-theme="light"] .ab-book-pill-time {
  color: #111;
}

:root[data-theme="light"] .ab-book-pill-sub {
  color: #666;
}

.ab-book-pill-clear {
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 1rem;
  display: inline-flex;
}

.ab-book-pill-clear:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.ab-book-pill-cta {
  background: var(--accent);
  color: #0a0d14;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  display: inline-flex;
}

.ab-book-pill-cta:hover {
  filter: brightness(1.08);
}

.ab-modal-head {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  display: flex;
}

.ab-modal-head h3 {
  flex: 1;
  margin: 0;
  font-size: 1rem;
}

.ab-modal-head .mdi {
  color: var(--accent);
}

.ab-x {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 4px 8px;
  font-size: 1.2rem;
}

.ab-modal-body {
  flex: 1;
  padding: 12px 16px;
  overflow-y: auto;
}

.ab-modal-foot {
  border-top: 1px solid var(--border);
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  display: flex;
}

.ab-slot-summary {
  border: 1px solid var(--accent);
  background: #3b82f60f;
  border-radius: 6px;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px;
  font-size: .85rem;
  display: flex;
}

.ab-slot-summary .mdi {
  color: var(--accent);
}

.ab-section {
  margin-bottom: 14px;
}

.ab-section--tight {
  margin-bottom: 10px;
}

.ab-section-h {
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: .05em;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: .78rem;
  display: flex;
}

.ab-section-count {
  color: var(--accent);
  text-transform: none;
  letter-spacing: .02em;
  background: #f5a62326;
  border-radius: 8px;
  padding: 1px 8px;
  font-size: .7rem;
  font-weight: 700;
}

.ab-picked-chips {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  display: flex;
}

.ab-chip {
  color: var(--text-primary);
  background: #22c55e1f;
  border: 1px solid #22c55e59;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: .85rem;
  display: inline-flex;
}

.ab-chip .mdi {
  color: #22c55e;
}

.ab-chip-name {
  font-weight: 600;
}

.ab-chip-primary {
  background: var(--accent);
  color: #0a0d14;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: .65rem;
  font-weight: 700;
}

.ab-chip-x {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  padding: 0 2px;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
}

.ab-chip-x:hover {
  color: #e57373;
}

.ab-btn {
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: .88rem;
  display: inline-flex;
}

.ab-btn--sm {
  padding: 6px 10px;
  font-size: .82rem;
}

.ab-btn--primary {
  background: var(--accent);
  color: #0a0d14;
  border-color: var(--accent);
  font-weight: 700;
}

.ab-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

.ab-mode-tabs {
  gap: 4px;
  margin-bottom: 8px;
  display: flex;
}

.ab-mode-tab {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 6px;
  flex: 1;
  padding: 8px;
  font-size: .85rem;
}

.ab-mode-tab--active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.ab-search-block {
  position: relative;
}

.ab-onboard-hint {
  color: var(--text-primary);
  background: #60a5fa14;
  border: 1px dashed #60a5fa59;
  border-radius: 8px;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 10px;
  font-size: .8rem;
  line-height: 1.4;
  display: flex;
}

.ab-onboard-hint .mdi {
  color: #60a5fa;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1rem;
}

.ab-onboard-hint strong {
  color: var(--text-primary);
  font-weight: 600;
}

.ab-results {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 200px;
  margin-top: 4px;
  overflow-y: auto;
}

.ab-search-result {
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--border);
  width: 100%;
  color: var(--text-primary);
  cursor: pointer;
  background: none;
  padding: 8px 12px;
  display: block;
}

.ab-search-result:hover {
  background: #ffffff0a;
}

.ab-search-result span {
  color: var(--text-muted);
  font-size: .78rem;
  display: block;
}

.ab-search-loading, .ab-search-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 10px;
  font-size: .85rem;
}

.ab-picked {
  background: #22c55e1a;
  border: 1px solid #22c55e4d;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: .9rem;
  display: flex;
}

.ab-picked .mdi {
  color: #22c55e;
}

.ab-newstudent-fields {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  display: grid;
}

.ab-newstudent-fields > input:nth-child(3), .ab-newstudent-fields > input:nth-child(4) {
  grid-column: span 1;
}

.ab-row-two {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.ab-field {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.ab-field > span {
  color: var(--text-muted);
  font-size: .78rem;
}

.ab-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  box-sizing: border-box;
  border-radius: 6px;
  width: 100%;
  padding: 8px 10px;
  font-family: inherit;
  font-size: .9rem;
}

textarea.ab-input {
  resize: vertical;
}

.ab-linkbtn {
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: 0;
  margin-left: auto;
  padding: 0;
  font-size: .82rem;
  text-decoration: underline;
}

.ab-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: .9rem;
}

.ab-btn--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.ab-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.ab-error {
  color: #f87171;
  background: #ef44441a;
  border: 1px solid #ef44444d;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: .85rem;
}

.ab-recur-off, .ab-recur-toggle {
  border: 1px dashed var(--border);
  cursor: pointer;
  background: #ffffff08;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: .9rem;
  display: flex;
}

.ab-recur-toggle {
  border-color: var(--accent);
  background: #3b82f60f;
  border-style: solid;
}

.ab-recur-toggle .mdi {
  color: var(--accent);
}

.ab-recur-off .mdi {
  color: var(--text-muted);
}

.ab-recur-controls {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  display: flex;
}

.ab-recur-weeks .ab-input {
  max-width: 90px;
}

.ab-recur-summary {
  background: #22c55e1a;
  border: 1px solid #22c55e4d;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: .85rem;
  display: inline-flex;
}

.ab-recur-summary .mdi {
  color: #22c55e;
}

.ab-recur-preview {
  background: #00000040;
  border-radius: 6px;
  max-height: 220px;
  margin-top: 10px;
  padding: 8px;
  overflow-y: auto;
}

.ab-modal--fullpage .ab-recur-preview {
  max-height: min(40vh, 480px);
}

.ab-recur-preview-h {
  color: var(--text-muted);
  margin-bottom: 6px;
  padding: 0 4px;
  font-size: .78rem;
}

.ab-recur-row {
  cursor: pointer;
  border-radius: 4px;
  grid-template-columns: 20px 36px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: .85rem;
  display: grid;
}

.ab-recur-row:hover {
  background: #ffffff0a;
}

.ab-recur-row--skipped {
  opacity: .5;
  text-decoration: line-through;
}

.ab-recur-row--holiday {
  background: rgba(var(--accent-rgb, 74,158,255), .06);
}

.ab-recur-num {
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 600;
}

.ab-recur-time {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  font-weight: 600;
}

.ab-field-hint {
  border: 1px dashed var(--border);
  color: var(--text-muted);
  background: #ffffff08;
  border-radius: 8px;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 12px;
  font-size: .82rem;
  line-height: 1.4;
  display: flex;
}

.ab-field-hint .mdi {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 1rem;
}

.ab-recur-pill {
  letter-spacing: .02em;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 10px;
  max-width: 220px;
  margin-left: auto;
  padding: 2px 8px;
  font-size: .68rem;
  font-weight: 700;
  overflow: hidden;
}

.ab-recur-pill--pub {
  color: #ff8b8b;
  background: #dc3c3c26;
  border: 1px solid #dc3c3c59;
}

.ab-recur-pill--school {
  color: #ffb84d;
  background: #ffa50024;
  border: 1px solid #ffa50052;
}

.ab-recur-policy {
  border: 1px solid var(--border);
  background: #ffffff08;
  border-radius: 8px;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 10px 0 6px;
  padding: 8px 10px;
  font-size: .82rem;
  display: flex;
}

.ab-recur-policy-lbl {
  color: var(--text-muted);
  align-items: center;
  gap: 4px;
  font-weight: 600;
  display: inline-flex;
}

.ab-recur-policy-item {
  cursor: pointer;
  color: var(--text-primary);
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.ab-recur-policy-item input[type="checkbox"] {
  accent-color: var(--accent);
}

.ab-recur-summary-skip {
  color: var(--text-muted);
  margin-left: 4px;
  font-size: .86em;
  font-weight: 400;
}

.ab-recur-daycontext {
  color: var(--accent);
  align-items: center;
  gap: 4px;
  margin-right: 4px;
  font-weight: 600;
  display: inline-flex;
}

.ab-recur-hint {
  border-left: 3px solid var(--accent);
  color: var(--text-muted);
  background: #3b82f60f;
  border-radius: 4px;
  margin: 10px 0 0;
  padding: 6px 10px;
  font-size: .78rem;
  line-height: 1.5;
}

@media (width <= 700px) {
  .ab-grid {
    grid-template-columns: 60px repeat(calc(var(--ab-cols, 5) - 1), minmax(48px, 1fr));
  }

  .ab-grid-time-lbl {
    gap: 3px;
    padding-right: 4px;
  }

  .ab-grid-time-lbl .mdi {
    font-size: .8rem;
  }

  .ab-focus-grid {
    grid-template-columns: 68px 1fr;
  }

  .ab-newstudent-fields, .ab-row-two {
    grid-template-columns: 1fr;
  }
}

@media (width <= 380px) {
  .ab-grid-time-lbl .mdi, .ab-focus-time .mdi {
    display: none;
  }
}

@media (width >= 1100px) {
  body.ml-rail-pinned {
    --layout-content-shift: calc(var(--ml-rail-w) / 2);
  }

  body.ml-rail-pinned.ml-rail-collapsed-shell {
    --layout-content-shift: calc(var(--ml-rail-w-collapsed) / 2);
  }
}

.ml-bk-confirm-fab, .co-fab, .ml-toast, .ml-push-prompt {
  left: calc(50% + var(--layout-content-shift, 0px));
}

.ml-update-toast {
  left: calc(20px + var(--layout-content-shift, 0px) * 2);
}

.ml-overlay, .ml-gate-picker-overlay, .ml-em-sheet-overlay, .ml-em-confirm-overlay, .am-kpi-drill-backdrop, .am-modal-backdrop, .am-wa-peek-backdrop, .am-cp-backdrop, .ab-modal-backdrop, .ac-modal-backdrop, .ml-bk-block-modal-overlay, .cp-img-modal, .ch-modal-backdrop, .co-modal-backdrop, .dash-overlay, .dash-md-backdrop, .dash-em-modal-overlay, #dash-who-reacted, .gc-modal-backdrop, .ls-modal-backdrop, .lf-modal-overlay, .mem-modal-overlay, .mem-decision-overlay, .mem-pf-takeover-backdrop, .ml-onboarding-root, .ab-lesson-modal-backdrop, .cm-rm-modal-backdrop, .cm-pu-modal-overlay, .am-wa-peek-backdrop, .ma-fam-editor-backdrop {
  left: calc(var(--layout-content-shift, 0px) * 2);
  top: var(--header-h, 64px);
}

.ml-portal-confirm-backdrop, .ml-portal-prompt-backdrop {
  left: calc(var(--layout-content-shift, 0px) * 2) !important;
}

#ml-splash {
  left: 0 !important;
}

.ab-cell-mine--tile {
  border-radius: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3px 2px;
  display: flex;
  overflow: hidden;
}

.ab-cell-mine--tile > .ab-cell-mine-avatars {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px;
  width: 100%;
  max-width: 100%;
  display: flex;
}

.ab-lesson-avatar {
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  background-color: #00000073;
  background-position: center;
  background-size: cover;
  border: 1.5px solid #0000008c;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  display: inline-flex;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #ffffff2e;
}

.ab-lesson-avatar--lead {
  border-color: #000000d9;
  box-shadow: inset 0 0 0 1.5px #ffffff52;
}

.ab-lesson-avatar--initials {
  background-color: #0000008c;
  background-image: none !important;
}

.ab-lesson-avatar--more {
  background-color: #000000b8;
  font-weight: 700;
  background-image: none !important;
}

.ab-lesson-avatar--fallback {
  background-color: #0009;
  background-image: none !important;
}

.ab-lesson-avatar--fallback .mdi {
  color: #fff;
  line-height: 1;
}

@media (width <= 480px) {
  .ab-cell-mine--tile {
    padding: 2px 1px;
  }

  .ab-lesson-avatar {
    border-width: 1px;
  }
}

.ab-focus-cell--mine-tile {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  display: flex;
  overflow: hidden;
}

.ab-cell-mine-avatars--focus {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 4px;
}

.ab-focus-cell--mine-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: auto;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
}

.ab-lesson-modal-backdrop {
  z-index: 9200;
  -webkit-backdrop-filter: blur(8px);
  background: #0a0d14b8;
  justify-content: center;
  align-items: center;
  padding: 20px;
  animation: .18s ab-lesson-modal-fade;
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
}

@keyframes ab-lesson-modal-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

:root[data-theme="light"] .ab-lesson-modal-backdrop {
  background: #1419238c;
}

.ab-lesson-modal {
  background: var(--bg-page, #0a0d14);
  border: 1px solid var(--border);
  overscroll-behavior: contain;
  border-radius: 18px;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 460px;
  max-height: min(85vh, 720px);
  padding: 22px 20px 18px;
  animation: .22s cubic-bezier(.16, 1, .3, 1) ab-lesson-modal-pop;
  display: flex;
  position: relative;
  overflow-y: auto;
  box-shadow: 0 24px 60px #0000008c, 0 4px 12px #00000059;
}

@keyframes ab-lesson-modal-pop {
  from {
    opacity: 0;
    transform: scale(.94) translateY(8px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

:root[data-theme="light"] .ab-lesson-modal {
  background: #fff;
  box-shadow: 0 16px 40px #0000002e, 0 3px 8px #0000001a;
}

.ab-lesson-modal-close {
  border: 1px solid var(--border);
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
  display: inline-flex;
  position: absolute;
  top: 12px;
  right: 12px;
}

.ab-lesson-modal-close:hover {
  background: rgba(var(--accent-rgb, 255, 255, 255), .1);
  color: var(--text-primary);
  border-color: var(--accent);
}

.ab-lesson-modal-header {
  padding-right: 40px;
}

.ab-lesson-modal-title {
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: .72rem;
  font-weight: 700;
  display: inline-flex;
}

.ab-lesson-modal-title .mdi {
  font-size: 1rem;
}

.ab-lesson-modal-meta {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.ab-lesson-modal-meta-row {
  color: var(--text-primary);
  align-items: center;
  gap: 10px;
  font-size: .92rem;
  line-height: 1.35;
  display: flex;
}

.ab-lesson-modal-meta-row .mdi {
  color: var(--text-muted);
  text-align: center;
  flex-shrink: 0;
  width: 20px;
  font-size: 1.05rem;
}

.ab-lesson-modal-meta-dim {
  color: var(--text-muted);
  font-size: .85rem;
}

.ab-lesson-modal-body {
  border-top: 1px dashed var(--border);
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
  display: flex;
}

.ab-lesson-modal-section-label {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-top: 6px;
  font-size: .7rem;
  font-weight: 700;
}

.ab-lesson-modal-participants {
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.ab-lesson-modal-participant {
  border: 1px solid var(--border);
  background: #ffffff08;
  border-radius: 10px;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  display: flex;
}

:root[data-theme="light"] .ab-lesson-modal-participant {
  background: #00000008;
}

.ab-lesson-modal-participant-body {
  flex: auto;
  min-width: 0;
}

.ab-lesson-modal-participant-name {
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .92rem;
  font-weight: 600;
  overflow: hidden;
}

.ab-lesson-modal-badge {
  background: rgba(var(--accent-rgb, 255, 255, 255), .14);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 999px;
  flex-shrink: 0;
  align-items: center;
  padding: 3px 8px;
  font-size: .65rem;
  font-weight: 700;
  display: inline-flex;
}

.ab-lesson-modal-call {
  color: #22c55e;
  background: #22c55e24;
  border: 1px solid #22c55e73;
  border-radius: 999px;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: .72rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s;
  display: inline-flex;
}

.ab-lesson-modal-call:hover {
  background: #22c55e38;
  border-color: #22c55ebf;
}

.ab-lesson-modal-call .mdi {
  font-size: .9rem;
}

.ab-lesson-modal-call--guardian {
  color: #fb923c;
  background: #fb923c24;
  border-color: #fb923c73;
}

.ab-lesson-modal-call--guardian:hover {
  background: #fb923c38;
  border-color: #fb923cbf;
}

.ab-lesson-modal-call-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
}

.ab-lesson-modal-nophone {
  color: var(--text-muted);
  opacity: .6;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 4px 6px;
  display: inline-flex;
}

.ab-lesson-modal-nophone .mdi {
  font-size: .95rem;
}

@media (width <= 480px) {
  .ab-lesson-modal-call--guardian .ab-lesson-modal-call-label {
    display: none;
  }
}

.ab-lesson-modal-empty {
  color: var(--text-muted);
  text-align: center;
  border: 1px dashed var(--border);
  background: #00000005;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .85rem;
  list-style: none;
}

.ab-lesson-modal-notes {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.ab-lesson-modal-notes p {
  border: 1px solid var(--border);
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  background: #ffffff08;
  border-radius: 8px;
  margin: 0;
  padding: 10px 12px;
  font-size: .88rem;
  line-height: 1.4;
}

:root[data-theme="light"] .ab-lesson-modal-notes p {
  background: #00000008;
}

.ab-lesson-modal-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 6px;
  display: flex;
}

.ab-lesson-modal-btn {
  cursor: pointer;
  border-radius: 10px;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  transition: background .15s, border-color .15s;
  display: inline-flex;
}

.ab-lesson-modal-btn--ghost {
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: none;
}

.ab-lesson-modal-btn--ghost:hover {
  background: rgba(var(--accent-rgb, 255, 255, 255), .06);
  color: var(--text-primary);
  border-color: var(--accent);
}

.ab-cell-mine--tile, .ab-focus-cell--mine-tile {
  cursor: pointer;
}

.ab-cell-mine--tile:focus-visible, .ab-focus-cell--mine-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (width <= 480px) {
  .ab-lesson-modal {
    border-radius: 14px;
    padding: 18px 16px 14px;
  }

  .ab-lesson-modal-header {
    padding-right: 36px;
  }

  .ab-lesson-modal-title {
    font-size: .68rem;
  }

  .ab-lesson-modal-actions {
    justify-content: stretch;
  }

  .ab-lesson-modal-btn {
    flex: auto;
    justify-content: center;
  }
}

.ab-lesson-modal-actions {
  justify-content: space-between;
}

.ab-lesson-modal-btn--flag {
  color: #fb923cf2;
  background: none;
  border: 1px solid #fb923c8c;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.ab-lesson-modal-btn--flag:hover {
  color: #fb923c;
  background: #fb923c1f;
  border-color: #fb923cd9;
}

.ab-lesson-modal-btn--flag .mdi {
  font-size: 1rem;
}

.ab-lesson-modal-btn--notes {
  color: #60a5fa;
  background: none;
  border: 1px solid #60a5fa8c;
}

.ab-lesson-modal-btn--notes:hover {
  background: #60a5fa24;
  border-color: #60a5fad9;
}

.ab-lesson-modal-btn--add {
  border: 1px solid rgba(var(--accent-rgb, 245, 166, 35), .6);
  color: var(--accent);
  background: none;
}

.ab-lesson-modal-btn--add:hover {
  background: rgba(var(--accent-rgb, 245, 166, 35), .14);
  border-color: rgba(var(--accent-rgb, 245, 166, 35), .9);
}

.ab-add-student-list {
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  margin-top: 6px;
  display: flex;
  overflow-y: auto;
}

.ab-add-student-row {
  border: 1px solid var(--border);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  background: none;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: .9rem;
  transition: background .12s, border-color .12s;
  display: flex;
}

.ab-add-student-row:hover:not([disabled]) {
  background: rgba(var(--accent-rgb, 245, 166, 35), .08);
  border-color: rgba(var(--accent-rgb, 245, 166, 35), .4);
}

.ab-add-student-row[disabled] {
  opacity: .55;
  cursor: default;
}

.ab-add-student-row > .mdi:first-child {
  color: var(--text-muted);
  font-size: 1.15rem;
}

.ab-add-student-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 24px 12px;
  font-size: .88rem;
  font-style: italic;
}

.ab-add-student-ok {
  color: var(--success);
  background: #5ce07c1f;
  border: 1px solid #5ce07c59;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px 12px;
  font-size: .88rem;
  display: flex;
}

.ab-lesson-modal-btn--resched {
  color: #a855f7;
  background: none;
  border: 1px solid #a855f78c;
}

.ab-lesson-modal-btn--resched:hover {
  background: #a855f724;
  border-color: #a855f7d9;
}

.ab-lesson-modal-btn--cancel {
  color: #ef4444;
  background: none;
  border: 1px solid #ef44448c;
}

.ab-lesson-modal-btn--cancel:hover {
  background: #ef444424;
  border-color: #ef4444d9;
}

.ab-lesson-modal-btn--primary {
  background: var(--color-primary, #10b981);
  border: 1px solid var(--color-primary, #10b981);
  color: #fff;
}

.ab-lesson-modal-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

.ab-lesson-modal-btn--primary:disabled {
  opacity: .6;
  cursor: default;
}

.ab-lesson-modal-btn--danger {
  color: #fff;
  background: #ef4444e6;
  border: 1px solid #ef4444e6;
}

.ab-lesson-modal-btn--danger:hover:not(:disabled) {
  background: #ef4444;
}

.ab-lesson-modal-btn--danger:disabled {
  opacity: .6;
  cursor: default;
}

.ab-lesson-modal-badge--series {
  color: #a855f7;
  vertical-align: middle;
  background: #a855f729;
  border: 1px solid #a855f766;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: .72rem;
  display: inline-flex;
}

.ab-lesson-modal-badge--series .mdi {
  font-size: .85rem;
}

.ab-lesson-modal-dim {
  color: var(--text-muted, #ffffff8c);
  font-size: .9em;
}

.ab-notes-modal, .ab-cancel-modal, .ab-reschedule-modal {
  max-width: 520px;
}

.ab-notes-input {
  background: var(--bg-page, #0a0d14);
  border: 1px solid var(--border, #ffffff1f);
  width: 100%;
  color: var(--text-primary, #fff);
  box-sizing: border-box;
  resize: vertical;
  border-radius: 8px;
  margin-top: 4px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: .92rem;
}

:root[data-theme="light"] .ab-notes-input {
  background: #fff;
}

.ab-notes-input:focus {
  border-color: #60a5fab3;
  outline: none;
  box-shadow: 0 0 0 2px #60a5fa24;
}

textarea.ab-notes-input {
  min-height: 80px;
  line-height: 1.4;
}

.ab-modal-error {
  color: #ef4444;
  background: #ef444424;
  border: 1px solid #ef444466;
  border-radius: 6px;
  margin-top: 10px;
  padding: 8px 12px;
  font-size: .85rem;
  line-height: 1.35;
}

.ab-scope-radio-group {
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  display: flex;
}

.ab-scope-radio {
  border: 1px solid var(--border, #ffffff1f);
  cursor: pointer;
  color: var(--text-primary, #fff);
  background: #ffffff08;
  border-radius: 8px;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  font-size: .9rem;
  line-height: 1.35;
  transition: background .15s, border-color .15s;
  display: flex;
}

:root[data-theme="light"] .ab-scope-radio {
  background: #00000008;
}

.ab-scope-radio:hover {
  border-color: #ef444480;
}

.ab-scope-radio--on {
  background: #ef44441a;
  border-color: #ef4444bf;
}

.ab-scope-radio input[type="radio"] {
  accent-color: #ef4444e6;
  flex-shrink: 0;
  margin-top: 3px;
}

.ab-scope-radio > span {
  flex: 1;
  min-width: 0;
}

.ab-cancel-hint {
  color: var(--text-primary, #fff);
  background: #60a5fa14;
  border-left: 3px solid #60a5fa99;
  border-radius: 6px;
  align-items: flex-start;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 12px;
  font-size: .82rem;
  line-height: 1.4;
  display: flex;
}

.ab-cancel-hint .mdi {
  color: #60a5fa;
  flex-shrink: 0;
  margin-top: 1px;
}

.ab-cancel-hint--good {
  background: #22c55e14;
  border-left-color: #22c55e99;
}

.ab-cancel-hint--good .mdi {
  color: #22c55e;
}

.ab-cancel-hint--warn {
  background: #fb923c1a;
  border-left-color: #fb923cb3;
}

.ab-cancel-hint--warn .mdi {
  color: #fb923c;
}

.ab-cancel-outright {
  border: 1px solid rgba(var(--accent-rgb, 79 195 247), .2);
  cursor: pointer;
  background: #0000002e;
  border-radius: 8px;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  transition: background .12s, border-color .12s;
  display: flex;
}

:root[data-theme="light"] .ab-cancel-outright {
  background: #00000008;
}

.ab-cancel-outright:hover {
  border-color: rgba(var(--accent-rgb, 79 195 247), .4);
}

.ab-cancel-outright--on {
  background: rgba(var(--accent-rgb, 79 195 247), .1);
  border-color: rgba(var(--accent-rgb, 79 195 247), .55);
}

.ab-cancel-outright input[type="checkbox"] {
  accent-color: rgb(var(--accent-rgb, 79 195 247));
  cursor: pointer;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.ab-cancel-outright > span {
  min-width: 0;
  color: var(--text-primary);
  flex: 1;
  font-size: .85rem;
}

.ab-cancel-outright > span > strong {
  margin-bottom: 2px;
  display: block;
}

.ab-cancel-series-list-wrap {
  margin-top: 6px;
}

.ab-cancel-series-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb, 79 195 247), .35) transparent;
  background: #0000002e;
  border-radius: 8px;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  padding: 4px;
  display: flex;
  overflow-y: auto;
}

:root[data-theme="light"] .ab-cancel-series-list {
  background: #0000000a;
}

.ab-cancel-series-list--loading {
  color: var(--text-muted);
  align-items: center;
  gap: 8px;
  padding: 12px;
  font-size: .85rem;
  display: flex;
}

.ab-cancel-series-row {
  color: var(--text-primary);
  cursor: pointer;
  background: #00000026;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: .85rem;
  transition: background .12s;
  display: flex;
}

:root[data-theme="light"] .ab-cancel-series-row {
  background: #00000008;
}

.ab-cancel-series-row:hover {
  background: rgba(var(--accent-rgb, 79 195 247), .08);
}

.ab-cancel-series-row--on {
  background: #ef44441f;
}

.ab-cancel-series-row--on:hover {
  background: #ef44442e;
}

.ab-cancel-series-row input[type="checkbox"] {
  accent-color: #ef4444;
  cursor: pointer;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.ab-cancel-series-row input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: .7;
}

.ab-cancel-series-when {
  font-variant-numeric: tabular-nums;
  flex: 1;
  min-width: 0;
}

.ab-cancel-series-tag {
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #ef4444;
  background: #ef444433;
  border-radius: 999px;
  flex-shrink: 0;
  padding: 2px 8px;
  font-size: .7rem;
  font-weight: 700;
}

.ab-cancel-series-row--anchor {
  background: #ef44442e;
}

.ab-resched-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
  display: grid;
}

@media (width <= 480px) {
  .ab-resched-grid {
    grid-template-columns: 1fr;
  }
}

.ab-resched-grid > div {
  min-width: 0;
}

.ab-resched-grid .ab-lesson-modal-section-label {
  margin-bottom: 4px;
}

.ab-notes-modal--wide {
  max-width: 640px;
}

.ab-nt-body {
  max-height: min(70vh, 640px);
  padding-right: 4px;
  overflow-y: auto;
}

.ab-nt-complete-chip {
  color: #22c55e;
  vertical-align: middle;
  background: #22c55e24;
  border: 1px solid #22c55e66;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 3px 8px;
  font-size: .72rem;
  font-weight: 600;
  display: inline-flex;
}

.ab-nt-complete-chip .mdi {
  font-size: .9rem;
}

.ab-nt-focus {
  background: #60a5fa1a;
  border-left: 3px solid #60a5fab3;
  border-radius: 8px;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  display: flex;
}

.ab-nt-focus > .mdi {
  color: #60a5fa;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1.3rem;
}

.ab-nt-focus-label {
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #60a5fa;
  margin-bottom: 3px;
  font-size: .72rem;
  font-weight: 700;
}

.ab-nt-focus-text {
  color: var(--text-primary);
  font-size: .9rem;
  line-height: 1.4;
}

.ab-nt-checklist {
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  display: flex;
}

.ab-nt-checklist-row {
  border: 1px solid var(--border, #ffffff1a);
  color: var(--text-primary);
  background: #ffffff08;
  border-radius: 8px;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: .88rem;
  display: flex;
}

:root[data-theme="light"] .ab-nt-checklist-row {
  background: #00000008;
}

.ab-nt-check, .ab-nt-completed, .ab-nt-remove {
  cursor: pointer;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 6px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 4px;
  font-family: inherit;
  display: inline-flex;
}

.ab-nt-check .mdi, .ab-nt-completed .mdi, .ab-nt-remove .mdi {
  font-size: 1.2rem;
}

.ab-nt-check:hover, .ab-nt-completed:hover, .ab-nt-remove:hover {
  background: rgba(var(--accent-rgb, 255, 255, 255), .08);
  color: var(--text-primary);
}

.ab-nt-completed--on {
  color: #22c55e;
}

.ab-nt-completed--on:hover {
  background: #22c55e24;
}

.ab-nt-hide {
  cursor: pointer;
  color: #fb923cb3;
  background: none;
  border: none;
  border-radius: 6px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 4px;
  font-family: inherit;
  display: inline-flex;
}

.ab-nt-hide .mdi {
  font-size: 1.1rem;
}

.ab-nt-hide:hover {
  color: #fb923c;
  background: #fb923c24;
}

.ab-nt-checklist-item {
  min-width: 100px;
  color: var(--text-primary);
  word-break: break-word;
  flex: 200px;
  line-height: 1.35;
}

.ab-nt-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 12px;
  font-size: .85rem;
  font-style: italic;
}

.ab-nt-stars {
  flex-shrink: 0;
  gap: 1px;
  display: inline-flex;
}

.ab-nt-star {
  cursor: pointer;
  color: var(--text-muted);
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  padding: 3px 2px;
  font-family: inherit;
  display: inline-flex;
}

.ab-nt-star .mdi {
  font-size: 1rem;
}

.ab-nt-star--on {
  color: #fbbf24;
}

.ab-nt-star:hover {
  color: #fbbf24cc;
}

.ab-nt-add-row {
  align-items: stretch;
  gap: 6px;
  margin-top: 8px;
  display: flex;
}

.ab-nt-add-row .ab-notes-input {
  flex: auto;
  margin-top: 0;
}

.ab-nt-add-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: .85rem;
}

.ab-nt-hist {
  border-top: 1px dashed var(--border, #ffffff1a);
  margin-top: 14px;
  padding-top: 12px;
}

.ab-nt-hist-toggle {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  font-family: inherit;
  font-size: .85rem;
  display: inline-flex;
}

.ab-nt-hist-toggle:hover {
  color: var(--text-primary);
}

.ab-nt-hist-list {
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.ab-nt-hist-list li {
  background: #ffffff08;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: .82rem;
}

:root[data-theme="light"] .ab-nt-hist-list li {
  background: #00000008;
}

.ab-nt-hist-head {
  color: var(--text-primary);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
  font-weight: 600;
  display: flex;
}

.ab-nt-hist-rating {
  color: #fbbf24;
  font-weight: 600;
}

.ab-nt-hist-notes {
  color: var(--text-muted);
  white-space: pre-wrap;
  font-size: .8rem;
  line-height: 1.4;
}

.ab-lesson-modal-btn--complete {
  color: #fff;
  background: #22c55e;
  border: 1px solid #22c55e;
}

.ab-lesson-modal-btn--complete:hover:not(:disabled) {
  filter: brightness(1.08);
}

.ab-lesson-modal-btn--complete:disabled {
  opacity: .6;
  cursor: default;
}

.ab-nt-student-rating {
  background: #fbbf241a;
  border: 1px solid #fbbf2459;
  border-radius: 8px;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 12px;
  padding: 10px 12px;
  display: flex;
}

.ab-nt-student-rating-label {
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fbbf24;
  font-size: .72rem;
  font-weight: 700;
}

.ab-nt-student-rating-stars {
  color: #fbbf24;
  align-items: center;
  gap: 3px;
  font-size: 1.1rem;
  display: flex;
}

.ab-nt-student-rating-stars .mdi {
  font-size: 1.15rem;
}

.ab-nt-student-rating-num {
  color: var(--text-primary);
  margin-left: 8px;
  font-size: .85rem;
  font-weight: 600;
}

.ab-cell-mine {
  position: relative;
}

.ab-cell-badges {
  pointer-events: none;
  z-index: 2;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  display: flex;
  position: absolute;
  top: 2px;
  right: 2px;
}

.ab-cell-badge {
  color: #fff;
  white-space: nowrap;
  background: #0000008c;
  border-radius: 999px;
  align-items: center;
  gap: 2px;
  padding: 1px 5px;
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.1;
  display: inline-flex;
  box-shadow: 0 0 0 1px #fff3;
}

.ab-cell-badge .mdi {
  font-size: .75rem;
}

.ab-cell-badge--rating {
  color: #0a0d14;
  background: #fbbf24f2;
  box-shadow: 0 0 0 1px #fbbf2466;
}

.ab-cell-badge--complete {
  color: #fff;
  background: #22c55ef2;
}

.ab-cell-badge--review {
  color: #fff;
  background: #60a5fae6;
}

.ab-cell-badge--plan {
  color: #fff;
  background: #a855f7e6;
}

@media (width <= 480px) {
  .ab-cell-badge {
    padding: 1px 3px;
    font-size: .55rem;
  }

  .ab-cell-badge .mdi {
    font-size: .65rem;
  }
}

.ab-nt-cat-strip {
  background: #60a5fa0f;
  border: 1px dashed #60a5fa59;
  border-radius: 8px;
  margin: 4px 0 10px;
  padding: 8px 10px;
}

.ab-nt-cat-banner {
  color: var(--text-primary);
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: .82rem;
  line-height: 1.35;
  display: flex;
}

.ab-nt-cat-banner .mdi {
  color: #60a5fa;
  font-size: 1rem;
}

.ab-nt-cat-reason {
  color: var(--text-muted);
  font-size: .78rem;
  font-style: italic;
}

.ab-nt-cat-spinner .mdi {
  color: #60a5fae6;
  margin-left: 4px;
}

.ab-nt-cat-chips {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.ab-nt-cat-chip {
  border: 1px solid var(--border, #ffffff26);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  background: #ffffff0a;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: .78rem;
  transition: background .15s, border-color .15s;
  display: inline-flex;
}

:root[data-theme="light"] .ab-nt-cat-chip {
  background: #00000008;
}

.ab-nt-cat-chip:hover {
  background: #60a5fa24;
  border-color: #60a5fa8c;
}

.ab-nt-cat-chip--active {
  color: #60a5fa;
  background: #60a5fa33;
  border-color: #60a5fabf;
  font-weight: 600;
}

.ab-nt-cat-chip-sub {
  color: var(--text-muted);
  opacity: .85;
  font-size: .68rem;
}

.ab-nt-cat-chip--active .ab-nt-cat-chip-sub {
  color: #60a5fad9;
}

.ab-nt-cat-manage {
  border: 1px solid var(--border, #ffffff26);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border-radius: 999px;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  padding: 3px 8px;
  font-family: inherit;
  font-size: .72rem;
  transition: background .15s, border-color .15s, color .15s;
  display: inline-flex;
}

.ab-nt-cat-manage:hover {
  color: var(--text-primary);
  background: #60a5fa24;
  border-color: #60a5fa8c;
}

.ab-nt-cat-manage .mdi {
  font-size: .85rem;
}

.ab-te-list {
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.ab-te-item {
  border: 1px solid var(--border, #ffffff1a);
  background: #ffffff08;
  border-radius: 8px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  display: flex;
}

:root[data-theme="light"] .ab-te-item {
  background: #00000008;
}

.ab-te-item--hidden {
  opacity: .55;
}

.ab-te-item-text {
  min-width: 120px;
  color: var(--text-primary);
  word-break: break-word;
  flex: 200px;
  font-size: .88rem;
  line-height: 1.35;
}

.ab-te-item-meta {
  flex-shrink: 0;
  gap: 4px;
  display: flex;
}

.ab-te-item-action {
  flex-shrink: 0;
}

.ab-te-origin {
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: .66rem;
  font-weight: 700;
}

.ab-te-origin--sys {
  color: #60a5fa;
  background: #60a5fa1f;
  border: 1px solid #60a5fa59;
}

.ab-te-origin--own {
  color: #a855f7;
  background: #a855f71f;
  border: 1px solid #a855f759;
}

.ab-te-origin--hidden {
  color: #fb923c;
  background: #fb923c1f;
  border: 1px solid #fb923c59;
}

.ab-te-btn {
  border: 1px solid var(--border, #ffffff26);
  color: var(--text-primary);
  cursor: pointer;
  background: none;
  border-radius: 6px;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: .78rem;
  display: inline-flex;
}

.ab-te-btn:hover {
  background: #fb923c24;
  border-color: #fb923c8c;
}

.ab-te-btn--danger:hover {
  color: #ef4444;
  background: #ef444424;
  border-color: #ef44448c;
}

.ab-te-btn--restore:hover {
  color: #22c55e;
  background: #22c55e24;
  border-color: #22c55e8c;
}

.ab-te-btn .mdi {
  font-size: .9rem;
}

.ab-te-cat-badge {
  color: #0a0d14;
  background: #fb923ce6;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-width: 16px;
  height: 16px;
  margin-left: 4px;
  padding: 0 5px;
  font-size: .65rem;
  font-weight: 700;
  display: inline-flex;
}

.ab-te-hidden-hint {
  color: var(--text-primary);
  background: #fb923c14;
  border: 1px dashed #fb923c66;
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 8px 12px;
  font-size: .82rem;
  line-height: 1.35;
  display: flex;
}

.ab-te-hidden-hint .mdi {
  color: #fb923c;
  flex-shrink: 0;
  font-size: 1rem;
}

.ab-nt-np-strip {
  background: #a855f70f;
  border: 1px dashed #a855f759;
  border-radius: 8px;
  margin: 4px 0 10px;
  padding: 6px 8px;
}

.ab-nt-np-actions {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.ab-nt-np-toggle {
  border: 1px solid var(--border, #ffffff26);
  color: var(--text-primary);
  cursor: pointer;
  background: #ffffff0a;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: .78rem;
  transition: background .15s, border-color .15s;
  display: inline-flex;
}

:root[data-theme="light"] .ab-nt-np-toggle {
  background: #00000008;
}

.ab-nt-np-toggle:hover {
  background: #a855f724;
  border-color: #a855f78c;
}

.ab-nt-np-toggle--on {
  color: #a855f7;
  background: #a855f733;
  border-color: #a855f7bf;
}

.ab-nt-np-loading, .ab-nt-np-empty {
  color: var(--text-muted);
  text-align: center;
  padding: 8px 4px;
  font-size: .82rem;
  font-style: italic;
}

.ab-nt-np-list {
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 6px 0 0;
  list-style: none;
  display: flex;
}

.ab-nt-np-item {
  border: 1px solid var(--border, #ffffff1a);
  background: #ffffff08;
  border-radius: 6px;
  align-items: stretch;
  gap: 4px;
  display: flex;
  overflow: hidden;
}

:root[data-theme="light"] .ab-nt-np-item {
  background: #00000008;
}

.ab-nt-np-load {
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  flex-direction: column;
  flex: auto;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  font-family: inherit;
  display: flex;
}

.ab-nt-np-load:hover {
  background: #a855f724;
}

.ab-nt-np-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: .9rem;
  font-weight: 600;
  overflow: hidden;
}

.ab-nt-np-meta {
  color: var(--text-muted);
  font-size: .72rem;
}

.ab-nt-np-del {
  border: none;
  border-left: 1px solid var(--border, #ffffff1a);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  flex-shrink: 0;
  padding: 6px 10px;
}

.ab-nt-np-del:hover {
  color: #ef4444;
  background: #ef444414;
}

.ab-nt-np-save-row {
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4px;
  margin-top: 6px;
  display: flex;
}

.ab-nt-np-save-row .ab-notes-input {
  flex: 200px;
  margin-top: 0;
}

.ab-resched-preview {
  max-height: 200px;
  color: var(--text-primary);
  background: #a855f714;
  border: 1px dashed #a855f759;
  border-radius: 8px;
  margin: 6px 0 0;
  padding: 8px 12px;
  font-size: .85rem;
  list-style: none;
  overflow-y: auto;
}

.ab-resched-preview li {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  line-height: 1.35;
  display: flex;
}

.ab-resched-preview li + li {
  border-top: 1px dashed #a855f724;
}

.ab-resched-preview-date {
  color: var(--text-primary);
  font-weight: 600;
}

.ab-resched-preview-time {
  color: #a855f7;
  font-family: SF Mono, Monaco, Consolas, monospace;
  font-weight: 600;
}

.ab-resched-preview-court {
  color: var(--text-muted);
  font-size: .8rem;
}

.ab-resched-preview .mdi {
  color: #a855f7bf;
  font-size: .9rem;
}

.ab-resched-preview-more {
  color: var(--text-muted);
  font-size: .8rem;
  font-style: italic;
}

.ab-cell-other[data-ab-open-other], .ab-cell-pickup[data-ab-open-pickup] {
  cursor: pointer;
}

.ab-cell-other[data-ab-open-other]:hover, .ab-cell-pickup[data-ab-open-pickup]:hover {
  filter: brightness(1.4);
}

.ab-cell-other[data-ab-open-other]:focus-visible, .ab-cell-pickup[data-ab-open-pickup]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.am-cal-view-toggle {
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px 0;
  display: flex;
}

.am-cal-view-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  min-width: 0;
  max-width: 130px;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 999px;
  flex: 1 1 0;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
  display: inline-flex;
}

.am-cal-view-chip .mdi {
  font-size: 1rem;
}

.am-cal-view-chip:hover {
  border-color: rgba(var(--accent-rgb), .5);
}

.am-cal-view-chip--on {
  background: rgba(var(--accent-rgb), .16);
  border-color: rgba(var(--accent-rgb), .55);
  color: var(--accent);
  font-weight: 600;
}

.am-cal-navstrip {
  align-items: center;
  gap: 8px;
  padding: 8px 12px 6px;
  display: flex;
}

.am-cal-navbtn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 8px;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: .82rem;
  transition: border-color .15s;
  display: inline-flex;
}

.am-cal-navbtn:hover {
  border-color: rgba(var(--accent-rgb), .5);
}

.am-cal-navbtn--today {
  background: rgba(var(--accent-rgb), .12);
  border-color: rgba(var(--accent-rgb), .35);
  color: var(--accent);
  font-weight: 600;
}

.am-cal-navlbl {
  text-align: center;
  color: var(--text-primary);
  flex: 1;
  font-size: .98rem;
  font-weight: 600;
}

.am-cal-swatch-dot {
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
  width: 10px;
  height: 10px;
  display: inline-block;
  box-shadow: 0 0 0 1px #00000026;
}

.am-cal-week-grid {
  --am-cal-row-h: 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  grid-template-columns: 48px 1fr;
  gap: 0;
  margin: 8px 12px 0;
  display: grid;
  overflow-x: auto;
}

.am-cal-week-hours {
  border-right: 1px solid var(--border);
  flex-direction: column;
  display: flex;
}

.am-cal-week-hour {
  height: var(--am-cal-row-h);
  color: var(--text-muted);
  text-align: right;
  font-size: .68rem;
  line-height: var(--am-cal-row-h);
  box-sizing: border-box;
  padding: 0 4px 0 0;
}

.am-cal-week-hour--half {
  color: #0000;
}

.am-cal-week-cols {
  grid-template-columns: repeat(7, minmax(80px, 1fr));
  min-width: 560px;
  display: grid;
}

.am-cal-week-col {
  border-left: 1px solid var(--border);
  position: relative;
}

.am-cal-week-col:first-child {
  border-left: none;
}

.am-cal-week-col-head {
  text-align: center;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  height: 40px;
  color: var(--text-primary);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  width: 100%;
  padding-top: 4px;
  font-family: inherit;
  display: block;
}

.am-cal-week-col-head:hover {
  background: rgba(var(--accent-rgb), .06);
}

.am-cal-week-dow {
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: .06em;
  font-size: .7rem;
}

.am-cal-week-date {
  color: var(--text-primary);
  font-size: .95rem;
  font-weight: 600;
}

.am-cal-week-col--today .am-cal-week-date {
  color: var(--accent);
}

.am-cal-week-col--selected {
  background: rgba(var(--accent-rgb), .04);
}

.am-cal-week-col--hol-pub {
  background: #dc3c3c0f;
}

.am-cal-week-col--hol-school {
  background: #ffa5000d;
}

.am-cal-week-hol-pill {
  letter-spacing: .05em;
  border-radius: 4px;
  margin-top: 2px;
  padding: 1px 5px;
  font-size: .58rem;
  font-weight: 700;
  display: inline-block;
}

.am-cal-week-hol-pill--pub {
  color: #ff8b8b;
  background: #dc3c3c2e;
  border: 1px solid #dc3c3c66;
}

.am-cal-week-hol-pill--school {
  color: #ffb84d;
  background: #ffa50029;
  border: 1px solid #ffa50059;
}

.am-cal-day-hol-banner {
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  font-size: .86rem;
  display: flex;
}

.am-cal-day-hol-banner strong {
  margin-right: 2px;
  font-weight: 700;
}

.am-cal-day-hol-banner .mdi {
  font-size: 1.1rem;
}

.am-cal-day-hol-banner--pub {
  color: #ff8b8b;
  background: #dc3c3c1f;
  border: 1px solid #dc3c3c59;
}

.am-cal-day-hol-banner--school {
  color: #ffb84d;
  background: #ffa5001a;
  border: 1px solid #ffa5004d;
}

.am-cal-week-slots {
  background: repeating-linear-gradient(to bottom,
            transparent 0,
            transparent calc(var(--am-cal-row-h) * 2 - 1px),
            #ffffff0b calc(var(--am-cal-row-h) * 2 - 1px),
            #ffffff0b calc(var(--am-cal-row-h) * 2));
  position: relative;
}

.am-cal-week-event {
  color: #0b1220;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  border: none;
  border-radius: 4px;
  flex-direction: column;
  gap: 2px;
  padding: 3px 6px;
  font-family: inherit;
  font-size: .72rem;
  line-height: 1.1;
  display: flex;
  position: absolute;
  overflow: hidden;
  box-shadow: 0 1px 2px #00000047;
}

.am-cal-week-event:hover {
  filter: brightness(1.05);
}

.am-cal-week-event-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #0b1220;
  font-weight: 600;
  overflow: hidden;
}

.am-cal-week-event-time {
  color: #0b1220b8;
  font-size: .66rem;
}

.am-cal-month-grid {
  padding: 8px 12px 0;
}

.am-cal-month-head {
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  display: grid;
}

.am-cal-month-dow {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: 4px 0;
  font-size: .7rem;
}

.am-cal-month-body {
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  display: grid;
}

.am-cal-day-cell {
  aspect-ratio: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  border-radius: 6px;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 6px;
  font-family: inherit;
  font-size: .85rem;
  transition: border-color .15s, background .15s;
  display: flex;
}

.am-cal-day-cell:hover {
  border-color: rgba(var(--accent-rgb), .5);
}

.am-cal-day-cell--out {
  opacity: .35;
}

.am-cal-day-cell--today {
  border-color: rgba(var(--accent-rgb), .5);
}

.am-cal-day-cell--today .am-cal-day-num {
  color: var(--accent);
  font-weight: 700;
}

.am-cal-day-cell--selected {
  background: rgba(var(--accent-rgb), .14);
  border-color: var(--accent);
}

.am-cal-day-cell--has .am-cal-day-num {
  font-weight: 600;
}

.am-cal-day-cell--hol-pub {
  background: linear-gradient(#dc3c3c24, #dc3c3c12), var(--bg-card);
  border-color: #dc3c3c66;
}

.am-cal-day-cell--hol-pub .am-cal-day-num {
  color: #ff8b8b;
}

.am-cal-day-cell--hol-school {
  background: linear-gradient(#ffa5001f, #ffa5000d), var(--bg-card);
  border-color: #ffa50059;
}

.am-cal-day-cell--hol-school .am-cal-day-num {
  color: #ffb84d;
}

.am-cal-day-cell--hol-pub.am-cal-day-cell--today, .am-cal-day-cell--hol-school.am-cal-day-cell--today, .am-cal-day-cell--hol-pub.am-cal-day-cell--selected, .am-cal-day-cell--hol-school.am-cal-day-cell--selected {
  border-width: 2px;
  border-color: var(--accent);
}

.am-cal-day-num {
  font-size: .88rem;
}

.am-cal-day-dots {
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  display: flex;
}

.am-cal-day-dot {
  border-radius: 50%;
  width: 7px;
  height: 7px;
  display: inline-block;
  box-shadow: 0 0 0 1px #00000026;
}

.am-cal-day-more {
  color: var(--text-muted);
  font-size: .62rem;
  line-height: 1;
}

.am-cal-legend {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 12px 12px 20px;
  display: flex;
}

.am-cal-legend-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  opacity: .55;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  max-width: 200px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: .78rem;
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
  display: inline-flex;
}

.am-cal-legend-chip--on {
  color: var(--text-primary);
  opacity: 1;
  border-color: rgba(var(--accent-rgb), .4);
}

.am-cal-legend-chip--reset {
  border-color: rgba(var(--accent-rgb), .35);
  color: var(--accent);
  opacity: 1;
  background: none;
}

.am-cal-legend-dot {
  border-radius: 50%;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  display: inline-block;
  box-shadow: 0 0 0 1px #00000026;
}

.am-cal-legend-label {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 140px;
  font-weight: 500;
  overflow: hidden;
}

@media (width <= 480px) {
  .am-cal-view-toggle {
    padding: 4px 8px 0;
  }

  .am-cal-view-chip {
    max-width: none;
    padding: 6px 8px;
    font-size: .75rem;
  }

  .am-cal-view-chip .mdi {
    font-size: .9rem;
  }

  .am-cal-navstrip {
    gap: 4px;
    padding: 6px 8px 4px;
  }

  .am-cal-navbtn {
    padding: 5px 8px;
    font-size: .78rem;
  }

  .am-cal-navlbl {
    font-size: .88rem;
  }

  .am-cal-week-grid {
    --am-cal-row-h: 18px;
    margin: 6px 6px 0;
  }

  .am-cal-week-cols {
    min-width: 480px;
  }

  .am-cal-week-event {
    padding: 2px 4px;
    font-size: .66rem;
  }

  .am-cal-week-event-time {
    font-size: .6rem;
  }

  .am-cal-month-grid {
    padding: 6px 6px 0;
  }

  .am-cal-day-cell {
    border-radius: 4px;
    padding: 3px 4px;
    font-size: .78rem;
  }

  .am-cal-day-num {
    font-size: .75rem;
  }

  .am-cal-day-dot {
    width: 5px;
    height: 5px;
  }

  .am-cal-day-more {
    font-size: .56rem;
  }

  .am-cal-legend {
    gap: 4px;
    padding: 8px 8px 16px;
  }

  .am-cal-legend-chip {
    max-width: 160px;
    padding: 4px 8px;
    font-size: .72rem;
  }

  .am-cal-legend-label {
    max-width: 110px;
  }
}

.am-plan-modal {
  max-width: 720px;
}

.am-plan-lesson-when {
  text-align: center;
  color: var(--text-muted);
  margin: -4px 0 12px;
  font-size: .88rem;
}

.am-plan-complete-banner {
  color: var(--text-primary);
  background: #22c55e1f;
  border: 1px solid #22c55e66;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  font-size: .88rem;
  display: flex;
}

.am-plan-complete-banner .mdi {
  color: #22c55e;
}

.am-plan-focus-banner {
  background: rgba(var(--accent-rgb, 245, 166, 35), .1);
  border: 1px solid rgba(var(--accent-rgb, 245, 166, 35), .36);
  border-radius: 10px;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 14px;
  display: flex;
}

.am-plan-focus-icon {
  background: rgba(var(--accent-rgb, 245, 166, 35), .2);
  width: 32px;
  height: 32px;
  color: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  display: inline-flex;
}

.am-plan-focus-body {
  flex: auto;
  min-width: 0;
}

.am-plan-focus-label {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
  margin-bottom: 3px;
  font-size: .72rem;
  font-weight: 700;
}

.am-plan-focus-when {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-left: 4px;
  font-weight: 400;
}

.am-plan-focus-text {
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .92rem;
  line-height: 1.4;
}

.am-plan-history {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}

.am-plan-history-toggle {
  width: 100%;
  color: var(--text-primary);
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 500;
  display: flex;
}

.am-plan-history-toggle:hover {
  background: rgba(var(--accent-rgb, 255, 255, 255), .05);
}

.am-plan-history-caret {
  margin-left: auto;
}

.am-plan-history-body {
  flex-direction: column;
  gap: 8px;
  padding: 4px 12px 12px;
  display: flex;
}

.am-plan-hist-row {
  border: 1px solid var(--border);
  background: #ffffff08;
  border-radius: 8px;
  padding: 8px 10px;
}

:root[data-theme="light"] .am-plan-hist-row {
  background: #00000008;
}

.am-plan-hist-head {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  display: flex;
}

.am-plan-hist-date {
  color: var(--text-primary);
  font-size: .82rem;
  font-weight: 600;
}

.am-plan-hist-rating {
  color: var(--accent);
  letter-spacing: .06em;
  font-size: .82rem;
}

.am-plan-hist-focus {
  color: var(--accent);
  align-items: flex-start;
  gap: 4px;
  padding: 4px 0;
  font-size: .82rem;
  display: flex;
}

.am-plan-hist-focus .mdi {
  flex-shrink: 0;
  margin-top: 2px;
}

.am-plan-hist-note {
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.4;
}

.am-plan-hist-note strong {
  color: var(--text-primary);
  font-weight: 600;
}

.am-plan-section {
  border: 1px solid var(--border);
  background: #ffffff05;
  border-radius: 10px;
  margin-bottom: 16px;
  padding: 12px;
}

:root[data-theme="light"] .am-plan-section {
  background: #00000005;
}

.am-plan-section-head {
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  display: flex;
}

.am-plan-section-head > .mdi {
  color: var(--accent);
  flex-shrink: 0;
  font-size: 1.2rem;
}

.am-plan-section-title {
  color: var(--text-primary);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.2;
}

.am-plan-section-sub {
  color: var(--text-muted);
  margin-top: 1px;
  font-size: .78rem;
  line-height: 1.3;
}

.am-plan-items {
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  display: flex;
}

.am-plan-empty {
  color: var(--text-muted);
  text-align: center;
  border: 1px dashed var(--border);
  background: #00000005;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: .85rem;
}

.am-plan-item {
  border-bottom: 1px dashed #0000;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 0;
  transition: background .15s;
  display: flex;
}

.am-plan-item:hover {
  background: rgba(var(--accent-rgb, 255, 255, 255), .04);
}

.am-plan-item-label {
  cursor: pointer;
  color: var(--text-primary);
  flex: auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: .9rem;
  line-height: 1.3;
  display: flex;
}

.am-plan-item-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.am-plan-item-label span {
  word-break: break-word;
}

.am-plan-item--checked .am-plan-item-label span {
  color: var(--text-muted);
  text-decoration: line-through;
}

.am-plan-item-del {
  color: var(--text-muted);
  cursor: pointer;
  opacity: .55;
  background: none;
  border: none;
  border-radius: 4px;
  flex-shrink: 0;
  padding: 4px 6px;
  font-family: inherit;
  transition: opacity .15s, color .15s;
}

.am-plan-item-del:hover {
  opacity: 1;
  color: var(--danger, #e05c5c);
}

.am-plan-add-row {
  gap: 6px;
  margin-bottom: 8px;
  display: flex;
}

.am-plan-add-row .am-form-input {
  flex: auto;
  min-width: 0;
}

.am-plan-add-row .am-btn {
  flex-shrink: 0;
}

.am-plan-notes-area {
  resize: vertical;
  width: 100%;
  min-height: 60px;
  font-family: inherit;
}

.am-plan-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.am-lesson-focus {
  background: rgba(var(--accent-rgb, 245, 166, 35), .1);
  border-left: 3px solid var(--accent);
  color: var(--text-primary);
  border-radius: 4px;
  align-items: flex-start;
  gap: 6px;
  margin: 4px 0;
  padding: 6px 10px;
  font-size: .85rem;
  line-height: 1.3;
  display: flex;
}

.am-lesson-focus .mdi {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.am-lesson-status--complete {
  color: #22c55e;
  background: #22c55e2e;
  border: 1px solid #22c55e66;
}

.am-lesson-actions {
  justify-content: flex-end;
  margin-top: 6px;
  display: flex;
}

.am-btn--sm {
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: .8rem;
  display: inline-flex;
}

.am-btn--pulse {
  animation: 2.2s ease-out infinite am-btn-pulse;
}

@keyframes am-btn-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 245, 166, 35), .55);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(var(--accent-rgb, 245, 166, 35), 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 245, 166, 35), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .am-btn--pulse {
    animation: none;
  }
}

.am-btn--complete {
  color: #fff;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: #0000;
}

.am-btn--complete:hover:not(:disabled) {
  filter: brightness(1.08);
}

.ab-flag-modal-backdrop {
  z-index: 9210;
}

.ab-flag-modal {
  max-width: 500px;
}

.ab-flag-modal-lead {
  border-top: 1px dashed var(--border);
  color: var(--text-muted);
  margin-top: 8px;
  padding-top: 8px;
  font-size: .83rem;
  line-height: 1.4;
}

.ab-flag-chips {
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 12px;
  display: grid;
}

.ab-flag-chip {
  border: 1px solid var(--border);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  background: #ffffff08;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  font-family: inherit;
  font-size: .86rem;
  transition: background .15s, border-color .15s, color .15s;
  display: flex;
}

:root[data-theme="light"] .ab-flag-chip {
  background: #00000008;
}

.ab-flag-chip .mdi {
  color: var(--text-muted);
  flex-shrink: 0;
  font-size: 1.1rem;
}

.ab-flag-chip span {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.ab-flag-chip:hover {
  border-color: #fb923c80;
}

.ab-flag-chip--on {
  color: #fb923c;
  background: #fb923c24;
  border-color: #fb923cb3;
}

.ab-flag-chip--on .mdi {
  color: #fb923c;
}

.ab-flag-field-label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 10px 0 4px;
  font-size: .78rem;
  font-weight: 600;
  display: block;
}

.ab-flag-input {
  background: var(--bg-page, #0a0d14);
  border: 1px solid var(--border);
  width: 100%;
  color: var(--text-primary);
  resize: vertical;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: .9rem;
}

:root[data-theme="light"] .ab-flag-input {
  background: #fff;
}

.ab-flag-input:focus {
  border-color: #fb923cb3;
  outline: none;
  box-shadow: 0 0 0 2px #fb923c24;
}

.ab-flag-error {
  color: var(--danger, #e05c5c);
  background: #e05c5c24;
  border: 1px solid #e05c5c66;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 12px;
  font-size: .85rem;
  line-height: 1.35;
  display: flex;
}

.ab-flag-modal-actions {
  justify-content: flex-end;
}

.ab-lesson-modal-btn--flag-submit {
  color: #fff;
  background: linear-gradient(135deg, #fb923cf2, #ea580cf2);
  border: 1px solid #fb923cd9;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  display: inline-flex;
}

.ab-lesson-modal-btn--flag-submit:hover:not(:disabled) {
  filter: brightness(1.06);
}

.ab-lesson-modal-btn--flag-submit:disabled {
  opacity: .65;
  cursor: not-allowed;
}

@media (width <= 380px) {
  .ab-flag-chips {
    grid-template-columns: 1fr;
  }
}

.ml-blk-recur-toggle {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  cursor: pointer;
  color: var(--text-primary);
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  margin: 12px 0 6px;
  padding: 10px 12px;
  font-weight: 600;
  display: flex;
}

.ml-blk-recur-toggle input {
  cursor: pointer;
}

.ml-blk-recur-toggle .mdi {
  color: var(--accent);
  font-size: 1.2rem;
}

.ml-blk-recur-controls {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  display: flex;
}

.ml-blk-recur-weeks {
  color: var(--text-secondary);
  align-items: center;
  gap: 8px;
  font-size: 13px;
  display: flex;
}

.ml-blk-recur-weeks input {
  background: var(--bg-elev);
  border: 1px solid var(--border-color);
  width: 70px;
  color: var(--text-primary);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 14px;
  font-weight: 600;
}

.ml-blk-recur-summary {
  color: var(--text-primary);
  align-items: center;
  gap: 6px;
  font-size: 13px;
  display: inline-flex;
}

.ml-blk-recur-summary strong {
  color: var(--accent);
  font-size: 15px;
}

.ml-blk-recur-summary-skip {
  color: var(--text-secondary);
  font-weight: 400;
}

.ml-blk-recur-policy {
  background: var(--bg-elev);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 6px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 8px 0;
  padding: 8px 10px;
  font-size: 12px;
  display: flex;
}

.ml-blk-recur-policy-lbl {
  color: var(--text-primary);
  align-items: center;
  gap: 4px;
  font-weight: 600;
  display: inline-flex;
}

.ml-blk-recur-policy label {
  cursor: pointer;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.ml-blk-recur-preview {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  max-height: 320px;
  margin-top: 8px;
  padding: 8px;
  overflow-y: auto;
}

.ml-blk-recur-preview-h {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 4px 6px 8px;
  font-size: 11px;
  font-weight: 600;
}

.ml-blk-recur-row {
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  color: var(--text-primary);
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 13px;
  display: flex;
}

.ml-blk-recur-row:last-child {
  border-bottom: none;
}

.ml-blk-recur-row--skipped {
  opacity: .45;
}

.ml-blk-recur-row--holiday {
  background: #f59e0b0d;
}

.ml-blk-recur-num {
  min-width: 32px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

.ml-blk-recur-date {
  flex: 1;
}

.ml-blk-recur-time {
  color: var(--text-secondary);
  font-size: 12px;
}

.ml-blk-recur-pill {
  letter-spacing: .4px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  display: inline-block;
}

.ml-blk-recur-pill--pub {
  color: #f59e0b;
  background: #f59e0b33;
}

.ml-blk-recur-pill--school {
  color: #a5b4fc;
  background: #6366f133;
}

.ml-blk-recur-hint {
  color: var(--text-secondary);
  background: #3b82f614;
  border-left: 3px solid #3b82f6;
  border-radius: 4px;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  padding: 8px 10px;
  font-size: 12px;
  display: flex;
}

.ml-blk-recur-hint .mdi {
  color: #3b82f6;
  flex-shrink: 0;
}

.ps-modal .mc-intro {
  color: var(--color-text-muted);
  margin: 0 0 14px;
  font-size: .86rem;
  line-height: 1.55;
}

.ps-modal .mc-list {
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 0;
  display: flex;
}

.ps-modal .mc-row {
  cursor: pointer;
  background: var(--color-surface, #ffffff08);
  border: 1px solid var(--color-border);
  user-select: none;
  border-radius: 10px;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  transition: background .12s, border-color .12s;
  display: flex;
}

.ps-modal .mc-row:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--color-surface, transparent));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--color-border));
}

.ps-modal .mc-row--done {
  opacity: .55;
  cursor: not-allowed;
}

.ps-modal .mc-row--done:hover {
  background: var(--color-surface, #ffffff08);
  border-color: var(--color-border);
}

.ps-modal .mc-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.ps-modal .mc-row--done input[type="checkbox"] {
  cursor: not-allowed;
}

.ps-modal .mc-name {
  color: var(--color-text);
  flex: 1;
  font-size: .92rem;
  font-weight: 500;
}

.ps-modal .mc-chip {
  letter-spacing: .02em;
  border-radius: 999px;
  flex-shrink: 0;
  padding: 3px 10px;
  font-size: .7rem;
  font-weight: 600;
}

.ps-modal .mc-chip--yes {
  background: color-mix(in srgb, var(--color-success, #22c55e) 20%, transparent);
  color: var(--color-success, #22c55e);
}

.ps-modal .mc-chip--no {
  background: color-mix(in srgb, var(--color-danger, #ef4444) 20%, transparent);
  color: var(--color-danger, #ef4444);
}

.ps-modal .mc-chip--pending {
  background: color-mix(in srgb, var(--color-text-muted, #94a3b8) 22%, transparent);
  color: var(--color-text-muted, #94a3b8);
}

.ps-modal .mc-reason-label {
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
  display: flex;
}

.ps-modal .mc-reason-label-text {
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  font-size: .75rem;
  font-weight: 700;
}

.ps-modal .mc-reason-input {
  background: var(--color-surface, #ffffff0a);
  border: 1px solid var(--color-border);
  width: 100%;
  color: var(--color-text);
  box-sizing: border-box;
  border-radius: 8px;
  outline: none;
  padding: 10px 12px;
  font-size: .9rem;
  transition: border-color .15s;
}

.ps-modal .mc-reason-input:focus {
  border-color: var(--accent);
}

.ps-modal #ml-mc-confirm-btn {
  background: var(--accent);
  color: #fff;
  flex: none;
  min-width: 140px;
}

.ps-modal #ml-mc-confirm-btn:hover {
  opacity: .92;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}

.ps-modal #ml-mc-confirm-btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.ps-edit-btn {
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 6px;
  flex-shrink: 0;
  padding: 2px 4px;
  font-size: .9rem;
  transition: color .15s, background .15s;
}

.ps-edit-btn:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.ps-modal .sc-current {
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 6px;
  margin: 0 0 16px;
  padding: 10px 12px;
  font-size: .86rem;
  line-height: 1.5;
}

.ps-modal .sc-current strong {
  color: var(--color-text);
}

.ps-modal .sc-current-score {
  color: var(--color-text);
  background: #ffffff0f;
  border-radius: 4px;
  margin: 0 4px;
  padding: 1px 8px;
  font-weight: 700;
  display: inline-block;
}

:root[data-theme="light"] .ps-modal .sc-current-score {
  background: #0000000f;
}

.ps-modal .sc-row {
  border-bottom: 1px solid var(--color-border);
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  display: flex;
}

.ps-modal .sc-row:last-of-type {
  border-bottom: none;
}

.ps-modal .sc-team {
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-size: .92rem;
  font-weight: 600;
  overflow: hidden;
}

.ps-modal .sc-input {
  background: var(--color-surface, #ffffff0a);
  border: 1.5px solid var(--color-border);
  width: 80px;
  height: 52px;
  color: var(--color-text);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
  border-radius: 10px;
  outline: none;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 700;
  transition: border-color .15s, background .15s;
}

.ps-modal .sc-input::-webkit-outer-spin-button, .ps-modal .sc-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ps-modal .sc-input:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.ps-modal .sc-swap {
  border: 1.5px dashed var(--color-border);
  width: 100%;
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  font-size: .86rem;
  font-weight: 600;
  transition: color .15s, border-color .15s, background .15s;
  display: flex;
}

.ps-modal .sc-swap:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.ps-modal .sc-hint {
  color: var(--color-text-muted);
  text-align: center;
  margin: 14px 0 0;
  font-size: .78rem;
  font-style: italic;
}

.ml-viewas-menu {
  top: calc(var(--header-h) - 4px);
  background: var(--bg-page);
  min-width: 240px;
  max-width: min(320px, 100vw - 24px);
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  z-index: 950;
  border-radius: 12px;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  animation: .14s ease-out mlViewAsMenuIn;
  display: flex;
  position: absolute;
  right: 10px;
  box-shadow: 0 12px 40px #00000059;
}

.ml-viewas-menu.hidden {
  display: none;
}

@keyframes mlViewAsMenuIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ml-viewas-section-label {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 10px 4px;
  font-size: .68rem;
  font-weight: 700;
}

.ml-viewas-item {
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  font-size: .9rem;
  transition: background .12s;
  display: flex;
}

.ml-viewas-item:hover, .ml-viewas-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  outline: 0;
}

.ml-viewas-item i.mdi {
  color: var(--accent);
  font-size: 1.15rem;
}

.ml-viewas-item.is-current {
  opacity: .75;
  cursor: default;
}

.ml-viewas-item.is-current i.mdi {
  color: var(--color-text-muted, #8b96a5);
}

.ml-viewas-item--danger, .ml-viewas-item--danger i.mdi {
  color: #ef4444;
}

.ml-viewas-item--danger:hover, .ml-viewas-item--danger:focus-visible {
  background: #ef44441f;
}

.ml-viewas-item .ml-viewas-sub {
  color: var(--color-text-muted, #8b96a5);
  margin-top: 2px;
  font-size: .72rem;
  display: block;
}

.ml-viewas-divider {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  height: 1px;
  margin: 4px 6px;
}

.ml-viewas-empty {
  color: var(--color-text-muted, #8b96a5);
  padding: 8px 12px 6px;
  font-size: .78rem;
  font-style: italic;
}

.ml-viewas-banner {
  z-index: 900;
  background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 25%, transparent),
        color-mix(in srgb, var(--accent) 12%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--color-text, #e6eaf0);
  padding: 8px 14px;
  position: sticky;
  top: 0;
}

.ml-viewas-banner.hidden {
  display: none;
}

.ml-viewas-banner-inner {
  align-items: center;
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
  font-size: .88rem;
  display: flex;
}

.ml-viewas-banner-inner i.mdi {
  color: var(--accent);
  font-size: 1.1rem;
}

.ml-viewas-banner-inner strong {
  font-weight: 700;
}

.ml-viewas-switch-back {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--color-text, #e6eaf0);
  cursor: pointer;
  border-radius: 6px;
  margin-left: auto;
  padding: 6px 12px;
  font-size: .82rem;
  font-weight: 600;
  transition: background .12s, border-color .12s;
}

.ml-viewas-switch-back:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
}