/* Santa Toolbox web app — layered on the marketing site's styles. */
.app-main { padding: 10px 0 60px; min-height: 60vh; }
.hidden { display: none !important; }
.stack { display: grid; gap: 14px; }
.row { display: flex; align-items: center; gap: 12px; }
.row .grow { flex: 1; min-width: 0; }
.muted { color: var(--text-secondary); font-size: 0.9rem; }
.error { color: #ffb86b; }

.field {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgb(0 0 0 / 0.2);
  color: var(--text);
  font: 1rem var(--sans);
}
.field::placeholder { color: var(--text-secondary); }
textarea.field { min-height: 90px; resize: vertical; }
.code-field { font: 700 1.6rem var(--rounded); letter-spacing: 0.4em; text-align: center; }

.list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text);
  text-decoration: none;
}
a.list-item:hover { background: rgb(255 255 255 / 0.14); }
.list-item .title { font-weight: 600; }
.list-item .sub { color: var(--text-secondary); font-size: 0.88rem; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { text-align: center; padding: 10px; border-radius: 14px; background: rgb(255 255 255 / 0.08); }
.stat strong { display: block; font: 800 1.5rem var(--rounded); }
.stat span { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.money { font: 800 2.2rem var(--rounded); font-variant-numeric: tabular-nums; }

.status {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  font-size: 1.1rem;
  display: grid;
  place-items: center;
}
.status.idea { background: rgb(255 214 10 / 0.18); }
.status.bought { background: rgb(255 159 10 / 0.2); }
.status.wrapped { background: rgb(48 209 88 / 0.2); }
.wrapped-title { text-decoration: line-through; color: var(--text-secondary); }

.icon-button {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 6px;
}
.icon-button:hover { color: var(--text); }
.danger { color: #ff6b6b; }
.button.danger { border-color: rgb(255 107 107 / 0.4); color: #ff8a8a; }
.inline-form { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; }
@media (max-width: 520px) { .inline-form { grid-template-columns: 1fr 1fr; } .inline-form .button { grid-column: span 2; justify-content: center; } }
.back { display: inline-block; margin-bottom: 12px; text-decoration: none; color: var(--text-secondary); }
.pill { font-size: 0.75rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgb(255 255 255 / 0.1); }
.topbar nav a[aria-current] { color: var(--text); font-weight: 700; }
.auth .segmented { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); }
.auth .segmented a { text-align: center; padding: 9px; border-radius: 999px; text-decoration: none; color: var(--text); font-weight: 600; }
.auth .segmented a[aria-selected="true"] { background: var(--paper); color: var(--ink); }
.auth a.center { display: block; text-align: center; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--text-secondary); font-size: 0.85rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }
.button .icon { width: 20px; height: 20px; flex: none; }
.auth .button { justify-content: center; }
.button.apple { background: #fff; color: #000; border-color: transparent; }
.button.apple:hover { background: #f2f2f2; }
.passkey-glyph .icon { width: 22px; height: 22px; display: block; color: var(--paper); }