:root {
  color-scheme: light;
}

body {
  background-image:
    radial-gradient(circle at 12% 10%, rgba(209, 155, 44, 0.18), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(45, 90, 79, 0.14), transparent 25%),
    linear-gradient(180deg, #f7f1e7 0%, #f2ebdf 100%);
}

.hero-panel {
  border: 1px solid #ddcdb5;
  background:
    linear-gradient(140deg, rgba(255, 250, 242, 0.98), rgba(248, 238, 223, 0.95)),
    repeating-linear-gradient(
      0deg,
      rgba(184, 106, 43, 0.05) 0px,
      rgba(184, 106, 43, 0.05) 1px,
      transparent 1px,
      transparent 34px
    );
  box-shadow: 0 28px 70px rgba(120, 88, 40, 0.11);
}

.hero-chip {
  min-width: 240px;
  border: 1px solid #dcccb3;
  border-radius: 1.2rem;
  background: rgba(255, 251, 245, 0.96);
  padding: 0.9rem 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.chip-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8f7157;
}

.chip-value {
  margin-top: 0.3rem;
  color: #36251d;
  font-weight: 700;
}

.metric-card {
  border: 1px solid #dcccb4;
  border-radius: 1.2rem;
  background: linear-gradient(145deg, #fffaf2, #fbf3e5);
  padding: 1rem;
  box-shadow: 0 18px 40px rgba(116, 82, 38, 0.08);
}

.metric-card.gold {
  border-color: #e0c77a;
}

.metric-card.clay {
  border-color: #d89b8e;
}

.metric-card.pine {
  border-color: #a9c6b5;
}

.metric-label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #856d59;
}

.metric-value {
  margin-top: 0.45rem;
  font-family: "Fraunces", serif;
  font-size: 1.9rem;
  line-height: 1;
  color: #2d1d14;
}

.panel-shell {
  border: 1px solid #decdb5;
  border-radius: 1.3rem;
  background: linear-gradient(145deg, rgba(255, 249, 240, 0.98), rgba(255, 245, 231, 0.98));
  padding: 1rem;
  box-shadow: 0 20px 48px rgba(116, 82, 38, 0.08);
}

.panel-title {
  font-family: "Fraunces", serif;
  font-size: 1.25rem;
  color: #362219;
}

.field-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #856c57;
}

.field-input {
  width: 100%;
  border: 1px solid #d7c7af;
  border-radius: 0.95rem;
  background: #fffdf8;
  color: #2e2018;
  padding: 0.72rem 0.78rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.field-input:focus {
  outline: none;
  border-color: #b86a2b;
  box-shadow: 0 0 0 3px rgba(184, 106, 43, 0.12);
  transform: translateY(-1px);
}

.primary-btn {
  width: 100%;
  border: 1px solid #b86a2b;
  border-radius: 999px;
  background: linear-gradient(145deg, #c47737, #a85d25);
  color: #fffaf4;
  font-weight: 800;
  padding: 0.78rem 1rem;
  box-shadow: 0 14px 32px rgba(184, 106, 43, 0.22);
}

.primary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8c6ad;
  border-radius: 999px;
  background: #fff9f1;
  color: #5f4836;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.45rem 0.82rem;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(111, 76, 35, 0.08);
}

.action-btn.accent {
  border-color: #9ec3a4;
  background: #eef8ef;
  color: #2c5b44;
}

.action-btn.soft {
  border-color: #d8c188;
  background: #fff5da;
  color: #8d6120;
}

.action-btn.danger {
  border-color: #dbb0a8;
  background: #fff0ed;
  color: #9f4538;
}

.action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.review-row,
.lane-row,
.track-card {
  border-radius: 1.15rem;
  background: #fffaf2;
}

.review-row {
  border: 1px solid #e0d1ba;
  padding: 0.85rem;
}

.review-row.review-due {
  border-color: #e0c77a;
  background: #fff7e4;
}

.review-row.review-overdue {
  border-color: #d89b8e;
  background: #fff1ed;
}

.review-row.review-upcoming {
  border-color: #cfdcc8;
  background: #f8fcf5;
}

.lane-row {
  border: 1px solid #dfcfb9;
  padding: 0.78rem;
}

.lane-row.lane-ahead {
  border-color: #b8d3c2;
}

.lane-row.lane-review-due {
  border-color: #e0c77a;
}

.lane-row.lane-behind {
  border-color: #d99b8d;
}

.lane-row.lane-paused {
  border-color: #d8d1c8;
}

.track-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .track-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.track-card {
  border: 1px solid #dcccb6;
  border-left-width: 6px;
  padding: 1rem;
  box-shadow: 0 22px 50px rgba(116, 82, 38, 0.08);
}

.track-card.track-ahead {
  border-left-color: #2d5a4f;
}

.track-card.track-on-track {
  border-left-color: #d19b2c;
}

.track-card.track-review-due {
  border-left-color: #b87d23;
}

.track-card.track-behind {
  border-left-color: #a44432;
}

.track-card.track-paused {
  border-left-color: #a59a8f;
}

.state-pill,
.priority-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.22rem 0.62rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.state-pill.state-ahead {
  background: #e7f5ec;
  color: #255a45;
}

.state-pill.state-on-track {
  background: #fff6df;
  color: #8b6222;
}

.state-pill.state-review-due {
  background: #fff1d1;
  color: #986217;
}

.state-pill.state-behind {
  background: #ffe8e3;
  color: #9f4739;
}

.state-pill.state-paused {
  background: #efebe6;
  color: #70665e;
}

.priority-pill.priority-urgent {
  background: #ffe4de;
  color: #a54539;
}

.priority-pill.priority-high {
  background: #fff0d9;
  color: #9d671b;
}

.priority-pill.priority-medium {
  background: #fff6e8;
  color: #906227;
}

.priority-pill.priority-low {
  background: #eef5ef;
  color: #3d6353;
}

.progress-rail {
  height: 0.8rem;
  border-radius: 999px;
  background: #efe4d3;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2d5a4f, #d19b2c);
}

.stat-key,
.stat-value {
  display: block;
}

.stat-key {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #877162;
}

.stat-value {
  margin-top: 0.24rem;
  font-weight: 700;
  color: #322118;
}

.session-dot {
  display: inline-block;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.session-dot.dot-strong {
  background: #2d5a4f;
  border-color: #24493f;
}

.session-dot.dot-solid {
  background: #d19b2c;
  border-color: #b9871f;
}

.session-dot.dot-wobbly {
  background: #d98b38;
  border-color: #bb7122;
}

.session-dot.dot-missed {
  background: #a44432;
  border-color: #8a3829;
}

.history-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
}

.history-table th,
.history-table td {
  border-bottom: 1px solid #e2d4c0;
  text-align: left;
  padding: 0.62rem 0.48rem;
  font-size: 0.78rem;
  color: #5f5248;
}

.history-table th {
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #896f5a;
}

.empty-copy {
  border: 1px dashed #d7c9b5;
  border-radius: 1rem;
  padding: 0.95rem;
  text-align: center;
  color: #7d6b5d;
  background: rgba(255, 250, 242, 0.8);
}