:root {
  --atlas-accent: rgba(20, 106, 115, 0.08);
}

.atlas-card {
  padding: 24px;
  animation: rise-in 0.82s ease-out both;
}

.atlas-topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.atlas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
  gap: 20px;
  margin-top: 22px;
  align-items: start;
}

.atlas-form {
  display: grid;
  gap: 18px;
}

.atlas-mode-switch {
  margin-bottom: 16px;
}

.atlas-manual-mode-switch {
  margin-bottom: 0;
}

.atlas-export-mode-switch {
  margin-bottom: 0;
}

.atlas-side {
  display: grid;
  gap: 18px;
}

.atlas-grid {
  display: grid;
  gap: 12px;
}

.atlas-grid + .atlas-grid,
.atlas-toggle-row,
.atlas-rule-actions {
  margin-top: 12px;
}

.atlas-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.atlas-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.atlas-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.atlas-preset-row {
  margin-bottom: 14px;
}

.atlas-export-size-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(247, 255, 253, 0.8), rgba(234, 248, 244, 0.72));
  border: 1px solid rgba(20, 106, 115, 0.12);
}

.atlas-export-size-panel.is-hidden {
  display: none;
}

.atlas-pixel-preset-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.atlas-pixel-preset-row .preset-chip {
  justify-content: center;
}

.atlas-square-size-note {
  margin: 0;
  color: var(--ink-soft);
}

.atlas-toggle-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
}

.atlas-toggle-note {
  margin: 0;
}

.atlas-auto-points {
  display: grid;
  gap: 10px;
}

.atlas-auto-point {
  margin: 0;
  padding: 12px 14px;
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(247, 255, 253, 0.88), rgba(234, 248, 244, 0.82));
  border: 1px solid rgba(20, 106, 115, 0.12);
  color: var(--ink-soft);
  line-height: 1.6;
}

.atlas-advanced-panel {
  display: grid;
  gap: 16px;
  margin-top: 14px;
}

.atlas-advanced-panel.is-hidden {
  display: none;
}

.atlas-advanced-head h3,
.atlas-section-title {
  margin: 0;
  font-family: "Aptos Display", "Trebuchet MS", sans-serif;
}

.atlas-advanced-head p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  line-height: 1.6;
}

.atlas-section-block {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 1.2rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(243, 236, 226, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    10px 10px 20px rgba(156, 134, 100, 0.08),
    -8px -8px 18px rgba(255, 255, 255, 0.8);
}

.atlas-section-title {
  font-size: 1rem;
}

.atlas-manual-note {
  margin: 0;
}

.atlas-export-options.is-hidden {
  display: none;
}

.atlas-upload-dropzone {
  min-height: 13.5rem;
}

.atlas-preview-panel,
.atlas-summary-panel {
  height: 100%;
}

.atlas-preview-stage {
  min-height: 24rem;
}

.atlas-artboard {
  min-height: 22rem;
}

#atlasPreviewImage {
  display: none;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  object-fit: contain;
  box-shadow: 0 18px 36px rgba(20, 106, 115, 0.12);
}

.atlas-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.atlas-summary-item {
  display: grid;
  gap: 8px;
  min-height: 7rem;
  padding: 14px;
  border-radius: 1.15rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(242, 236, 226, 0.82));
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    10px 10px 20px rgba(156, 134, 100, 0.08),
    -8px -8px 18px rgba(255, 255, 255, 0.8);
}

.atlas-summary-item span {
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 700;
}

.atlas-summary-item strong {
  color: var(--accent);
  font-size: 1rem;
  line-height: 1.45;
}

.atlas-download-row {
  margin-top: 8px;
}

.atlas-form-status {
  max-width: 31rem;
}

.atlas-form-status .status-detail {
  max-width: 30rem;
}

.atlas-download-button {
  text-decoration: none;
}

.atlas-download-button.disabled {
  pointer-events: none;
  opacity: 0.5;
  box-shadow: none;
}

.atlas-grid-preset.is-active {
  color: var(--accent-contrast);
  border-color: rgba(20, 106, 115, 0.32);
  background: linear-gradient(135deg, var(--accent-strong), #238a8c);
  box-shadow: 0 16px 28px rgba(20, 106, 115, 0.18);
}

.atlas-grid-preset.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  box-shadow: none;
}

@media (max-width: 1240px) {
  .atlas-layout {
    grid-template-columns: 1fr;
  }

  .atlas-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  .atlas-pixel-preset-row,
  .atlas-grid-4,
  .atlas-grid-3,
  .atlas-grid-2,
  .atlas-summary-grid,
  .atlas-side,
  .atlas-toggle-row {
    grid-template-columns: 1fr;
  }

  .atlas-preview-stage,
  .atlas-artboard {
    min-height: 18rem;
  }

  .atlas-toggle-row {
    align-items: stretch;
  }
}

@media (max-width: 640px) {
  .atlas-card {
    padding: 16px;
  }

  .atlas-upload-dropzone {
    min-height: 0;
  }

  .atlas-summary-item {
    min-height: 0;
  }

  .atlas-download-button {
    width: 100%;
    justify-content: center;
  }
}
