:root {
  --bg: #f5f6f8;
  --panel-bg: #ffffff;
  --border: #dfe2e7;
  --text: #1f2430;
  --text-muted: #6b7280;
  --primary: #d33f49;
  --primary-hover: #b6323b;
  --primary-text: #ffffff;
  --accent: #2f6feb;
  --input-bg: #ffffff;
  --hover-bg: #f0f1f3;
  --row-hover-bg: #fafbfc;
  --mark-bg: #fde68a;
  --mark-text: #1f2430;
  --shadow-sm: rgba(0, 0, 0, 0.12);
  --shadow-lg: rgba(0, 0, 0, 0.25);
  --radius: 8px;
}

/* Night: neutral dark mode. */
:root[data-theme="night"] {
  --bg: #14161c;
  --panel-bg: #1d2029;
  --border: #2c3040;
  --text: #e7e9ee;
  --text-muted: #9aa0ae;
  --primary: #e0525c;
  --primary-hover: #c8434d;
  --primary-text: #ffffff;
  --accent: #5b8def;
  --input-bg: #23262f;
  --hover-bg: #262a35;
  --row-hover-bg: #20232c;
  --mark-bg: #6b5b1f;
  --mark-text: #ffe9a8;
  --shadow-sm: rgba(0, 0, 0, 0.4);
  --shadow-lg: rgba(0, 0, 0, 0.55);
}

/* Fire: dark, warm, and energetic. */
:root[data-theme="fire"] {
  --bg: #1c100a;
  --panel-bg: #2a160d;
  --border: #4a2414;
  --text: #fbe9dd;
  --text-muted: #c99a80;
  --primary: #ff6b35;
  --primary-hover: #e8551f;
  --primary-text: #2a0d00;
  --accent: #ffb703;
  --input-bg: #331a10;
  --hover-bg: #3d1f13;
  --row-hover-bg: #301809;
  --mark-bg: #ffb703;
  --mark-text: #2a1600;
  --shadow-sm: rgba(255, 107, 53, 0.2);
  --shadow-lg: rgba(255, 107, 53, 0.3);
}

/* Grass: light, calm, earthy greens. */
:root[data-theme="grass"] {
  --bg: #eef5ea;
  --panel-bg: #f7fbf4;
  --border: #cfe3c4;
  --text: #243626;
  --text-muted: #5f7a5a;
  --primary: #3f8f4f;
  --primary-hover: #347541;
  --primary-text: #f3fff0;
  --accent: #caa63d;
  --input-bg: #ffffff;
  --hover-bg: #e3efdc;
  --row-hover-bg: #f0f7ec;
  --mark-bg: #d9e88a;
  --mark-text: #243214;
  --shadow-sm: rgba(63, 143, 79, 0.15);
  --shadow-lg: rgba(63, 143, 79, 0.25);
}

/* Psychic: dreamy dark purple/magenta. */
:root[data-theme="psychic"] {
  --bg: #170f28;
  --panel-bg: #221733;
  --border: #3c2a56;
  --text: #f0e6ff;
  --text-muted: #ab97c9;
  --primary: #9b5de5;
  --primary-hover: #8347c9;
  --primary-text: #180022;
  --accent: #ff8fd6;
  --input-bg: #271b3d;
  --hover-bg: #2e2148;
  --row-hover-bg: #241934;
  --mark-bg: #ff8fd6;
  --mark-text: #2b0022;
  --shadow-sm: rgba(155, 93, 229, 0.25);
  --shadow-lg: rgba(255, 143, 214, 0.3);
}

/* Water: light, clean, and cool. */
:root[data-theme="water"] {
  --bg: #eaf2fb;
  --panel-bg: #f6fafe;
  --border: #c9dcf0;
  --text: #1c2f42;
  --text-muted: #5c7891;
  --primary: #2f78c4;
  --primary-hover: #26639f;
  --primary-text: #ffffff;
  --accent: #17a2b8;
  --input-bg: #ffffff;
  --hover-bg: #dceaf9;
  --row-hover-bg: #f0f6fc;
  --mark-bg: #a8d8f0;
  --mark-text: #0d2b3d;
  --shadow-sm: rgba(47, 120, 196, 0.15);
  --shadow-lg: rgba(47, 120, 196, 0.25);
}

/* Electric: dark and charged, with a bright yellow spark. */
:root[data-theme="electric"] {
  --bg: #1a1a12;
  --panel-bg: #24241a;
  --border: #46461f;
  --text: #fdf6d8;
  --text-muted: #c9c08a;
  --primary: #f7d02c;
  --primary-hover: #d9b61c;
  --primary-text: #2a2205;
  --accent: #4fc3f7;
  --input-bg: #2a2a1e;
  --hover-bg: #302f20;
  --row-hover-bg: #201f16;
  --mark-bg: #f7d02c;
  --mark-text: #2a2205;
  --shadow-sm: rgba(247, 208, 44, 0.25);
  --shadow-lg: rgba(247, 208, 44, 0.35);
}

/* Fighting: dark, intense browns and brick-red. */
:root[data-theme="fighting"] {
  --bg: #201410;
  --panel-bg: #2c1c16;
  --border: #4a2f24;
  --text: #f5e6da;
  --text-muted: #c4a08a;
  --primary: #c1452e;
  --primary-hover: #a3381f;
  --primary-text: #fff3ec;
  --accent: #d9a441;
  --input-bg: #33211a;
  --hover-bg: #3a2620;
  --row-hover-bg: #2a1a14;
  --mark-bg: #d9a441;
  --mark-text: #2a1a06;
  --shadow-sm: rgba(193, 69, 46, 0.2);
  --shadow-lg: rgba(193, 69, 46, 0.3);
}

/* Steel: light, cool metallic gray. */
:root[data-theme="steel"] {
  --bg: #eef1f3;
  --panel-bg: #f8fafb;
  --border: #d3dade;
  --text: #2a3238;
  --text-muted: #6d7a82;
  --primary: #6e8494;
  --primary-hover: #596e7d;
  --primary-text: #ffffff;
  --accent: #9fb2bd;
  --input-bg: #ffffff;
  --hover-bg: #e2e8ec;
  --row-hover-bg: #f2f5f7;
  --mark-bg: #c7d4da;
  --mark-text: #22292d;
  --shadow-sm: rgba(110, 132, 148, 0.15);
  --shadow-lg: rgba(110, 132, 148, 0.25);
}

/* Fairy: light, soft pastel pink. */
:root[data-theme="fairy"] {
  --bg: #fdeef6;
  --panel-bg: #fff6fb;
  --border: #f3cfe3;
  --text: #4a1f38;
  --text-muted: #a5688c;
  --primary: #e6739c;
  --primary-hover: #d15c87;
  --primary-text: #ffffff;
  --accent: #b98ee0;
  --input-bg: #ffffff;
  --hover-bg: #fbdcec;
  --row-hover-bg: #fff0f8;
  --mark-bg: #f5c2dd;
  --mark-text: #4a1f38;
  --shadow-sm: rgba(230, 115, 156, 0.15);
  --shadow-lg: rgba(230, 115, 156, 0.25);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0 1rem;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--bg);
}

/* Two full-height buttons (Day/Night) on the left, then a 4x2 grid of the
   eight typed energies on the right — mirrors how the Evolutions set's
   basic energies are actually laid out: colorless/darkness as the odd
   ones out, the eight standard types filling a grid. */
.theme-switcher {
  display: grid;
  grid-template-columns: 34px 34px repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas:
    "day night grass    fire      water electric"
    "day night psychic  fighting  steel fairy";
  gap: 0.3rem;
  padding: 0.25rem;
  height: 68px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.theme-btn[data-theme="day"] { grid-area: day; }
.theme-btn[data-theme="night"] { grid-area: night; }
.theme-btn[data-theme="grass"] { grid-area: grass; }
.theme-btn[data-theme="fire"] { grid-area: fire; }
.theme-btn[data-theme="water"] { grid-area: water; }
.theme-btn[data-theme="electric"] { grid-area: electric; }
.theme-btn[data-theme="psychic"] { grid-area: psychic; }
.theme-btn[data-theme="fighting"] { grid-area: fighting; }
.theme-btn[data-theme="steel"] { grid-area: steel; }
.theme-btn[data-theme="fairy"] { grid-area: fairy; }

.theme-btn {
  padding: 0;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  opacity: 0.75;
}

.theme-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Energy card art/symbol sits in the upper-middle third of the card;
     biasing the crop there (rather than dead-center) keeps it recognizable
     even in the short 2x4 grid cells, which only show a sliver of the card. */
  object-position: center 22%;
}

.theme-btn:hover {
  opacity: 1;
}

.theme-btn.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--shadow-sm);
  opacity: 1;
}

.app-header h1 {
  font-size: 1.4rem;
  margin: 0;
}

.cart-badge-btn {
  position: relative;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel-bg);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.cart-badge-btn:hover {
  background: var(--hover-bg);
}

/* Grayscale only the cart glyph itself, not the whole button — the badge
   count below is a `filter`-applying-to-descendants sibling and needs to
   stay a vivid, un-muted accent color to work as a notification indicator. */
.cart-badge-icon {
  display: inline-block;
  filter: grayscale(1);
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.cart-badge-btn:hover .cart-badge-icon {
  opacity: 1;
}

.cart-badge-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--accent, #c0392b);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.panel {
  position: relative;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.hidden {
  display: none !important;
}

label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.35rem;
}

.control .label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.35rem;
}

.row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.controls-row {
  display: flex;
  gap: 1.5rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.control {
  min-width: 220px;
}

.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}

.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.5rem 0.2rem;
  margin-bottom: -1px;
  margin-right: 1.25rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  cursor: pointer;
}

.tab-btn:hover {
  color: var(--text);
}

.tab-btn.active {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--primary);
}

.tab-panel.hidden {
  display: none;
}

.era-browser-body {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
  align-items: flex-start;
}

.era-browser-controls {
  flex: 0 0 230px;
}

.era-browser-controls .checkbox-group {
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.era-browser-controls .checkbox-inline {
  align-items: flex-start;
  font-size: 0.85rem;
  line-height: 1.3;
}

.era-browser-controls .checkbox-inline input {
  margin-top: 0.2rem;
}

.era-browser-sets {
  flex: 1 1 auto;
  min-width: 0;
}

.era-sets-list {
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.25rem 0.5rem;
  column-count: 2;
  column-gap: 1rem;
}

.era-sets-list > .status-text {
  padding: 0.5rem;
  column-span: all;
}

.era-set-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.15rem;
  border-bottom: 1px solid var(--border);
  break-inside: avoid;
  font-size: 0.8rem;
}

.era-set-include-checkbox {
  flex-shrink: 0;
  margin: 0;
}

.era-set-include-checkbox:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.era-set-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.era-set-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.era-set-year {
  color: var(--text-muted);
}

.traffic-light {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--shadow-sm);
}

.traffic-light-green {
  background: #22c55e;
}

.traffic-light-yellow {
  background: #eab308;
}

.traffic-light-red {
  background: #ef4444;
}

.era-set-fetch-btn {
  flex-shrink: 0;
  padding: 0.1rem 0.4rem;
  font-size: 0.72rem;
}

.era-set-fetch-btn.fetch-failed {
  color: #ef4444;
  border-color: #ef4444;
}

.row-set-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

@media (max-width: 640px) {
  .era-browser-body {
    flex-direction: column;
  }
  .era-browser-controls {
    flex-basis: auto;
  }
  .era-sets-list {
    column-count: 1;
  }
}

.set-control {
  position: relative;
  flex: 1 1 320px;
}

.combobox {
  position: relative;
}

.combobox-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 24px var(--shadow-sm);
  z-index: 20;
}

.combobox-list.hidden {
  display: none;
}

.combobox-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}

.combobox-option-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.combobox-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combobox-option:hover,
.combobox-option.active {
  background: var(--hover-bg);
}

.combobox-option mark {
  background: var(--mark-bg);
  color: var(--mark-text);
  border-radius: 2px;
}

.combobox-empty {
  padding: 0.6rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

select,
input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  background: var(--input-bg);
  color: var(--text);
}

button {
  font-size: 0.9rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--primary);
  color: var(--primary-text);
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.btn-secondary {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--hover-bg);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
}

.checkbox-group label,
.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 0;
}

.status-text {
  color: var(--text-muted);
  font-size: 0.85rem;
  min-height: 1.2em;
}

.spinner {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.5em;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  vertical-align: -0.15em;
  animation: spin 0.7s linear infinite;
}

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

.results-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.results-header h2 {
  font-size: 1.05rem;
  margin: 0;
  flex-shrink: 0;
}

.name-filter-input {
  flex: 0 1 240px;
  padding: 0.4rem 0.6rem;
}

.results-header .status-text {
  margin-left: auto;
}

.set-icon {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  max-height: 88px;
  max-width: 88px;
  object-fit: contain;
}

.table-wrap {
  overflow-x: auto;
}

.results-table-wrap {
  max-height: 620px;
  overflow-y: auto;
}

.results-table-wrap thead th {
  position: sticky;
  top: 0;
  background: var(--panel-bg);
  z-index: 1;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

tbody tr:hover {
  background: var(--row-hover-bg);
}

.empty-state {
  color: var(--text-muted);
  white-space: normal;
  text-align: center;
  padding: 1.5rem 0.6rem;
}

.card-thumb {
  width: 34px;
  height: 47px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  cursor: pointer;
}

.card-preview {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  display: none;
  padding: 6px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px var(--shadow-lg);
}

.card-preview.visible {
  display: block;
}

.card-preview img {
  display: block;
  width: 260px;
  height: auto;
  border-radius: 6px;
}

.price-cell {
  font-variant-numeric: tabular-nums;
}

.price-value {
  font-weight: 600;
}

.variant-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-muted);
}

.price-empty {
  color: var(--text-muted);
}

.price-cell-entry + .price-cell-entry {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border);
}

.percent-input {
  width: 60px;
  padding: 0.25rem 0.35rem;
}

.percent-cell {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.lock-toggle-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--panel-bg);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  flex-shrink: 0;
}

.lock-toggle-btn:hover {
  background: var(--row-hover-bg);
}

.lock-toggle-btn.locked {
  border-color: var(--accent);
  background: var(--hover-bg);
}

.condition-select {
  padding: 0.25rem 0.35rem;
  min-width: 9.5rem;
}

.export-percent-controls #export-default-percent {
  width: 70px;
  padding: 0.25rem 0.35rem;
}

.open-basket-btn {
  position: relative;
  font-size: 1rem;
  line-height: 1;
  padding: 0.4rem 0.55rem;
}

.basket-count-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--accent, #c0392b);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.basket-popover {
  position: fixed;
  z-index: 1100;
  width: 260px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px var(--shadow-lg);
  padding: 0.6rem 0.75rem 0.75rem;
}

.basket-popover.hidden {
  display: none;
}

.basket-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}

.basket-popover-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 0.25rem;
}

.basket-popover-variant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0;
}

.basket-popover-variant + .basket-popover-variant {
  border-top: 1px solid var(--border);
}

.basket-popover-variant-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.basket-popover-variant-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.basket-popover-variant-price {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.qty-stepper {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.qty-stepper button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--panel-bg);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.qty-stepper button:hover {
  background: var(--row-hover-bg);
}

.qty-direct {
  width: 36px;
  padding: 0.2rem;
  text-align: center;
}

.remove-cart-item-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 0.3rem;
}

.remove-cart-item-btn:hover {
  color: var(--text);
}

.page-viewport {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.page-track {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-track.show-export {
  transform: translateX(-50%);
}

.page {
  width: 50%;
  flex: 0 0 50%;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 3rem;
}

@media (max-width: 640px) {
  body {
    padding: 0 0.75rem;
  }
  .app-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}