/* ═══════════════════════════════════════════
   Simfarm – Farming Simulation
   ═══════════════════════════════════════════ */
:root {
  --green-dark:  #2d6a4f;
  --green-mid:   #40916c;
  --green-light: #74c69d;
  --green-pale:  #d8f3dc;
  --yellow:      #f4a261;
  --brown:       #7f4f24;
  --red:         #c0392b;
  --bg:          #f8f5f0;
  --card-bg:     #ffffff;
  --text:        #1b1b1b;
  --muted:       #888;
  --border:      #e0e0e0;
  --input-bg:    #ffffff;
  color-scheme:  light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ── Navbar ─────────────────────────────── */
.navbar {
  background: var(--green-dark);
  padding: .55rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  position: sticky;
  top: 0;
  z-index: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.navbar .brand {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: .25rem;
}
.navbar .brand span { color: var(--yellow); }

/* nav fills remaining width */
.navbar nav {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .1rem;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: visible;
}

/* plain nav links */
.navbar nav > a {
  color: #b7e4c7;
  text-decoration: none;
  padding: .35rem .6rem;
  border-radius: 6px;
  font-size: .875rem;
  white-space: nowrap;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.navbar nav > a:hover,
.navbar nav > a.active {
  background: rgba(255,255,255,.15);
  color: #fff;
}

/* ── Dropdowns ───────────────────────────── */
.nav-dropdown {
  position: relative;
  flex-shrink: 0;
}
.nav-dropdown-btn {
  background: none;
  border: none;
  color: #b7e4c7;
  cursor: pointer;
  font-family: inherit;
  font-size: .875rem;
  padding: .35rem .6rem;
  border-radius: 6px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: background .15s, color .15s;
}
.nav-dropdown-btn:hover,
.nav-dropdown.active > .nav-dropdown-btn,
.nav-dropdown.open   > .nav-dropdown-btn {
  background: rgba(255,255,255,.15);
  color: #fff;
}
.nd-caret {
  font-size: .55rem;
  opacity: .6;
  transition: transform .15s;
}
.nav-dropdown.open > .nav-dropdown-btn .nd-caret { transform: rotate(180deg); }

/* dropdown panel — absolutely positioned, never in flow */
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 500;
  padding-top: 6px; /* visual gap without breaking hover */
  min-width: 168px;
  background: #1d5235;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: .3rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  flex-direction: column;
  gap: 2px;
}
.nav-dropdown-menu.nd-right { left: auto; right: 0; }

/* open via hover (desktop) OR .open class (JS/mobile) */
.nav-dropdown:hover > .nav-dropdown-menu,
.nav-dropdown.open  > .nav-dropdown-menu {
  display: flex;
}

.nav-dropdown-menu a {
  color: #c8e6c9;
  text-decoration: none;
  padding: .42rem .75rem;
  border-radius: 5px;
  font-size: .875rem;
  white-space: nowrap;
  display: block;
  transition: background .12s;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
  background: rgba(255,255,255,.15);
  color: #fff;
}
.nav-dropdown-divider {
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: .2rem .2rem;
}
.nd-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  font-size: .6rem;
  font-weight: 700;
  background: #e74c3c;
  color: #fff;
  line-height: 1;
}

/* push user+lang to the far right */
.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .1rem;
  flex-shrink: 0;
}

/* ── Nav alert badges ─────────────────── */
.nav-badge-wrap { position: relative; display: inline-flex; align-items: center; gap: .3rem; }
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: .62rem;
  font-weight: 700;
  line-height: 1;
  background: var(--yellow);
  color: #1b1b1b;
}
.nav-badge-warn { background: #e74c3c; color: #fff; }

/* ── Hamburger toggle (hidden on desktop) ─ */
.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid rgba(255,255,255,.4);
  color: #fff;
  border-radius: 6px;
  padding: .3rem .55rem;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}

.lang-form { display: flex; align-items: center; gap: .2rem; }
.lang-btn {
  background: none;
  border: 1.5px solid rgba(255,255,255,.3);
  color: #b7e4c7;
  border-radius: 5px;
  padding: .2rem .45rem;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .04em;
  transition: background .15s, color .15s, border-color .15s;
}
.lang-btn:hover    { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.6); }
.lang-btn.lang-active { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.7); }

/* ── Push notification toggle ──────────────── */
.push-toggle-btn {
  background: none;
  border: 1.5px solid rgba(255,255,255,.3);
  color: #b7e4c7;
  border-radius: 5px;
  padding: .2rem .45rem;
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
  font-weight: 600;
}
.push-toggle-btn:disabled { opacity: .45; cursor: default; }
.push-toggle-btn:not(:disabled):hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.push-toggle-btn.push-on { color: #ffd700; border-color: rgba(255,215,0,.5); }
@media (max-width: 700px) {
  .push-toggle-btn { font-size: .8rem; padding: .18rem .35rem; }
}

/* ── Flash messages ──────────────────────── */
.messages {
  position: sticky;
  top: 0;
  z-index: 200;
  padding: .5rem 1.5rem 0;
  pointer-events: none;
}
.messages .alert { pointer-events: auto; }
.alert {
  padding: .7rem 1rem;
  border-radius: 7px;
  margin-bottom: .4rem;
  font-size: .9rem;
  border-left: 4px solid transparent;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.alert-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .85rem;
  line-height: 1;
  padding: .1rem .3rem;
  border-radius: 4px;
  opacity: .5;
  flex-shrink: 0;
}
.alert-close:hover { opacity: 1; }
.alert-success { background: var(--green-pale); color: var(--green-dark); border-left-color: var(--green-mid); }
.alert-info    { background: #dff0ff; color: #1a5f7a; border-left-color: #4da8d0; }
.alert-warning {
  background: #fff3cd; color: var(--brown); border-left-color: #e6a817;
  font-weight: 600;
}
.alert-error,
.alert-danger  {
  background: #ffeaea; color: #b91c1c; border-left-color: #dc2626;
  font-weight: 600;
  font-size: 1rem;
  padding: .85rem 1rem .85rem 1.1rem;
}

/* ── Layout ─────────────────────────────── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem;
}
.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.page-title {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--green-dark);
}
.page-meta { font-size: .88rem; color: var(--muted); }
.hint-text { font-size: .82rem; color: var(--muted); }

/* ── Auth pages ──────────────────────────── */
.auth-wrap {
  min-height: calc(100vh - 52px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #d8f3dc 0%, #b7e4c7 100%);
}
.auth-card {
  background: var(--card-bg);
  border-radius: 14px;
  box-shadow: 0 6px 28px rgba(0,0,0,.12);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 440px;
}
.auth-card h1 { font-size: 1.6rem; color: var(--green-dark); margin-bottom: .25rem; }
.auth-card .subtitle { color: var(--muted); margin-bottom: 1.5rem; font-size: .9rem; }
.auth-footer { margin-top: 1.2rem; text-align: center; font-size: .88rem; color: var(--muted); }
.auth-footer a { color: var(--green-mid); text-decoration: none; font-weight: 600; }

/* ── Forms ───────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  margin-bottom: .3rem;
  color: var(--green-dark);
}
.form-control {
  width: 100%;
  padding: .55rem .75rem;
  border: 1.5px solid #ccc;
  border-radius: 7px;
  font-size: .95rem;
  background: #fff;
  transition: border-color .2s;
}
.form-control:focus { border-color: var(--green-mid); outline: none; }
.input-sm { padding: .35rem .6rem; font-size: .88rem; width: auto; }
.errorlist { color: var(--red); font-size: .82rem; padding-left: 1rem; margin-top: .2rem; }

/* ── Buttons ─────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .55rem 1.2rem;
  border: none;
  border-radius: 8px;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, transform .1s, opacity .15s;
  white-space: nowrap;
}
.btn:active  { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary   { background: var(--green-mid);  color: #fff; }
.btn-primary:hover  { background: var(--green-dark); }
.btn-secondary { background: #e8e8e8; color: #333; }
.btn-secondary:hover { background: #d5d5d5; }
.btn-harvest   { background: #e8a422; color: #fff; }
.btn-harvest:hover { background: var(--brown); }
.btn-sell-field { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }
.btn-sell-field:hover { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.btn-sm  { padding: .35rem .85rem; font-size: .84rem; }
.btn-full { width: 100%; justify-content: center; }
.price-tag {
  font-size: .78rem;
  background: rgba(0,0,0,.12);
  padding: .1rem .4rem;
  border-radius: 4px;
}

/* ── Dashboard stats ─────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.stat-card {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  border-left: 4px solid var(--green-mid);
  position: relative;
}
.stat-card .stat-icon { position: absolute; top: 1rem; right: 1rem; font-size: 1.3rem; }
.stat-card .stat-label { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.stat-card .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--green-dark); margin-top: .15rem; }

/* ── Quick links ─────────────────────────── */
.quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.quick-card {
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: .2rem;
  transition: border-color .2s, box-shadow .2s;
}
.quick-card:hover { border-color: var(--green-mid); box-shadow: 0 4px 16px rgba(64,145,108,.15); }
.quick-card span   { font-size: 1.8rem; }
.quick-card strong { font-size: 1rem; }
.quick-card small  { color: var(--muted); font-size: .83rem; }

/* ── Generic card / list ─────────────────── */
.card {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 1.2rem 1.3rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brown);
  margin-bottom: .75rem;
  border-bottom: 2px solid var(--border);
  padding-bottom: .35rem;
}
.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: .92rem;
}
.list-item:last-child { border-bottom: none; }

/* ── Badges ──────────────────────────────── */
.badge {
  font-size: .72rem;
  padding: .2rem .55rem;
  border-radius: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-fallow    { background: #eee;              color: #666; }
.badge-sown      { background: #fff3cd;           color: var(--brown); }
.badge-growing   { background: var(--green-pale); color: var(--green-dark); }
.badge-ready     { background: #b7e4c7;           color: #1b4332; }
.badge-harvested { background: #f0f0f0;           color: #999; }
.badge-income    { background: var(--green-pale); color: var(--green-dark); }
.badge-expense   { background: #ffe5e5;           color: var(--red); }

/* ── Action bar ──────────────────────────── */
.action-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ── Fields grid ─────────────────────────── */
.fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.field-card {
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.field-card.status-ready    { border-color: #b7e4c7; background: #f6fef9; }
.field-card.status-growing  { border-color: #74c69d; }
.field-card.status-sown     { border-color: #ffe066; }
.field-card.status-plowed   { border-color: #c9a96e; background: #fdf8f0; }
.field-card.status-harvested{ border-color: var(--border); }

.field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}
.field-name { font-weight: 700; cursor: pointer; }
.field-rename-wrap { display: contents; }
.field-rename-wrap summary { font-weight: 700; list-style: none; cursor: pointer; }
.field-rename-wrap summary::-webkit-details-marker { display: none; }
.field-rename-form {
  display: flex;
  gap: .35rem;
  align-items: center;
  margin-top: .25rem;
  flex-basis: 100%;
  order: 10;
}
.field-rename-form input { flex: 1; }
.field-size { font-size: .82rem; color: var(--muted); }
.field-crop { font-size: .9rem; color: var(--green-dark); }

/* ── Soil quality bar ────────────────────── */
.soil-quality-wrap { margin: .3rem 0 .2rem; }
.soil-quality-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .2rem;
}
.soil-label { font-size: .78rem; font-weight: 600; color: var(--muted); }
.soil-label-warn { color: #e74c3c; }
.soil-yield-impact { font-size: .72rem; font-weight: 400; opacity: .75; margin-left: .3rem; }
.last-crop-tag { font-size: .75rem; color: var(--muted); font-style: italic; }
.field-history { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-top: .2rem; }
.field-history-chip {
  font-size: .68rem;
  background: var(--border, #e0e0e0);
  border-radius: 3px;
  padding: .1rem .3rem;
  color: var(--muted, #888);
}
.soil-bar-bg {
  height: 6px;
  background: #e8e8e8;
  border-radius: 3px;
  overflow: hidden;
  cursor: help;
}
.soil-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s;
}
.soil-good { background: var(--green-mid); }
.soil-fair { background: #f0a500; }
.soil-poor { background: #e74c3c; }
.soil-warning {
  font-size: .72rem;
  color: #c0392b;
  margin-top: .2rem;
  line-height: 1.3;
}
.soil-info-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid #8b6914;
  border-radius: 6px;
  padding: .5rem .75rem;
  margin-bottom: 1rem;
  font-size: .85rem;
}
.soil-info-panel summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  user-select: none;
}
.soil-info-panel summary::-webkit-details-marker { display: none; }
.soil-info-summary-hint { font-weight: 400; font-size: .8rem; color: var(--muted); }
.soil-info-body { margin-top: .6rem; }
.soil-info-body p { margin: 0 0 .5rem; color: var(--muted); }
.soil-info-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.soil-info-table th { text-align: left; padding: .25rem .4rem; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); }
.soil-info-table td { padding: .25rem .4rem; border-bottom: 1px solid var(--border); }
.soil-info-table tr:last-child td { border-bottom: none; }
.soil-gain { color: #27ae60; font-weight: 700; white-space: nowrap; }
.soil-loss { color: #e53e3e; font-weight: 700; white-space: nowrap; }

/* ── Rotation hints ──────────────────────── */
.rotation-hint { font-size: .78rem; margin: .2rem 0; }
.rotation-good { color: var(--green-dark); font-weight: 600; }
.rotation-mono { color: #c53030; font-weight: 600; }

.progress-wrap {
  background: #e8e8e8;
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--green-light), var(--green-mid));
  border-radius: 4px;
  transition: width .4s;
}
.progress-label { font-size: .78rem; color: var(--muted); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.progress-time { color: var(--accent, #7cb87c); font-weight: 600; }

.field-actions form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.field-actions .sow-form { flex-direction: column; align-items: stretch; }
.field-actions .sow-form select { width: 100%; }
.field-actions .sow-form .btn { align-self: flex-start; }
.field-hint { font-size: .8rem; color: var(--muted); font-style: italic; }
.fertilized-note { color: var(--green-dark); font-style: normal; font-weight: 600; }

/* ── Field step indicator ────────────────── */
.field-steps {
  display: flex;
  align-items: center;
  gap: .2rem;
  margin-top: .35rem;
  padding-top: .5rem;
  border-top: 1px solid #f0f0f0;
  font-size: .75rem;
}
.step-dot {
  background: #e8e8e8;
  color: var(--muted);
  border-radius: 6px;
  padding: .15rem .35rem;
  font-weight: 600;
  white-space: nowrap;
}
.step-dot.active { background: var(--green-pale); color: var(--green-dark); }
.step-dot.done   { background: #d1fae5; color: #065f46; }
.step-sep        { color: #ccc; }

/* ── Equipment status bar (fields page) ─── */
.equip-status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .65rem;
  background: #f8f8f8;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .55rem .9rem;
  margin-bottom: 1rem;
  font-size: .85rem;
}
.equip-status-label { font-weight: 700; color: var(--muted); }
.equip-chip {
  padding: .2rem .55rem;
  border-radius: 20px;
  font-size: .82rem;
  font-weight: 600;
}
.equip-chip.have { background: #d1fae5; color: #065f46; }
.equip-chip.need { background: #fee2e2; color: #991b1b; }
.equip-optional  { font-weight: 400; color: var(--muted); font-size: .78rem; }
.equip-buy-link  { margin-left: auto; }

/* ── Action blocked (missing equipment) ──── */
.action-blocked {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: var(--muted);
  background: #fff8f8;
  border: 1px dashed #f8b4b4;
  border-radius: 7px;
  padding: .35rem .6rem;
}
.missing-equip {
  background: #fee2e2;
  color: #991b1b;
  border-radius: 4px;
  padding: .1rem .35rem;
  font-size: .78rem;
  font-weight: 600;
}

/* ── Buttons: plow, fertilize ────────────── */
.btn-plow {
  background: #8b6914;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .45rem 1rem;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-plow:hover { background: #6d530f; }

.btn-fert {
  background: #1a6b8a;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .45rem 1rem;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-fert:hover { background: #145470; }

/* ── Badge: fertilized ───────────────────── */
.badge-fertilized { background: #bfdbfe; color: #1e40af; }
.badge-precision  { background: #e9d5ff; color: #6b21a8; }
.badge-plowed     { background: #fde68a; color: #92400e; }

/* ── Tabs ────────────────────────────────── */
.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--border);
  padding-bottom: .5rem;
}
.tab-btn {
  padding: .45rem 1.1rem;
  border: none;
  background: none;
  border-radius: 8px 8px 0 0;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  transition: background .15s, color .15s;
}
.tab-btn.active { background: var(--green-pale); color: var(--green-dark); }
.tab-btn:hover  { background: #f0f0f0; }

/* ── Market grid ─────────────────────────── */
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.market-card {
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  transition: box-shadow .2s;
  min-width: 0;
}
.market-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.market-card.owned { border-color: var(--green-light); background: #f6fdf9; }
.market-card--locked { opacity: .72; filter: saturate(.5); pointer-events: none; }
.market-card--locked .btn { pointer-events: all; }
.market-badge-rare { display:inline-block; font-size:.72rem; font-weight:700; background:linear-gradient(135deg,#7c3aed,#a78bfa); color:#fff; border-radius:.4rem; padding:.1rem .45rem; margin-bottom:.2rem; }
.market-icon { font-size: 2.2rem; }
.market-name { font-weight: 700; font-size: 1rem; }
.market-stats { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: #555; }
/* Buy form: input+button on one row, cost-preview & gender-radio on their own rows */
.market-buy-form {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  margin-top: auto;
}
.market-buy-form .gender-radio   { flex-basis: 100%; order: -1; margin-bottom: .1rem; }
.market-buy-form .input-unit-wrap { order: 0; flex-shrink: 0; }
.market-buy-form .buy-btn        { order: 1; flex-shrink: 0; }
.market-buy-form .cost-preview   { order: 2; flex-basis: 100%; margin: 0; }
.input-unit-wrap { display: inline-flex; align-items: center; gap: 0; }
.input-unit-wrap .qty-input { border-radius: 6px 0 0 6px !important; width: 70px !important; }
.input-unit {
  display: inline-flex; align-items: center;
  padding: 0 .5rem;
  background: #f0f0f0; color: #666;
  border: 1px solid #c8c8c8; border-left: none;
  border-radius: 0 6px 6px 0;
  font-size: .82rem; white-space: nowrap;
  align-self: stretch;
}
.owned-label { font-size: .85rem; color: var(--green-dark); font-weight: 600; margin-top: auto; }
.equip-bonus-tag   { color: #166534; background: #dcfce7; border-radius: 4px; padding: .1rem .4rem; font-weight: 600; font-size: .8rem; display: inline-block; margin-top: .1rem; }
.equip-neutral-tag { color: #92400e; background: #fef3c7; border-radius: 4px; padding: .1rem .4rem; font-size: .8rem; display: inline-block; margin-top: .1rem; }

/* ── Livestock page ──────────────────────── */
.collect-bar {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.livestock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: 1rem;
}
.livestock-card {
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  min-width: 0;
  overflow: hidden;
}
.lv-header { display: flex; align-items: flex-start; gap: .75rem; }
.lv-icon   { font-size: 2.5rem; flex-shrink: 0; line-height: 1; }
.lv-body   { min-width: 0; overflow-wrap: break-word; word-break: break-word; display: flex; flex-direction: column; gap: .45rem; }
.lv-name   { font-weight: 700; font-size: 1.05rem; }
.lv-building-tag { font-size: .75rem; font-weight: 400; color: var(--muted); margin-left: .35rem; }
.lv-count { color: var(--green-dark); font-size: .9rem; }
.lv-stats { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: #555; margin-top: .3rem; word-break: break-word; overflow-wrap: break-word; }
.lv-daily { font-size: .85rem; margin-top: .35rem; }

/* ── Seasons ─────────────────────────────── */
.season-banner {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  border-radius: 8px;
  font-size: .92rem;
  font-weight: 600;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.season-icon   { font-size: 1.3rem; }
.season-name   { font-weight: 700; }
.season-day    { opacity: .8; }
.season-left   { font-weight: 400; }

.season-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .75rem;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 600;
}

/* Game-day countdown */
.day-clock {
  display: inline-flex;
  align-items: center;
  padding: .3rem .75rem;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 600;
  background: #f0fdf4;
  color: #065f46;
  border: 1px solid #6ee7b7;
  font-variant-numeric: tabular-nums;
}
.day-clock-soon {
  background: #fffbeb;
  color: #92400e;
  border-color: #fcd34d;
}

/* Per-season colour themes */
.season-spring, .season-banner.season-spring { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
.season-summer, .season-banner.season-summer { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }
.season-autumn, .season-banner.season-autumn { background: #fff7ed; color: #9a3412; border: 1px solid #fdba74; }
.season-winter, .season-banner.season-winter { background: #eff6ff; color: #1e40af; border: 1px solid #93c5fd; }

/* ── Season weather forecast bar (dashboard) ─────────────────── */
.forecast-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .7rem 1.1rem;
  border-radius: 8px;
  margin-bottom: 1.25rem;
  border: 1px solid transparent;
}
.forecast-bar.forecast-excellent { background: #fef9c3; border-color: #facc15; }
.forecast-bar.forecast-good      { background: #f0fdf4; border-color: #86efac; }
.forecast-bar.forecast-average   { background: #f8fafc; border-color: #cbd5e1; }
.forecast-bar.forecast-poor      { background: #fff7ed; border-color: #fdba74; }
.forecast-bar.forecast-bad       { background: #fef2f2; border-color: #fca5a5; }

.forecast-current { display: flex; align-items: center; gap: .65rem; }
.forecast-icon    { font-size: 1.8rem; line-height: 1; }
.forecast-title   { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.forecast-desc    { font-size: .82rem; color: var(--muted); margin-top: .1rem; }

.forecast-next { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--muted); border-left: 1px solid #e2e8f0; padding-left: .9rem; }
.forecast-next-label  { font-weight: 600; }
.forecast-next-icon   { font-size: 1.1rem; }
.forecast-next-quality { font-weight: 600; }

.forecast-modifier         { font-size: .82rem; font-weight: 700; padding: .05rem .3rem; border-radius: 4px; }
.mod-positive { background: #dcfce7; color: #15803d; }
.mod-neutral  { background: #f1f5f9; color: #64748b; }
.mod-negative { background: #fee2e2; color: #dc2626; }

/* ── Season modifier chips ── */
.season-mods { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.smod { font-size: .75rem; font-weight: 600; padding: .1rem .4rem; border-radius: 4px; }
.smod-pos { background: #dcfce7; color: #15803d; }
.smod-neg { background: #fee2e2; color: #dc2626; }

/* ── Season weather chip (inside season banner on fields page) ── */
.season-weather-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .5rem; border-radius: 12px; font-size: .8rem; font-weight: 600;
  background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.1);
}
.forecast-chip-next { opacity: .85; font-weight: 400; }

/* ── Weather badge on field cards ───────────────────────────────── */
.badge-weather-excellent { background: #fef08a; color: #713f12; }
.badge-weather-good      { background: #bbf7d0; color: #14532d; }
.badge-weather-average   { background: #e2e8f0; color: #475569; }
.badge-weather-poor      { background: #fed7aa; color: #7c2d12; }
.badge-weather-bad       { background: #fecaca; color: #7f1d1d; }

.season-tag { font-size: .78rem; font-weight: 600; margin: .2rem 0 .3rem; }
.season-tag.in-season     { color: #065f46; }
.season-tag.out-of-season { color: #9a3412; }
.card-out-of-season       { opacity: .7; }

/* ── Info / empty states ─────────────────── */
.info-box {
  background: #dff0ff;
  border-radius: 9px;
  padding: 1rem 1.2rem;
  font-size: .88rem;
  color: #1a5f7a;
  margin-top: 1.25rem;
}
.empty-state {
  text-align: center;
  color: #bbb;
  padding: 1rem 0;
  font-size: .9rem;
}
.empty-page {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
}
.empty-page p { margin-bottom: .75rem; }

/* ── Grid helpers ────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* ── Onboarding banner ───────────────────── */
.onboarding-banner {
  background: linear-gradient(135deg, #fff9e6 0%, #fffbe8 100%);
  border: 2px solid #f4d03f;
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.5rem;
}
.onboarding-title { font-size: 1.15rem; font-weight: 700; color: var(--brown); margin-bottom: .5rem; }
.onboarding-steps { padding-left: 1.4rem; display: flex; flex-direction: column; gap: .35rem; font-size: .92rem; }

/* ── Game alerts ─────────────────────────── */
.game-alert {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.1rem;
  border-radius: 9px;
  margin-bottom: .75rem;
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  transition: opacity .15s;
}
.game-alert:hover { opacity: .85; }
.game-alert-harvest { background: #b7e4c7; color: #1b4332; }
.game-alert-collect { background: #fff3cd; color: var(--brown); }

/* ── Dashboard status widgets ────────────── */
.dash-status-row {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.dash-status-widget {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  flex: 1;
  min-width: 200px;
  padding: .6rem .9rem;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s;
}
.dash-status-widget:hover { box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.dash-sw-icon { font-size: 1.5rem; flex-shrink: 0; }
.dash-sw-title { font-weight: 700; font-size: .85rem; margin-bottom: .1rem; }
.dash-sw-body  { font-size: .8rem; color: var(--muted); }
.dash-status-danger   { background: #fee2e2; border: 1px solid #fca5a5; }
.dash-status-contract { background: #f0fdf4; border: 1px solid #86efac; }
.dash-status-employee { background: #eff6ff; border: 1px solid #93c5fd; }

/* ── Bonus banner ────────────────────────── */
.bonus-banner {
  background: #e8f4fd;
  border: 1.5px solid #aed6f1;
  border-radius: 8px;
  padding: .6rem 1rem;
  font-size: .88rem;
  color: #1a5f7a;
  margin-bottom: 1rem;
}

/* ── Section title link ──────────────────── */
.section-title { display: flex; justify-content: space-between; align-items: center; }
.section-link  { font-size: .8rem; font-weight: 400; color: var(--green-mid); text-decoration: none; }
.section-link:hover { text-decoration: underline; }

/* ── Pending badge on collect button ─────── */
.pending-badge {
  background: rgba(0,0,0,.15);
  border-radius: 10px;
  padding: .1rem .45rem;
  font-size: .78rem;
}

/* ── Per-herd action area ────────────────── */
.lv-actions    { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.lv-sell-form  { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.lv-action-btn { white-space: nowrap; }
/* legacy */
.sell-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .5rem; }
.btn-danger       { background: #e74c3c; color: #fff; }
.btn-danger:hover { background: #c0392b; }

/* ── Owned count in market ───────────────── */
.owned-count {
  font-size: .78rem;
  color: var(--green-dark);
  font-weight: 600;
  background: var(--green-pale);
  padding: .15rem .5rem;
  border-radius: 8px;
  display: inline-block;
}

/* ── Feed silo capacity bar ─────────────── */
.feed-silo-bar-wrap {
  width: 100%;
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin: .4rem 0 .15rem;
}
.feed-silo-bar {
  height: 100%;
  border-radius: 4px;
  background: var(--green-light);
  transition: width .3s;
  min-width: 2px;
}
.feed-silo-bar.feed-silo-mid  { background: #f0a500; }
.feed-silo-bar.feed-silo-full { background: var(--red); }
.feed-silo-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .78rem;
  margin-bottom: .35rem;
  color: #555;
}
.feed-silo-full-tag {
  font-size: .72rem;
  font-weight: 700;
  color: var(--red);
}
.feed-no-silo-hint {
  font-size: .78rem;
  color: #888;
  background: #f5f5f5;
  border-radius: 6px;
  padding: .25rem .5rem;
  margin-bottom: .35rem;
}

/* ── Leaderboard table ───────────────────── */
.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.lb-table th {
  text-align: left;
  padding: .6rem .8rem;
  border-bottom: 2px solid var(--border);
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.lb-table td { padding: .6rem .8rem; border-bottom: 1px solid #f0f0f0; }
.lb-table tr:last-child td { border-bottom: none; }
.lb-table tr.lb-mine td { background: #f6fdf9; font-weight: 600; }
.lb-rank    { font-size: 1.1rem; width: 3rem; }
.lb-name    { font-weight: 600; }
.lb-user    { color: var(--muted); font-size: .85rem; }
.lb-balance { color: var(--green-dark); font-weight: 700; }
.lb-land    { color: var(--muted); font-size: .85rem; }

/* ── Transaction table ───────────────────── */
.tx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.tx-table th {
  text-align: left;
  padding: .55rem .75rem;
  border-bottom: 2px solid var(--border);
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.tx-table td    { padding: .55rem .75rem; border-bottom: 1px solid #f0f0f0; }
.tx-table tr:last-child td { border-bottom: none; }
.tx-date { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.tx-desc { max-width: 400px; }

/* ── Pagination ──────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: 1rem;
}
.page-info { font-size: .88rem; color: var(--muted); }

/* ── Tutorial widget ─────────────────────── */
.tutorial-widget {
  background: #fffbea;
  border: 1.5px solid #f4c842;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.tutorial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .6rem;
}
.tutorial-title { font-weight: 700; font-size: 1rem; }
.tutorial-skip {
  background: none;
  border: none;
  color: var(--muted);
  font-size: .82rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.tutorial-skip:hover { color: var(--text); }
.tutorial-progress-bar {
  height: 6px;
  background: #e8e4d0;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: .65rem;
}
.tutorial-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-mid), var(--green-light));
  border-radius: 3px;
  transition: width .4s ease;
}
.tutorial-steps-row {
  display: flex;
  gap: .4rem;
  margin-bottom: .75rem;
}
.tutorial-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e8e4d0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tutorial-step-dot.done { background: var(--green-light); color: var(--green-dark); }
.tutorial-step-dot.active { background: var(--green-mid); color: #fff; box-shadow: 0 0 0 3px rgba(64,145,108,.25); }
.tutorial-task { font-size: .93rem; }

/* ── Tutorial contextual hint ────────────── */
.tutorial-hint {
  background: #eaf7f0;
  border-left: 4px solid var(--green-mid);
  border-radius: 0 8px 8px 0;
  padding: .7rem 1rem;
  margin-bottom: 1rem;
  font-size: .9rem;
}

/* ── Market cost preview ─────────────────── */
.cost-preview {
  font-size: .85rem;
  color: var(--muted);
  margin: .3rem 0 .25rem;
}
.cost-preview.cost-over { color: var(--red); font-weight: 600; }

/* ── Storage page ────────────────────────── */
.storage-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
  padding: .7rem 1rem;
}
.storage-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 .5rem;
}
.storage-section-header .section-title { margin: 0; }
.storage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.storage-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.storage-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}
.storage-item-name { font-size: .95rem; }
.storage-item-qty  { font-size: .9rem; color: var(--muted); white-space: nowrap; }
.storage-card-price {
  font-size: .85rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
}
.storage-est-value {
  margin-left: auto;
  font-weight: 700;
  color: var(--green-dark);
  white-space: nowrap;
}
.storage-sell-form {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: .15rem;
}
.storage-qty-input { width: 90px; flex-shrink: 0; }

/* ── Storage sell value preview ──────────── */
.sell-value-preview {
  font-size: .85rem;
  color: var(--green-dark);
  font-weight: 600;
  min-width: 70px;
}

/* ── Storage table (reuses tx-table styles) ─ */
.storage-empty {
  text-align: center;
  padding: 2rem;
  color: var(--muted);
}

/* ── Price direction ─────────────────────── */
.price-direction { font-weight: 700; font-size: 1rem; }
.price-up   { color: #27ae60; }
.price-down { color: var(--red); }
.price-stable { color: var(--muted); }

/* ── Crop price panel ────────────────────── */
.price-panel {
  background: var(--card-bg);
  border: 1px solid var(--green-pale);
  border-radius: 10px;
  margin-bottom: 1rem;
  font-size: .88rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  overflow: hidden;
}
.price-panel-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: linear-gradient(135deg, #f0faf4 0%, #e8f5e9 100%);
  border: none;
  padding: .65rem 1.1rem;
  font-weight: 700;
  color: var(--green-dark);
  font-size: .92rem;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.price-panel-toggle:hover { background: linear-gradient(135deg, #e2f5e8 0%, #daf0dc 100%); }
.price-panel-toggle::after {
  content: '▾';
  margin-left: auto;
  font-size: .85rem;
  color: var(--green-mid);
  transition: transform .2s;
}
.price-panel-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.price-panel-toggle-hint { font-weight: 400; color: var(--muted); font-size: .78rem; }
.price-panel-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  border-top: 1px solid var(--green-pale);
}
.price-group {
  padding: .8rem 1rem;
  border-right: 1px solid #eef7f0;
  border-bottom: 1px solid #eef7f0;
}
.price-group:last-child { border-right: none; }
.price-group-header {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--green-mid);
  margin-bottom: .45rem;
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--green-pale);
}
.price-group-rows { display: flex; flex-direction: column; gap: .18rem; }
.price-row {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .82rem;
  padding: .1rem .2rem;
  border-radius: 4px;
  transition: background .1s;
  min-width: 0;
}
.price-row:hover { background: #f5fbf6; }
.price-row-name { flex: 1; color: #333; }
.price-row-val  { font-weight: 700; color: var(--green-dark); font-variant-numeric: tabular-nums; min-width: 4.5rem; text-align: right; }
.price-sparkline { display: inline-block; vertical-align: middle; opacity: .75; flex-shrink: 0; }

/* ── Market forecast pill ────────────────── */
.market-forecast-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.forecast-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .75rem;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.forecast-pill.forecast-excellent { background: #fef9c3; border-color: #facc15; color: #713f12; }
.forecast-pill.forecast-good      { background: #f0fdf4; border-color: #86efac; color: #14532d; }
.forecast-pill.forecast-average   { background: #f8fafc; border-color: #cbd5e1; color: #475569; }
.forecast-pill.forecast-poor      { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.forecast-pill.forecast-bad       { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.forecast-next-pill { font-size: .82rem; color: var(--muted); }
.forecast-mod.mod-up   { color: #27ae60; font-weight: 700; }
.forecast-mod.mod-down { color: var(--red); font-weight: 700; }

/* ── Season progress bar (dashboard forecast) */
.season-progress-wrap { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }
.season-progress-bar  { flex: 1; max-width: 160px; height: 6px; background: rgba(0,0,0,.1); border-radius: 3px; overflow: hidden; }
.season-progress-fill { height: 100%; background: var(--green-dark); border-radius: 3px; transition: width .3s; }
.season-progress-label { font-size: .78rem; color: var(--muted); white-space: nowrap; }

/* ── Achievements page ───────────────────── */
.ach-progress-bar-wrap {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.ach-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--green-mid), var(--green-light));
  border-radius: 4px;
  transition: width .4s ease;
}
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .85rem;
}
.ach-card {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: .9rem 1rem;
  transition: box-shadow .15s;
}
.ach-card.earned {
  border-color: #f4c842;
  background: #fffdf0;
  box-shadow: 0 2px 8px rgba(244,200,66,.18);
}
.ach-card.locked { opacity: .65; }
.ach-icon { font-size: 1.8rem; flex-shrink: 0; }
.ach-name { font-weight: 700; font-size: .95rem; }
.ach-desc { font-size: .82rem; color: var(--muted); margin-top: .15rem; }
.ach-track-bar-bg {
  height: 5px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
  margin-top: .4rem;
}
.ach-track-bar-fill { height: 100%; background: var(--green-mid); border-radius: 3px; transition: width .3s; }
.ach-track-label { font-size: .72rem; color: var(--muted); margin-top: .15rem; }
.ach-card.reward-ready {
  border-color: #22c55e;
  background: #f0fdf4;
  box-shadow: 0 2px 10px rgba(34,197,94,.2);
}
.ach-card.reward-done { border-color: #a3e0b0; }
.ach-reward { margin-top: .5rem; }
.btn-reward {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: .35rem .85rem;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.btn-reward:hover { opacity: .88; transform: translateY(-1px); }
.ach-reward-claimed { font-size: .78rem; color: #16a34a; font-weight: 600; }

/* ── Stat card clickable link ────────────── */
.stat-card-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.stat-card-link:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }

/* ── Structure condition bar ─────────────── */
.struct-cond-bar-wrap {
  background: var(--border); border-radius: 4px; height: 8px;
  overflow: hidden; margin: .3rem 0;
}
.struct-cond-bar { height: 100%; border-radius: 4px; transition: width .4s; }
.struct-cond-bar.cond-good { background: var(--green-mid); }
.struct-cond-bar.cond-warn { background: var(--yellow); }
.struct-cond-bar.cond-bad  { background: var(--red); }
.struct-action-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.cond-good { color: var(--green-mid); }
.cond-warn { color: #c77800; }
.cond-bad  { color: var(--red); }
.struct-cond-label { font-size: .85rem; display: flex; align-items: center; gap: .4rem; }
.cond-val { font-size: .85rem; font-weight: 600; }

/* ── Structure rename ────────────────────── */
.rename-inline-form { display: flex; gap: .3rem; align-items: center; margin: .25rem 0 .4rem; }
.rename-input { flex: 1; font-size: .78rem; padding: .18rem .45rem; }
.rename-btn { flex-shrink: 0; padding: .18rem .45rem; font-size: .78rem; }

/* ── Structure cards ─────────────────────── */
.market-card.structure-broken { border-color: var(--red); background: #fff5f5; }
.market-card.structure-owned  { border-color: var(--green-mid); }
.structure-alert { background: #fee; color: var(--red); border-radius: 4px; padding: .3rem .5rem; font-size: .82rem; font-weight: 600; margin: .3rem 0; }
.lv-struct-bar-wrap { display: flex; align-items: center; gap: .4rem; margin: .3rem 0; }
.lv-struct-label { font-size: .8rem; white-space: nowrap; }
.lv-cond-val { font-size: .8rem; font-weight: 600; white-space: nowrap; }

/* ── Livestock alerts and feed status ────── */
.lv-alert { border-radius: 4px; padding: .25rem .5rem; font-size: .82rem; margin: .25rem 0; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; }
.lv-alert.danger  { background: #fee; color: var(--red); font-weight: 600; }
.lv-alert.warning { background: #fff3cd; color: #856404; }
.lv-feed-status { font-size: .82rem; margin: .25rem 0; display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.feed-ok   { color: var(--green-mid); }
.feed-warn { color: #c77800; }
.feed-low  { color: var(--red); font-weight: 600; }

/* ── Seed status in sow form ─────────────── */
.seed-status { font-size: .82rem; margin: .2rem 0; }
.seed-ok     { color: var(--green-mid); }
.seed-missing { color: var(--red); font-weight: 600; }

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  /* hide nav by default, show as absolute panel below header */
  .navbar nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--green-dark);
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    padding: .4rem .6rem .6rem;
    gap: .1rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
    z-index: 99;
    overflow-y: auto;
    max-height: calc(100vh - 48px);
  }
  .navbar nav.open { display: flex; }
  .navbar nav > a { width: 100%; padding: .5rem .75rem; font-size: .9rem; }
  /* dropdowns: button full width, menu static below it */
  .nav-dropdown { width: 100%; }
  .nav-dropdown-btn { width: 100%; padding: .5rem .75rem; font-size: .9rem; justify-content: space-between; }
  .nav-dropdown:hover > .nav-dropdown-menu { display: none; } /* no hover on mobile */
  .nav-dropdown.open  > .nav-dropdown-menu { display: flex; }
  .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 6px;
    background: rgba(0,0,0,.2);
    margin: .1rem 0 .15rem .6rem;
    padding: .2rem;
    min-width: 0;
    width: calc(100% - .6rem);
  }
  .nav-right { margin-left: 0; width: 100%; flex-direction: column; align-items: stretch; gap: .1rem; }
}

@media (max-width: 700px) {
  .grid-2   { grid-template-columns: 1fr; }
  .container { padding: 1rem .85rem; }
  .lb-user, .lb-land { display: none; }
  .tx-date { display: none; }
  .tutorial-steps-row { gap: .25rem; }
  .tutorial-step-dot { width: 22px; height: 22px; font-size: .7rem; }
  .ach-grid { grid-template-columns: 1fr; }
  .price-ticker { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .market-grid { grid-template-columns: 1fr; }
  .fields-grid { grid-template-columns: 1fr; }
  .livestock-grid { grid-template-columns: 1fr; }
  .storage-grid { grid-template-columns: 1fr; }
  .storage-section-header { flex-direction: column; align-items: flex-start; }
  .storage-qty-input { width: 100%; }
}

/* ── Livestock gender breakdown ──────────── */
.lv-population { display: flex; gap: .5rem; font-size: .85rem; margin: .25rem 0; flex-wrap: wrap; align-items: center; }
.lv-gender { padding: .15rem .35rem; border-radius: 3px; font-weight: 600; }
.lv-gender.male     { background: #dbeafe; color: #1e40af; }
.lv-gender.female   { background: #fce7f3; color: #9d174d; }
.lv-gender.immature { background: #fef9c3; color: #854d0e; }
.lv-capacity { padding: .15rem .35rem; border-radius: 3px; font-size: .82rem; font-weight: 600; background: rgba(255,255,255,.06); }
.lv-cap-warn { background: rgba(240,160,48,.18); color: #f0a030; }
.lv-cap-full { background: rgba(239,68,68,.18); color: #ef4444; }

/* ── Breeding status ─────────────────────── */
.lv-breed-status { font-size: .82rem; margin: .25rem 0; }
.breed-blocked  { color: var(--muted); font-style: italic; }
.breed-waiting  { color: #c77800; }
.breed-ready    { color: var(--green-mid); font-weight: 600; }

/* ── Slaughter forms ─────────────────────── */
.slaughter-forms { display: flex; flex-direction: column; gap: .35rem; margin-top: .4rem; }

/* ── Gender radio in market ──────────────── */
.gender-radio { display: flex; gap: .6rem; font-size: .8rem; margin-bottom: .3rem; flex-wrap: wrap; }

/* Danger card for overdue loans */
.danger-card { border-color: #dc3545 !important; background: #fff5f5; }
/* Progress bar for contracts */
.progress-bar-bg { background:#e9ecef; border-radius:4px; height:8px; overflow:hidden; }
.progress-bar-fill { height:100%; border-radius:4px; transition:width .3s; }
.progress-bar-fill.ready { background:#28a745; }
.progress-bar-fill.growing { background:#ffc107; }
.progress-bar-fill.sown { background:#17a2b8; }
.gender-radio label { display: flex; align-items: center; gap: .2rem; cursor: pointer; }

/* ── Genetics bar ────────────────────────── */
.lv-genetics-wrap {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: .3rem 0 .15rem;
  font-size: .82rem;
}
.lv-genetics-label { white-space: nowrap; color: var(--muted); }
.genetics-bar-bg {
  flex: 1;
  height: 6px;
  background: #e8e8e8;
  border-radius: 3px;
  overflow: hidden;
  min-width: 60px;
}
.genetics-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s;
}
.gen-low  { background: #e74c3c; }
.gen-mid  { background: #f0a500; }
.gen-high { background: #40916c; }
.genetics-mult { font-size: .78rem; font-weight: 700; white-space: nowrap; }
.gen-mult-pos { color: var(--green-mid); }
.gen-mult-neg { color: var(--red); }

/* ── Genetics stud panel ─────────────────── */
.genetics-studs-panel {
  margin: .35rem 0 .2rem;
  border: 1px solid #d4edda;
  border-radius: 8px;
  background: #f6fbf8;
  overflow: hidden;
}
.genetics-studs-toggle {
  cursor: pointer;
  padding: .35rem .7rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--green-dark);
  list-style: none;
  user-select: none;
}
.genetics-studs-toggle::-webkit-details-marker { display: none; }
.genetics-studs-toggle::before { content: '▶ '; font-size: .7rem; }
details[open] .genetics-studs-toggle::before { content: '▼ '; }
.genetics-studs-list { padding: .35rem .7rem .5rem; display: flex; flex-direction: column; gap: .3rem; }
.stud-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .82rem;
}
.stud-name  { flex: 1; min-width: 120px; }
.stud-boost { color: var(--green-dark); font-weight: 700; white-space: nowrap; }
.stud-price { color: var(--muted); white-space: nowrap; }
.btn-xs { padding: .15rem .5rem; font-size: .75rem; border-radius: 5px; }
.stud-form { margin: 0; }

/* ── Genetics overview (per-herd trait bars) ─────────────────────── */
.genetics-overview {
  margin: .4rem 0 .3rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.gen-trait-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
}
.gen-trait-label {
  width: 70px;
  white-space: nowrap;
  color: var(--muted);
  font-size: .78rem;
}
.gen-val {
  font-weight: 700;
  font-size: .8rem;
  min-width: 28px;
  text-align: right;
}

/* ── Genetics chip (per-animal cell) ─────────────────────── */
.gen-chip {
  display: inline-block;
  padding: .05rem .3rem;
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 700;
  min-width: 28px;
  text-align: center;
}
.gen-chip.gen-pos { background: #d1fae5; color: #065f46; }
.gen-chip.gen-neg { background: #fee2e2; color: #991b1b; }

/* ── Animal Roster panel ─────────────────────── */
.animal-roster-panel {
  margin: .4rem 0 .2rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
}
.animal-roster-toggle {
  cursor: pointer;
  padding: .35rem .7rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  user-select: none;
}
.animal-roster-toggle::-webkit-details-marker { display: none; }
.animal-roster-toggle::before { content: '▶ '; font-size: .7rem; color: var(--muted); }
details[open] .animal-roster-toggle::before { content: '▼ '; }
.animal-roster-body { padding: .3rem .5rem .5rem; overflow-x: auto; }

.animal-group-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: .5rem 0 .2rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.check-col { width: 24px; text-align: center; padding: .1rem .2rem !important; }
.animal-check, .select-all-check { cursor: pointer; accent-color: var(--green-dark, #3a7d44); }
.animal-table tr.sold-fade { opacity: 0; transition: opacity .3s; }

.btn-sell-sel {
  background: var(--orange, #e07b39);
  color: #fff;
  border: none;
  font-size: .72rem;
  padding: .2rem .55rem;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-sell-sel:hover { filter: brightness(1.1); }
.btn-sell-sel:disabled { opacity: .6; cursor: default; }

/* ── Toast notifications ─────────────────────────────────────────────────── */
.lv-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  background: #2d3748;
  color: #fff;
  padding: .6rem 1.1rem;
  border-radius: 8px;
  font-size: .85rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.lv-toast-show { opacity: 1; transform: translateY(0); }
.lv-toast-err  { background: #c53030; }

.animal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}
.animal-table th {
  text-align: left;
  padding: .2rem .3rem;
  border-bottom: 1px solid #e2e8f0;
  font-size: .75rem;
  color: var(--muted);
  white-space: nowrap;
}
.animal-table td {
  padding: .2rem .3rem;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.animal-table tr:last-child td { border-bottom: none; }
.animal-table tr:hover td { background: #f0f4f8; }

.animal-id { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.animal-rename-form { margin: 0; }
.animal-name-input {
  border: 1px solid transparent;
  background: transparent;
  font-size: .78rem;
  padding: .1rem .25rem;
  border-radius: 4px;
  width: 90px;
  color: var(--text);
  transition: border-color .15s, background .15s;
}
.animal-name-input:hover { border-color: var(--border); background: #f8f8f8; }
.animal-name-input:focus { border-color: var(--green-mid); background: #fff; outline: none; }
.animal-sire-cell { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.sire-tag {
  display: inline-block;
  background: #dbeafe;
  color: #1e40af;
  border-radius: 4px;
  padding: .05rem .3rem;
  font-size: .75rem;
  font-weight: 700;
}
.no-sire { color: var(--muted); font-size: .75rem; }
.sire-tag-auto { background: #f0fdf4; color: #166534; opacity: .8; }
.sire-auto-badge { font-weight: 400; font-size: .68rem; opacity: .75; }
.btn-clear-sire {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: .75rem;
  padding: .05rem .2rem;
  border-radius: 3px;
  line-height: 1;
}
.btn-clear-sire:hover { background: #fee2e2; color: #991b1b; }

/* ── Animal age display ───────────────────────────── */
.lv-age-warn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .6rem;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 600;
  margin: .35rem 0;
}
.age-warning  { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }
.age-critical { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

.age-cell { display: flex; align-items: center; gap: .3rem; }
.age-chip {
  display: inline-block;
  border-radius: 4px;
  padding: .05rem .3rem;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.age-chip-ok   { background: #d1fae5; color: #065f46; }
.age-chip-warn { background: #fef9c3; color: #854d0e; }
.age-chip-crit { background: #fee2e2; color: #991b1b; }

.age-bar-wrap {
  width: 36px;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.age-bar-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.age-bar-ok   { background: #34d399; }
.age-bar-warn { background: #f59e0b; }
.age-bar-crit { background: #ef4444; }

/* ── Selective Breeding panel ─────────────────────── */
.breeding-panel {
  margin: .4rem 0 .2rem;
  border: 1px solid #d4edda;
  border-radius: 8px;
  background: #f6fbf8;
  overflow: hidden;
}
.breeding-panel-toggle {
  cursor: pointer;
  padding: .35rem .7rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--green-dark);
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.breeding-panel-toggle::-webkit-details-marker { display: none; }
.breeding-panel-toggle::before { content: '▶ '; font-size: .7rem; }
details[open] .breeding-panel-toggle::before { content: '▼ '; }
.breeding-panel-body { padding: .35rem .7rem .5rem; }

.assignment-list { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .4rem; }
.assignment-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  font-size: .8rem;
  padding: .15rem .2rem;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #d4edda;
}
.asgn-pair { font-weight: 700; white-space: nowrap; }
.asgn-x { color: var(--muted); }
.asgn-gen { font-size: .75rem; color: var(--muted); flex: 1; white-space: nowrap; }

.auto-breed-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid #e2e8f0;
}
.auto-breed-toggle {
  padding: .25rem .65rem;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 700;
  border: 2px solid;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.auto-breed-toggle.auto-on  { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.auto-breed-toggle.auto-on:hover  { background: #a7f3d0; }
.auto-breed-toggle.auto-off { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; }
.auto-breed-toggle.auto-off:hover { background: #e2e8f0; }
.breeding-section-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: .35rem 0 .2rem;
}

.assign-form {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin-top: .3rem;
}
.assign-form select { font-size: .8rem; flex: 1; min-width: 120px; }
.assign-x { color: var(--muted); font-weight: 700; }

.breed-cooldown { font-size: .78rem; color: #c77800; }

/* ── Artificial Insemination ─────────────────────────── */
.ai-section { margin-top: .75rem; border-top: 1px solid var(--border); padding-top: .6rem; }
.ai-boost-tag { font-size: .72rem; color: #a78bfa; font-weight: 700; }
.ai-doses { font-size: .72rem; color: #34d399; font-weight: 600; }
.ai-doses-low { color: #f87171; }
.btn-ai {
  background: rgba(167,139,250,.15);
  color: #a78bfa;
  border: 1px solid #7c3aed;
  white-space: nowrap;
}
.btn-ai:hover:not(:disabled) { background: rgba(167,139,250,.3); }
.ai-assign-form { flex-wrap: wrap; }
.ai-stud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .5rem;
  margin-top: .4rem;
}
.ai-stud-card {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: .5rem .55rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  background: var(--card-bg);
}
.ai-stud-icon { font-size: 1.3rem; text-align: center; }
.ai-stud-name { font-weight: 700; font-size: .78rem; text-align: center; }
.ai-stud-boost { font-size: .75rem; color: #a78bfa; text-align: center; font-weight: 700; }
.ai-stud-price { font-size: .72rem; text-align: center; }
.ai-stud-stock { font-size: .72rem; text-align: center; }
.ai-buy-form { display: flex; gap: .3rem; align-items: center; justify-content: center; margin-top: .25rem; }
.ai-buy-qty { width: 44px; padding: .2rem .3rem; background: var(--input-bg,#fff); color: var(--text,#111); border: 1px solid var(--border); border-radius: 4px; font-size: .8rem; text-align: center; }

.hint-text { font-size: .78rem; color: var(--muted); margin: .25rem 0; }

/* ── Move animals panel ───────────────────────────────────────────────────── */
.move-panel-body { padding: .35rem .7rem .55rem; }
.move-form { display: flex; flex-direction: column; gap: .5rem; }
.move-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.move-label { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.move-counts { display: flex; flex-wrap: wrap; gap: .5rem; }
.move-count-field {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  background: rgba(0,0,0,.08);
  border-radius: 6px;
  padding: .2rem .5rem;
}
.move-count-field label { color: var(--muted); white-space: nowrap; }
.move-count-field .input-sm { width: 4rem; }
.move-max { font-size: .75rem; color: var(--muted); }

/* ── Activity feed (dashboard) ───────────────────────────────────────────── */
.activity-feed { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.activity-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .75rem; border-radius: 8px;
  background: #f8fafc; border-left: 4px solid #cbd5e0;
  font-size: .875rem;
}
.activity-item .activity-icon { font-size: 1.1rem; flex-shrink: 0; }
.activity-item .activity-msg  { flex: 1; }
.activity-harvest { border-left-color: #68d391; background: #f0fff4; }
.activity-collect { border-left-color: #63b3ed; background: #ebf8ff; }
.activity-info    { border-left-color: #63b3ed; background: #ebf8ff; }
.activity-warning { border-left-color: #f6ad55; background: #fffaf0; }
.activity-danger  { border-left-color: #fc8181; background: #fff5f5; }

/* ── Statistics page ──────────────────────────────────────────────────────── */
.stats-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 700px) { .stats-charts-grid { grid-template-columns: 1fr; } }
.stat-chart-card {
  background: #fff; border-radius: 10px; padding: 1rem 1.25rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.stat-chart-card h3 { margin: 0 0 .75rem; font-size: 1rem; }

/* ── Rotation preset ──────────────────────────────────────────────────────── */
.rotation-preset-row {
  display: flex; align-items: center; gap: .4rem;
  margin-top: .4rem; padding-top: .4rem;
  border-top: 1px solid #edf2f7; font-size: .78rem;
}
.rotation-label { color: var(--muted); white-space: nowrap; }
.rotation-form  { margin: 0; }
.rotation-select { font-size: .75rem; padding: .1rem .2rem; }

/* ══ Farm Map ═══════════════════════════════════════════════════════════════ */
.view-toggle { display:flex; gap:.35rem; }
.view-toggle-btn {
  padding:.3rem .8rem; border:1px solid #cbd5e0; border-radius:6px;
  background:#fff; color:var(--muted); font-size:.82rem;
  cursor:pointer; transition:background .15s, color .15s;
}
.view-toggle-btn.active {
  background:var(--green-dark,#3a7d44); color:#fff; border-color:transparent;
}

.farm-map-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap:.75rem;
  margin-bottom:1.5rem;
}

.map-tile {
  position:relative; display:flex; flex-direction:column; align-items:center;
  padding:.55rem .5rem .45rem; border-radius:12px; border:2px solid transparent;
  cursor:pointer; font-family:inherit; text-align:center; min-height:118px;
  transition:transform .14s, box-shadow .14s;
}
.map-tile:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,.18); }
.map-tile:focus-visible { outline:3px solid #fff; outline-offset:2px; }

/* Status colours */
.map-tile-fallow    { background:linear-gradient(135deg,#ede8df,#d5ccbf); color:#4a3728; }
.map-tile-plowed    { background:linear-gradient(135deg,#8b6355,#5d3e35); color:#fff; }
.map-tile-sown      { background:linear-gradient(135deg,#c8e6c9,#a5d6a7); color:#1b5e20; }
.map-tile-growing   { background:linear-gradient(135deg,#66bb6a,#388e3c); color:#fff; }
.map-tile-ready     {
  background:linear-gradient(135deg,#2e7d32,#1b5e20); color:#fff;
  animation:map-pulse 2s ease-in-out infinite;
}
.map-tile-harvested { background:linear-gradient(135deg,#fdd835,#f9a825); color:#3e2723; }

@keyframes map-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(46,125,50,.45); }
  50%      { box-shadow:0 0 0 9px rgba(46,125,50,0); }
}

.map-tile-header {
  display:flex; justify-content:space-between; width:100%;
  font-size:.66rem; opacity:.85; margin-bottom:.25rem;
}
.map-tile-ha { font-weight:700; }

.map-tile-center {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.1rem;
}
.map-tile-icon   { font-size:1.9rem; line-height:1; }
.map-tile-crop   { font-size:.68rem; font-weight:600; opacity:.9; }

.map-tile-name   {
  font-size:.72rem; font-weight:700; margin-top:.3rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.map-tile-status-label { font-size:.6rem; opacity:.7; margin-top:.08rem; }

.map-tile-progress {
  width:90%; height:4px; background:rgba(0,0,0,.2);
  border-radius:2px; margin-top:.3rem; overflow:hidden;
}
.map-tile-progress-fill {
  height:100%; background:rgba(255,255,255,.75);
  border-radius:2px; transition:width .5s;
}

/* ══ Field Detail Drawer ═════════════════════════════════════════════════════*/
.field-drawer-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.38);
  z-index:400; opacity:0; pointer-events:none;
  transition:opacity .24s;
}
.field-drawer-overlay.open { opacity:1; pointer-events:all; }

.field-drawer {
  position:fixed; top:0; right:0;
  height:100dvh; width:min(440px,100vw);
  background:#fff; z-index:401;
  box-shadow:-4px 0 28px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .27s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.field-drawer.open { transform:translateX(0); }

.field-drawer-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 1rem; border-bottom:1px solid #edf2f7;
  font-size:.95rem;
}
.field-drawer-close {
  border:none; background:none; font-size:1.1rem;
  cursor:pointer; color:var(--muted); padding:.2rem .45rem;
  border-radius:4px; line-height:1;
}
.field-drawer-close:hover { background:#f1f5f9; }

.field-drawer-body {
  flex:1; overflow-y:auto; padding:1rem;
}
/* Strip the card shadow/border inside drawer */
.field-drawer-body .field-card {
  box-shadow:none !important; border:none !important;
  padding:0 !important; margin:0 !important;
}

/* ── Trade Market ──────────────────────────────────────────────────────────── */
.trade-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
@media (max-width: 900px) {
  .trade-layout { grid-template-columns: 1fr; }
}

.trade-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
}
.trade-panel-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--accent);
}

/* Post form */
.trade-post-form { display: flex; flex-direction: column; gap: .6rem; }
.trade-label { font-size: .82rem; font-weight: 600; color: #555; }
.trade-select, .trade-input {
  width: 100%; padding: .45rem .6rem;
  border: 1px solid #cbd5e0; border-radius: 6px;
  font-size: .9rem; background: #f8fafc;
}
.trade-select:focus, .trade-input:focus {
  outline: none; border-color: var(--accent); background: #fff;
}
.trade-max-hint { font-size: .78rem; color: var(--muted); font-weight: 400; margin-left: .4rem; }
.trade-total-preview { font-size: .9rem; color: #555; }
.trade-post-btn { margin-top: .4rem; }

/* My listings */
.trade-mine-list { display: flex; flex-direction: column; gap: .5rem; }
.trade-mine-row {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .5rem .75rem;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 7px;
  font-size: .85rem;
}
.trade-icon { font-size: 1.3rem; }
.trade-mine-name { font-weight: 600; flex: 1; }
.trade-mine-qty { color: #555; }
.trade-mine-price { color: var(--accent); font-weight: 600; }
.trade-mine-total { color: #2d8a4e; font-weight: 700; }

/* Global marketplace */
.trade-market-section { margin-top: .5rem; }
.trade-section-title {
  font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; color: #2d3748;
}

.trade-filter-bar {
  display: flex; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.trade-search-input {
  flex: 1; min-width: 160px; padding: .45rem .75rem;
  border: 1px solid #cbd5e0; border-radius: 6px; font-size: .88rem;
}
.trade-filter-sel {
  padding: .45rem .6rem;
  border: 1px solid #cbd5e0; border-radius: 6px; font-size: .88rem;
  background: #f8fafc;
}

.trade-offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.trade-offer-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 1rem;
  display: flex; flex-direction: column; gap: .5rem;
  transition: box-shadow .15s;
}
.trade-offer-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.trade-offer-header { display: flex; align-items: center; gap: .5rem; }
.trade-offer-icon { font-size: 1.5rem; }
.trade-offer-name { font-weight: 700; font-size: .95rem; }
.trade-offer-seller { font-size: .78rem; color: var(--muted); }
.trade-seller-label { font-weight: 600; }
.trade-offer-details { display: flex; justify-content: space-between; font-size: .85rem; }
.trade-offer-qty { color: #4a5568; }
.trade-offer-unit-price { color: var(--accent); font-weight: 600; }
.trade-offer-total { font-size: .88rem; color: #2d3748; }
.trade-buy-btn { width: 100%; margin-top: auto; }

.trade-empty { color: var(--muted); font-style: italic; font-size: .9rem; padding: .5rem 0; }
.trade-empty-market { padding: 2rem 0; text-align: center; font-size: 1rem; }

/* NPC trade offers */
.trade-offer-npc { border-color: #c3dafe; background: #ebf4ff; }
.trade-npc-badge {
  margin-left: auto;
  font-size: .7rem; font-weight: 700;
  background: #4299e1; color: #fff;
  padding: .1rem .4rem; border-radius: 4px;
  white-space: nowrap;
}

/* ── Event threat panel ────────────────────────────────────────────────────── */
@keyframes threat-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .7; transform: scale(1.15); }
}
.event-threats-panel {
  border: 3px solid #e53e3e;
  border-radius: 10px;
  background: #fff5f5;
  margin-bottom: 1.5rem;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(229,62,62,.25);
}
.event-threats-header {
  background: #e53e3e;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  padding: .7rem 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.event-threat-pulse {
  display: inline-block;
  animation: threat-pulse 1.4s ease-in-out infinite;
  font-size: 1.2rem;
}
.event-threat-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid #fed7d7;
  flex-wrap: wrap;
}
.event-threat-row:last-child { border-bottom: none; }
.event-threat-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.event-threat-msg {
  flex: 1;
  min-width: 180px;
}
.event-threat-text {
  font-size: .95rem;
  font-weight: 600;
  color: #742a2a;
}
.event-threat-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .2rem;
}
.event-threat-timer {
  font-size: .82rem;
  color: #c53030;
  font-weight: 600;
}
.event-threat-cost {
  font-size: .82rem;
  color: #744210;
  font-weight: 600;
  background: #fefcbf;
  border-radius: 4px;
  padding: .05rem .35rem;
}
.event-threat-actions {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.event-mitigate-btn { white-space: nowrap; }
@media (max-width: 576px) {
  .event-threat-row { gap: .6rem; padding: .7rem .75rem; }
  .event-threat-actions { width: 100%; justify-content: flex-end; }
}

/* Event log badges */
.event-log-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: .1rem .45rem;
  border-radius: 4px;
  margin-right: .4rem;
}
.event-log-mitigated { background: #c6f6d5; color: #276749; }
.event-log-ignored   { background: #fed7d7; color: #9b2c2c; }

/* ── Contracts ─────────────────────────────────────────────────────────────── */
.contracts-section-title {
  font-size: 1.1rem; font-weight: 700; margin: 0 0 .85rem; color: #2d3748;
}
.contracts-count { font-size: .85rem; font-weight: 400; color: var(--muted); }

.contracts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.contract-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .6rem;
  transition: box-shadow .15s;
}
.contract-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.contract-active  { border-left: 4px solid var(--green); }
.contract-warning { border-left-color: #f6ad55; }
.contract-urgent  { border-left-color: #fc8181; background: #fff5f5; }
.contract-overdue { border-left-color: #e53e3e; background: #fff5f5; }
.contract-offer   { border-left: 4px solid #4299e1; }

.contract-header {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.contract-type-icon { font-size: 1.3rem; flex-shrink: 0; }
.contract-title     { font-weight: 700; font-size: .9rem; flex: 1; min-width: 0; }
.contract-desc      { font-size: .88rem; color: #4a5568; margin: 0; }

.contract-badge {
  font-size: .7rem; font-weight: 700; padding: .15rem .45rem;
  border-radius: 4px; white-space: nowrap; flex-shrink: 0;
}
.badge-bonus  { background: #fefcbf; color: #744210; border: 1px solid #f6e05e; }
.badge-overdue { background: #fed7d7; color: #9b2c2c; }

/* Progress row */
.contract-progress-row {
  display: flex; align-items: center; gap: .5rem; font-size: .82rem;
}
.contract-progress-label { white-space: nowrap; color: #555; }
.contract-progress-pct   { white-space: nowrap; color: #555; font-weight: 600; }

/* Reward / timer row */
.contract-reward-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; flex-wrap: wrap; gap: .3rem;
}
.reward-reduced  { color: #e53e3e; font-weight: 700; }
.reward-original { text-decoration: line-through; color: var(--muted); margin-left: .25rem; font-size: .78rem; }
.penalty-rate-label { color: #e53e3e; font-size: .75rem; margin-left: .2rem; }
.early-bonus-label  { color: #2d8a4e; font-size: .78rem; margin-left: .3rem; }

.contract-abandon-row {
  margin-top: .6rem; display: flex; justify-content: flex-end;
}
.contract-abandon-btn { font-size: .78rem; padding: .25rem .7rem; opacity: .75; }
.contract-abandon-btn:hover { opacity: 1; }

/* Countdown timer */
.contract-timer {
  font-size: .8rem; font-weight: 600;
  padding: .15rem .45rem; border-radius: 5px;
  background: #ebf8ff; color: #2b6cb0;
}
.timer-urgent  { background: #fff5f5; color: #c53030; }
.timer-overdue { background: #fed7d7; color: #9b2c2c; animation: pulse-red 1.5s ease-in-out infinite; }
.timer-normal  { background: #ebf8ff; color: #2b6cb0; }
@keyframes pulse-red {
  0%, 100% { opacity: 1; } 50% { opacity: .6; }
}

/* Multi-stage */
.contract-stages { display: flex; flex-direction: column; gap: .35rem; }
.contract-stage {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .4rem .6rem; border-radius: 6px; font-size: .82rem;
  border: 1px solid #e2e8f0;
}
.stage-done    { background: #f0fff4; border-color: #9ae6b4; }
.stage-active  { background: #ebf8ff; border-color: #90cdf4; }
.stage-pending { background: #f7fafc; color: #718096; }
.stage-num  { font-weight: 700; font-size: .75rem; }
.stage-desc { font-size: .83rem; }
.stage-reward { font-size: .75rem; color: #2d8a4e; font-weight: 600; }
.stage-progress-row {
  display: flex; align-items: center; gap: .3rem; font-size: .75rem; margin-top: .2rem;
}
.offer-stages .contract-stage { opacity: .8; }

/* Offer meta */
.contract-offer-meta {
  display: flex; flex-wrap: wrap; gap: .35rem .75rem; font-size: .82rem; color: #4a5568;
}
.penalty-note { color: #c05621; font-size: .78rem; }

/* History table */
.status-completed { color: #276749; font-weight: 600; }
.status-failed    { color: #9b2c2c; font-weight: 600; }

/* ── Foldable sections ──────────────────────────────── */
details.fold-section {
  border: 1px solid var(--border, #2d3d2d);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1rem;
}
details.fold-section > summary.fold-summary {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1rem;
  background: var(--card-bg, #1e2a1e);
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 1rem;
  user-select: none;
  transition: background .15s;
}
details.fold-section > summary.fold-summary::-webkit-details-marker { display: none; }
details.fold-section > summary.fold-summary::after {
  content: '▾';
  margin-left: auto;
  font-size: .85rem;
  color: var(--muted, #888);
  transition: transform .2s;
  flex-shrink: 0;
}
details.fold-section:not([open]) > summary.fold-summary::after {
  transform: rotate(-90deg);
}
details.fold-section > summary.fold-summary:hover {
  background: rgba(124,184,124,.09);
}
.fold-body {
  padding: 1rem;
}
.fold-badge {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  background: rgba(124,184,124,.14);
  color: var(--accent, #7cb87c);
  border-radius: 10px;
  padding: .1rem .5rem;
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.fold-badge.badge-complete { background: rgba(76,175,80,.2);  color: #4caf50; }
.fold-badge.badge-active   { background: rgba(240,160,48,.18); color: #f0a030; }
.fold-badge.badge-warn     { background: rgba(239,68,68,.18);  color: #ef4444; }
@media (max-width: 600px) {
  details.fold-section > summary.fold-summary { font-size: .93rem; padding: .55rem .75rem; }
  .fold-body { padding: .75rem .5rem; }
}

/* ── Farm Journal ─────────────────────────────────────────────────────────── */
.journal-page { max-width: 860px; margin: 0 auto; padding: 1rem; }
.journal-page h1 { font-size: 1.5rem; margin-bottom: 1rem; }
.journal-period { font-size: 1rem; font-weight: 400; color: #6b7280; }
.journal-empty { color: #6b7280; font-style: italic; }

.journal-summary { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.jscard { flex: 1 1 140px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: .75rem 1rem; text-align: center; }
.jscard-label { font-size: .75rem; color: #6b7280; margin-bottom: .25rem; }
.jscard-value { font-size: 1.25rem; font-weight: 700; }
.jscard-income .jscard-value { color: #15803d; }
.jscard-expense .jscard-value { color: #dc2626; }
.jscard-pos .jscard-value { color: #15803d; }
.jscard-neg .jscard-value { color: #dc2626; }

.journal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem; }
@media (max-width: 600px) { .journal-cols { grid-template-columns: 1fr; } }

.journal-section { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; }
.journal-section h2 { font-size: 1rem; margin: 0 0 .75rem; }

.journal-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.journal-table tr + tr td { border-top: 1px solid #f3f4f6; }
.jt-icon { width: 2rem; font-size: 1.1rem; padding: .3rem 0; }
.jt-label { padding: .3rem .5rem; color: #374151; }
.jt-amount { text-align: right; font-weight: 600; white-space: nowrap; padding: .3rem 0; }
.jt-amount.income { color: #15803d; }
.jt-amount.expense { color: #dc2626; }
.jt-total td { border-top: 2px solid #e5e7eb !important; font-weight: 700; padding-top: .5rem; }

.journal-events { grid-column: 1 / -1; }
.journal-event-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.jev { display: flex; align-items: flex-start; gap: .5rem; padding: .5rem .75rem; border-radius: 6px; background: #f9fafb; border-left: 3px solid #e5e7eb; font-size: .875rem; }
.jev-animal_death { border-left-color: #9ca3af; }
.jev-drought { border-left-color: #f59e0b; background: #fffbeb; }
.jev-good_rain { border-left-color: #3b82f6; background: #eff6ff; }
.jev-hail { border-left-color: #6366f1; background: #eef2ff; }
.jev-pest_attack { border-left-color: #ef4444; background: #fef2f2; }
.jev-subsidy { border-left-color: #10b981; background: #ecfdf5; }
.jev-equipment_fail { border-left-color: #f97316; background: #fff7ed; }
.jev-icon { font-size: 1.2rem; line-height: 1.4; }
.jev-label { font-weight: 600; }
.jev-count { font-weight: 400; color: #6b7280; }
.jev-msg { color: #4b5563; margin-left: .25rem; }
.jev-msgs { margin: .25rem 0 0 1rem; padding: 0; color: #4b5563; }

/* ── Cooperative ──────────────────────────────────────────────────────────── */
.coop-section { margin-bottom: 2.5rem; }
.coop-section-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 1rem; color: var(--text); }

/* Partnership cards (active) */
.coop-partnership-list { display: flex; flex-direction: column; gap: .9rem; }
.coop-pcard {
  background: var(--card-bg); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 1rem 1.1rem; transition: border-color .2s;
}
.coop-pcard--ready  { border-color: #16a34a; }
.coop-pcard--suspended { border-color: #f59e0b; opacity: .85; }
.coop-pcard-header  { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .7rem; }
.coop-pcard-icon    { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
.coop-pcard-title   { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.coop-pcard-price   { text-align: right; }
.coop-premium       { font-weight: 800; color: #16a34a; font-size: 1.05rem; }
.coop-premium-max   { font-weight: 700; color: #059669; }
.coop-price-val     { font-size: .82rem; color: var(--muted); display: block; }
.coop-pcard-body    { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: .5rem .8rem; margin-bottom: .7rem; }
.coop-pcard-stat    { font-size: .83rem; }
.coop-stat-label    { color: var(--muted); display: block; font-size: .75rem; }
.coop-stat-val      { font-weight: 600; }
.coop-stat--ok      { color: #16a34a; }
.coop-stat--low     { color: #ef4444; }
.coop-badge         { font-size: .72rem; padding: .1rem .4rem; border-radius: 4px; font-weight: 600; }
.coop-badge--suspended { background: #fef3c7; color: #92400e; }
.coop-cat-badge     { font-size: .72rem; color: var(--muted); background: var(--border); padding: .1rem .4rem; border-radius: 4px; }

.coop-streak-bar-wrap {
  background: var(--border); border-radius: 4px; height: 5px;
  margin: .4rem 0; position: relative; overflow: hidden;
}
.coop-streak-bar    { height: 100%; background: linear-gradient(90deg,#16a34a,#10b981); border-radius: 4px; transition: width .4s; }
.coop-streak-hint   { font-size: .7rem; color: var(--muted); }

.coop-pcard-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }

/* Buyer catalog cards */
.coop-category-group { margin-bottom: 1.8rem; }
.coop-cat-title { font-size: .95rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .7rem; }
.coop-buyer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .9rem;
}
.coop-bcard {
  background: var(--card-bg); border: 1.5px solid var(--border);
  border-radius: 10px; padding: .9rem 1rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.coop-bcard--locked { opacity: .6; }
.coop-bcard-top     { display: flex; gap: .7rem; align-items: flex-start; }
.coop-bcard-icon    { font-size: 1.6rem; flex-shrink: 0; }
.coop-bcard-name    { font-weight: 700; font-size: .95rem; }
.coop-bcard-desc    { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.coop-bcard-details { display: flex; flex-direction: column; gap: .3rem; }
.coop-detail-row    { display: flex; justify-content: space-between; font-size: .82rem; }
.coop-detail-row span { color: var(--muted); }
.coop-lock-reason   { font-size: .8rem; color: #92400e; background: #fef3c7; padding: .3rem .6rem; border-radius: 5px; }
.coop-start-btn     { width: 100%; margin-top: .2rem; }

@media (max-width: 600px) {
  .coop-buyer-grid { grid-template-columns: 1fr; }
  .coop-pcard-body { grid-template-columns: 1fr 1fr; }
}

/* ── Farm Selector ────────────────────────────────────────────────────────── */
.fsel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.2rem;
  margin-top: 1.5rem;
}
.fsel-card {
  background: var(--card-bg); border: 2px solid var(--border);
  border-radius: 12px; padding: 1.2rem; display: flex; flex-direction: column; gap: .8rem;
}
.fsel-card--active { border-color: #16a34a; }
.fsel-card--new    { border-style: dashed; align-items: center; justify-content: center; gap: .6rem; }
.fsel-card--locked { border-color: #a78bfa; background: #faf5ff; align-items: center; text-align: center; gap: .7rem; }
.fsel-card-top     { display: flex; align-items: flex-start; gap: .8rem; }
.fsel-icon         { font-size: 2rem; line-height: 1; }
.fsel-name         { font-weight: 700; font-size: 1.05rem; }
.fsel-meta         { font-size: .82rem; color: var(--muted); margin-top: .15rem; }
.fsel-badge-active { font-size: .78rem; margin-left: auto; color: #16a34a; font-weight: 700; white-space: nowrap; }
.fsel-stats        { display: flex; gap: 1rem; }
.fsel-stat         { font-size: .83rem; display: flex; flex-direction: column; }
.fsel-stat span    { color: var(--muted); font-size: .75rem; }
.fsel-actions      { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
.fsel-new-icon     { font-size: 2.5rem; color: var(--muted); }
.fsel-new-label    { font-weight: 600; color: var(--muted); }
.fsel-new-form     { display: flex; flex-direction: column; gap: .5rem; width: 100%; }
.fsel-new-input    { padding: .45rem .7rem; border: 1.5px solid var(--border); border-radius: 6px;
                     background: var(--bg); color: var(--text); font-size: .9rem; }
.fsel-locked-title { font-size: 1.1rem; font-weight: 800; color: #7c3aed; }
.fsel-locked-desc  { font-size: .85rem; color: var(--muted); margin: 0; }
.fsel-plus-perks   { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; text-align: left; width: 100%; }
.plus-link         { color: #7c3aed; font-weight: 600; text-decoration: none; }
.plus-link:hover   { text-decoration: underline; }
.btn-premium       { background: linear-gradient(135deg,#7c3aed,#a78bfa); color: #fff;
                     border: none; padding: .55rem 1.2rem; border-radius: 7px;
                     font-weight: 700; cursor: pointer; text-decoration: none;
                     display: inline-block; transition: opacity .2s; }
.btn-premium:hover { opacity: .85; }


/* ═══════════════════════════════════════════
   FARM SKINS / THEMES
   ═══════════════════════════════════════════ */

/* ── ❄️ Hivernal ── */
html.theme-winter {
  --green-dark:  #1a3a5c;
  --green-mid:   #2e6da4;
  --green-light: #74b9e8;
  --green-pale:  #daeeff;
  --yellow:      #a8d8f0;
  --brown:       #5a7fa8;
  --bg:          #eef4fb;
  --card-bg:     #f5f9ff;
  --border:      #c8dff0;
  --text:        #0d1f2d;
}
html.theme-winter .navbar { background: #1a3a5c; }
html.theme-winter .navbar nav > a { color: #a8d8f0; }
html.theme-winter .brand span { color: #74b9e8; }

/* ── 🌻 Provençal ── */
html.theme-provencal {
  --green-dark:  #6b3fa0;
  --green-mid:   #9b59b6;
  --green-light: #c39bd3;
  --green-pale:  #f5eef8;
  --yellow:      #f39c12;
  --brown:       #8e6c1f;
  --bg:          #fdf8ef;
  --card-bg:     #fffdf7;
  --border:      #e8d5a3;
  --text:        #2c1810;
}
html.theme-provencal .navbar { background: linear-gradient(135deg, #6b3fa0, #c0392b); }
html.theme-provencal .navbar nav > a { color: #f5c6ea; }
html.theme-provencal .brand span { color: #f39c12; }

/* ── 🌸 Japonais ── */
html.theme-japanese {
  --green-dark:  #8b1a2e;
  --green-mid:   #c0392b;
  --green-light: #e8a0a8;
  --green-pale:  #fdeef0;
  --yellow:      #f7dc6f;
  --brown:       #5d3a1a;
  --bg:          #fdf5f5;
  --card-bg:     #ffffff;
  --border:      #f0ccd0;
  --text:        #1a0a0a;
}
html.theme-japanese .navbar { background: #1a0a0a; }
html.theme-japanese .navbar nav > a { color: #e8a0a8; }
html.theme-japanese .brand span { color: #e8a0a8; }
html.theme-japanese .navbar .brand::before { content: "🌸 "; }

/* ── 🌊 Côte Atlantique ── */
html.theme-atlantic {
  --green-dark:  #0d3b5e;
  --green-mid:   #1a6b9a;
  --green-light: #5dade2;
  --green-pale:  #d6eaf8;
  --yellow:      #f0e68c;
  --brown:       #8b6914;
  --bg:          #f0f7fb;
  --card-bg:     #f8fcff;
  --border:      #b8d4e8;
  --text:        #0a1f2e;
}
html.theme-atlantic .navbar { background: linear-gradient(135deg, #0d3b5e, #1a6b9a); }
html.theme-atlantic .navbar nav > a { color: #aed6f1; }
html.theme-atlantic .brand span { color: #5dade2; }

/* ── 🌵 Désert ── */
html.theme-desert {
  --green-dark:  #7d4e1f;
  --green-mid:   #b8722a;
  --green-light: #d4a05a;
  --green-pale:  #fdf3e3;
  --yellow:      #f1c40f;
  --brown:       #6e3b0f;
  --bg:          #faf4e8;
  --card-bg:     #fffdf5;
  --border:      #e8d5a3;
  --text:        #1a0e00;
}
html.theme-desert .navbar { background: linear-gradient(135deg, #7d4e1f, #b8722a); }
html.theme-desert .navbar nav > a { color: #f5deb3; }
html.theme-desert .brand span { color: #f1c40f; }

/* ═══════════════════════════════════════════
   SKIN SELECTOR
   ═══════════════════════════════════════════ */
.skins-grid { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }

.skin-card {
  border: 2px solid #d0d0d0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  cursor: pointer !important;
  padding: 0 !important;
  width: 140px !important;
  overflow: hidden !important;
  transition: border-color .2s, box-shadow .2s;
  text-align: center !important;
  display: inline-block !important;
  user-select: none;
  box-sizing: border-box !important;
  font-size: 1rem !important;
  line-height: normal !important;
  color: inherit !important;
}
.skin-card:hover { border-color: #40916c; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.skin-card--active { border-color: #2d6a4f; box-shadow: 0 0 0 3px #d8f3dc; }

.skin-preview { height: 70px; display: flex; flex-direction: column; }
.skin-navbar   { height: 22px; }
.skin-content  { flex: 1; display: flex; gap: 5px; padding: 6px; background: #f5f5f5; }
.skin-card-mock { flex: 1; border-radius: 4px; background: #fff; border: 1px solid #ddd; }

.skin-label { font-size: .8rem; font-weight: 600; padding: .4rem .3rem .2rem; }
.skin-active-badge { font-size: .72rem; color: #2d6a4f; padding-bottom: .3rem; }

/* Skin preview colors */
.skin-default .skin-navbar    { background: #2d6a4f; }
.skin-default .skin-content   { background: #f8f5f0; }
.skin-winter .skin-navbar     { background: #1a3a5c; }
.skin-winter .skin-content    { background: #eef4fb; }
.skin-winter .skin-card-mock  { background: #f5f9ff; border-color: #c8dff0; }
.skin-provencal .skin-navbar  { background: linear-gradient(135deg, #6b3fa0, #c0392b); }
.skin-provencal .skin-content { background: #fdf8ef; }
.skin-provencal .skin-card-mock { background: #fffdf7; border-color: #e8d5a3; }
.skin-japanese .skin-navbar   { background: #1a0a0a; }
.skin-japanese .skin-content  { background: #fdf5f5; }
.skin-japanese .skin-card-mock { background: #fff; border-color: #f0ccd0; }
.skin-atlantic .skin-navbar   { background: linear-gradient(135deg, #0d3b5e, #1a6b9a); }
.skin-atlantic .skin-content  { background: #f0f7fb; }
.skin-atlantic .skin-card-mock { background: #f8fcff; border-color: #b8d4e8; }
.skin-desert .skin-navbar     { background: linear-gradient(135deg, #7d4e1f, #b8722a); }
.skin-desert .skin-content    { background: #faf4e8; }
.skin-desert .skin-card-mock  { background: #fffdf5; border-color: #e8d5a3; }

/* Seasonal skin preview card */
.skin-seasonal .skin-navbar {
  background: linear-gradient(90deg, #c06090 25%, #8aa200 25%, #8aa200 50%, #a04000 50%, #a04000 75%, #2e6da4 75%);
}
.skin-seasonal .skin-content    { background: #fdf5fa; }
.skin-seasonal .skin-card-mock  { background: #fff; border-color: #e0c0d8; }

/* Locked previews */
.skins-preview-locked { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.skin-preview-mini {
  padding: .4rem .8rem; border-radius: 6px; font-size: .82rem; font-weight: 600;
  color: #fff; display: flex; align-items: center; gap: .3rem;
}
.skin-preview-mini.skin-winter    { background: #2e6da4; }
.skin-preview-mini.skin-provencal { background: linear-gradient(135deg, #6b3fa0, #c0392b); }
.skin-preview-mini.skin-japanese  { background: #8b1a2e; }
.skin-preview-mini.skin-atlantic  { background: #0d3b5e; }
.skin-preview-mini.skin-desert    { background: #7d4e1f; }
.skin-preview-mini.skin-seasonal  { background: linear-gradient(90deg, #c06090, #8aa200, #a04000, #2e6da4); }