:root {
  --bg: #f4f1e8;
  --bg2: #edf3eb;
  --card: rgba(255, 253, 249, 0.96);
  --ink: #1f2a22;
  --muted: #68746c;
  --line: #ddd5c6;
  --green: #255e39;
  --green-dark: #1d4a2d;
  --accent: #b98a3b;
  --accent-soft: #f4ead8;
  --danger: #8d4325;
  --danger-soft: #fdebe4;
  --success-soft: #e3f1e6;
  --warning-soft: #fff1d6;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at top left, var(--bg2) 0%, var(--bg) 55%, #efe5d6 100%); color: var(--ink); }
button, input, select, textarea { font: inherit; }
h1,h2,h3,p { margin-top: 0; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 18px; }
.auth-card, .hero-card, .panel, .stat-card, .record-card, .field-card, .check-item, .sidebar {
  background: var(--card); border: 1px solid rgba(221, 213, 197, 0.95); box-shadow: 0 18px 44px rgba(56, 68, 52, 0.08); border-radius: 24px;
}
.auth-card { width: min(100%, 520px); padding: 28px; }
.wide-auth { width: min(100%, 760px); }
.auth-form, .record-form, .field-form { display: grid; gap: 12px; }
.auth-note, .form-status, .mini-note, .record-meta, .record-notes, .photo-empty, .muted, .empty-state { color: var(--muted); line-height: 1.45; }
.auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.eyebrow { margin: 0 0 6px; color: var(--green); text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 800; }
.subtitle { color: var(--muted); line-height: 1.5; }
input, select, textarea { border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 12px 14px; color: var(--ink); width: 100%; }
textarea { resize: vertical; }
.primary-btn, .secondary-btn, .ghost-btn, .nav-btn { border: 0; border-radius: 16px; padding: 13px 16px; font-weight: 800; cursor: pointer; }
.primary-btn { background: var(--green); color: #fff; }
.primary-btn:hover { background: var(--green-dark); }
.secondary-btn { background: #edf2eb; color: var(--ink); }
.ghost-btn { background: #f8f2e6; color: #5e4a22; }
.ghost-btn.danger { background: var(--danger-soft); color: var(--danger); }
.primary-btn:disabled, .secondary-btn:disabled { opacity: .55; cursor: not-allowed; }
.app-shell { display: grid; grid-template-columns: 280px 1fr; gap: 16px; max-width: 1600px; margin: 0 auto; padding: 16px; }
.sidebar { display: flex; flex-direction: column; justify-content: space-between; min-height: calc(100vh - 32px); padding: 18px; position: sticky; top: 16px; }
.nav-list { display: grid; gap: 8px; margin-top: 18px; }
.nav-btn { text-align: left; background: transparent; border: 1px solid transparent; color: var(--ink); }
.nav-btn.active { background: #f3efe7; border-color: var(--line); }
.sidebar-footer { display: grid; gap: 10px; }
.user-badge { background: #edf2eb; border-radius: 16px; padding: 12px 14px; font-weight: 700; }
.main-pane { min-width: 0; }
.hero-card { padding: 22px; display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 16px; }
.hero-actions, .toolbar-row, .record-top-actions, .card-actions, .compact-actions, .chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card { padding: 16px; }
.stat-label { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.stat-value { font-size: 1.85rem; font-weight: 800; }
.stat-subtext { color: var(--muted); font-size: 13px; margin-top: 8px; }
.board-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 16px; }
.dashboard-grid { grid-template-columns: 1fr; }
.panel { padding: 18px; }
.panel-head, .compact-head, .record-top, .field-card { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.record-form, .field-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.records-list, .fields-list, .checklist { display: grid; gap: 12px; }
.record-card, .field-card, .check-item, .empty-state { padding: 14px; }
.empty-state { background: rgba(255,255,255,.55); border: 1px dashed var(--line); border-radius: 18px; }
.check-item.emphasis { background: #f7f3eb; }
.full-width { grid-column: 1 / -1; }
.toggle-row { background: #fbf8f2; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.pill, .mini-pill { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: #745118; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.pill.success { background: var(--success-soft); color: #205a2d; }
.pill.warning { background: var(--warning-soft); color: #8a5d09; }
.record-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.meta-chip { background: #fff; border: 1px solid #ece3d2; border-radius: 14px; padding: 10px; }
.meta-chip strong { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.photo-strip, .existing-photos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.photo-strip img, .existing-photo-item img { width: 96px; height: 96px; object-fit: cover; border-radius: 14px; border: 1px solid #e5dcc8; }
.existing-photo-item { display: flex; align-items: center; gap: 8px; background: #fbf8f2; border: 1px solid #ece3d2; padding: 8px; border-radius: 14px; }
.search-input { min-width: 180px; }
.hidden { display: none !important; }
@media (max-width: 1180px) { .app-shell { grid-template-columns: 1fr; } .sidebar { position: static; min-height: auto; } .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .board-grid, .record-form, .field-form, .record-grid, .auth-grid { grid-template-columns: 1fr; } .hero-card, .panel-head { flex-direction: column; } .hero-actions > button, .toolbar-row > * { flex: 1; } }
@media (max-width: 560px) { .app-shell { padding: 10px; } .hero-card, .panel, .stat-card, .record-card, .field-card, .check-item, .sidebar, .auth-card { border-radius: 18px; } .stats-grid { grid-template-columns: 1fr; } .primary-btn, .secondary-btn, .ghost-btn, .nav-btn { width: 100%; } .record-top, .field-card { flex-direction: column; } .photo-strip img, .existing-photo-item img { width: 82px; height: 82px; } }