/* ═══════════════════════════════════════════════════════════════════
   COMPONENTS.CSS - Componenti riutilizzabili comuni
   Estratti SOLO da player.css e preparatori.css (ultimi 2 file migrati)
   
   PATTERN DI UTILIZZO:
   - Ogni pagina CSS parte da questo file (include components.css)
   - Le pagine possono personalizzare i componenti con override specifici
   - Le pagine aggiungono stili dedicati solo per quella feature
   
   Vedi docs/CSS_ARCHITECTURE.md per esempi completi
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   0. VARIABILI CSS COMUNI
   Variabili :root comuni tra player.css e preparatori.css
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Variabili comuni per componenti */
  /* Nota: Le variabili del design system (--c-accent, --c-border, --panel, ecc.)
     sono già definite in mobile.main.css alla riga 1572 */
  
  /* Border comune per card (usato da player-card e prep-card)
     Diversa da --c-border del design system (0.12 vs 0.18) */
  --component-border: rgba(255, 255, 255, 0.12);
  
  /* Panel: usa direttamente --panel del design system (già definito in mobile.main.css) */
}

/* ═══════════════════════════════════════════════════════════════════
   1. CARD PATTERN (player-card, prep-card)
   ═══════════════════════════════════════════════════════════════════ */

/**
 * Card base comune tra player.css e preparatori.css
 * preparatori.css usa anche .player-card, quindi unifichiamo qui
 */
.player-card,
.prep-card {
  background: linear-gradient(165deg, rgba(26, 40, 54, 0.95) 0%, rgba(16, 24, 32, 0.98) 100%);
  border: 1px solid var(--component-border, var(--c-border, rgba(255,255,255,0.12)));
  border-radius: 16px;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

.prep-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}

@media (min-width: 700px) {
  .player-card {
    padding: 10px;
  }
}

@media (min-width: 1280px) {
  .player-card {
    padding: 12px;
  }
}

/* Varianti card */
.player-card--spaced {
  margin-top: 16px;
}

.prep-card--premium {
  border-left: 3px solid rgba(123, 182, 255, 0.6);
}

.prep-card--top {
  border-left: 3px solid rgba(255, 201, 50, 0.6);
}

.prep-card--standard {
  border-left: 3px solid rgba(255, 255, 255, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════
   2. SECTION HEADER (player-section__header)
   ═══════════════════════════════════════════════════════════════════ */

/**
 * Section header comune tra player.css e preparatori.css
 * preparatori.css usa .player-section__header, quindi unifichiamo qui
 */
.player-section__header {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-border, rgba(255,255,255,0.18));
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.player-section__header h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-accent, #FFC932);
  flex: 1 1 auto;
  text-align: center;
}

.prep-card .player-section__header h2 {
  text-align: left;
}

@media (min-width: 345px) {
  .player-section__header h2 {
    font-size: 16px;
  }
}

@media (min-width: 700px) {
  .player-section__header h2 {
    font-size: 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   3. MODAL COMPONENTS (modal-overlay, modal-content, ecc.)
   ═══════════════════════════════════════════════════════════════════ */

/**
 * Modali comuni tra player.css e preparatori.css
 * Unifichiamo le differenze: player usa top/left/right/bottom, preparatori usa inset
 * Supportiamo entrambi gli stati: .modal-closing (player) e .is-open (preparatori)
 */
.modal-overlay {
  position: fixed;
  inset: 0; /* Standard moderno (sostituisce top/left/right/bottom) */
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: fadeIn 0.2s ease-out;
}

.modal-overlay[hidden] {
  display: none !important;
}

/* Supporto per player.css: stato closing */
.modal-overlay.modal-closing {
  animation: fadeOut 0.3s ease-out;
}

/* Supporto per preparatori.css: stato open */
.modal-overlay.is-open {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.modal-content {
  background: var(--panel, #1a2836);
  border-radius: var(--radius-fm, 14px);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.3s ease-out;
  border: 1px solid var(--component-border, var(--c-border, rgba(255,255,255,0.18)));
}

/* Supporto per player.css: stato closing */
.modal-content.modal-content-closing {
  animation: slideDown 0.3s ease-out;
}

.modal-content--auction {
  max-width: 600px;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(20px);
    opacity: 0;
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--c-border, rgba(255,255,255,0.18));
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--c-text, #eaeaea);
}

.modal-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--c-text, #eaeaea);
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.18);
}

.modal-body {
  padding: 24px;
}

/* ==========================================================================
   Dock Overlay / Backdrop
   Componente condiviso del sistema dock, usato anche dal pannello chat.
   ========================================================================= */

.game-dock-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 10, 14, 0.26);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: 80;
}

.game-dock-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 800px) {
  .game-dock-backdrop {
    display: none;
  }

  .game-dock-backdrop.is-open {
    display: block;
    z-index: 8990;
  }
}

.modal-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  padding: 20px 24px;
  border-top: 1px solid var(--c-border, rgba(255,255,255,0.18));
}

.modal-footer .btn {
  min-width: 100px;
}

/* ═══════════════════════════════════════════════════════════════════
   4. ACCESSIBILITÀ - Focus visibile
   ═══════════════════════════════════════════════════════════════════ */

.modal-close:focus-visible {
  outline: 3px solid var(--c-accent, #FFC932);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   5. PREP COMPONENTS - Componenti prep-* comuni (usati da preparatori e premium)
   ═══════════════════════════════════════════════════════════════════ */

/* Panel */
.prep-panel {
  background: linear-gradient(180deg, rgba(15, 24, 34, 0.98), rgba(9, 14, 20, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Table */
.prep-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
}

.prep-table--layout {
  background: rgba(16, 24, 32, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.prep-table-wrap {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 6px;
}

.prep-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.prep-table tr:last-child td {
  border-bottom: 0;
}

.prep-table--layout td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Table headers */
.prep-th {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--muted, #9aa6bb);
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
  padding: 6px 4px;
  white-space: nowrap;
}

/* Table cells */
.prep-td {
  padding: 6px 4px;
  color: var(--c-text, #eaeaea);
  text-align: center;
}

/* Nota: .prep-td--name NON è definito qui perché il padding-left e text-align
   dipendono dal contesto specifico. Ogni pagina deve definire la propria variante
   se necessario (es. premium.css sovrascrive per centrare senza padding-left) */

/* Buttons */
.prep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.prep-btn--primary {
  background: linear-gradient(180deg, #ffd76a, #ffb100);
  color: #1a1a1a;
  box-shadow: 0 6px 16px rgba(255, 177, 0, 0.35);
}

.prep-btn--small {
  padding: 8px 16px;
  font-size: 12px;
}

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

.prep-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.prep-btn--primary:hover {
  box-shadow: 0 8px 20px rgba(255, 177, 0, 0.45);
}

.prep-btn:disabled,
.prep-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.prep-btn:focus-visible {
  outline: 3px solid var(--c-accent, #FFC932);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   6. PATTERN DI PERSONALIZZAZIONE NELLE PAGINE
   ═══════════════════════════════════════════════════════════════════ */

/*
 * REGOLE PER PERSONALIZZARE I COMPONENTI NELLE PAGINE:
 * 
 * 1. Personalizza componenti comuni con override stessa specificity
 * 2. Aggiungi solo stili dedicati specifici della feature
 * 3. Non duplicare stili già in components.css
 * 4. Usa CSS variables per valori comuni (--c-accent, --c-border, ecc.)
 * 
 * Vedi docs/CSS_ARCHITECTURE.md per esempi completi e best practices
 */

/* Generic red-dot notification components */
.has-dot-red-corner {
  position: relative;
}

.has-dot-red-inline {
  position: relative;
  padding-right: 30px;
}

.dot-red {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff4f4f;
}

.dot-red--corner {
  position: absolute;
  top: -4px;
  right: -4px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 2px rgba(255, 79, 79, 0.22);
}

.dot-red--inline {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  box-shadow: 0 0 0 2px rgba(255, 79, 79, 0.22);
}

/* ═══════════════════════════════════════════════════════════════════
   SELECT COMPONENT - reusable styled select
   ═══════════════════════════════════════════════════════════════════ */

select,
.wpm-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: rgba(16, 24, 32, 0.95) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239aa6bb'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  color: var(--c-text, #eaeaea) !important;
  padding: 6px 28px 6px 10px !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease !important;
}

select:hover,
.wpm-select:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

select:focus-visible,
.wpm-select:focus-visible {
  outline: 3px solid var(--c-accent, #FFC932) !important;
  outline-offset: 2px !important;
}

select option,
.wpm-select option {
  background-color: #1a2836 !important;
  color: var(--c-text, #eaeaea) !important;
  padding: 6px 10px !important;
}

select option:checked,
.wpm-select option:checked {
  background-color: rgba(255, 201, 50, 0.2) !important;
  color: var(--c-accent, #FFC932) !important;
}

select option:hover,
.wpm-select option:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   NOTICE / ALERT BOXES
   Messaggi di stato: successo, errore, avviso, info
   Usato in: formazione, mercato, ecc.
   ═══════════════════════════════════════════════════════════════════ */

.ui-notice {
  padding: 10px 16px;
  border-radius: 10px;
  margin: 0 auto 12px;
  max-width: 500px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}

.ui-notice p {
  margin: 0;
}

.ui-notice--success {
  background: rgba(111, 211, 164, 0.12);
  border: 1px solid rgba(111, 211, 164, 0.3);
  color: #6fd3a4;
}

.ui-notice--error {
  background: rgba(224, 82, 82, 0.12);
  border: 1px solid rgba(224, 82, 82, 0.3);
  color: #e05252;
}

.ui-notice--warning {
  background: rgba(255, 201, 50, 0.10);
  border: 1px solid rgba(255, 201, 50, 0.3);
  color: #f5c842;
}

.ui-notice--info {
  background: rgba(123, 224, 255, 0.1);
  border: 1px solid rgba(123, 224, 255, 0.25);
  color: #7be0ff;
}

@media (max-width: 344px) {
  .ui-notice {
    font-size: 11px;
    padding: 8px 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM BANNER
   Banner di upsell premium riutilizzabile
   ═══════════════════════════════════════════════════════════════════ */

.ui-premium-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: var(--radius-fm, 14px);
  background: linear-gradient(135deg, rgba(255,201,50,0.12) 0%, rgba(255,177,0,0.06) 100%);
  border: 1px solid rgba(255,201,50,0.25);
  color: var(--c-text, #eaeaea);
  text-align: center;
}

.ui-premium-banner__icon {
  color: var(--c-accent, #FFC932);
}

.ui-premium-banner__icon .auth-icon {
  width: 28px;
  height: 28px;
}

.ui-premium-banner__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.ui-premium-banner__text strong {
  font-size: 14px;
  color: var(--c-accent, #FFC932);
}

.ui-premium-banner__text span {
  font-size: 12px;
  color: var(--muted, #9aa6bb);
  line-height: 1.5;
  max-width: 340px;
}

.ui-premium-banner__cta {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 8px;
  background: linear-gradient(135deg, #FFC932 0%, #FFB100 100%);
  color: #1a1a1a;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
  margin-top: 4px;
}

.ui-premium-banner__cta:hover {
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════
   STATUS BADGES
   Badge circolari per indicatori di stato (infortunato, squalificato, diffidato)
   ═══════════════════════════════════════════════════════════════════ */

.ui-status-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 6;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.ui-status-badge .auth-icon {
  width: 10px;
  height: 10px;
  stroke: currentColor;
}

.ui-status-badge--injured {
  background: #e05252;
  color: #fff;
}

.ui-status-badge--suspended {
  background: #f5c842;
  color: #101820;
}

.ui-status-badge--cautioned {
  background: #f5c842;
  color: #101820;
}

.ui-status-badge--cautioned .auth-icon {
  stroke: none;
  fill: currentColor;
}

.ui-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  line-height: 1;
  color: #fff;
}

.ui-status-icon .auth-icon {
  width: 10px;
  height: 10px;
  stroke: currentColor;
}

.ui-status-icon--injured {
  background: #e05252;
}

.ui-status-icon--suspended {
  background: #f5c842;
  color: #101820;
}

.ui-status-icon--cautioned {
  background: #f5c842;
  color: #101820;
}

.ui-status-icon--cautioned .auth-icon {
  stroke: none;
  fill: currentColor;
}

/* ═══════════════════════════════════════════════════════════════════
   TAB GROUP
   Navigazione a tab con badge e indicatori
   ═══════════════════════════════════════════════════════════════════ */

.ui-tab-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  margin: 0 auto 12px;
  max-width: 560px;
}

.ui-tab-group__item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--muted, #9aa6bb);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  min-width: 44px;
  min-height: 44px;
  line-height: 1.3;
  text-decoration: none;
}

.ui-tab-group__item small {
  font-size: 9px;
  font-weight: 500;
  color: var(--muted, #9aa6bb);
  opacity: 0.8;
}

.ui-tab-group__item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--c-text, #eaeaea);
}

.ui-tab-group__item:focus-visible {
  outline: 3px solid var(--c-accent, #FFC932);
  outline-offset: 2px;
}

.ui-tab-group__item.is-active {
  background: linear-gradient(180deg, rgba(255, 201, 50, 0.18) 0%, rgba(255, 177, 0, 0.10) 100%);
  color: var(--c-accent, #FFC932);
  box-shadow: 0 2px 8px rgba(255, 201, 50, 0.15);
  border: 1px solid rgba(255, 201, 50, 0.25);
}

.ui-tab-group__item.is-active small {
  color: var(--c-accent, #FFC932);
  opacity: 0.7;
}

.ui-tab-group__item--locked {
  opacity: 0.65;
}

.ui-tab-group__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(255, 201, 50, 0.2);
  color: var(--c-accent, #FFC932);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ui-tab-group__badge--ghost {
  visibility: hidden;
}

.ui-tab-group__warn {
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e05252;
  color: #fff;
  line-height: 1;
  box-shadow: 0 0 4px rgba(224, 82, 82, 0.5);
  pointer-events: none;
  z-index: 2;
}

.ui-tab-group__warn .auth-icon {
  stroke: #fff;
  width: 10px;
  height: 10px;
}

.ui-tab-group__lock {
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--c-accent, #FFC932);
  line-height: 1;
  pointer-events: none;
  opacity: 0.8;
  z-index: 2;
}

.ui-tab-group__lock .auth-icon {
  stroke: currentColor;
  width: 12px;
  height: 12px;
}

@media (max-width: 344px) {
  .ui-tab-group {
    max-width: 100%;
    gap: 2px;
    padding: 3px;
  }

  .ui-tab-group__item {
    font-size: 9px;
    padding: 4px 6px;
    min-height: 32px;
    min-width: 0;
    letter-spacing: 0;
  }

  .ui-tab-group__item small {
    font-size: 7px;
  }
}

@media (min-width: 700px) {
  .ui-tab-group {
    max-width: 460px;
  }
}

@media (min-width: 1280px) {
  .ui-tab-group {
    max-width: 560px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ACTION BAR
   Barra azioni con bottoni raggruppati
   ═══════════════════════════════════════════════════════════════════ */

.ui-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px 8px;
  margin: 16px auto 0;
  max-width: 600px;
  background: linear-gradient(180deg, rgba(16, 24, 32, 0.95) 0%, rgba(26, 40, 54, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ui-actions__group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.ui-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease;
  min-height: 44px;
}

.ui-actions__btn--primary {
  background: linear-gradient(180deg, #ffd76a, #ffb100);
  color: #1a1a1a;
  box-shadow: 0 4px 12px rgba(255, 177, 0, 0.3);
  flex: 1;
  max-width: 200px;
}

.ui-actions__btn--primary:hover {
  box-shadow: 0 6px 18px rgba(255, 177, 0, 0.45);
  transform: translateY(-1px);
}

.ui-actions__btn--secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--c-text, #eaeaea);
  border-color: rgba(255, 255, 255, 0.15);
}

.ui-actions__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.ui-actions__btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.ui-actions__btn:disabled,
.ui-actions__btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.ui-actions__btn.loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.ui-actions__btn.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-left: -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ui-spin 0.8s linear infinite;
}

.ui-actions__btn--primary.loading::after {
  border-color: #1a1a1a;
  border-top-color: transparent;
}

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

@media (max-width: 450px) {
  .ui-actions__btn {
    padding: 8px 10px;
    font-size: 11px;
    min-height: 38px;
  }
}

@media (max-width: 344px) {
  .ui-actions {
    padding: 6px 4px;
    gap: 4px;
    border-radius: 8px;
  }

  .ui-actions__btn {
    padding: 6px 8px;
    font-size: 10px;
    min-height: 34px;
    border-radius: 6px;
  }
}

@media (min-width: 700px) {
  .ui-actions {
    max-width: 500px;
  }
}

@media (min-width: 1280px) {
  .ui-actions {
    max-width: 1280px;
  }
}

.ui-panel-card {
  background: linear-gradient(165deg, rgba(26, 40, 54, 0.95) 0%, rgba(16, 24, 32, 0.98) 100%);
  border: 1px solid var(--component-border, var(--c-border, rgba(255,255,255,0.12)));
  border-radius: 18px;
  box-sizing: border-box;
}

.ui-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-text, #eaeaea);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.ui-pill--accent {
  background: var(--c-accent, #ffc932);
  color: #1a2028;
}

.ui-pill--info {
  background: rgba(123, 182, 255, 0.16);
  color: #9ec7ff;
}

.ui-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 11px 18px;
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.ui-action-btn:hover {
  transform: translateY(-1px);
}

.ui-action-btn:focus-visible {
  outline: 2px solid var(--ring, rgba(255, 201, 50, 0.30));
  outline-offset: 2px;
}

.ui-action-btn:disabled,
.ui-action-btn[disabled] {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.ui-action-btn--accent {
  background: var(--c-accent, #ffc932);
  color: #182028;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
}