/*
 * Luma — Healthcare SaaS design system
 *
 * Font stack: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial
 *   → Renders as SF Pro on macOS, Segoe UI on Windows. Sans-serif only; no decorative fonts.
 *
 * Type scale:
 *   Display 1.75rem / bold     — section heroes
 *   H1      1.375rem / bold    — card titles
 *   H2      1.125rem / semibold — subsections, KPI values
 *   Body    0.9375rem / regular — default copy
 *   Small   0.8125rem / medium  — labels, meta
 *   Caption 0.75rem / medium    — units, footnotes
 *
 * Line height: tight 1.25 (headings), body 1.5 (copy), relaxed 1.6 (long text).
 * Letter-spacing: tight -0.02em (headings), wide 0.02em (labels/caps).
 *
 * Rationale: System fonts load instantly and feel native/trustworthy.
 * Blue/red/orange theme (Bootstrap-style) for buttons and accents; grey reserved for footer/muted.
 */
:root{
  /* Font stack: system UI first, no decorative or web fonts */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Background and text — warm white / blue-tinted, no grey in main UI */
  --bg: #f0f4ff;
  --bg-elevated: #ffffff;
  --text: #1a1d26;
  --text-secondary: #1e3a5f;
  --text-muted: #3b5a82;
  --border: #c7d4ed;
  --border-light: #e2eaf5;

  /* Primary: Bootstrap-style blue (works with Luma logo) */
  --primary: #0d6efd;
  --primary-hover: #0b5ed7;
  --primary-active: #0a58ca;
  --primary-subtle: rgba(13, 110, 253, 0.12);
  --primary-border: rgba(13, 110, 253, 0.35);

  /* Danger (red) and Warning (orange) */
  --danger: #dc3545;
  --danger-hover: #bb2d3b;
  --danger-subtle: rgba(220, 53, 69, 0.1);
  --warning: #fd7e14;
  --warning-hover: #e56b00;
  --warning-subtle: rgba(253, 126, 20, 0.12);

  /* Semantic (success stays green for positive states only) */
  --good: #198754;
  --warn: #fd7e14;
  --bad: #dc3545;
  --spark-line: #6c9ce8;

  /* Typography scale — headings confident, body readable */
  --fs-display: 1.75rem;    /* 28px — hero / section */
  --fs-h1: 1.375rem;       /* 22px — card titles */
  --fs-h2: 1.125rem;       /* 18px — subsections */
  --fs-body: 0.9375rem;    /* 15px — body */
  --fs-small: 0.8125rem;   /* 13px — labels, meta */
  --fs-caption: 0.75rem;   /* 12px — captions, units */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.25;
  --lh-body: 1.5;
  --lh-relaxed: 1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;

  /* Spacing & shape */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 4px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 28px rgba(0,0,0,.08);

  /* Legacy aliases for existing classes */
  --card: var(--bg-elevated);
  --muted: var(--text-muted);
  --brand: var(--primary);
  --brand2: var(--primary);
  --fs-11: var(--fs-caption);
  --fs-12: var(--fs-caption);
  --fs-13: var(--fs-small);
  --fs-14: var(--fs-body);
  --fs-16: var(--fs-h2);
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: var(--fs-display);
  --radius-14: 14px;

  /* Grey only for footer */
  --footer-bg: #f8f9fa;
  --footer-color: #6c757d;
  --footer-link: #495057;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{overflow-x:hidden;
  margin:0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Auth-only mode */
body.unauth header{display:none;}
body.unauth #appShell{display:none;}
header.site-header{
  position:sticky; top:0; z-index:10;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background: rgba(255,255,255,.72);
  border-bottom:1px solid rgba(255,255,255,.5);
  padding: var(--space-4) 0 var(--space-2);
}
#appShell{
  padding-top: var(--space-6);
}
.container{width:100%; max-width:100%; margin:0; padding-left:var(--space-4); padding-right:var(--space-4); box-sizing:border-box;}
@media(min-width:600px){
  .container{padding-left:var(--space-5); padding-right:var(--space-5);}
}
.grid{display:grid; gap: var(--space-4);}
.grid > *{min-width:0;}
.brand{
  display:flex; align-items:center; gap: var(--space-4);
  min-height:48px;
}
.brand-text{min-width:0;}
.brand-title{
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin:0;
  line-height: var(--lh-tight);
  color: var(--text);
}
.brand-tagline{
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin: var(--space-1) 0 0 0;
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-medium);
}
.brand-spacer{flex:1; min-width: var(--space-3);}
.brand-user{margin-left: var(--space-2); font-size: var(--fs-small); color: var(--text-secondary);}
.btn-auth{padding: var(--space-2) var(--space-4); font-size: var(--fs-small); font-weight: var(--fw-semibold);}
.logo{
  width:44px; height:44px;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
}
.logo img{width:100%; height:100%; object-fit:contain; display:block;}
nav{
  display:flex; gap: var(--space-2); flex-wrap:wrap;
  margin-top: var(--space-3); padding-bottom: var(--space-1);
}
.tab{
  border:1px solid var(--border);
  background: var(--bg-elevated);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  cursor:pointer; user-select:none;
  font-size: var(--fs-small); font-weight: var(--fw-medium);
  line-height: var(--lh-tight); letter-spacing: var(--tracking-normal);
}
.tab:hover{ color: var(--text-secondary); border-color: var(--border); }
.tab.active{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: var(--fw-semibold);
}
.tab.active:hover{ background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
@media(min-width:900px){
  .grid.cols-3{grid-template-columns: 1fr 1fr 1fr;}
  .grid.cols-2{grid-template-columns: 1fr 1fr;}
}
.card{
  background: var(--bg-elevated);
  border:1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-5);
  min-width:0;
}
.card:has(.table){overflow-x:auto;}
.card-head{margin-bottom:var(--space-2);}
.card-head h2{margin:0;}
.card h2{
  margin:0 0 var(--space-3) 0;
  font-size: var(--fs-h2); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight); line-height: var(--lh-tight);
  color: var(--text);
}

.coach-suggestion{display:flex; align-items:center; gap: var(--space-2); margin: 10px 0;}
.coach-icon{flex-shrink:0; font-size:1rem; line-height:1;}
.coach-text{font-size: var(--fs-small); color: var(--text); line-height: 1.55;}

.herohead{display:flex; align-items:baseline; justify-content:space-between; gap: var(--space-3); margin-bottom: var(--space-3);}
.hero-title{font-size: var(--fs-h2); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--text);}
.hero-meta{font-size: var(--fs-small); color: var(--text-muted); line-height: var(--lh-tight); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.kpis{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4); grid-auto-rows: 1fr;}

.kpi{
  display:flex; flex-direction:column;
  padding: var(--space-4);
  border:1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  min-width:0;
  box-shadow: var(--shadow-sm);
}
.kpi .label{font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-secondary); line-height: var(--lh-tight); letter-spacing: var(--tracking-wide);}
.kpi .kpi-unit{font-size: var(--fs-caption); color: var(--text-muted); font-weight: var(--fw-medium); margin-top: var(--space-1); margin-bottom: var(--space-2); line-height: var(--lh-tight);}
.kpi .value{font-size: var(--fs-h2); font-weight: var(--fw-bold); margin-top:auto; line-height: var(--lh-tight); color: var(--text); letter-spacing: var(--tracking-tight);}
.kpi .value.kpi-value--positive{color: var(--good);}
.kpi .value.kpi-value--negative{color: var(--bad);}
.progress{margin-top: var(--space-3); height:8px; background: var(--primary-subtle); border-radius: var(--radius-full); overflow:hidden;}
.progress > div{height:100%; width:0%; background: var(--primary); border-radius: var(--radius-full);}
.row{display:flex; gap: var(--space-3); flex-wrap:wrap; align-items:center;}
input, select, button, textarea{ font-family: var(--font-sans); font-size: var(--fs-body); }
input, select{
  padding: var(--space-3) var(--space-4);
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  min-width:180px;
  line-height: var(--lh-tight);
  color: var(--text);
}
input::placeholder, input::-webkit-input-placeholder{ color: var(--text-muted); }

/* Bootstrap-style buttons (https://getbootstrap.com/docs/5.3/components/buttons/) */
.btn, button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-normal);
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
/* Primary: filled blue (default for plain buttons and .btn-primary) */
button:not(.ghost):not(.btn-outline-primary):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-danger):not(.btn-warning),
.btn-primary{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
button:not(.ghost):not(.btn-outline-primary):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-danger):not(.btn-warning):hover,
.btn-primary:hover{
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
}
/* Ghost = outline primary (Bootstrap btn-outline-primary) */
button.ghost,
.btn-outline-primary{
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}
button.ghost:hover,
.btn-outline-primary:hover{
  background: var(--primary-subtle);
  border-color: var(--primary-hover);
  color: var(--primary-hover);
}
/* Danger (red) for delete etc. */
.btn-danger{
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger:hover{ background: var(--danger-hover); border-color: var(--danger-hover); color: #fff; }
.btn-outline-danger{
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}
.btn-outline-danger:hover{ background: var(--danger-subtle); color: var(--danger-hover); }
/* Warning (orange) */
.btn-warning{
  background: var(--warning);
  border-color: var(--warning);
  color: #fff;
}
.btn-warning:hover{ background: var(--warning-hover); border-color: var(--warning-hover); color: #fff; }
.btn-outline-warning{
  background: transparent;
  border: 1px solid var(--warning);
  color: var(--warning);
}
.btn-outline-warning:hover{ background: var(--warning-subtle); color: var(--warning-hover); }
/* Sizes */
.btn-sm, button.btn-sm{ padding: var(--space-2) var(--space-3); font-size: var(--fs-caption); }
.btn-lg{ padding: var(--space-4) var(--space-5); font-size: var(--fs-body); }

.pill{display:inline-flex; align-items:center; gap: 4px; padding: 3px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: var(--fw-semibold); line-height: 1.2; border:1px solid var(--border); background: var(--primary-subtle); color: var(--primary); text-transform: uppercase; letter-spacing: 0.02em;}
.pill strong{color: var(--text); font-weight: var(--fw-bold);}
.pill.good{border-color: rgba(25,135,84,.35); color: #0d5c3d; background: rgba(25,135,84,.08);}
.pill.warn{border-color: rgba(253,126,20,.35); color: #994500; background: rgba(253,126,20,.08);}
.pill.bad{border-color: rgba(220,53,69,.35); color: #a71d2a; background: rgba(220,53,69,.08);}
.table{width:100%; border-collapse: collapse;}
.table th, .table td{border-top:1px solid var(--border-light); padding: var(--space-2) var(--space-3); vertical-align:middle; font-size: var(--fs-small); line-height: 1.35; color: var(--text);}
.table th{color: var(--text-secondary); font-weight: var(--fw-semibold); text-align:left; font-size: var(--fs-caption); letter-spacing: var(--tracking-wide); line-height: var(--lh-tight);}
.table .item-cell{vertical-align:middle;}
.table .item-cell .item-body{min-width:0;}
.table .item-cell .imgwrap{width:44px; height:44px;}
.table .item-cell .preview{width:44px; height:44px; border-radius:6px;}
.table .item-cell .item-title{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
.table .item-cell .item-notes{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
.table td.cell--concerning{color: var(--bad); font-weight: var(--fw-semibold);}

/* Responsive helpers */
.mobile-only{display:none;}
.desktop-only{display:block;}

/* JS can force mobile mode too (more reliable than Safari quirks/caching) */
body.is-mobile .mobile-only{display:block;}
body.is-mobile .desktop-only{display:none;}

@media(max-width:700px){
  .mobile-only{display:block;}
  .desktop-only{display:none;}

  /* keep tables scrollable elsewhere */
  .table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .table th, .table td{white-space:nowrap;}
  .table th:first-child, .table td:first-child{white-space:normal; min-width:260px;}
}

.logcard{border:1px solid var(--border-light); border-radius: var(--radius); padding: var(--space-3); background: var(--bg-elevated); box-shadow: var(--shadow-sm); margin-bottom: var(--space-2);}
.logcard .item{align-items:center; gap: var(--space-2);}
.logcard .imgwrap{width:52px; height:52px;}
.logcard .preview{width:52px; height:52px;}
.logcard-row{justify-content:space-between; align-items:center; gap: var(--space-2);}
.logcard-kcal{text-align:right; min-width:72px;}
.logcard-kcal-value{font-weight: var(--fw-bold); font-size: var(--fs-body); line-height: var(--lh-tight); color: var(--text);}
.logcard-pills{margin-top: var(--space-2);}
.logcard .item-title,.logcard .item-notes{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.logcard .item-notes{max-width:200px;}
.logcard .item-body{min-width:0;}
.item-title-row{display:flex; align-items:center; justify-content:flex-start; gap: var(--space-2); min-width:0; width:100%; flex-wrap:wrap;}
.item-title-row .item-title{flex:0 1 auto; min-width:0; max-width:72%; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.item-title-row .item-labels{flex-shrink:0; display:inline-flex; align-items:center; flex-wrap:wrap; gap: 4px;}
.item-title{font-weight: var(--fw-semibold); font-size: var(--fs-body); line-height: var(--lh-tight); color: var(--text);}
.item-title-ellipsis{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.item-labels{margin: 0; line-height: var(--lh-tight);}
.item-title-row .item-labels .pill-inline{font-size: 0.625rem; line-height: var(--lh-tight); vertical-align:middle; padding: 2px 5px;}
.item-notes{margin-top: 2px; font-size: var(--fs-caption); color: var(--text-secondary);}
.item-time{margin-top: 2px; font-size: 11px; color: var(--text-muted);}
.log-date-cell{white-space:nowrap;}
.log-time{font-size: 11px;}
.log-item-cell .item-notes{max-width:200px; font-size: var(--fs-caption); line-height: 1.3;}

/* Summary charts */
.pies{display:grid; grid-template-columns: 1fr; gap: var(--space-3);}
@media(min-width:900px){.pies{grid-template-columns: 1fr;}}
.piecard{display:flex; align-items:center; gap: var(--space-3); padding: var(--space-3); border:1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--bg-elevated); box-shadow: var(--shadow-sm);}
.pie{width:44px; height:44px; border-radius: var(--radius-full); background: conic-gradient(var(--c) calc(var(--p)*1%), var(--border-light) 0); box-shadow: 0 4px 12px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08), inset 0 1px 2px rgba(255,255,255,.35), inset 0 0 0 6px var(--bg-elevated), inset 0 -1px 2px rgba(0,0,0,.06);}

.trendgrid{display:grid; grid-template-columns: 1fr; gap: var(--space-3);}
@media(min-width:600px){.trendgrid{grid-template-columns: repeat(2, minmax(0,1fr));}}
.trendcard{padding: var(--space-4); border:1px solid var(--border-light); border-radius: var(--radius); background: var(--bg-elevated); box-shadow: var(--shadow-sm);}
.trendcard .label{font-size: 11px; font-weight: var(--fw-semibold); color: var(--text-muted); margin-bottom: var(--space-1);}
.trendcard .trend-meta{font-size: 10px; margin-top: var(--space-1); color: var(--text-muted);}
.spark-wrap{width:100%; margin-top: var(--space-2); border-radius: var(--radius-sm); overflow:hidden; background: transparent; min-height:72px;}
.spark{width:100%; height:72px; display:block;}
.spark path{fill:none; stroke: var(--spark-line); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round;}
.spark line.axis{stroke: var(--border); stroke-width:1;}
.spark .axis-label{fill: var(--text-muted); font-size: 8px; font-family: var(--font-sans);}

.item{display:flex; gap:10px; align-items:center;}
.imgwrap{position:relative; width:88px; height:88px; flex:0 0 auto;}
.preview{width:88px; height:88px; border-radius:12px; border:1px solid var(--border); object-fit:cover; background:#f1f4fb; display:block;}
/* Log page table: compact image column */
.log-row .imgwrap.log-row-img{width:40px; height:40px;}
.log-row .imgwrap.log-row-img img{width:40px; height:40px; border-radius:6px;}
.log-row .item{gap:8px;}
.log-row .item-body{min-width:0;}
.log-row .item-title,.log-row .item-notes{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.log-row .item-notes{max-width:180px;}
/* Inline pills in log rows (readable size) */
.pill-inline{display:inline-flex; align-items:center; font-size: 0.625rem; padding: 2px 5px; margin-right: var(--space-2); margin-bottom: var(--space-1); border-radius: 4px; line-height: 1.2; border:1px solid var(--border); background: var(--bg-elevated); color: var(--text-muted); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.02em;}
.pill-inline.good{border-color: rgba(25,135,84,.35); color: #0d5c3d; background: rgba(25,135,84,.08);}
.pill-inline.warn{border-color: rgba(253,126,20,.35); color: #994500; background: rgba(253,126,20,.08);}
.pill-inline.bad{border-color: rgba(220,53,69,.35); color: #a71d2a; background: rgba(220,53,69,.08);}
.pill-inline strong{color: inherit; font-weight: var(--fw-semibold);}

.pencil{border:1px solid var(--border); background: var(--bg-elevated); width:34px; height:34px; border-radius: var(--radius); cursor:pointer;}
.pencil:hover{border-color: var(--primary-border);}

.pencil-overlay{
  position:absolute; right: var(--space-2); bottom: var(--space-2);
  width:30px; height:30px; border-radius: var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.96); border:1px solid var(--border-light);
  box-shadow: var(--shadow);
  opacity:0; transform: translateY(2px);
  transition: opacity .15s ease, transform .15s ease;
}
.imgwrap:hover .pencil-overlay, .imgwrap:focus-within .pencil-overlay{ opacity:1; transform: translateY(0); }

/* Modal */
.modal-backdrop{position:fixed; inset:0; background: rgba(26,29,38,.5); display:none; align-items:center; justify-content:center; padding: var(--space-5); z-index:50;}
.modal-backdrop[aria-hidden="true"]{pointer-events:none;}
.modal{max-width:720px; width:100%; background: var(--bg-elevated); border-radius: var(--radius-lg); border:1px solid var(--border); box-shadow: var(--shadow-lg); overflow:hidden;}
.modal header{position:unset; backdrop-filter:none; background: var(--bg-elevated); border-bottom:1px solid var(--border-light);}
.modal .body{padding: var(--space-5);}
.modal .actions{display:flex; gap: var(--space-3); justify-content:flex-end; padding: var(--space-4); border-top:1px solid var(--border-light); background: var(--bg);}
textarea{width:100%; min-height:92px; resize:vertical; padding: var(--space-3) var(--space-4); border:1px solid var(--border); border-radius: var(--radius); font-family: var(--font-sans); line-height: var(--lh-body);}

.form-table{width:100%; border-collapse:separate; border-spacing:0 var(--space-3);}
.form-table td:first-child{width:160px; color: var(--text-secondary); font-weight: var(--fw-semibold); font-size: var(--fs-small); padding-right: var(--space-3); line-height: var(--lh-tight);}
.form-table td{vertical-align:middle;}
.form-table input, .form-table select{width:100%;}

details.labs{border:1px solid var(--border-light); border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--bg-elevated); box-shadow: var(--shadow-sm);}
details.labs summary{cursor:pointer; font-weight: var(--fw-semibold); color: var(--text);}
.muted{color: var(--text-muted); font-size: var(--fs-small); line-height: var(--lh-body);}
hr{border:none; border-top:1px solid var(--border-light); margin: var(--space-4) 0;}
/* Footer: only place that uses grey; full-bleed left/right */
.footer{
  padding: var(--space-5) var(--space-4) var(--space-6);
  margin-left: calc(-1 * var(--space-4));
  margin-right: calc(-1 * var(--space-4));
  width: calc(100% + 2 * var(--space-4));
  background: var(--footer-bg);
  color: var(--footer-color);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  border-top: 1px solid #dee2e6;
  margin-top: var(--space-6);
  box-sizing: border-box;
}
@media(min-width:600px){
  .footer{padding-left: var(--space-5); padding-right: var(--space-5); margin-left: calc(-1 * var(--space-5)); margin-right: calc(-1 * var(--space-5)); width: calc(100% + 2 * var(--space-5));}
}
.footer-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: var(--space-2) var(--space-4);}
.footer-copy{}
.footer-links{display:flex; align-items:center; gap: var(--space-2);}
.footer-link{color: var(--footer-link); text-decoration:none;}
.footer-link:hover{color: #212529; text-decoration:underline;}
.footer-sep{color: var(--footer-color); opacity:.8;}
.footer .muted{color: var(--footer-color);}

.bmiHero{padding: var(--space-4); border:1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--bg-elevated); box-shadow: var(--shadow-sm);}
.bmiBig{font-size: var(--fs-display); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--text);}
.small{font-size: var(--fs-small); color: var(--text-muted); line-height: var(--lh-body);}

.icon-btn {
  padding: var(--space-2);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--border-light); }
.delete-log-item {
  padding: 4px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.delete-log-item:hover { opacity: 0.85; }
.delete-log-item svg { display: block; }