/* Final responsive treatment for the multi-subscription home surface. */
.screen[data-screen="home"] .quick-grid,
.screen[data-screen="subscription"] .quick-grid {
  width: 100% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  justify-content: stretch !important;
}

.screen[data-screen="home"] .quick-card,
.screen[data-screen="subscription"] .quick-card {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 78px !important;
  border-radius: 14px !important;
  padding: 12px 10px !important;
  background: linear-gradient(145deg, rgba(21,31,49,.98), rgba(13,20,34,.98)) !important;
  border: 1px solid rgba(93,127,190,.42) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 8px 20px rgba(0,0,0,.12) !important;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.screen[data-screen="home"] .quick-card:hover,
.screen[data-screen="subscription"] .quick-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(47,203,255,.78) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 10px 24px rgba(24,101,180,.18) !important;
}

.app-shell.app--ultima .screen[data-screen="home"] .quick-card,
.app-shell.app--ultima .screen[data-screen="subscription"] .quick-card {
  background: linear-gradient(145deg, rgba(29,28,25,.98), rgba(18,19,19,.98)) !important;
  border-color: rgba(201,164,94,.4) !important;
}

.app-shell.app--ultima .screen[data-screen="home"] .quick-card:hover,
.app-shell.app--ultima .screen[data-screen="subscription"] .quick-card:hover {
  border-color: rgba(225,190,111,.9) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 10px 24px rgba(201,164,94,.14) !important;
}

.subscription-switcher {
  width: 100% !important;
  margin: 14px 0 18px !important;
  padding: 18px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(17,25,40,.96), rgba(10,17,29,.96)) !important;
  border: 1px solid rgba(87,121,184,.38) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 16px 34px rgba(0,0,0,.16) !important;
}

.app-shell.app--ultima .subscription-switcher {
  background: linear-gradient(145deg, rgba(29,28,25,.98), rgba(16,17,17,.98)) !important;
  border-color: rgba(201,164,94,.48) !important;
}

.subscription-stack-item {
  min-width: 0 !important;
  border-radius: 14px !important;
  padding: 15px 16px !important;
  background: rgba(19,30,48,.78) !important;
  border: 1px solid rgba(86,122,188,.34) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
}

.subscription-stack-item.current {
  border-color: rgba(47,203,255,.82) !important;
  background: linear-gradient(135deg, rgba(27,76,105,.42), rgba(15,29,45,.9)) !important;
}

.subscription-stack-item.exclusive,
.app-shell.app--ultima .subscription-stack-item.current {
  border-color: rgba(218,180,101,.78) !important;
  background: linear-gradient(135deg, rgba(99,74,32,.3), rgba(25,24,22,.94)) !important;
}

.subscription-stack-item:not(.current):not(.exclusive) {
  background: rgba(18,25,38,.74) !important;
  border-color: rgba(89,112,153,.3) !important;
}

@media (max-width: 899px) {
  .screen[data-screen="home"].active {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    max-width: none !important;
  }
  .screen[data-screen="home"] .hero {
    grid-column: 1 !important;
  }
  .screen[data-screen="home"] .subscription-card,
  .screen[data-screen="home"] .subscription-switcher,
  .screen[data-screen="home"] .quick-grid {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 !important;
  }
  .screen[data-screen="home"] .quick-grid,
  .screen[data-screen="subscription"] .quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  .screen[data-screen="home"] .quick-card,
  .screen[data-screen="subscription"] .quick-card {
    min-height: 74px !important;
    padding: 10px 6px !important;
  }
  .screen[data-screen="home"] .quick-copy strong,
  .screen[data-screen="subscription"] .quick-copy strong {
    font-size: 11px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .subscription-stack-item {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    row-gap: 8px !important;
  }
  .subscription-stack-item .subscription-stack-select {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }
  .subscription-stack-item .subscription-stack-status {
    order: 2 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .subscription-stack-item .subscription-stack-delete {
    order: 3 !important;
    margin-left: auto !important;
  }
}

@media (max-width: 520px) {
  .screen[data-screen="home"] .quick-grid,
  .screen[data-screen="subscription"] .quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  .screen[data-screen="home"] .quick-card,
  .screen[data-screen="subscription"] .quick-card {
    min-height: 82px !important;
    padding: 12px 8px !important;
  }
  .screen[data-screen="home"] .quick-copy strong,
  .screen[data-screen="subscription"] .quick-copy strong {
    font-size: 12px !important;
  }
  .subscription-switcher {
    padding: 14px !important;
    border-radius: 15px !important;
  }
  .subscription-stack-item {
    padding: 13px !important;
  }
}