@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --bg: #f5edee;
  --panel: rgba(255,255,255,0.9);
  --sidebar-bg: #e8dfd9;
  --line: #ddd5cc;
  --text: #3a2b2c;
  --muted: #8f7c75;
  --accent: #b57f84;
  --accent-dark: #8c5d62;
  --accent-soft: #ead3d5;
  --green: #799783;
  --green-soft: #e4ede8;
  --yellow: #bc8c57;
  --yellow-soft: #f4e8d9;
  --red: #b36f73;
  --red-soft: #f2dfe1;
  --grey-soft: #efebe7;
  --shadow: 0 10px 28px rgba(58,43,44,0.07);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
button,input,textarea,select { font: inherit; }

.app-shell { display:grid; grid-template-columns:320px minmax(0,1fr); min-height:100vh; }
.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  padding: 28px 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-logo { width:82px; height:82px; object-fit:contain; display:block; mix-blend-mode:multiply; }
.brand-block h1,.topbar h2,.card h3,.collection-header h3,.record-form h3,.empty-state h3 {
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500;
}
.brand-block h1,.topbar h2 { margin:0; line-height:1.1; }
.brand-block h1 { font-size:1.95rem; }
.topbar h2 { font-size:2rem; }
.eyebrow {
  margin:0 0 6px;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--accent-dark);
  font-weight:600;
}
.brand-copy,.muted,.helper,.record-meta,.sidebar-label,.table-meta,.tiny-label,.small { color:var(--muted); }
.brand-copy { font-size:.85rem; line-height:1.6; }
.sidebar-divider { border:none; border-top:1px solid var(--line); margin:18px 0; }
.sidebar-section { margin-top:16px; }
.sidebar-label { display:block; margin-bottom:8px; font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; }

.search-input,.record-form input,.record-form textarea,.record-form select {
  width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); background:rgba(255,255,255,.9); color:var(--text); padding:11px 13px;
}
.search-input:focus,.record-form input:focus,.record-form textarea:focus,.record-form select:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(181,127,132,.13);
}

.mode-buttons { display:grid; gap:8px; margin-top:6px; }
.mode-chip {
  border:1px solid var(--line); background:rgba(255,255,255,.58); color:var(--text); border-radius:999px; padding:10px 12px; text-align:left; cursor:pointer;
}
.mode-chip.active { background:rgba(255,255,255,.92); color:var(--accent-dark); }

.nav-list { display:grid; gap:8px; margin-top:16px; }
.nav-button {
  display:flex; justify-content:space-between; align-items:center; width:100%; border:1px solid transparent; border-radius:var(--radius-sm); background:transparent; color:var(--text); padding:11px 12px; cursor:pointer; text-align:left;
}
.nav-button:hover { background:rgba(255,255,255,.45); }
.nav-button.active { background:rgba(255,255,255,.9); border-color:var(--line); color:var(--accent-dark); font-weight:500; }
.nav-count,.tag,.status-pill {
  display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:3px 9px; font-size:.74rem; font-weight:500;
}
.nav-count,.tag { background:rgba(181,127,132,.14); color:var(--accent-dark); }
.status-green { background:var(--green-soft); color:var(--green); }
.status-yellow { background:var(--yellow-soft); color:var(--yellow); }
.status-red { background:var(--red-soft); color:var(--red); }
.status-grey { background:var(--grey-soft); color:var(--muted); }

.main-content { padding:36px 40px; }
.topbar { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:22px; }
.topbar-actions { display:flex; flex-wrap:wrap; gap:10px; }
.button {
  border:1px solid transparent; border-radius:var(--radius-sm); padding:10px 16px; cursor:pointer; transition:.15s ease;
}
.button:hover { transform:translateY(-1px); }
.button-primary { background:var(--accent); color:#fff; }
.button-primary:hover { background:var(--accent-dark); }
.button-secondary { background:rgba(255,255,255,.85); color:var(--text); border-color:var(--line); }
.file-label { display:inline-flex; align-items:center; }

.hidden { display:none; }
.dashboard-grid,.collection-layout { display:grid; gap:18px; }
.focus-grid { grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start; }
.start-here-card { grid-column: span 12; }
.hero-card { grid-column:span 8; }
.focus-card { grid-column:span 4; }
.mini-focus-card { grid-column:span 4; }
.card,.collection-header,.table-card,.empty-state {
  background:var(--panel); border:1px solid rgba(181,127,132,.12); border-radius:var(--radius-lg); box-shadow:var(--shadow);
}
.card,.collection-header,.table-card { padding:24px; }
.card h3,.collection-header h3 { margin:2px 0 10px; font-size:1.8rem; }
.empty-state { padding:40px 18px; text-align:center; }
.clickable-card { cursor:pointer; }
.clickable-card:hover { box-shadow:0 12px 32px rgba(58,43,44,.1); }

.hero-stats { display:grid; grid-template-columns:1.1fr .9fr; gap:22px; margin-top:18px; }
.progress-pill { height:10px; background:rgba(181,127,132,.14); border-radius:999px; overflow:hidden; }
.progress-pill span { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-dark)); border-radius:999px; }
.progress-text { margin:8px 0 0; font-weight:600; }
.strong-copy { font-size:1.05rem; font-weight:600; margin:8px 0 0; }
.action-row,.option-row,.folder-links { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.option-chip,.folder-link,.seg {
  border:1px solid var(--line); background:rgba(255,255,255,.8); color:var(--text); border-radius:999px; padding:9px 12px; cursor:pointer;
}
.option-chip.selected,.seg.active { background:var(--accent-soft); color:var(--accent-dark); border-color:rgba(181,127,132,.24); }
.segmented { display:flex; gap:8px; flex-wrap:wrap; }

.clean-list,.record-list { list-style:none; margin:0; padding:0; }
.clean-list li,.record-item { padding:10px 0; border-bottom:1px solid rgba(181,127,132,.08); }
.clean-list li:last-child,.record-item:last-child { border-bottom:0; }
.record-topline,.inline-row,.collection-header-top,.finance-row,.meta-grid { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.record-title { font-weight:600; }
.record-meta { margin-top:6px; font-size:.92rem; }
.tiny-label { font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; }
.meta-grid,.mini-grid,.task-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.answer-box {
  margin-top:6px; min-height:42px; padding:10px 12px; border:1px solid rgba(181,127,132,.12); border-radius:var(--radius-sm); background:rgba(255,255,255,.72);
}
.answer-box.multiline { white-space:pre-wrap; min-height:72px; }
.warning-box {
  margin-top:14px; padding:12px 14px; border-radius:var(--radius-md); background:var(--yellow-soft); color:var(--yellow);
}
.phase-card.collapsed { opacity:.92; }

.table-wrap { overflow:auto; border:1px solid rgba(181,127,132,.08); border-radius:var(--radius-md); }
.table { width:100%; border-collapse:collapse; background:rgba(255,255,255,.7); }
.table th,.table td {
  padding:14px 16px; text-align:left; vertical-align:top; border-bottom:1px solid rgba(181,127,132,.08); font-size:.88rem;
}
.table th { font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); background:rgba(181,127,132,.04); }
.clickable-row { cursor:pointer; }
.clickable-row:hover td { background:rgba(181,127,132,.04); }
.text-button { background:transparent; border:0; padding:0; color:var(--accent-dark); cursor:pointer; }

.calendar-buckets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:10px; }
.bucket { border:1px solid rgba(181,127,132,.1); border-radius:var(--radius-md); background:rgba(255,255,255,.7); padding:12px; }
.bucket-item {
  width:100%; text-align:left; border:0; background:rgba(181,127,132,.06); border-radius:10px; padding:10px 12px; display:block; margin-top:8px; cursor:pointer;
}
.bucket-item small { display:block; color:var(--muted); margin-top:4px; }

.record-dialog {
  width:min(860px,calc(100vw - 24px)); border:1px solid rgba(181,127,132,.16); border-radius:22px; padding:0; background:#fdf9f9; box-shadow:0 30px 80px rgba(58,43,44,.2);
}
.record-dialog::backdrop { background:rgba(58,43,44,.34); backdrop-filter:blur(4px); }
.record-form { display:grid; gap:18px; padding:24px; }
.record-form h3 { margin:4px 0 0; font-size:1.65rem; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.field { display:grid; gap:8px; }
.field.span-2 { grid-column:span 2; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; }
textarea { min-height:120px; resize:vertical; }

@media (max-width:1100px) {
  .focus-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .start-here-card, .hero-card, .focus-card, .dashboard-wide-card { grid-column:span 6; }
  .mini-focus-card, .dashboard-small-card { grid-column:span 3; }
  .calendar-buckets { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:820px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; overflow:visible; border-right:0; border-bottom:1px solid var(--line); padding:18px 14px; }
  .main-content { padding:16px 12px 26px; }
  .topbar,.topbar-actions,.record-topline,.collection-header-top,.hero-stats,.action-row,.form-grid,.finance-row,.meta-grid,.mini-grid,.task-detail-grid,.inline-row { flex-direction:column; align-items:stretch; grid-template-columns:1fr; }
  .focus-grid { grid-template-columns:1fr; }
  .hero-card,.focus-card,.mini-focus-card,.dashboard-small-card,.dashboard-wide-card,.start-here-card { grid-column:span 1; }
  .button,.file-label { width:100%; justify-content:center; }
  .card,.collection-header,.table-card { padding:16px; }
  .table { min-width:720px; }
  .field.span-2 { grid-column:span 1; }
  .calendar-buckets { grid-template-columns:1fr; }
}

.visual-board { display:grid; gap:16px; margin-top:10px; }
.swatch-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.swatch-card { border:1px solid rgba(181,127,132,.12); border-radius:12px; padding:10px; background:rgba(255,255,255,.7); text-align:center; }
.swatch { display:block; width:100%; height:54px; border-radius:10px; border:1px solid rgba(0,0,0,.06); margin-bottom:8px; }
.visual-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.image-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.image-tile { border:1px dashed rgba(181,127,132,.2); border-radius:12px; min-height:120px; overflow:hidden; background:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; }
.image-tile img { width:100%; height:120px; object-fit:cover; display:block; }
.image-tile.placeholder { color:var(--muted); font-size:.85rem; }
.compact { margin-top:0; align-items:center; }
.mini-btn { padding:6px 10px; font-size:.8rem; }
.checklist-row { align-items:flex-start; }

@media (max-width:820px) {
  .swatch-row, .visual-meta, .image-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .swatch-row, .visual-meta, .image-grid { grid-template-columns:1fr; }
}

.start-here-card .clean-list li { font-size: 0.96rem; }
.start-here-card h3 { font-size: 2rem; }
.hero-card .strong-copy { line-height: 1.45; }

.dashboard-small-card { grid-column: span 3; }
.dashboard-wide-card { grid-column: span 6; }
.dashboard-small-card h3 { font-size: 1.45rem; }
.dashboard-small-card .helper, .dashboard-small-card .record-item, .dashboard-small-card .record-meta { font-size: 0.9rem; }