/**
 * PayfastAuctions — Cottone shell (from docs/design/tokens.css)
 */
:root {
  --pf-bg: #ECE7D0;
  --pf-bg-deep: #e0d9bc;
  --pf-surface: #f4f0de;
  --pf-ink: #2a2f22;
  --pf-muted: #5c6450;
  --pf-border: #c9c2a8;
  --pf-header: #404A32;
  --pf-header-ink: #f4f0de;
  --pf-primary: #404A32;
  --pf-primary-strong: #2f3624;
  --pf-action: #C4A35A;
  --pf-action-ink: #1f2418;
  --pf-gold: #C4A35A;
  --pf-gold-strong: #a8873f;
  --pf-danger: #a33b2b;
  --pf-focus: #C4A35A;
  --pf-font-display: "Libre Baskerville", "Palatino Linotype", Palatino, serif;
  --pf-font-body: "Source Sans 3", "Segoe UI", sans-serif;
  --pf-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --pf-radius: 8px;
  --pf-radius-sm: 4px;
  --pf-shadow: 0 1px 2px rgb(42 47 34 / 12%);
  --pf-touch-min: 44px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgb(196 163 90 / 18%), transparent 55%),
    linear-gradient(180deg, var(--pf-bg) 0%, var(--pf-bg-deep) 100%);
  color: var(--pf-ink);
  font-family: var(--pf-font-body);
  line-height: 1.5;
}
a { color: var(--pf-primary); text-decoration: none; }
a:hover { color: var(--pf-gold-strong); text-decoration: underline; }
h1, h2, h3, .pf-display {
  font-family: var(--pf-font-display);
  letter-spacing: 0.01em;
  margin: 0 0 .5rem;
  font-weight: 700;
}

.pf-shell { display: flex; flex-direction: column; min-height: 100vh; }
.pf-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .85rem 1.5rem;
  background: var(--pf-header);
  color: var(--pf-header-ink);
  border-bottom: 3px solid var(--pf-gold);
}
.pf-brand {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  min-height: var(--pf-touch-min);
  color: inherit;
  text-decoration: none;
}
.pf-brand:hover { text-decoration: none; color: inherit; }
.pf-brand-title {
  font-family: var(--pf-font-display);
  font-size: 1.45rem;
}
.pf-brand-mark {
  color: var(--pf-gold);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-family: var(--pf-font-body);
  font-weight: 600;
}
.pf-nav { display: flex; flex-wrap: wrap; gap: .35rem; margin-left: auto; }
.pf-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pf-touch-min);
  padding: 0 .9rem;
  color: var(--pf-header-ink);
  border-radius: var(--pf-radius-sm);
  text-decoration: none;
  opacity: .92;
}
.pf-nav a:hover {
  background: rgb(244 240 222 / 12%);
  text-decoration: none;
  color: #fff;
  opacity: 1;
}

.pf-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 1.5rem 4rem;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}
.pf-hero-brand {
  font-family: var(--pf-font-display);
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1.15;
  color: var(--pf-primary);
  margin-bottom: .75rem;
}
.pf-hero-line {
  font-size: 1.125rem;
  color: var(--pf-muted);
  max-width: 36rem;
  margin: 0 0 1.75rem;
}
.pf-cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pf-touch-min);
  padding: 0 1.25rem;
  border-radius: var(--pf-radius-sm);
  border: 1px solid transparent;
  font-weight: 600;
  text-decoration: none;
  cursor: default;
}
.pf-btn-primary {
  background: var(--pf-action);
  color: var(--pf-action-ink);
  border-color: var(--pf-gold-strong);
}
.pf-btn-primary:hover {
  background: var(--pf-gold-strong);
  color: #fff;
  text-decoration: none;
}
.pf-btn-secondary {
  background: transparent;
  color: var(--pf-primary);
  border-color: var(--pf-border);
}
.pf-btn-secondary:hover {
  border-color: var(--pf-primary);
  text-decoration: none;
}
.pf-muted { color: var(--pf-muted); }
.pf-panel {
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  padding: 1.5rem;
  box-shadow: var(--pf-shadow);
}
.pf-footer {
  padding: 1rem 1.5rem;
  text-align: center;
  font-size: .875rem;
  color: var(--pf-muted);
  border-top: 1px solid var(--pf-border);
}
.pf-flash {
  background: #e8f0df;
  border: 1px solid var(--pf-border);
  color: var(--pf-primary);
  padding: .75rem 1rem;
  border-radius: var(--pf-radius);
  margin-bottom: 1rem;
}
.pf-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.pf-toolbar h1 { margin: 0; }
.pf-stat-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.pf-stat {
  min-width: 7rem;
  padding: .85rem 1rem;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  background: var(--pf-cream);
}
.pf-stat strong {
  display: block;
  font-family: var(--pf-font-display);
  font-size: 1.6rem;
  color: var(--pf-primary);
}
.pf-stat span { color: var(--pf-muted); font-size: .85rem; }
.pf-list-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: .85rem 0;
  border-top: 1px solid var(--pf-border);
}
.pf-list-row:first-of-type { border-top: 0; }
.pf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.pf-table th,
.pf-table td {
  text-align: left;
  padding: .65rem .4rem;
  border-bottom: 1px solid var(--pf-border);
  vertical-align: top;
}
.pf-table th { color: var(--pf-muted); font-weight: 600; }
.pf-form {
  display: grid;
  gap: .9rem;
  max-width: 36rem;
}
.pf-label {
  display: grid;
  gap: .35rem;
  font-weight: 600;
  color: var(--pf-ink);
}
.pf-input {
  width: 100%;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  padding: .65rem .75rem;
  font: inherit;
  background: #fff;
  color: var(--pf-ink);
}
.pf-check {
  display: flex;
  gap: .5rem;
  align-items: center;
  font-weight: 600;
}
.pf-errors {
  color: #8a2b2b;
  margin: 0;
  padding-left: 1.1rem;
}
.pf-live-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 900px) {
  .pf-live-grid { grid-template-columns: 1fr; }
}
.pf-bid-board {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem;
}
.pf-live-pill {
  display: inline-block;
  margin-top: 1rem;
  color: #8a1f1f;
  font-weight: 700;
  letter-spacing: .04em;
}
button.pf-linkish,
.pf-linkish {
  background: none;
  border: 0;
  color: var(--pf-cream);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.pf-header .pf-linkish { color: var(--pf-cream); }
.pf-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}