:root {
  color-scheme: light;
  --bg: #f7f3ec;
  --ink: #241d18;
  --muted: #6d6258;
  --line: #ded3c4;
  --paper: #fffaf2;
  --accent: #a6422b;
  --accent-2: #1d6b63;
  --gold: #c08a2b;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

.topbar, main { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 24px 0 12px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 28px; letter-spacing: 0; }
h2 { font-size: clamp(28px, 5vw, 52px); line-height: 1.08; max-width: 720px; letter-spacing: 0; }
.eyebrow { color: var(--accent); font-size: 13px; margin-bottom: 4px; }

.icon-button, .primary, .secondary, .tab {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 8px;
  min-height: 44px;
  cursor: pointer;
  font-weight: 700;
}
.link-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.icon-button { width: 44px; font-size: 20px; }
.top-actions { display: flex; gap: 8px; }

.hero { display: grid; grid-template-columns: 1.5fr 0.8fr; gap: 18px; align-items: stretch; padding: 20px 0; }
.hero p { margin-top: 16px; color: var(--muted); line-height: 1.7; max-width: 680px; }
.today-card, .panel, .paywall { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.today-card { padding: 18px; display: grid; gap: 12px; min-height: 210px; }
.today-card strong { font-size: 34px; color: var(--accent); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; color: var(--muted); font-size: 13px; }

.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 14px; }
.tab { background: #efe5d6; }
.tab.active { background: var(--accent); border-color: var(--accent); color: white; }
.panel { display: none; padding: 18px; }
.panel.active { display: block; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
input, select {
  width: 100%; min-height: 44px; border-radius: 8px; border: 1px solid var(--line);
  padding: 0 12px; background: white; color: var(--ink); font-size: 15px;
}
.primary { background: var(--accent-2); border-color: var(--accent-2); color: white; padding: 0 16px; }
.secondary { padding: 0 16px; color: var(--accent); }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.name-card { border: 1px solid var(--line); background: white; border-radius: 8px; padding: 14px; display: grid; gap: 8px; min-height: 172px; }
.name-card h3 { color: var(--accent); font-size: 26px; }
.score { color: var(--gold); font-weight: 800; }
.name-card p, .report p, .date-item p { color: var(--muted); line-height: 1.65; font-size: 14px; }
.report { margin-top: 16px; display: grid; gap: 14px; }
.report-block { border-left: 4px solid var(--accent-2); background: white; padding: 12px; border-radius: 6px; }
.ai-block { border-left-color: var(--accent); background: #fff6e8; }
.ai-block h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.date-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.date-item { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.date-item strong { color: var(--accent); font-size: 20px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.saved-list { display: grid; gap: 10px; }
.saved-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.saved-item h4 { margin: 0 0 6px; font-size: 17px; color: var(--accent); }
.saved-item p { color: var(--muted); line-height: 1.55; font-size: 14px; margin: 0; }
.paywall { margin: 16px 0 32px; padding: 18px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.paywall p { margin-top: 6px; color: var(--muted); line-height: 1.6; }
.pay-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-status { border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; color: var(--muted); background: white; font-size: 13px; }
.pay-status.unlocked { color: var(--accent-2); border-color: var(--accent-2); }
.runtime-band { margin: -16px 0 32px; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.runtime-band .pay-status { background: var(--paper); }
.runtime-band .live { color: var(--accent-2); border-color: var(--accent-2); }
.runtime-band .mock { color: var(--accent); border-color: var(--accent); }
.primary:disabled, .secondary:disabled { opacity: .65; cursor: wait; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: white; border-radius: 8px; padding: 10px 14px; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; }
.modal { display: none; position: fixed; inset: 0; z-index: 10; }
.modal.show { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgb(36 29 24 / 45%); }
.share-card, .detail-card {
  position: relative;
  width: min(460px, calc(100% - 32px));
  max-height: 88vh;
  overflow: auto;
  margin: 6vh auto 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 24px 80px rgb(36 29 24 / 20%);
  display: grid;
  gap: 14px;
}
.detail-card { width: min(640px, calc(100% - 32px)); }
.share-card h3, .detail-card h3 { font-size: 26px; color: var(--accent); overflow-wrap: anywhere; }
.share-card p, .detail-card p { color: var(--muted); line-height: 1.7; }
.share-lines { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.detail-content { display: grid; gap: 12px; }
.detail-section { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.detail-section h4 { margin: 0 0 8px; color: var(--ink); font-size: 16px; }
.saved-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.close-button { position: absolute; right: 12px; top: 10px; width: 34px; height: 34px; border: 0; background: transparent; font-size: 24px; cursor: pointer; color: var(--muted); }
.poster-canvas { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: white; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.share-page { padding-top: 18px; }
.public-report {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  display: grid;
  gap: 16px;
}
.public-report h2 { font-size: clamp(28px, 5vw, 46px); color: var(--accent); }
.public-summary { color: var(--muted); line-height: 1.8; font-size: 16px; max-width: 760px; }
.public-actions { max-width: 520px; }

@media (max-width: 820px) {
  .hero, .form-grid, .result-grid, .date-list { grid-template-columns: 1fr; }
  .tabs { grid-template-columns: repeat(2, 1fr); }
  .section-head, .saved-item { grid-template-columns: 1fr; align-items: stretch; }
  .saved-actions { justify-content: stretch; }
  .saved-actions button { flex: 1; }
  .paywall { align-items: stretch; flex-direction: column; }
  .runtime-band { align-items: stretch; flex-direction: column; }
  .modal-actions { grid-template-columns: 1fr; }
}