/* ==========================================================================
   Application Layout & Grid Systems
   ========================================================================== */

/* Ambient Background Glow Effect */
.ambient-background {
  position: fixed;
  top: -20%;
  left: 20%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, hsla(255, 85%, 65%, 0.08) 0%, hsla(192, 95%, 55%, 0.05) 40%, transparent 70%);
  z-index: -1;
  pointer-events: none;
  filter: blur(80px);
}

.app-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header Layout */
.app-header {
  padding: var(--space-xl) 0 var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: var(--space-xl);
}

/* Main Content Area */
.app-main {
  flex: 1;
  padding-bottom: var(--space-2xl);
}

/* Responsive Account Cards Grid */
.account-list-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--space-xl);
  align-items: stretch;
}

/* Modal Overlay Layout */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: hsla(222, 35%, 4%, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-md);
}

.modal-container.hidden {
  display: none;
}

/* Toast Notifications Container */
.toast-container {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  z-index: 2000;
  pointer-events: none;
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
  .app-container {
    padding: 0 var(--space-md);
  }
  
  .account-list-container {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .app-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
}