:root {
  /* Warm, inspirational palette */
  --bg: #fdf9f3;            /* soft parchment */
  --fg: #1f2937;            /* slate-800 */
  --muted: #6b7280;         /* gray-500 */
  --accent: #d97706;        /* amber-600 (not blue) */
  --warn: #b91c1c;          /* red-700 */
  --surface: #ffffff;       /* cards and inputs */
  --border: #e5e7eb;        /* subtle border */
  --shadow: 0 8px 30px rgba(17, 24, 39, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
  color: var(--fg);
  background: var(--bg);
  background-image: radial-gradient(1200px 600px at 20% -10%, #fff7ed, #fef3c7 60%, #fff 100%);
}

/* Center the quote page only */
body:has(#quote-card) {
  min-height: 100svh; /* small viewport units for mobile browsers */
  display: grid;
  place-items: center;
}

.container { width: 100%; max-width: 1000px; margin: 0 auto; padding: 28px; }

h1 { margin: 0 0 16px; letter-spacing: -0.02em; text-align: center; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  margin: 16px auto; /* center cards */
  box-shadow: var(--shadow);
}

.hidden { display: none; }

.status { color: var(--muted); margin: 8px 0; }

.quote {
  font-size: 2rem;
  line-height: 1.4;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: 600;
  letter-spacing: 0.004em;
}

.author { color: var(--muted); margin-top: 8px; font-style: italic; }

.warning {
  color: var(--warn);
  font-weight: 600;
  margin-top: 10px;
  background: #fee2e2;
  border: 1px solid #fecaca;
  padding: 8px 10px;
  border-radius: 8px;
}

.meta { display: flex; justify-content: center; gap: 16px; margin-top: 12px; color: var(--muted); font-size: 0.9rem; }

input, button, textarea, select {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
}

button { cursor: pointer; border-color: var(--accent); }

input:focus, textarea:focus, select:focus, button:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
}

section h2 { margin-top: 0; }

.list { display: grid; gap: 10px; }

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

/* Responsive adjustments */
@media (max-width: 720px) {
  .container { padding: 18px; }
  .quote { font-size: 1.6rem; }
}
@media (min-height: 700px) {
  .container { padding-top: 40px; padding-bottom: 40px; }
}

.small { font-size: 0.92rem; color: var(--muted); }

/* Mobile-safe layout helpers */
html, body { max-width: 100%; overflow-x: hidden; }
/* Ensure long content wraps inside tables */
th, td { word-break: break-word; overflow-wrap: anywhere; }
/* Inputs inside table cells should not overflow */
td input, td select, td textarea { width: 100%; max-width: 100%; }
/* Long IDs in code blocks shouldn't force overflow */
code { word-break: break-all; }

@media (max-width: 640px) {
  /* Stack toolbars on narrow screens */
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar input[type="text"] { min-width: 0; width: 100%; }
  /* Stack grid forms (like tag add) into single column */
  .card [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* Reduce side gutters to keep content within viewport */
  .card { margin-left: 12px; margin-right: 12px; }
}