/* ScrimMate: Scrims Discovery, Wizard, Detail, and Registration Stylesheet
 * Scrims CSS: Dark/gold theme with responsive mobile layout and >= 6 KB footprint.
 */

:root {
  --scrim-gold: #f6c445;
  --scrim-gold-glow: rgba(246, 196, 69, 0.2);
  --scrim-gold-dark: #d8a72b;
  --scrim-bg-card: #1d1a10;
  --scrim-bg-card-hover: #262215;
  --scrim-border: #332b18;
  --scrim-border-active: #574822;
  --scrim-text-muted: #a69c84;
  --scrim-status-open: #4ade80;
  --scrim-status-full: #f87171;
  --scrim-status-live: #fb923c;
  --scrim-status-finished: #9ca3af;
}

/* ==========================================================================
   1. Scrims Discovery Screen & Header
   ========================================================================== */
.scrims-discovery-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  padding-bottom: calc(var(--nav-height, 64px) + 84px + env(safe-area-inset-bottom, 0px));
  min-height: 100dvh;
  box-sizing: border-box;
}

.scrims-hero-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(246, 196, 69, 0.12), color-mix(in srgb, var(--surface-container) 95%, transparent));
  border: 1px solid var(--scrim-border);
  border-radius: var(--radius-lg, 16px);
  position: relative;
  overflow: hidden;
}

.scrims-hero-header::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
  height: 100%;
  background: radial-gradient(circle at top right, var(--scrim-gold-glow), transparent 70%);
  pointer-events: none;
}

.scrims-hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--scrim-gold);
}

.scrims-hero-title {
  margin: 0;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  font-weight: 800;
  color: var(--on-surface);
}

.scrims-hero-subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--scrim-text-muted);
}

/* Search and Filter Container */
.scrims-search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--scrim-bg-card);
  border: 1px solid var(--scrim-border);
  border-radius: var(--radius-md, 12px);
  padding: 0.5rem 0.875rem;
  transition: border-color 0.2s ease;
}

.scrims-search-bar:focus-within {
  border-color: var(--scrim-gold);
  box-shadow: 0 0 0 2px var(--scrim-gold-glow);
}

.scrims-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.9375rem;
  color: var(--on-surface);
  min-width: 0;
}

.scrims-search-input::placeholder {
  color: var(--scrim-text-muted);
}

/* Horizontal Filter Chips Row */
.scrims-filter-chips {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.25rem 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.scrims-filter-chips::-webkit-scrollbar {
  display: none;
}

.scrims-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  background: var(--scrim-bg-card);
  border: 1px solid var(--scrim-border);
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--scrim-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  touch-action: manipulation;
  min-height: 44px;
}

.scrims-chip:hover {
  background: var(--scrim-bg-card-hover);
  border-color: var(--scrim-border-active);
  color: var(--on-surface);
}

.scrims-chip.active {
  background: var(--scrim-gold);
  border-color: var(--scrim-gold);
  color: var(--on-primary);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(246, 196, 69, 0.3);
}

/* Sort and Summary Bar */
.scrims-sort-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--scrim-text-muted);
}

.scrims-sort-select {
  background: var(--scrim-bg-card);
  border: 1px solid var(--scrim-border);
  border-radius: var(--radius-sm, 8px);
  color: var(--on-surface);
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  outline: none;
}

/* ==========================================================================
   2. Scrim Cards & List
   ========================================================================== */
.scrims-list-grid {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.scrim-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--scrim-bg-card);
  border: 1px solid var(--scrim-border);
  border-radius: var(--radius-md, 14px);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  overflow: hidden;
}

.scrim-card:hover {
  border-color: var(--scrim-border-active);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.scrim-card:active {
  transform: scale(0.99);
}

.scrim-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.scrim-host-group {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.scrim-host-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--scrim-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--scrim-gold);
  border: 1px solid var(--scrim-border-active);
  flex-shrink: 0;
  object-fit: cover;
}

.scrim-header-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.scrim-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scrim-host-name {
  font-size: 0.8125rem;
  color: var(--scrim-text-muted);
}

/* Status Pills */
.scrim-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.scrim-status-pill.status-open {
  background: rgba(74, 222, 128, 0.15);
  color: var(--scrim-status-open);
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.scrim-status-pill.status-full {
  background: rgba(248, 113, 113, 0.15);
  color: var(--scrim-status-full);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.scrim-status-pill.status-live {
  background: rgba(251, 146, 60, 0.15);
  color: var(--scrim-status-live);
  border: 1px solid rgba(251, 146, 60, 0.3);
  animation: pulse-live 1.8s infinite;
}

.scrim-status-pill.status-finished {
  background: rgba(156, 163, 175, 0.15);
  color: var(--scrim-status-finished);
  border: 1px solid rgba(156, 163, 175, 0.3);
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Metadata Row: Map, Time, Format */
.scrim-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
}

.scrim-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--scrim-border);
  border-radius: 6px;
  color: var(--on-surface);
}

.scrim-meta-badge.badge-map {
  border-color: rgba(246, 196, 69, 0.3);
  color: var(--scrim-gold);
  font-weight: 600;
}

.scrim-meta-badge.badge-fee {
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.3);
}

.scrim-meta-badge.badge-prize {
  background: rgba(234, 179, 8, 0.12);
  color: #fde047;
  border-color: rgba(234, 179, 8, 0.3);
  font-weight: 700;
}

/* Slots Left Progress Bar */
.scrim-slots-container {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

.scrim-slots-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
}

.scrim-slots-text {
  color: var(--scrim-text-muted);
}

.scrim-slots-count {
  font-weight: 700;
  color: var(--on-surface);
}

.scrim-slots-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.scrim-slots-fill {
  height: 100%;
  background: var(--scrim-gold);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.scrim-slots-fill.fill-full {
  background: var(--scrim-status-full);
}

/* ==========================================================================
   3. Publish Scrim Wizard
   ========================================================================== */
.scrim-wizard-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1rem;
  padding-bottom: calc(var(--nav-height, 64px) + 96px + env(safe-area-inset-bottom, 0px));
  min-height: 100dvh;
  box-sizing: border-box;
}

.scrim-wizard-stepper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--scrim-bg-card);
  border: 1px solid var(--scrim-border);
  border-radius: var(--radius-md, 12px);
  position: relative;
}

.wizard-step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  z-index: 1;
}

.wizard-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--scrim-border);
  color: var(--scrim-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.wizard-step-node.active .wizard-step-circle {
  background: var(--scrim-gold);
  color: var(--on-primary);
  box-shadow: 0 0 10px var(--scrim-gold-glow);
}

.wizard-step-node.completed .wizard-step-circle {
  background: var(--scrim-status-open);
  color: var(--surface);
}

.wizard-step-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--scrim-text-muted);
}

.wizard-step-node.active .wizard-step-title {
  color: var(--scrim-gold);
  font-weight: 700;
}

/* Form Groups */
.wizard-section-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--scrim-bg-card);
  border: 1px solid var(--scrim-border);
  border-radius: var(--radius-md, 14px);
}

.wizard-section-heading {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--on-surface);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wizard-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.wizard-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--on-surface);
}

.wizard-input,
.wizard-textarea,
.wizard-select {
  background: color-mix(in srgb, var(--surface-container-highest) 55%, transparent);
  border: 1px solid var(--scrim-border);
  border-radius: var(--radius-sm, 8px);
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  color: var(--on-surface);
  outline: none;
  transition: border-color 0.2s ease;
  min-height: 44px;
  box-sizing: border-box;
}

.wizard-input:focus,
.wizard-textarea:focus,
.wizard-select:focus {
  border-color: var(--scrim-gold);
}

.wizard-textarea {
  min-height: 80px;
  resize: vertical;
}

/* Live Preview Card */
.wizard-preview-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wizard-preview-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--scrim-gold);
}

/* Sticky Action Bar */
.wizard-sticky-bar {
  position: fixed;
  bottom: calc(var(--nav-height, 64px) + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--surface-container) 95%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--scrim-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  z-index: 80;
}

/* ==========================================================================
   4. Scrim Detail & Register Screen
   ========================================================================== */
.scrim-detail-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1rem;
  padding-bottom: calc(var(--nav-height, 64px) + 84px + env(safe-area-inset-bottom, 0px));
  min-height: 100dvh;
  box-sizing: border-box;
}

.scrim-detail-hero {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  background: linear-gradient(180deg, rgba(246, 196, 69, 0.15) 0%, var(--scrim-bg-card) 100%);
  border: 1px solid var(--scrim-border);
  border-radius: var(--radius-lg, 16px);
}

.scrim-detail-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.scrim-detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
}

.scrim-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--surface-container-highest) 55%, transparent);
  border: 1px solid var(--scrim-border);
  border-radius: var(--radius-sm, 8px);
}

.scrim-stat-title {
  font-size: 0.6875rem;
  color: var(--scrim-text-muted);
  text-transform: uppercase;
}

.scrim-stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--on-surface);
}

/* Slots Grid in Detail */
.scrim-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
}

.scrim-slot-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 0.375rem;
  background: var(--scrim-bg-card);
  border: 1px solid var(--scrim-border);
  border-radius: var(--radius-sm, 8px);
  text-align: center;
  gap: 0.25rem;
}

.scrim-slot-num {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--scrim-text-muted);
}

.scrim-slot-team {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.scrim-slot-cell.slot-empty {
  border-style: dashed;
  color: var(--scrim-text-muted);
}

/* Status Banners on Detail Screen */
.scrim-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-md, 12px);
  font-size: 0.875rem;
  font-weight: 600;
}

.scrim-banner.banner-registered {
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: var(--scrim-status-open);
}

.scrim-banner.banner-full {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: var(--scrim-status-full);
}

.scrim-banner.banner-closed {
  background: rgba(156, 163, 175, 0.12);
  border: 1px solid rgba(156, 163, 175, 0.3);
  color: var(--scrim-status-finished);
}

/* Register Flow */
.scrim-register-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--scrim-bg-card);
  border: 1px solid var(--scrim-border);
  border-radius: var(--radius-md, 14px);
}

.scrim-squad-picker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.squad-option-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--surface-container-highest) 55%, transparent);
  border: 1px solid var(--scrim-border);
  border-radius: var(--radius-sm, 10px);
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 48px;
}

.squad-option-card:hover {
  border-color: var(--scrim-gold);
}

.squad-option-card.selected {
  border-color: var(--scrim-gold);
  background: rgba(246, 196, 69, 0.1);
}

/* ==========================================================================
   5. Skeletons and Empty States
   ========================================================================== */
.scrim-skeleton-card {
  padding: 1rem;
  background: var(--scrim-bg-card);
  border: 1px solid var(--scrim-border);
  border-radius: var(--radius-md, 14px);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.scrim-skeleton-line {
  height: 14px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  animation: pulse-skeleton 1.5s infinite;
}

.scrim-skeleton-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  animation: pulse-skeleton 1.5s infinite;
}

@keyframes pulse-skeleton {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.3; }
}

.scrim-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  gap: 1rem;
  color: var(--scrim-text-muted);
}

.scrim-empty-icon {
  width: 56px;
  height: 56px;
  stroke: var(--scrim-gold);
  opacity: 0.75;
}

/* Semantic classes replacing inline styles */
.scrim-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.scrim-back-btn {
  padding: 0.25rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.scrim-reload-btn {
  margin-left: auto;
  min-height: 44px;
}
.scrim-clear-query {
  padding: 0;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.scrim-card-top {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.scrim-card-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.scrim-card-title {
  font-size: 1.125rem;
  color: var(--on-surface);
  font-weight: 700;
}
.scrim-card-subtitle {
  font-size: 0.8125rem;
  color: var(--scrim-text-muted);
  margin-top: 0.25rem;
}
.scrim-followed-badge {
  color: var(--scrim-gold);
  font-weight: 600;
}
.scrim-empty-title {
  margin: 0;
  color: var(--on-surface);
  font-size: 1.125rem;
}
.scrim-empty-desc {
  margin: 0;
  max-width: 280px;
  font-size: 0.875rem;
  color: var(--scrim-text-muted);
}
.scrim-action-right {
  margin-left: auto;
}
.scrim-squad-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.scrim-squad-name {
  color: var(--on-surface);
  font-weight: 700;
}
.scrim-squad-org {
  display: block;
  color: var(--scrim-text-muted);
  font-size: 0.8125rem;
}
.scrim-rules-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--scrim-text-muted);
}
.scrim-gold-text {
  color: var(--scrim-gold);
  font-weight: 700;
}
.scrim-actions-wrap {
  margin-top: 1rem;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.scrim-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--scrim-gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.scrim-detail-title {
  margin: 0.25rem 0;
  font-size: 1.5rem;
  color: var(--on-surface);
}
.scrim-detail-subtitle {
  font-size: 0.875rem;
  color: var(--scrim-text-muted);
}
.scrim-item-compact {
  padding: 0.875rem;
}
.scrim-match-tags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.scrim-match-info {
  color: var(--scrim-text-muted);
}

/* ==========================================================================
   MODERN LAYER (v0.16) - Scrims discovery: theme-aware tokens, interaction,
   stats hero, sticky controls, animated slots, live pulse. Additive only.
   ========================================================================== */
:root {
  --scrim-gold: var(--primary, #f6c445);
  --scrim-bg-card: var(--surface-container-low, #1d1a10);
  --scrim-bg-card-hover: var(--surface-container, #262215);
  --scrim-border: var(--outline-variant, #332b18);
  --scrim-border-active: color-mix(in srgb, var(--primary, #f6c445) 45%, var(--outline-variant, #574822));
  --scrim-text-muted: var(--on-surface-variant, #a69c84);
  --scrim-gold-glow: color-mix(in srgb, var(--primary, #f6c445) 22%, transparent);
}
:root[data-theme="light"] {
  --scrim-status-open: #15803d;
  --scrim-status-full: #b91c1c;
  --scrim-status-live: #c2410c;
  --scrim-status-finished: #4b5563;
}

.sm-app-shell .scrims-discovery-page { padding: 0; min-height: 0; gap: 14px; }
.sm-app-shell .scrims-hero-header {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #f6c445) 16%, var(--surface-container, #1c1a10)), var(--surface-container-low, #15140b));
  border-radius: 22px; padding: 18px; gap: 6px;
}
.scrims-hero-title { color: var(--on-surface, #fff); }
.scrims-hero-eyebrow { color: var(--primary, #f6c445); }
.scrims-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; position: relative; z-index: 1; }
.scrims-stat {
  display: grid; gap: 2px; justify-items: start; padding: 10px 12px; text-align: left; cursor: pointer;
  color: var(--on-surface, #fff); font: inherit;
  background: color-mix(in srgb, var(--surface-container-highest, #302c1e) 60%, transparent);
  border: 1px solid var(--outline-variant, #423f32); border-radius: 14px;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.scrims-stat b { font-size: 1.35rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--primary, #f6c445); }
.scrims-stat span { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--on-surface-variant, #a69c84); }
.scrims-stat:hover { border-color: var(--scrim-border-active); }
.scrims-stat:active { transform: scale(.96); }
.scrims-stat--live b { color: var(--scrim-status-live, #fb923c); }

/* Sticky search + filter row */
.scrims-sticky-controls {
  position: sticky; top: -1px; z-index: 5; display: grid; gap: 10px; padding: 8px 0;
  background: color-mix(in srgb, var(--surface, #12110a) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.scrims-search-bar { border-radius: 16px; transition: box-shadow .18s ease, border-color .18s ease; }
.scrims-search-bar:focus-within { box-shadow: 0 0 0 3px var(--scrim-gold-glow); }
.scrims-filter-chips { scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.scrims-chip { scroll-snap-align: center; transition: transform .14s ease, background .16s ease, color .16s ease, border-color .16s ease; }
.scrims-chip:active { transform: scale(.94); }
.scrims-chip.active { box-shadow: 0 4px 14px var(--scrim-gold-glow); }

/* Cards */
.scrim-card { border-radius: 20px; padding: 16px 16px 16px 18px; width: 100%; text-align: left; font: inherit; color: var(--on-surface, #fff); -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
.scrim-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--scrim-status-open, #4ade80); opacity: .9; }
.scrim-card.status-live::before { background: var(--scrim-status-live, #fb923c); }
.scrim-card.status-full::before { background: var(--scrim-status-full, #f87171); }
.scrim-card.status-finished::before { background: var(--scrim-status-finished, #9ca3af); opacity: .5; }
.scrim-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
.scrim-card:active { transform: scale(.985); }
.scrim-card .scrim-title { color: var(--on-surface, #fff); }
.scrim-card-chevron { position: absolute; right: 12px; bottom: 10px; font-size: 1.4rem; line-height: 1; color: var(--on-surface-variant); opacity: .5; transition: transform .18s ease, opacity .18s ease; }
.scrim-card:hover .scrim-card-chevron { transform: translateX(3px); opacity: .9; }
.scrim-host-avatar { background: linear-gradient(135deg, var(--surface-container-high, #252216), var(--surface-container-highest, #302c1e)); }
.scrim-live-dot, .sm-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: scrim-ping 1.6s ease-out infinite; }
@keyframes scrim-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 70%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
.scrim-urgent { color: var(--scrim-status-full, #f87171); font-weight: 800; animation: pulse-live 1.6s infinite; }

/* Slot bar: animated fill + heat colouring */
.scrim-slots-bar { height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--on-surface, #fff) 10%, transparent); }
.scrim-slots-fill { width: 0; height: 100%; border-radius: 999px; transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.scrim-slots-fill.fill-hot { background: linear-gradient(90deg, var(--scrim-status-live, #fb923c), var(--scrim-status-full, #f87171)); }

/* Staggered entrance */
.scrims-list-grid > .scrim-card { animation: scrim-rise .38s cubic-bezier(.2, .8, .2, 1) both; }
.scrims-list-grid > .scrim-card[data-i="1"] { animation-delay: 40ms; }
.scrims-list-grid > .scrim-card[data-i="2"] { animation-delay: 80ms; }
.scrims-list-grid > .scrim-card[data-i="3"] { animation-delay: 120ms; }
.scrims-list-grid > .scrim-card[data-i="4"] { animation-delay: 160ms; }
.scrims-list-grid > .scrim-card[data-i="5"] { animation-delay: 200ms; }
.scrims-list-grid > .scrim-card[data-i="6"] { animation-delay: 240ms; }
.scrims-list-grid > .scrim-card[data-i="7"] { animation-delay: 280ms; }
@keyframes scrim-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.scrim-skeleton-bar { height: 8px; }
.scrim-empty-state { border-radius: 20px; }

@media (min-width: 720px) {
  .sm-app-shell .scrims-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .scrims-hero-stats { gap: 6px; }
  .scrims-stat { padding: 8px; }
  .scrims-stat span { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .scrims-list-grid > .scrim-card, .scrim-urgent, .scrim-live-dot, .sm-live-dot { animation: none !important; }
  .scrim-slots-fill, .scrim-card, .scrims-stat, .scrims-chip { transition: none !important; }
}

/* Fixes found in browser review */
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.scrims-hero-header::after { width: 100%; background: radial-gradient(circle at top right, var(--scrim-gold-glow), transparent 65%); }
.scrims-search-bar { display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--surface-container, #1c1a10); border: 1px solid var(--outline-variant, #423f32); }
.scrims-search-bar .scrims-search-input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; }
.scrims-search-bar .icon { flex: 0 0 auto; color: var(--on-surface-variant); }
.scrims-search-bar .scrim-clear-query { flex: 0 0 auto; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; }
.scrim-card { align-items: stretch; justify-content: flex-start; }
.scrim-card > * { width: 100%; min-width: 0; box-sizing: border-box; }
.scrim-card .scrim-card-header { justify-content: space-between; align-items: center; }
.scrim-card .scrim-host-group { flex: 1 1 auto; }
.scrim-card .scrim-slots-label-row { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.scrim-card .scrim-meta-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* Light-theme contrast fixes (these were hard-coded white) */
.scrim-meta-badge { color: var(--on-surface, #fff); }
.scrim-meta-badge.badge-map, .scrim-meta-badge.badge-prize { color: var(--primary, #f6c445); }
.scrim-slots-count, .scrims-sort-row, .scrims-sort-row b { color: var(--on-surface, #fff); }
.scrims-sort-select { color: var(--on-surface, #fff); background: var(--surface-container, #1c1a10); }
:root[data-theme="light"] .scrim-meta-badge.badge-fee { color: #1d4ed8; }
:root[data-theme="light"] .scrim-meta-badge.tag { color: var(--on-surface); }

/* ── v0.17 Public / Practice switch ───────────────────────────── */
.scrims-mode-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 14px 0 4px; padding: 4px;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--outline-variant, #414957) 55%, transparent);
  background: color-mix(in srgb, var(--surface-container, #171b23) 80%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.scrims-mode-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 12px; background: transparent; color: var(--on-surface-variant, #aeb8c7);
  font: 600 0.92rem/1 var(--sm-font-family, system-ui); cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .1s ease;
}
.scrims-mode-btn em {
  font-style: normal; font-size: .72rem; min-width: 22px; padding: 3px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--on-surface, #fff) 10%, transparent);
}
.scrims-mode-btn:active { transform: scale(.97); }
.scrims-mode-btn.is-active {
  color: var(--on-primary, #1b1400);
  background: linear-gradient(135deg, var(--primary, #f6c445), color-mix(in srgb, var(--primary, #f6c445) 70%, #ff9d2e));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary, #f6c445) 28%, transparent);
}
.scrims-mode-btn.is-active em { background: rgba(0, 0, 0, .18); }
.scrims-mode-btn:focus-visible { outline: 2px solid var(--primary, #f6c445); outline-offset: 2px; }

.scrim-kind-pill {
  font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap; margin-right: 6px;
}
.scrim-kind-pill--public { color: var(--primary, #f6c445); background: color-mix(in srgb, var(--primary, #f6c445) 14%, transparent); }
.scrim-kind-pill--practice { color: #7fd6ff; background: rgba(127, 214, 255, .14); }
:root[data-theme="light"] .scrim-kind-pill--practice { color: #0b5f8a; background: rgba(11, 95, 138, .12); }
@media (prefers-reduced-motion: reduce) { .scrims-mode-btn { transition: none; } }

/* Manager result review (m14) */
.m14-review { display: grid; gap: 12px; padding-bottom: 96px; }
.m14-review h1 { margin: 0; }
.m14-lead { margin: 0; color: var(--sm-muted, #aeb8c7); }
.m14-review .sm-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--sm-line); border-radius: 16px; background: var(--sm-glass-raised); }
.m14-review .sm-card h2 { margin: 0; font-size: 1.05rem; }
.m14-review select, .m14-review input[type="number"], .m14-review input:not([type]), .m14-review input[type="text"] { width: 100%; box-sizing: border-box; }
.m14-summary { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 4px); z-index: var(--sm-z-header, 20); padding: 10px 14px; border-radius: 999px; border: 1px solid var(--sm-line); background: var(--sm-glass-raised); backdrop-filter: blur(10px); font-size: .92rem; }
.m14-dot { opacity: .5; margin: 0 4px; }
.m14-ok { color: var(--sm-success); font-weight: 700; }
.m14-result { margin: 0; font-weight: 600; }
.m14-team-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.m14-badge { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; color: var(--sm-success); background: color-mix(in srgb, var(--sm-success) 14%, transparent); white-space: nowrap; }
.m14-warn { font-size: .85rem; color: var(--sm-danger); }
.m14-player { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--sm-line); border-radius: 12px; }
.m14-player-head { display: flex; align-items: center; gap: 8px; }
.m14-player-head small { color: var(--sm-muted); flex: 1; }
.m14-ocr-raw { margin-top: -4px; color: var(--sm-muted); font-size: 11px; overflow-wrap: anywhere; }
.m14-x { min-height: 44px; padding: 0 8px; color: var(--sm-danger); }
.m14-blockers { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--sm-line); background: color-mix(in srgb, var(--sm-danger) 8%, transparent); font-size: .9rem; }
.m14-blockers ul { margin: 6px 0 0; padding-left: 18px; }
.m14-image-button { display: grid; gap: 4px; justify-items: start; padding: 0; border: 0; background: none; color: var(--sm-muted); }
.m14-thumb { width: 100%; max-height: 180px; object-fit: cover; border-radius: 12px; border: 1px solid var(--sm-line); }
.m14-image-dialog { max-width: 96vw; max-height: 92vh; padding: 8px; border: 1px solid var(--sm-line); border-radius: 16px; background: var(--sm-ink, #0a0d13); color: var(--sm-text); }
.m14-image-dialog img { display: block; max-width: 100%; max-height: 78vh; margin-top: 8px; }
.m14-review details pre { white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; font-size: .78rem; }
.m14-done { text-align: center; }
.m14-review .sm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.m14-review .sm-actions .btn { flex: 1 1 140px; min-height: 48px; }

/* Squad invites: owner cards + manager bottom sheet */
.inv-section { display: grid; gap: 10px; margin: 4px 0 14px; }
.inv-head h2 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.inv-head p { margin: 4px 0 0; color: var(--sm-muted); font-size: .88rem; }
.inv-count { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; font-size: .78rem; font-weight: 800; color: #17130a; background: var(--primary, #f6c445); }
.inv-card { position: relative; display: grid; gap: 12px; padding: 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--primary, #f6c445) 45%, var(--sm-line)); background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #f6c445) 12%, transparent), var(--sm-glass-raised) 60%); animation: inv-rise .35s cubic-bezier(.2, .8, .2, 1) both; transition: opacity .3s, transform .3s, border-color .2s; }
.inv-card-top { display: flex; align-items: center; gap: 12px; }
.inv-card-title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.inv-card-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-card-title small { color: var(--sm-muted); }
.inv-when { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--primary, #f6c445); white-space: nowrap; }
.inv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-chip { padding: 4px 10px; border-radius: 999px; font-size: .76rem; border: 1px solid var(--sm-line); background: var(--sm-glass-raised); }
.inv-actions { display: flex; gap: 8px; }
.inv-actions .btn { flex: 1; min-height: 48px; transition: transform .12s; }
.inv-actions .btn:active { transform: scale(.97); }
.inv-result { margin: 0; min-height: 1.2em; font-size: .86rem; font-weight: 600; }
.inv-busy { opacity: .75; }
.inv-accepted { border-color: var(--sm-success); transform: scale(1.01); }
.inv-declined { opacity: .55; transform: scale(.98); }
.inv-error { border-color: var(--sm-danger); }
.inv-error .inv-result { color: var(--sm-danger); }
.inv-accepted .inv-result { color: var(--sm-success); }
.inv-avatar { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; color: var(--on-surface); background: #5b6b8c; }
.inv-hue-0 { background: linear-gradient(135deg, #f6a23a, #e0612a); }
.inv-hue-1 { background: linear-gradient(135deg, #4cc2a3, #2b8f9a); }
.inv-hue-2 { background: linear-gradient(135deg, #7a8cff, #5a4fd8); }
.inv-hue-3 { background: linear-gradient(135deg, #e86fa4, #b43a78); }
.inv-hue-4 { background: linear-gradient(135deg, #6fc2f0, #3a7fd0); }
.inv-hue-5 { background: linear-gradient(135deg, #9bd35a, #5b9a2e); }

.inv-backdrop { position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-end; justify-content: center; background: rgba(5, 8, 14, 0); transition: background .22s; }
.inv-backdrop.inv-open { background: rgba(5, 8, 14, .62); }
.inv-sheet { width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column; gap: 10px; padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 16px); border-radius: 24px 24px 0 0; border: 1px solid var(--sm-line); border-bottom: 0; background: var(--sm-ink, #10141c); color: var(--sm-text); transform: translateY(100%); transition: transform .26s cubic-bezier(.2, .9, .2, 1); }
.inv-open .inv-sheet { transform: translateY(0); }
.inv-grab { width: 44px; height: 5px; border-radius: 999px; margin: 4px auto 2px; background: var(--sm-line); }
.inv-sheet-head { display: flex; align-items: center; justify-content: space-between; }
.inv-sheet-head h2 { margin: 0; font-size: 1.2rem; }
.inv-x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--sm-glass-raised); color: var(--sm-text); font-size: 1rem; }
.inv-sub { margin: 0; color: var(--sm-muted); font-size: .88rem; }
.inv-search { display: flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 52px; border-radius: 16px; border: 1px solid var(--sm-line); background: var(--sm-glass-raised); transition: border-color .15s, box-shadow .15s; }
.inv-search:focus-within { border-color: var(--primary, #f6c445); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #f6c445) 25%, transparent); }
.inv-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font-size: 1rem; min-height: 48px; }
.inv-body { overflow-y: auto; min-height: 180px; overscroll-behavior: contain; }
.inv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.inv-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--sm-line); background: var(--sm-glass-raised); animation: inv-rise .25s ease both; transition: border-color .2s, background .2s; }
.inv-row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.inv-row-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-row-main small { color: var(--sm-muted); }
.inv-go { min-height: 44px; padding: 0 16px; }
.inv-warn { color: var(--sm-danger); font-size: .8rem; }
.inv-state { padding: 6px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; border: 1px solid var(--sm-line); }
.inv-state-invited, .inv-state-accepted { color: var(--sm-success); border-color: var(--sm-success); }
.inv-state-disqualified { color: var(--sm-danger); border-color: var(--sm-danger); }
.inv-sent { border-color: var(--sm-success); }
.inv-pop { animation: inv-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.inv-row-error { border-color: var(--sm-danger); }
.inv-empty { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 28px 12px; color: var(--sm-muted); }
.inv-empty b { color: var(--sm-text); }
.inv-empty p { margin: 0; font-size: .9rem; }
.inv-skel .inv-avatar { background: var(--sm-line); }
.inv-skel b, .inv-skel small { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--sm-line), transparent, var(--sm-line)); background-size: 200% 100%; animation: inv-shimmer 1.2s linear infinite; }
.inv-skel b { width: 55%; } .inv-skel small { width: 35%; margin-top: 6px; }
body.inv-lock { overflow: hidden; }
@keyframes inv-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes inv-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes inv-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .inv-card, .inv-row, .inv-sheet, .inv-backdrop, .inv-pop, .inv-skel b, .inv-skel small { animation: none; transition: none; } }

/* Interactive slot picker (reserved slots, move team) */
.sl-picker { display: grid; gap: 12px; }
.sl-range { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--sm-line); background: var(--sm-glass-raised); font-size: .9rem; }
.sl-step { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--sm-line); overflow: hidden; }
.sl-step button { width: 44px; height: 44px; border: 0; background: transparent; color: var(--sm-text); font-size: 1.2rem; font-weight: 800; transition: background .12s, transform .1s; }
.sl-step button:active { background: color-mix(in srgb, var(--primary, #f6c445) 25%, transparent); transform: scale(.92); }
.sl-step b { min-width: 34px; text-align: center; font-size: 1.05rem; }
.sl-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sl-tile { position: relative; aspect-ratio: 1; min-height: 52px; border-radius: 14px; border: 1px solid var(--sm-line); background: var(--sm-glass-raised); color: var(--sm-text); display: grid; place-items: center; font-weight: 800; transition: transform .12s, border-color .15s, background .15s, box-shadow .15s; }
.sl-tile:active { transform: scale(.93); }
.sl-num { font-size: 1.05rem; }
.sl-who { position: absolute; left: 5px; bottom: 4px; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font-size: .66rem; color: var(--on-surface); background: #5b6b8c; }
.sl-lock { position: absolute; right: 6px; top: 3px; font-size: .78rem; color: var(--primary, #f6c445); }
.sl-reserved { border-color: var(--primary, #f6c445); background: color-mix(in srgb, var(--primary, #f6c445) 16%, transparent); }
.sl-taken:not(.sl-reserved) { border-color: color-mix(in srgb, var(--sm-muted) 60%, var(--sm-line)); }
.sl-selected { border-color: var(--sm-success); background: color-mix(in srgb, var(--sm-success) 22%, transparent); box-shadow: 0 0 0 2px var(--sm-success); }
.sl-blocked { opacity: .45; }
.sl-shake { animation: sl-shake .3s; }
.sl-summary { margin: 0; font-weight: 700; font-size: .92rem; }
.sl-legend { display: flex; gap: 14px; font-size: .78rem; color: var(--sm-muted); }
.sl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sl-dot { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--sm-line); background: var(--sm-glass-raised); }
.sl-dot-res { border-color: var(--primary, #f6c445); background: color-mix(in srgb, var(--primary, #f6c445) 30%, transparent); }
.sl-dot-taken { background: #5b6b8c; border-color: #5b6b8c; }
@keyframes sl-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .sl-tile, .sl-step button { transition: none; } .sl-shake { animation: none; } }

/* Practice-match slots */
.ms-mine { display: flex; align-items: center; gap: 14px; padding: 14px; margin: 8px 0; border-radius: 18px; border: 1px solid var(--sm-success); background: linear-gradient(135deg, color-mix(in srgb, var(--sm-success) 18%, transparent), var(--sm-glass-raised)); animation: inv-rise .35s cubic-bezier(.2, .8, .2, 1) both; }
.ms-mine-num { flex: none; min-width: 64px; height: 64px; padding: 0 10px; border-radius: 18px; display: grid; place-items: center; font-size: 1.7rem; font-weight: 900; color: #0b1a12; background: var(--sm-success); }
.ms-mine-text { display: grid; gap: 2px; }
.ms-mine-text b { font-size: 1.05rem; }
.ms-mine-text small { color: var(--sm-muted); }
.ms-mine-wait { border-color: var(--sm-line); background: var(--sm-glass-raised); }
.ms-mine-wait .ms-mine-num { color: var(--sm-muted); background: var(--sm-line); }
.ms-lobby { margin-top: 10px; }
.ms-caption { margin: 6px 0 0; min-height: 1.3em; font-size: .88rem; font-weight: 600; }
.ms-empty { margin: 6px 0; color: var(--sm-muted); }
.ms-open { margin-top: 10px; width: 100%; min-height: 48px; }
.ms-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ms-tools .btn { flex: 1 1 150px; min-height: 48px; }
.ms-progress { margin: 4px 0 10px; color: var(--sm-muted); font-size: .9rem; }
.ms-row { cursor: pointer; }
.ms-row:active { transform: scale(.98); }
.ms-row-empty { border-style: dashed; }
.ms-slot-chip { min-width: 52px; text-align: center; padding: 8px 12px; border-radius: 12px; font-weight: 900; color: #0b1a12; background: var(--sm-success); }
.ms-slot-chip-empty { color: var(--sm-muted); background: var(--sm-line); }
.ms-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ms-pick-actions { display: flex; gap: 8px; margin-top: 12px; }
.ms-pick-actions .btn { flex: 1; min-height: 48px; }