/* ----------------- THEME + BASE ----------------- */
  :root{
    --bg:#f5f7fb; --card:#fff; --text:#111; --muted:#6b7280; --border:#e6e9ef;
    --accent1:#4fc3ff; --accent2:#2c9cff; --pill-bg:#ffffff;
  }
  body.dark {
    --bg:#0e1116; --card:#121417; --text:#e6eef8; --muted:#9aa4b2; --border:#222529;
    --accent1:#60a5fa; --accent2:#2563eb; --pill-bg:#202428;
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; font-family:Inter,system-ui,Arial,sans-serif;
    background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none}

  /* ------------- TOPBAR ------------- */
  .topbar{
    position:fixed; inset:0 0 auto 0; height:72px; display:flex; align-items:center;
    justify-content:space-between; padding:10px 20px; z-index:1000;
    background: linear-gradient(90deg,var(--accent1),var(--accent2));
    box-shadow:0 2px 8px rgba(16,24,40,0.12);
  }
  .topbar-left{display:flex;align-items:center;gap:14px}
  .home-icon{width:46px;height:46px;border-radius:50%;background:var(--pill-bg);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--accent2)}
  .site-title{font-size:20px;font-weight:700;color:rgba(255,255,255,0.95);margin-left:6px}

  .topbar-right{display:flex;align-items:center;gap:12px}
  .pill{
    display:inline-flex; align-items:center; gap:10px;
    padding:8px 18px; border-radius:999px; background:var(--pill-bg); color:var(--text);
    font-weight:600; border:none; cursor:pointer; box-shadow:0 1px 3px rgba(2,6,23,0.06);
  }
  .pill.small{padding:6px 12px;font-size:14px}
  .icon-btn{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--pill-bg);border:none;cursor:pointer}

  /* Ensure content not under topbar */
  main { padding: 100px 24px 60px; max-width:1200px; margin:0 auto; }

  /* ------------- GRID & CARDS ------------- */
  .grid{ display:grid; gap:22px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
  .card{ background:var(--card); border:1px solid var(--border); padding:18px;
     border-radius:12px; 
     box-shadow:0 2px 8px rgba(2,6,23,0.03); 
     min-height:140px }

  .card:hover {
  transform: translateY(-10px);
}
  .card h3{ margin:0 0 12px; font-size:18px }
  .line{height:2px;background:rgba(0,0,0,0.06);margin-bottom:12px;border-radius:2px}

  .list{display:flex;flex-direction:column;gap:10px}
  .list-item{display:flex;align-items:center;gap:12px;background:var(--bg);padding:10px;border-radius:8px;border:1px solid var(--border)}
  .muted{margin-left:auto;color:var(--muted)}

  /* inputs */
  input[type="text"], input[type="date"], input[type="time"], textarea {
    width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text);
  }
  .row{display:flex;gap:8px;align-items:center}
  .btn-primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white;border:none;padding:10px 16px;border-radius:8px;font-weight:700;cursor:pointer}
  .btn-outline{background:transparent;border:1px solid var(--border);padding:8px 12px;border-radius:8px;cursor:pointer}

  /* small lists */
  ul.plain{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
  ul.plain li{padding:8px;background:rgba(0,0,0,0.02);border-radius:8px;border:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}

  /* print modal */
  .print-modal{position:fixed;top:80px;right:20px;width:320px;background:var(--card);border:1px solid var(--border);padding:14px;border-radius:10px;box-shadow:0 8px 30px rgba(2,6,23,0.12);display:none;z-index:1200}
  .print-modal label{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:15px}
  .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}

  /* responsive */
  @media (max-width:720px){
    .topbar{padding:12px}
    .site-title{display:none}
    .print-modal{left:10px;right:10px;top:80px;width:auto}
  }

  /* ---------- PRINT RULES ---------- */
  @media print{
    body *{visibility:hidden!important;display:none!important;}
    #printArea, #printArea *{visibility:visible!important;display:block!important}
    #printArea{position:absolute;left:0;top:0;right:0;padding:10mm;background:#fff}
    .print-cover{page-break-after:always}
    .print-section{page-break-inside:avoid;margin-bottom:12mm}
  }

  /* meals */
  .meals-table { width:100%; border-collapse:collapse; margin-bottom:12px; }
  .meals-table th, .meals-table td { padding:6px 8px; text-align:left; }
  .meal-inputs{display:flex;gap:8px;flex-wrap:wrap}
  .meal-inputs input{flex:1;min-width:100px}
  .del-btn {
    width: 14px;
    height: 14px;
    padding: 0;
    margin-left: 6px;

    background: #ff4d4d;
    border: none;
    border-radius: 6px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: 0.2s;
}

.del-btn i {
    font-size: 13px;
    color: white;
}

.del-btn:hover {
    background: #d93636;
    transform: scale(1.1);
}

/* ============================================================
   FOOTER
============================================================ */
/* Style the footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}