:root {
  background: #f6f2ea;
  color: #172326;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: #46575b; text-decoration: none; }

.topbar, .footer {
  align-items: center;
  background: #fffdf9;
  border-bottom: 1px solid #ddd6c9;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 18px clamp(18px, 4vw, 56px);
}

.topbar { position: sticky; top: 0; z-index: 5; }
.brand, .footer span { color: #153b3f; font-size: 28px; font-weight: 800; }
nav { display: flex; gap: 18px; }
main { margin: 0 auto; max-width: 1200px; padding: 24px 20px 56px; }

.featured-card, .featured-empty {
  align-items: end;
  aspect-ratio: 16 / 7;
  background: #20383b center / cover;
  border-radius: 8px;
  color: #fffdf9;
  display: grid;
  min-height: 390px;
  overflow: hidden;
  padding: clamp(22px, 4vw, 46px);
  position: relative;
}

.featured-card::before {
  background: linear-gradient(90deg, rgba(15, 30, 33, .86), rgba(15, 30, 33, .18));
  content: "";
  inset: 0;
  position: absolute;
}

.featured-card > * { position: relative; }
.featured h1, .section-head h1 {
  font-size: clamp(38px, 6vw, 78px);
  letter-spacing: 0;
  line-height: .96;
  margin: 8px 0 16px;
  max-width: 790px;
}

.offer-strip {
  align-items: center;
  background: rgba(255, 253, 249, .94);
  border-radius: 8px;
  color: #172326;
  display: grid;
  gap: 14px;
  grid-template-columns: 180px 1fr auto;
  margin-top: 28px;
  padding: 14px;
}

.band, .task-panel { border-top: 1px solid #ddd6c9; margin-top: 34px; padding-top: 34px; }
.section-head { align-items: end; display: flex; justify-content: space-between; margin-bottom: 20px; }
.eyebrow, .tag { color: #2f7b68; font-size: 13px; font-weight: 800; margin: 0; text-transform: uppercase; }
.campaign-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.campaign-card {
  background: #fffdf9;
  border: 1px solid #ddd6c9;
  border-radius: 8px;
  overflow: hidden;
}

.wide-card { grid-column: span 2; }
.campaign-image { aspect-ratio: 4 / 3; background: #d8d0c2 center / cover; }
.wide-card .campaign-image { aspect-ratio: 2 / 1; }
.campaign-body { display: grid; gap: 10px; padding: 18px; }
.campaign-body h2 { font-size: 24px; margin: 0; }
.campaign-body p, #selectedCampaignMeta { color: #5b686b; margin: 0; }
.campaign-footer { align-items: center; display: flex; gap: 12px; justify-content: space-between; }

button, input, textarea, select {
  border: 1px solid #c8c0b3;
  border-radius: 8px;
  font: inherit;
  padding: 12px;
}

button { background: #153b3f; color: #fffdf9; cursor: pointer; font-weight: 800; }
.button-link { background: #153b3f; border-radius: 8px; color: #fffdf9; display: inline-block; font-weight: 800; padding: 12px; }
.ghost-button, .small-button { background: #fffdf9; color: #153b3f; }
form { display: grid; gap: 10px; max-width: 620px; }
textarea { min-height: 90px; }
.checkbox-row { align-items: center; display: flex; gap: 10px; }
.checkbox-row input { width: auto; }
.status-line { color: #153b3f; font-weight: 800; }
.footer { border-bottom: 0; border-top: 1px solid #ddd6c9; }
.workspace { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.workspace-list { display: grid; gap: 12px; }
.auth-grid { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.partner-hero { display: grid; gap: 34px; grid-template-columns: 1.2fr .8fr; min-height: 520px; place-items: center; }
.partner-hero h1 { font-size: clamp(40px, 6vw, 78px); letter-spacing: 0; line-height: .96; margin: 8px 0 18px; }
.partner-hero p { color: #5b686b; font-size: 20px; max-width: 650px; }
.signup-panel, .login-panel, .partner-grid article { background: #fffdf9; border: 1px solid #ddd6c9; border-radius: 8px; padding: 18px; }
.partner-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.operator-result { background: #172326; border-radius: 8px; color: #eaf5ef; overflow: auto; padding: 18px; }
.stat-grid { display: grid; gap: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat { background: #fffdf9; border: 1px solid #ddd6c9; border-radius: 8px; padding: 18px; }
.stat strong { display: block; font-size: 30px; }
.detail-hero { aspect-ratio: 16 / 7; background: #d8d0c2 center / cover; border-radius: 8px; margin-bottom: 28px; }
.detail-grid { display: grid; gap: 18px; grid-template-columns: 1.5fr .7fr; }
.detail-grid h1 { font-size: clamp(38px, 6vw, 74px); letter-spacing: 0; line-height: .96; margin: 8px 0 16px; }
.detail-grid article, .reward-box { background: #fffdf9; border: 1px solid #ddd6c9; border-radius: 8px; padding: 18px; }
.reward-box strong { display: block; font-size: 28px; margin-top: 8px; }
table { background: #fffdf9; border-collapse: collapse; width: 100%; }
td, th { border-bottom: 1px solid #ddd6c9; padding: 12px; text-align: left; }

@media (max-width: 860px) {
  .topbar, .footer, nav, .section-head, .campaign-footer { align-items: flex-start; flex-direction: column; }
  .featured-card { aspect-ratio: auto; }
  .offer-strip, .campaign-grid, .workspace, .stat-grid, .partner-hero, .partner-grid, .detail-grid, .auth-grid { grid-template-columns: 1fr; }
  .wide-card { grid-column: span 1; }
}