@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Lora:ital,wght@0,500;0,600;0,700;1,500&family=Poppins:wght@400;600;700&display=swap');

.google-font { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }

.poppins { font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial; }

/* Tailwind-like styles mapped for the login mock */
.tnw-page { background: #f3f4f6; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem; }
.tnw-card { width:100%; max-width:420px; background:#ffffff; padding:2rem; border-radius:1rem; box-shadow: 0 25px 50px rgba(2,6,23,0.08); border:1px solid rgba(34,197,94,0.12); }
.tnw-logo-wrap { display:flex; flex-direction:column; align-items:center; gap:0.75rem; margin-bottom:1rem; }
.tnw-logo-img { width:64px; height:auto; display:block; margin-bottom:6px; }
.tnw-logo-title { font-size:1.5rem; font-weight:700; color:#374151; }
.tnw-h1 { margin-top:0.5rem; font-size:1.125rem; font-weight:600; color:#4b5563; }
.tnw-input { box-sizing: border-box; width:100%; padding:0.5rem 1rem; background:#f9fafb; border:1px solid #e5e7eb; border-radius:0.75rem; outline:none; transition:box-shadow 120ms, border-color 120ms; }
.tnw-input:focus { border-color:#10B981; box-shadow: 0 6px 18px rgba(16,185,129,0.08); }
.tnw-label { display:block; font-size:0.875rem; color:#6b7280; margin-bottom:0.25rem; }
.tnw-row { display:flex; justify-content:space-between; align-items:center; margin-top:0.25rem; }
.tnw-link { color:#16A34A; font-weight:600; text-decoration:none; }
.tnw-btn { width:100%; background: linear-gradient(90deg,#16A34A,#059669); color:white; padding:0.75rem 1rem; border-radius:0.75rem; border:none; font-weight:700; cursor:pointer; transition:transform 120ms, box-shadow 120ms; }
.tnw-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(16,185,129,0.12); }
.tnw-muted { color:#6b7280; font-size:0.95rem; }

/* message box used by the mock */
.message-box { position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:1000; padding:0.5rem 1rem; border-radius:0.5rem; font-size:0.95rem; display:none; }
.message-box.show { display:block; }
.message-success { background:#16a34a; color:white; }
.message-error { background:#ef4444; color:white; }

/* Reduce textarea padding/spacing specifically to make textareas more compact */
textarea.form-control {
	box-sizing: border-box; /* include padding/border in width calculations */
	width: 100%; /* fill the inner width so left/right padding are symmetric */
	padding: 0.4rem 0.6rem; /* slightly tighter */
	min-height: 56px;
	margin: 0.35rem 0 0.6rem 0; /* give vertical breathing room */
	border-radius: 0.6rem;
}

/* If a textarea sits too close to the right edge inside a .card, ensure the card's inner padding keeps it away */
.card { padding: 1.75rem; box-sizing: border-box; }


@media (max-width:520px) {
	.tnw-card { padding:1rem; border-radius:0.75rem; }
	.tnw-logo-title { font-size:1.25rem; }
}

/* Theme for nutrition app */
:root{
	--accent: #24b35b; /* fresh green */
	--accent-2: #1fa25a;
	--muted: #6b7280;
	--bg: #dfece0; /* user requested darker pale green */
	--card: #ffffff;
	--surface-shadow: 0 12px 32px rgba(16,24,24,0.08);
}

body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial; background:var(--bg); color:#0f172a; margin:0; }
.header { background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02)); padding:1.25rem 2rem; box-shadow: 0 2px 12px rgba(16,24,24,0.04); border-bottom:1px solid rgba(16,24,24,0.03); }
.container { max-width:1200px; margin:2.5rem auto; padding:0 1.25rem; }
.card { background: var(--card); border-radius:14px; padding:1.75rem; box-shadow: var(--surface-shadow); border: 1px solid rgba(16,24,24,0.18); }

/* Modal styles */
.modal-overlay { position:fixed; inset:0; display:none; align-items:flex-start; justify-content:center; padding:3.5rem 1rem; background: rgba(8,10,10,0.45); z-index:1000; }
.modal-window { width:720px; max-width:100%; background:var(--card); border-radius:12px; box-shadow: 0 20px 60px rgba(16,24,24,0.45); border:1px solid rgba(16,24,24,0.08); overflow:hidden; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; border-bottom:1px solid rgba(16,24,24,0.04); }
.modal-header h2 { margin:0; color:var(--accent); }
.modal-close { background:transparent; border:none; font-size:1.05rem; cursor:pointer; }
.modal-body { padding:1.25rem 1.5rem; max-height:70vh; overflow:auto; }
.modal-footer { padding:1rem 1.5rem; border-top:1px solid rgba(16,24,24,0.04); display:flex; gap:0.75rem; justify-content:flex-end; }
.modal-footer .btn-primary { padding:0.85rem 1.25rem; }
.modal-footer .btn-secondary { padding:0.75rem 1rem; }


/* Navigation */
.nav { display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap; justify-content:space-between; }

/* Brand layout */
.brand { display:flex; align-items:center; gap:0.75rem; }
.logo-img { width:44px; height:44px; object-fit:contain; }

/* By default show nav-links horizontally on large screens */
.nav-links { display:flex; gap:1rem; align-items:center; margin-left:auto; }

/* Hamburger button for mobile */
.hamburger { display:none !important; background:transparent; border:none; width:40px; height:40px; border-radius:8px; align-items:center; justify-content:center; cursor:pointer; }
.hamburger-inner { display:block; position:relative; width:22px; height:2px; background:var(--muted); border-radius:2px; }
.hamburger-inner::before, .hamburger-inner::after { content:""; position:absolute; left:0; width:22px; height:2px; background:var(--muted); border-radius:2px; }
.hamburger-inner::before { top:-7px; }
.hamburger-inner::after { top:7px; }

/* collapsed nav hides on mobile unless open */
.nav-links.collapsed { flex-direction:row; gap:1rem; align-items:center; }
.nav-links.open { flex-direction:column; gap:0.6rem; width:100%; }
.nav .nav-link { color:var(--muted); text-decoration:none; padding:0.35rem 0.9rem; border-radius:8px; font-weight:600; display:inline-flex; align-items:center; gap:0.5rem; }
.nav .nav-link:hover { color:var(--accent-2); background: transparent; }
.nav .nav-link.active, .nav .nav-link[aria-current="page"] { color: #ffffff; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 18px rgba(36,179,91,0.12); }
.nav .nav-link:focus { outline: none; box-shadow: 0 0 0 3px rgba(36,179,91,0.10); }
/* Button variants inside nav */
.nav .btn-primary { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #fff; padding:0.45rem 0.9rem; border-radius:8px; border:none; box-shadow: 0 6px 18px rgba(36,179,91,0.12); }
.nav .btn-outline { background: rgba(255,255,255,0.9); color:var(--muted); padding:0.45rem 0.9rem; border-radius:8px; border:1px solid rgba(16,24,24,0.06); }
.nav .btn-outline:hover { color:var(--accent-2); border-color: rgba(16,24,24,0.12); }

/* Subtle nav action style for login/signup so they don't get the same highlight as active tabs */
.nav .nav-cta { padding:0.35rem 0.75rem; border-radius:8px; color:var(--muted); background:transparent; border:1px solid rgba(16,24,24,0.04); font-weight:600; }
.nav .nav-cta:hover { color:var(--accent-2); background: rgba(16,24,24,0.02); }
.logo { color:var(--accent); font-weight:700; font-size:1.4rem; }

/* Styled select (language chooser) */
.culture-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0.25rem 1.1rem 0.25rem 0.6rem; /* slightly taller for touch */
	font-size: 0.95rem;
	border-radius: 8px;
	border: 1px solid rgba(16,24,24,0.06); /* subtle light border */
	background-color: #ffffffee; /* slight translucency */
	color: #0b1220;
	font-weight:600;
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(16,24,24,0.04);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23171717' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
	background-size: 10px 6px;
	min-width: 120px;
}

/* Culture selector with flag icons */
.culture-picker { position:relative; }
.culture-button { display:inline-flex; align-items:center; gap:0.5rem; padding:0.35rem 0.9rem; border-radius:8px; border:1px solid rgba(16,24,24,0.06); background:#fff; cursor:pointer; }
.culture-button .flag-icon { width:20px; height:auto; display:block; }
.culture-button .culture-label { font-weight:600; color:#0b1220; }
.culture-button .caret { margin-left:0.25rem; color:#6b7280; }
.culture-menu { position:absolute; right:0; top:calc(100% + 8px); background:#fff; border-radius:8px; box-shadow:0 8px 24px rgba(11,17,32,0.08); overflow:hidden; list-style:none; padding:0.25rem; margin:0; min-width:160px; z-index:1000; }
.culture-menu li { display:flex; align-items:center; gap:0.5rem; padding:0.5rem; cursor:pointer; border-radius:6px; }
.culture-menu li:hover { background: rgba(16,24,24,0.03); }
.culture-menu .flag-icon { width:24px; }

.culture-select:focus {
	outline: none;
	border-color: rgba(36,179,91,0.22);
	box-shadow: 0 4px 18px rgba(36,179,91,0.08);
}

@media (max-width: 520px) {
	.culture-select { padding-right:0.9rem; }
}

/* Page header */
h1 { font-size:2.25rem; margin:0 0 0.75rem 0; color:#0b1220; font-weight:700; }

.page-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.page-header-left { max-width:65%; }
.page-header-right { display:flex; gap:0.75rem; align-items:center; }

/* Make calls-to-action similar to screenshot */
.btn-primary { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color:white; padding:0.6rem 1rem; border-radius:8px; border:none; cursor:pointer; box-shadow: 0 6px 18px rgba(36,179,91,0.12); font-weight:600; }
.btn-secondary { background:transparent; color:var(--muted); padding:0.6rem 1rem; border-radius:8px; border:1px solid rgba(16,24,24,0.06); cursor:pointer; }

/* Stats row */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.25rem; }
.stat { background:var(--card); border-radius:12px; padding:1.5rem; text-align:center; min-height:120px; display:flex; flex-direction:column; justify-content:center; align-items:center; border:1px solid rgba(16,24,24,0.18); }
.stat .icon { width:56px; height:56px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:0.4rem; box-shadow: 0 10px 28px rgba(16,24,24,0.10); }
.stat .value { font-size:1.5rem; font-weight:700; color:#0b1220; margin-top:0.4rem; }
.stat .label { color:var(--muted); margin-top:0.6rem; }

/* Recent patients area */
.recent { margin-top:1.5rem; }
.recent-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.75rem; }
.recent-header h3 { margin:0; }
.recent-header .view-all { color:var(--accent); text-decoration:none; font-weight:600; }
.recent-body { min-height:80px; }

/* Buttons and forms */
.btn-primary { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color:white; padding:0.85rem 1.25rem; border-radius:10px; border:none; cursor:pointer; box-shadow: 0 6px 18px rgba(36,179,91,0.12); }
.btn-secondary { background:transparent; color:var(--muted); padding:0.6rem 1rem; border-radius:8px; border:1px solid rgba(16,24,24,0.06); cursor:pointer; }
.form-control { width:100%; padding:0.9rem; border-radius:8px; border:1px solid rgba(16,24,24,0.06); background:#fff; }

/* Card inner subtle border and spacing */
.card .section { margin-bottom:1.25rem; }

/* Responsive */
/* Tablet breakpoint: slightly narrower containers and two-column stats */
@media (max-width: 1100px) {
	.stats { grid-template-columns:repeat(2,1fr); }
	.modal-window { width:640px; }
}

@media (max-width: 900px) {
	.stats { grid-template-columns:repeat(2,1fr); }
	.container { margin:1rem auto; padding:0 1rem; }
	.header { padding:1rem; }
	.nav { gap:0.75rem; }
	.hamburger { display:flex !important; }
	/* when collapsed by default, hide nav-links unless toggled open */
	.nav-links.collapsed { display:none !important; }
	.nav-links.open { display:flex !important; flex-direction:column; gap:0.6rem; width:100%; }
	.nav .nav-link { padding:0.25rem 0.6rem; }
	.nav .nav-cta { padding:0.25rem 0.6rem; }
	.modal-overlay { padding:2rem 0.75rem; align-items:center; }
	.modal-window { width:92%; }
	.form-control { padding:0.75rem; }
}

/* Clinical record and meal-planning workflows. */
.care-page { display: grid; gap: 1.5rem; max-width: 1180px; }
.care-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; }
.care-heading h1 { margin:.15rem 0 .35rem; font-size:clamp(2rem, 4vw, 3.1rem); }
.care-heading p:not(.eyebrow) { margin:0; color:var(--nh-muted); max-width:650px; }
.eyebrow { margin:0; color:var(--nh-sage); font-size:.72rem; letter-spacing:.12em; font-weight:800; }
.back-link { display:inline-block; margin-bottom:1.25rem; color:var(--nh-sage-dark); font-weight:700; text-decoration:none; }
.record-badge { padding:.5rem .8rem; border-radius:999px; background:var(--nh-sage-soft); color:var(--nh-sage-dark); font-size:.85rem; font-weight:700; white-space:nowrap; }
.clinical-grid, .plan-workspace, .composer-layout { display:grid; grid-template-columns:minmax(0, .9fr) minmax(340px, 1.1fr); gap:1.25rem; align-items:start; }
.care-card, .history-panel, .plans-list, .meal-overview { padding:1.5rem; background:var(--nh-surface); border:1px solid var(--nh-line); border-radius:var(--nh-radius); box-shadow:var(--nh-shadow); }
.care-card label { display:grid; gap:.45rem; margin-top:1rem; color:var(--nh-ink); font-weight:700; font-size:.92rem; }
.care-card label span, .care-card legend { color:var(--nh-muted); font-size:.78rem; font-weight:600; }
.care-card textarea { resize:vertical; }
.care-card fieldset { border:0; padding:0; margin:1.15rem 0 0; }
.care-card legend { margin-bottom:.45rem; }
.section-title { display:flex; align-items:flex-start; gap:.8rem; }
.section-title h2, .history-heading h2, .list-title h2 { margin:0; font-size:1.35rem; }
.section-title p { margin:.25rem 0 0; color:var(--nh-muted); font-size:.9rem; }
.section-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:14px; background:var(--nh-sage-soft); color:var(--nh-sage-dark); font-weight:800; font-size:1.25rem; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.form-actions { display:flex; justify-content:flex-end; gap:.75rem; margin-top:1.25rem; }
.history-panel { min-height:410px; }
.history-heading { display:flex; justify-content:space-between; margin-bottom:1.25rem; }
.clinical-timeline { list-style:none; padding:0 0 0 .45rem; margin:0; }
.clinical-timeline li { position:relative; padding:0 0 1.6rem 1.45rem; border-left:1px solid var(--nh-line); }
.clinical-timeline li:last-child { border-color:transparent; padding-bottom:0; }
.timeline-dot { position:absolute; left:-.41rem; top:.25rem; width:.75rem; height:.75rem; border-radius:50%; background:var(--nh-terracotta); box-shadow:0 0 0 4px var(--nh-surface); }
.timeline-date { color:var(--nh-muted); font-size:.82rem; font-weight:700; text-transform:capitalize; }
.measurements { display:flex; gap:.5rem; margin:.5rem 0 .7rem; }
.measurements span { padding:.3rem .55rem; border-radius:8px; background:var(--nh-sage-soft); color:var(--nh-sage-dark); font-size:.82rem; }
.clinical-timeline h3 { margin:.55rem 0 .1rem; font-family:inherit; font-size:.87rem; }
.clinical-timeline p { margin:0; color:var(--nh-muted); font-size:.92rem; white-space:pre-line; }
.empty-state { display:grid; justify-items:center; text-align:center; gap:.35rem; padding:2.7rem 1rem; color:var(--nh-muted); }
.empty-state div { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--nh-sage-soft); color:var(--nh-sage-dark); font-size:1.35rem; }
.empty-state strong { color:var(--nh-ink); margin-top:.4rem; }.empty-state p { margin:0; max-width:300px; }
.plan-picker { padding:1.1rem 1.3rem; display:grid; grid-template-columns:minmax(180px,.55fr) 1fr; align-items:center; gap:1rem; }.plan-picker label { font-weight:800; }.plan-picker .form-control { margin:0; }
.plan-form .btn-primary { margin-top:1.25rem; width:100%; }.list-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }.list-title > span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--nh-sage-soft); color:var(--nh-sage-dark); font-weight:800; }
.plan-cards { display:grid; gap:.8rem; }.plan-card { display:flex; justify-content:space-between; gap:1rem; padding:1.1rem; border:1px solid var(--nh-line); border-radius:16px; background:#fffefa; }.plan-card h3 { margin:.45rem 0 .2rem; font-size:1.08rem; }.plan-card p { margin:0; color:var(--nh-muted); font-size:.85rem; }.plan-card .plan-note { margin-top:.45rem; }.status-pill { padding:.22rem .5rem; border-radius:999px; background:var(--nh-sage-soft); color:var(--nh-sage-dark); font-size:.72rem; font-weight:800; }.plan-link { height:max-content; white-space:nowrap; text-decoration:none; font-weight:700; }.welcome-panel { display:grid; justify-items:center; padding:4.5rem 1rem; text-align:center; border:1px dashed var(--nh-line); border-radius:var(--nh-radius); }.welcome-panel h2 { margin:.75rem 0 .25rem; }.welcome-panel p { margin:0; color:var(--nh-muted); }.welcome-orb { display:grid; place-items:center; width:62px; height:62px; border-radius:50%; background:var(--nh-sage-soft); color:var(--nh-sage-dark); font-size:1.5rem; }
.composer-layout { grid-template-columns:repeat(2, minmax(0, 1fr)); }.composer-food label:first-of-type { margin-top:1rem; }.meal-overview { margin-top:1.25rem; }.meal-chips { display:flex; flex-wrap:wrap; gap:.7rem; }.meal-chip { display:grid; gap:.15rem; text-align:left; min-width:170px; padding:.9rem 1rem; border:1px solid var(--nh-line); border-radius:14px; color:var(--nh-ink); background:var(--nh-surface); cursor:pointer; }.meal-chip span { color:var(--nh-muted); font-size:.8rem; }.meal-chip.selected { border-color:var(--nh-sage); background:var(--nh-sage-soft); }
@media (max-width: 760px) { .care-heading { align-items:flex-start; flex-direction:column; }.clinical-grid, .plan-workspace, .composer-layout { grid-template-columns:1fr; }.plan-picker { grid-template-columns:1fr; }.field-grid { grid-template-columns:1fr; }.care-card, .history-panel, .plans-list, .meal-overview { padding:1.15rem; }.plan-card { flex-direction:column; }.plan-link { width:fit-content; }.form-actions { justify-content:stretch; }.form-actions button { flex:1; } }

@media (max-width: 520px) {
	/* Mobile: stack nav, full-width CTA, compact header */
	.stats { grid-template-columns:repeat(1,1fr); }
	h1 { font-size:1.5rem; }
	.container { margin:0.75rem auto; padding:0 0.75rem; }
	.header { padding:0.75rem 0.9rem; }
	.nav { gap:0.5rem; flex-direction:column; align-items:flex-start; }
	.nav .nav-link, .nav .nav-cta { width:100%; display:inline-flex; justify-content:flex-start; }
	.brand { width:100%; display:flex; justify-content:space-between; align-items:center; }
	.logo { font-size:1.15rem; }
	.modal-overlay { padding:1rem; align-items:center; }
	.modal-window { width:100%; border-radius:8px; }
	.page-header-left { max-width:100%; }
	.form-control { padding:0.65rem; }
	.btn-primary, .btn-secondary { padding:0.6rem 0.9rem; }
}

/* small utilities */
.text-muted { color:var(--muted); }
.card-ghost { background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.5)); }

/* Login modern split layout (mock match) */
.login-split { display:flex; min-height:76vh; gap:0; align-items:stretch; }
.login-left { flex:1; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, #45d07a 10%, #1e8c4a 100%); padding:2.5rem; }
.login-left-inner { text-align:center; color: #ffffff; max-width:420px; }
.login-logo { width:220px; height:auto; display:block; margin:0 auto 1.25rem auto; filter: drop-shadow(0 10px 30px rgba(16,24,24,0.12)); }
.login-left .brand-mark { font-weight:800; font-size:1.2rem; letter-spacing:0.6px; color: rgba(255,255,255,0.95); }

.login-right { width:520px; max-width:100%; display:flex; align-items:center; justify-content:center; padding:3.25rem 2.25rem; }
.login-card { width:100%; background:var(--card); border-radius:14px; padding:2rem; box-shadow: 0 20px 40px rgba(11,17,32,0.06); border:1px solid rgba(16,24,24,0.06); }
.login-title { margin:0 0 0.75rem 0; font-size:1.5rem; font-weight:700; color:#0b1220; text-align:center; }
.login-sub { text-align:center; color:var(--muted); margin-bottom:1rem; }
.login-form { display:flex; flex-direction:column; gap:0.75rem; margin-top:0.5rem; }
.login-cta { margin-top:1rem; padding:0.95rem; font-size:1rem; border-radius:10px; }
.login-aux { margin-top:0.85rem; display:flex; justify-content:space-between; align-items:center; font-size:0.95rem; }
.login-aux a { color:var(--accent); font-weight:600; }

/* make split stack on small screens */
@media (max-width: 900px) {
	.login-split { flex-direction:column; }
	.login-left { padding:1.25rem; height:160px; }
	.login-left-inner { max-width:320px; }
	.login-right { padding:1.25rem; }
	.login-card { padding:1.25rem; }
}

/* Nutrição Humanizada design system — foundation shared by all application screens. */
:root {
	--nh-canvas: #F9F7F2;
	--nh-surface: #FFFEFB;
	--nh-sage: #5D7565;
	--nh-sage-dark: #405847;
	--nh-sage-soft: #E7EEE8;
	--nh-terracotta: #D4A373;
	--nh-terracotta-dark: #B97D4B;
	--nh-ink: #29342D;
	--nh-muted: #6C756E;
	--nh-line: #E9E4DA;
	--nh-radius: 24px;
	--nh-shadow: 0 12px 32px rgba(71, 82, 69, .08);
	--accent: var(--nh-sage);
	--accent-2: var(--nh-sage-dark);
	--muted: var(--nh-muted);
	--bg: var(--nh-canvas);
	--card: var(--nh-surface);
	--surface-shadow: var(--nh-shadow);
}

html { background: var(--nh-canvas); }
body { font-family: 'DM Sans', Inter, system-ui, sans-serif; background: var(--nh-canvas); color: var(--nh-ink); line-height: 1.5; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: Lora, Georgia, serif; color: var(--nh-ink); letter-spacing: -.02em; }
a { color: var(--nh-sage-dark); }
:focus-visible { outline: 3px solid rgba(212, 163, 115, .72); outline-offset: 3px; }

.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 2000; transform: translateY(-200%); padding: .65rem .9rem; border-radius: 10px; background: var(--nh-ink); color: white; text-decoration: none; }
.skip-link:focus { transform: translateY(0); }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 252px; flex: 0 0 252px; display: flex; flex-direction: column; min-height: 100vh; padding: 2rem 1.25rem 1.25rem; box-sizing: border-box; background: var(--nh-surface); border-right: 1px solid var(--nh-line); }
.brand { text-decoration: none; color: var(--nh-ink); }
.brand-sidebar { display: flex; align-items: center; gap: .65rem; padding: .4rem .6rem; font-family: Lora, Georgia, serif; font-size: 1.45rem; }
.brand-sidebar strong, .brand-mobile strong { color: var(--nh-sage); }
.sidebar-kicker { margin: 1.1rem .7rem 1.75rem; color: var(--nh-muted); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-nav { display: grid; gap: .35rem; }
.sidebar .nav-link, .mobile-nav .nav-link { display: flex; align-items: center; min-height: 44px; padding: .6rem .8rem; border-radius: 12px; color: var(--nh-muted); font-weight: 600; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.sidebar .nav-link:hover, .mobile-nav .nav-link:hover { background: var(--nh-sage-soft); color: var(--nh-sage-dark); }
.sidebar .nav-link.active, .sidebar .nav-link[aria-current='page'], .mobile-nav .nav-link.active, .mobile-nav .nav-link[aria-current='page'] { background: var(--nh-sage); color: white; box-shadow: none; }
.sidebar-footer { margin-top: auto; padding: 1rem .55rem 0; }
.app-area { min-width: 0; flex: 1; }
.topbar { display: none; }
.app-content { max-width: 1320px; margin: 0 auto; padding: 2.5rem 2.75rem 4rem; }
.app-content > .container { max-width: none; margin: 0; padding: 0; }
.card { border: 1px solid var(--nh-line); border-radius: var(--nh-radius); box-shadow: var(--nh-shadow); }
.btn-primary, .tnw-btn { background: var(--nh-sage); box-shadow: none; border-radius: 12px; font-weight: 700; }
.btn-primary:hover, .tnw-btn:hover { background: var(--nh-sage-dark); box-shadow: none; transform: translateY(-1px); }
.btn-secondary { border-color: var(--nh-line); color: var(--nh-sage-dark); border-radius: 12px; }
.form-control, .tnw-input { border-color: var(--nh-line); border-radius: 12px; background: var(--nh-surface); }
.form-control:focus, .tnw-input:focus { border-color: var(--nh-sage); box-shadow: 0 0 0 3px rgba(93, 117, 101, .15); }
.culture-button, .culture-select { border-color: var(--nh-line); background-color: var(--nh-surface); color: var(--nh-ink); }

/* Auth screens keep a calm, single-purpose canvas outside the application shell. */
.tnw-page { background: var(--nh-canvas); }
.tnw-card { max-width: 430px; border: 1px solid var(--nh-line); border-radius: var(--nh-radius); box-shadow: var(--nh-shadow); }
.tnw-logo-title { font-family: Lora, Georgia, serif; color: var(--nh-ink); }
.tnw-logo-title span, .tnw-link { color: var(--nh-sage); }
.tnw-h1 { font-family: Lora, Georgia, serif; color: var(--nh-ink); }
.login-left { background: linear-gradient(145deg, var(--nh-sage) 0%, var(--nh-sage-dark) 100%); }
.login-card { border: 1px solid var(--nh-line); border-radius: var(--nh-radius); box-shadow: var(--nh-shadow); }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 2rem; box-sizing: border-box; background: radial-gradient(circle at top left, var(--nh-sage-soft), transparent 36%), var(--nh-canvas); }
.auth-panel { width: min(100%, 440px); padding: 2.75rem; background: var(--nh-surface); border: 1px solid var(--nh-line); border-radius: 20px; box-shadow: var(--nh-shadow); }
.auth-panel-signup { width: min(100%, 480px); }
.auth-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--nh-ink); text-decoration: none; font: 1.65rem Lora, Georgia, serif; }
.auth-brand strong { color: var(--nh-sage); }
.auth-kicker { margin: 1.5rem 0 .45rem; color: var(--nh-sage); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.auth-panel h1 { margin: 0; font: 2rem Lora, Georgia, serif; color: var(--nh-ink); }
.auth-subtitle { color: var(--nh-muted); line-height: 1.5; margin: .65rem 0 1.75rem; }
.auth-form { margin-top: 1.5rem; }
.auth-field { margin-top: 1rem; }
.auth-field:first-child { margin-top: 0; }
.auth-panel label { display: block; margin: 0 0 .4rem; color: var(--nh-ink); font-weight: 700; }
.auth-panel .form-control { box-sizing: border-box; min-height: 48px; }
.auth-panel small { display: block; margin-top: .4rem; color: var(--nh-muted); }
.auth-panel .validation-message, .auth-panel .validation-errors { margin: .45rem 0 0; color: #9b3c36; font-size: .9rem; }
.auth-panel .validation-message[role="alert"] { margin: 0 0 1rem; padding: .75rem .9rem; border-radius: 10px; background: #fbebe8; }
.auth-submit { width: 100%; margin-top: 1.5rem; }
.auth-footer { margin: 1.3rem 0 0; color: var(--nh-muted); text-align: center; }
.auth-footer a { color: var(--nh-sage-dark); font-weight: 700; }

@media (max-width: 520px) {
	.auth-page { align-items: start; padding: 1rem; }
	.auth-panel, .auth-panel-signup { width: 100%; padding: 1.75rem 1.25rem; border-radius: 16px; }
	.auth-brand { font-size: 1.45rem; }
}

/* Immersive authentication — mirrors the calm, editorial Stitch direction without external media. */
.auth-experience { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 45%) minmax(420px, 55%); background: var(--nh-canvas); }
.auth-form-side { display: grid; align-items: center; padding: 3rem clamp(2rem, 6vw, 7rem); background: var(--nh-surface); }
.auth-form-wrap { width: min(100%, 450px); margin: 0 auto; }
.auth-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--nh-ink); font: 1.5rem Lora, Georgia, serif; text-decoration: none; }
.auth-brand strong { color: var(--nh-sage); }
.auth-eyebrow { margin: 3.2rem 0 .65rem; color: var(--nh-sage); font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.auth-form-wrap h1 { margin: 0; font-size: clamp(2.3rem, 3.3vw, 3.65rem); line-height: 1.1; }
.auth-form-wrap h1 em { color: var(--nh-sage); font-weight: 500; }
.auth-subtitle { max-width: 390px; margin: 1rem 0 2.2rem; color: var(--nh-muted); font-size: 1.04rem; line-height: 1.65; }
.auth-form { display: grid; gap: 1.25rem; }
.auth-field { margin: 0; }
.auth-panel label, .auth-form-wrap label { margin: 0 0 .5rem; color: var(--nh-ink); font-size: .88rem; font-weight: 700; }
.auth-panel .form-control, .auth-form-wrap .form-control { min-height: 52px; padding: .75rem 0; border-width: 0 0 2px; border-radius: 0; background: transparent; color: var(--nh-ink); }
.auth-panel .form-control:focus, .auth-form-wrap .form-control:focus { border-color: var(--nh-sage); box-shadow: none; }
.auth-panel small, .auth-form-wrap small { color: var(--nh-muted); }
.auth-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; margin-top: 1.15rem; padding: 0 1.35rem; border-radius: 14px; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.auth-submit span:last-child { font-size: 1.35rem; line-height: 0; }
.auth-footer { margin: 1.5rem 0 0; color: var(--nh-muted); font-size: .92rem; text-align: center; }
.auth-footer a { color: var(--nh-sage-dark); font-weight: 800; text-underline-offset: 4px; }
.auth-mantra { margin: 3.5rem 0 0; color: var(--nh-muted); font: italic .92rem Lora, Georgia, serif; text-align: center; }
.auth-form-wrap .validation-message, .auth-form-wrap .validation-errors { margin: 0; color: #9B3C36; font-size: .88rem; }
.auth-form-wrap .validation-message[role="alert"] { padding: .75rem .9rem; border-radius: 10px; background: #FBECE8; }
.auth-art-side { position: relative; display: grid; overflow: hidden; place-items: center; min-height: 100%; padding: 3rem; background: linear-gradient(145deg, #5D7565 0%, #405847 78%); color: white; isolation: isolate; }
.auth-art-side::before { position: absolute; inset: 0; z-index: -1; content: ""; opacity: .36; background: repeating-radial-gradient(circle at 25% 20%, transparent 0 3px, rgba(255,255,255,.09) 4px 5px, transparent 7px 15px); }
.auth-art-content { width: min(100%, 520px); text-align: center; }
.auth-leaf-cluster { position: relative; display: grid; width: 158px; height: 158px; margin: 0 auto 2.5rem; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(255,255,255,.11); box-shadow: 0 24px 70px rgba(22, 42, 29, .26); }
.auth-leaf-cluster svg { filter: brightness(1.35) saturate(.6); }
.auth-leaf-cluster span { position: absolute; top: 19px; right: 25px; color: #F5D7BC; font-size: 1.35rem; }
.auth-art-content > p { margin: 0 0 .8rem; color: #EBD3B8; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.auth-art-content h2 { margin: 0; color: white; font-size: clamp(2rem, 3.4vw, 3.45rem); font-weight: 500; line-height: 1.13; }
.auth-art-note { display: flex; gap: .8rem; max-width: 360px; margin: 3.2rem auto 0; padding: 1.15rem 1.3rem; border: 1px solid rgba(255,255,255,.25); border-radius: 18px; background: rgba(255,255,255,.12); text-align: left; backdrop-filter: blur(8px); }
.auth-art-note span { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--nh-sage-dark); }
.auth-art-note p { margin: 0; color: rgba(255,255,255,.88); font-size: .87rem; line-height: 1.5; }
.auth-art-orb { position: absolute; z-index: -1; border-radius: 50%; opacity: .38; filter: blur(1px); }
.orb-one { top: -140px; right: -120px; width: 400px; height: 400px; background: #D4A373; }.orb-two { bottom: -170px; left: -140px; width: 350px; height: 350px; border: 1px solid #E7EEE8; }
.auth-signup-experience { grid-template-columns: minmax(0, 52%) minmax(380px, 48%); }.auth-signup-wrap { max-width: 520px; }.auth-signup-wrap .auth-eyebrow { margin-top: 2rem; }.auth-signup-wrap .auth-subtitle { margin-bottom: 1.25rem; }.auth-signup-wrap .auth-form { gap: .8rem; }.auth-signup-wrap .auth-submit { margin-top: .65rem; }.auth-signup-art { background: linear-gradient(150deg, #6F8675 0%, #405847 88%); }
@media (max-width: 900px) { .auth-experience, .auth-signup-experience { display: block; }.auth-art-side { display: none; }.auth-form-side { min-height: 100vh; padding: 3rem 1.5rem; }.auth-form-wrap { margin: 0 auto; }.auth-eyebrow { margin-top: 2.5rem; } }
@media (max-width: 480px) { .auth-form-side { padding: 2rem 1.25rem; }.auth-eyebrow { margin-top: 2.25rem; }.auth-form-wrap h1 { font-size: 2.25rem; }.auth-subtitle { margin-bottom: 1.75rem; }.auth-mantra { margin-top: 2.5rem; } }

/* Workspace pages: dashboard and patient directory. */
.workspace-page { display: grid; gap: 2rem; }
.workspace-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; }
.workspace-heading h1 { margin: .15rem 0 .45rem; font-size: clamp(2rem, 4vw, 3.2rem); }
.workspace-lead { margin: 0; color: var(--nh-muted); font-size: 1.05rem; }
.eyebrow { margin: 0; color: var(--nh-sage); font-size: .72rem; font-weight: 800; letter-spacing: .13em; }
.workspace-alert { padding: 1rem 1.15rem; border: 1px solid #E7C7B5; border-radius: 14px; background: #FFF5EE; color: #7C4428; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.metric-card { display: flex; align-items: center; gap: 1rem; min-height: 130px; padding: 1.35rem; background: var(--nh-surface); border: 1px solid var(--nh-line); border-radius: 20px; box-shadow: var(--nh-shadow); }
.metric-icon { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border-radius: 50%; font-size: 1.4rem; font-weight: 700; }
.metric-icon.sage { background: var(--nh-sage-soft); color: var(--nh-sage-dark); }.metric-icon.peach { background: #F5E5D7; color: var(--nh-terracotta-dark); }.metric-icon.cream { background: #F4EFD9; color: #8B7940; }
.metric-label, .metric-card small, .patient-cell small, .patient-table td small { display: block; color: var(--nh-muted); }.metric-label { font-size: .86rem; }.metric-card strong { display: block; margin: .1rem 0; font-family: Lora, Georgia, serif; font-size: 2rem; }.metric-card small { font-size: .78rem; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .8fr); gap: 1rem; align-items: stretch; }
.surface-panel { padding: 1.6rem; background: var(--nh-surface); }.panel-heading, .directory-tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.panel-heading h2, .directory-tools h2 { margin: .15rem 0 0; font-size: 1.45rem; }.panel-heading a, .text-action { color: var(--nh-sage-dark); font-weight: 750; text-decoration: none; }
.recent-list { margin-top: 1.1rem; border-top: 1px solid var(--nh-line); }.patient-row { display: flex; align-items: center; gap: .8rem; padding: .9rem .1rem; border-bottom: 1px solid var(--nh-line); color: inherit; text-decoration: none; }.patient-row:hover { color: var(--nh-sage-dark); }.patient-row small { display: block; color: var(--nh-muted); font-size: .82rem; }.patient-avatar { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; background: var(--nh-sage-soft); border-radius: 50%; color: var(--nh-sage-dark); font-size: .76rem; font-weight: 800; }.row-arrow { margin-left: auto; color: var(--nh-sage); }
.care-note { display: flex; flex-direction: column; justify-content: center; background: var(--nh-sage-soft); }.care-note h2 { margin: .45rem 0; font-size: 1.7rem; }.care-note p:not(.eyebrow) { color: var(--nh-muted); }.care-note-links { display: grid; gap: .4rem; margin-top: 1rem; }.care-note-links a { font-weight: 700; }
.patient-directory { padding: 1.6rem; }.directory-tools p { margin: .25rem 0 0; color: var(--nh-muted); }.search-field { display: flex; align-items: center; gap: .45rem; min-width: min(100%, 270px); padding-left: .85rem; border: 1px solid var(--nh-line); border-radius: 12px; background: var(--nh-surface); }.search-field .form-control { border: 0; padding-left: 0; }.search-field .form-control:focus { box-shadow: none; }
.patient-table-wrap { overflow-x: auto; margin-top: 1.35rem; }.patient-table { width: 100%; border-collapse: collapse; min-width: 650px; }.patient-table th { padding: .75rem .65rem; border-bottom: 1px solid var(--nh-line); color: var(--nh-muted); font-size: .72rem; letter-spacing: .07em; text-align: left; text-transform: uppercase; }.patient-table td { padding: 1rem .65rem; border-bottom: 1px solid var(--nh-line); color: var(--nh-ink); }.patient-cell { display: flex; align-items: center; gap: .75rem; }.patient-table td small { margin-top: .15rem; font-size: .78rem; }.dot-divider { color: var(--nh-line); }.row-actions { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; }.icon-action { padding: .35rem .45rem; border: 0; background: transparent; border-radius: 7px; color: var(--nh-muted); cursor: pointer; }.icon-action:hover { background: var(--nh-sage-soft); color: var(--nh-sage-dark); }.icon-action.danger:hover { background: #FFF0EB; color: #AE4C35; }
.empty-state { max-width: 480px; margin: 1rem auto; padding: 2.7rem 1rem; text-align: center; }.empty-state > span { display: grid; width: 50px; height: 50px; place-items: center; margin: 0 auto 1rem; border-radius: 50%; background: var(--nh-sage-soft); color: var(--nh-sage-dark); font-size: 1.5rem; }.empty-state h3 { margin: 0 0 .5rem; font-size: 1.4rem; }.empty-state p { margin: 0 auto 1.2rem; color: var(--nh-muted); }.patient-form { display: grid; gap: 1rem; }.patient-form label { display: block; margin: 0 0 .38rem; color: var(--nh-ink); font-size: .88rem; font-weight: 700; }.patient-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 760px) { .workspace-heading { align-items: flex-start; flex-direction: column; }.metric-grid, .dashboard-grid { grid-template-columns: 1fr; }.workspace-heading .btn-primary { width: 100%; text-align: center; }.directory-tools { align-items: stretch; flex-direction: column; }.search-field { min-width: 0; }.patient-directory, .surface-panel { padding: 1.15rem; }.patient-form .form-row { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
	.sidebar { display: none; }
	.topbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 0 1rem; background: rgba(255, 254, 251, .94); border-bottom: 1px solid var(--nh-line); backdrop-filter: blur(12px); }
	.brand-mobile { display: inline-flex; align-items: center; gap: .45rem; font-family: Lora, Georgia, serif; font-size: 1.2rem; }
	.hamburger { display: inline-flex !important; border: 1px solid var(--nh-line); background: var(--nh-surface); }
	.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { background: var(--nh-sage-dark); }
	.mobile-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; padding: .75rem 1rem 1rem; background: var(--nh-surface); border-bottom: 1px solid var(--nh-line); box-shadow: 0 12px 24px rgba(71, 82, 69, .08); }
	.mobile-nav.open { display: grid !important; gap: .35rem; }
	.mobile-nav.collapsed { display: none !important; }
	.app-content { padding: 1.5rem 1rem 3rem; }
}

/* Patient garden: visual directory backed only by ProNutri patient data. */
.garden-page { max-width: 1380px; margin: 0 auto; }
.garden-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--nh-line); }
.garden-heading h1 { margin: .18rem 0 .4rem; font-size: clamp(2.15rem, 4vw, 3.45rem); }
.garden-heading p:not(.eyebrow) { margin: 0; color: var(--nh-muted); font-size: 1.03rem; }
.garden-search { display: flex; align-items: center; gap: .6rem; width: min(100%, 380px); padding: .15rem 1rem; border-radius: 999px; background: var(--nh-surface); box-shadow: var(--nh-shadow); color: var(--nh-muted); }
.garden-search .form-control { min-width: 0; border: 0; padding: .75rem 0; background: transparent; }.garden-search .form-control:focus { box-shadow: none; }
.garden-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 2.2rem 0 3.6rem; }
.garden-stat, .garden-add { display: flex; align-items: center; min-height: 112px; padding: 1.35rem 1.65rem; border-radius: 22px; text-align: left; }
.garden-stat { gap: 1rem; border: 1px solid var(--nh-line); background: var(--nh-sage-soft); color: var(--nh-ink); }.archive-stat { width: 100%; cursor: pointer; background: #FFF8F3; }.archive-stat:hover { border-color: #E2BA92; }
.garden-stat-icon { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: var(--nh-surface); color: var(--nh-sage-dark); font-size: 1.55rem; box-shadow: 0 4px 12px rgba(60, 78, 65, .08); }.archive-stat .garden-stat-icon { color: var(--nh-terracotta-dark); }
.garden-stat small { display: block; color: var(--nh-muted); font-size: .83rem; font-weight: 700; }.garden-stat strong { display: block; margin-top: .15rem; color: var(--nh-sage-dark); font: 1.55rem Lora, Georgia, serif; }.archive-stat strong { font-family: inherit; font-size: 1rem; }
.garden-add { justify-content: center; gap: .7rem; border: 2px dashed #C9D5CD; background: var(--nh-surface); color: var(--nh-sage-dark); font-weight: 800; cursor: pointer; }.garden-add:hover { border-color: var(--nh-sage); background: var(--nh-sage-soft); }.garden-add span { font-size: 1.55rem; }
.garden-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.4rem 1.6rem; padding: 1.5rem 0 2rem; }
.garden-card { position: relative; display: flex; flex-direction: column; min-height: 315px; padding: 3.8rem 1.8rem 1.35rem; border: 2px solid #B5C5B9; border-radius: 25px; background: var(--nh-surface); box-shadow: 0 12px 30px rgba(58, 74, 62, .1); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }.garden-card:hover { border-color: var(--nh-sage-dark); transform: translateY(-4px); box-shadow: 0 18px 36px rgba(58, 74, 62, .15); }
.garden-avatar { position: absolute; top: -31px; left: 50%; display: grid; width: 62px; height: 62px; place-items: center; border: 4px solid var(--nh-surface); border-radius: 50%; background: var(--nh-sage-dark); color: white; font-family: Lora, Georgia, serif; font-size: 1.15rem; font-weight: 700; box-shadow: 0 7px 18px rgba(40, 59, 46, .18); transform: translateX(-50%); }
.garden-card-actions { position: absolute; top: .9rem; right: .9rem; display: flex; gap: .15rem; }.garden-icon-action { border: 0; border-radius: 8px; background: transparent; color: var(--nh-muted); cursor: pointer; font-size: .75rem; font-weight: 700; }.garden-icon-action:hover { background: var(--nh-sage-soft); color: var(--nh-sage-dark); }.garden-icon-action.danger:hover { background: #FFF0EB; color: #9B3C36; }
.garden-card-title { text-align: center; }.garden-card-title h2 { margin: 0; color: var(--nh-ink); font-size: 1.5rem; }.garden-card-title p { margin: .5rem 0 1.25rem; color: var(--nh-muted); font-size: .93rem; }
.garden-status { align-self: center; padding: .38rem .85rem; border-radius: 999px; background: var(--nh-sage-soft); color: var(--nh-sage-dark); font-size: .69rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }.garden-status.archived { background: #F2E8DE; color: #8A664A; }
.garden-details { display: grid; gap: .8rem; margin: auto 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--nh-line); }.garden-details div { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }.garden-details dt { color: var(--nh-muted); font-size: .67rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.garden-details dd { margin: 0; color: var(--nh-ink); font-size: .82rem; text-align: right; }
.garden-card-footer { display: flex; align-items: center; justify-content: space-between; }.garden-card-footer .text-action { font-size: .85rem; }.garden-arrow { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--nh-line); border-radius: 50%; color: var(--nh-sage-dark); font-size: 1.2rem; }
.garden-empty { max-width: 560px; margin: 3rem auto; padding: 3rem 1.5rem; border: 2px dashed #C9D5CD; border-radius: 24px; text-align: center; }.garden-empty > span { display: grid; width: 56px; height: 56px; place-items: center; margin: 0 auto 1rem; border-radius: 50%; background: var(--nh-sage-soft); color: var(--nh-sage-dark); font-size: 1.7rem; }.garden-empty h2 { margin: 0; }.garden-empty p { margin: .7rem auto 1.4rem; color: var(--nh-muted); }
@media (max-width: 1024px) { .garden-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.garden-actions { gap: .85rem; } }
@media (max-width: 760px) { .garden-heading { align-items: stretch; flex-direction: column; gap: 1.2rem; padding-bottom: 1.35rem; }.garden-search { width: auto; }.garden-actions { grid-template-columns: 1fr; margin: 1.5rem 0 3rem; }.garden-stat, .garden-add { min-height: 90px; }.garden-grid { grid-template-columns: 1fr; gap: 3.1rem; }.garden-card { min-height: 300px; }.garden-details div { align-items: flex-start; flex-direction: column; gap: .2rem; }.garden-details dd { text-align: left; } }

/* Unified visual contrast: defined edges and layered surfaces across every workspace. */
:root {
	--nh-canvas: #F4F1EA;
	--nh-surface: #FFFCF7;
	--nh-sage-soft: #E3ECE5;
	--nh-line: #D6DED6;
	--nh-line-strong: #B5C5B9;
}

.sidebar { background: #F8F6F0; border-right-width: 2px; }
.topbar, .mobile-nav { border-color: var(--nh-line-strong); }
.card, .tnw-card, .login-card, .auth-panel { border-width: 2px; }
.btn-secondary, .culture-button, .culture-select { border: 2px solid var(--nh-line-strong); }
.form-control, .tnw-input { border: 2px solid var(--nh-line); }
.metric-card, .surface-panel, .care-card, .history-panel, .plans-list, .meal-overview, .plan-picker, .welcome-panel, .patient-directory {
	border: 2px solid var(--nh-line);
	border-radius: var(--nh-radius);
	box-shadow: var(--nh-shadow);
}
.metric-card:nth-child(1) { background: var(--nh-sage-soft); }
.metric-card:nth-child(2) { background: #FFF7F1; border-color: #EBD9C7; }
.metric-card:nth-child(3) { background: #FFFDF8; }
.workspace-alert { border-width: 2px; }
.search-field { border-width: 2px; }
.recent-list, .patient-row, .patient-table th, .patient-table td { border-color: var(--nh-line); }

.garden-heading { border-bottom-width: 2px; }
.garden-search { border: 2px solid var(--nh-line); }
.garden-stat { border-width: 2px; border-color: var(--nh-line); }
.archive-stat { border-color: #EBD9C7; }
.garden-add { border-color: var(--nh-line-strong); background: #FFFDF9; }
.garden-details { border-top-width: 2px; }
.garden-arrow { border-width: 2px; border-color: var(--nh-line); }

/* Same garden-inspired hierarchy for clinical, planning, financial and profile flows. */
.care-page { gap: 2rem; }
.care-heading { padding: 0 0 1.5rem; border-bottom: 2px solid var(--nh-line); }
.care-heading h1 { margin: .3rem 0 .45rem; }
.care-heading > div > p:not(.eyebrow) { margin: 0; color: var(--nh-muted); }
.care-card, .history-panel, .plans-list, .meal-overview { background: var(--nh-surface); }
.care-card .section-icon, .list-title > span { border: 2px solid var(--nh-line); background: var(--nh-sage-soft); }
.plan-picker { background: #FFFDF8; }
.plan-card { border: 2px solid var(--nh-line); background: #FFFDF9; }
.meal-chip { border-width: 2px; }
.welcome-panel { border: 2px dashed var(--nh-line-strong); background: #FFFDF9; }
.care-note { border-color: var(--nh-line-strong); }
.care-note-links a { display: inline-flex; width: fit-content; padding: .45rem .65rem; border: 1px solid var(--nh-line-strong); border-radius: 999px; background: var(--nh-surface); text-decoration: none; }
.patient-avatar { border: 2px solid var(--nh-surface); box-shadow: 0 3px 8px rgba(58, 74, 62, .1); }
.status-pill { border: 1px solid rgba(93, 117, 101, .16); }

/* Form sizing and modal containment: inputs must never force a grid column wider. */
*, *::before, *::after { box-sizing: border-box; }
input, select, textarea, button { max-width: 100%; }
.field-grid > *, .patient-form .form-row > * { min-width: 0; }
.modal-overlay { align-items: center; padding: 1.5rem; }
.modal-window { width: min(720px, 100%); max-height: calc(100vh - 3rem); border: 2px solid var(--nh-line-strong); border-radius: 22px; background: var(--nh-surface); }
.modal-header, .modal-footer { border-color: var(--nh-line); }
.modal-body { overflow-x: hidden; overflow-y: auto; }

/* Authentication keeps the editorial composition while restoring legible, complete controls. */
.auth-form-wrap .form-control {
	width: 100%;
	min-height: 54px;
	padding: .75rem 1rem;
	border: 2px solid var(--nh-line-strong);
	border-radius: 14px;
	background: #FFFDF9;
}
.auth-form-wrap .form-control:focus {
	border-color: var(--nh-sage);
	box-shadow: 0 0 0 4px rgba(93, 117, 101, .14);
}