:root {
    --canvas: #f6f1e7;
    --panel: rgba(255, 253, 249, 0.88);
    --text-strong: #203443;
    --muted: #5d7280;
    --line: rgba(32, 52, 67, 0.12);
    --accent: #d46f4d;
    --accent-strong: #9d4b31;
    --success: #2f7a54;
    --warning: #c57a1f;
    --danger: #9a3b35;
    --shadow: 0 18px 40px rgba(55, 74, 86, 0.12);
}

html, body {
    margin: 0;
    min-height: 100%;
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
    color: var(--text-strong);
    background:
        radial-gradient(circle at top left, rgba(212, 111, 77, 0.22), transparent 30%),
        radial-gradient(circle at top right, rgba(111, 156, 143, 0.24), transparent 28%),
        linear-gradient(180deg, #f8f4ec 0%, #f6f1e7 100%);
}

body { min-height: 100vh; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }

.page-section { display: grid; gap: 1rem; }
.section-heading, .table-header, .entry-header, .list-row, .status-update, .entry-meta, .inline-metrics, .row-actions { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; }
.section-heading, .table-header, .list-row, .entry-card { border-bottom: 1px solid var(--line); padding-bottom: 0.9rem; }
.split-grid, .stats-grid { display: grid; gap: 1rem; }
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.split-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.two-columns { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.stat-card, .feature-card, .list-card, .panel { border-radius: 24px; background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.65); box-shadow: var(--shadow); }
.stat-card { padding: 1rem; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; }
.stat-card span, .feature-card p, .list-row p, .entry-header p, .entry-comment { margin: 0; color: var(--muted); }
.stat-card strong, .feature-value { font-size: clamp(1.9rem, 7vw, 2.7rem); line-height: 1; }
.sunrise { background: linear-gradient(160deg, rgba(255, 243, 226, 0.98), rgba(255, 220, 189, 0.9)); }
.tide { background: linear-gradient(160deg, rgba(230, 242, 238, 0.98), rgba(194, 223, 214, 0.94)); }
.meadow { background: linear-gradient(160deg, rgba(240, 247, 221, 0.98), rgba(215, 234, 181, 0.92)); }
.ember { background: linear-gradient(160deg, rgba(248, 231, 223, 0.98), rgba(234, 188, 171, 0.94)); }
.feature-card, .list-card { padding: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.9rem; margin-bottom: 1rem; }
.wide { grid-column: 1 / -1; }
label { display: grid; gap: 0.35rem; color: var(--muted); font-size: 0.95rem; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 0.8rem 0.9rem; background: rgba(255, 255, 255, 0.9); color: var(--text-strong); }
.action-button, .ghost-button { border: 0; border-radius: 999px; padding: 0.8rem 1rem; cursor: pointer; transition: transform 0.16s ease; }
.action-button:hover, .ghost-button:hover { transform: translateY(-1px); }
.action-button { background: var(--accent); color: white; box-shadow: 0 12px 24px rgba(212, 111, 77, 0.28); }
.action-button.secondary, .ghost-button { background: rgba(255, 255, 255, 0.8); color: var(--text-strong); border: 1px solid var(--line); box-shadow: none; }
.ghost-button.danger { color: var(--danger); }
.inline-status, .alert-card { border-radius: 18px; padding: 0.85rem 1rem; background: rgba(255, 255, 255, 0.86); border: 1px solid var(--line); }
.alert-card { background: rgba(154, 59, 53, 0.12); border-color: rgba(154, 59, 53, 0.2); }
.pill { display: inline-flex; align-items: center; padding: 0.4rem 0.7rem; border-radius: 999px; background: rgba(32, 52, 67, 0.08); color: var(--text-strong); font-size: 0.85rem; }
.pill.warning { background: rgba(197, 122, 31, 0.15); color: var(--warning); }
.pill.success { background: rgba(47, 122, 84, 0.16); color: var(--success); }
.list-card, .entry-card { display: grid; gap: 0.9rem; }
.entry-card:last-child, .list-row:last-child { border-bottom: 0; padding-bottom: 0; }
.entry-meta { justify-content: flex-start; flex-wrap: wrap; color: var(--muted); font-size: 0.92rem; }
.status-update { flex-wrap: wrap; justify-content: flex-start; }
.status-update input { max-width: 180px; }
@media (max-width: 720px) {
    .section-heading, .table-header, .entry-header, .list-row, .status-update { align-items: flex-start; flex-direction: column; }
    .row-actions, .inline-metrics { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}