:root{
  --bg:#06030b;
  --panel:#0b0613;
  --panel2:#080411;
  --stroke: rgba(255,255,255,.14);
  --text:#f7f4ff;
  --muted:rgba(215,205,246,.78);
  --accent:#a855f7;
  --good:#53ffb0;
  --bad:#ff6b9e;
  --shadow: 0 16px 42px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background: linear-gradient(180deg, #05030b 0%, #070412 55%, #090518 100%);
  overflow-x:hidden;
}

/* Top bar */
.topbar{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  background: rgba(8,4,14,.90);
  border-bottom: 1px solid var(--stroke);
  padding:12px 14px;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
}
.brand{ display:flex; gap:10px; align-items:center; min-width: 0;}
.logo{
  width:38px; height:38px; display:grid; place-items:center; border-radius:12px;
  background: rgba(168,85,247,.18);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
  flex:0 0 auto;
}
.title{ font-weight:900; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.subtitle{ color:var(--muted); font-size:12px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.top-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

/* Layout */
.layout{
  max-width: 860px;
  margin: 12px auto 120px;
  padding: 0 12px;
}
.panel{ display:none; padding-top:10px; }
.panel.active{ display:block; }
.panel-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; margin: 6px 2px 10px;
}
.panel-head h2{ margin:0; font-size: 18px; }
.hint{ color:var(--muted); font-size:12px; }

/* Cards */
.card{
  border:1px solid var(--stroke);
  background: rgba(8,4,14,.92);
  border-radius:18px;
  padding:14px;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }

.grid{ display:grid; gap:12px; }
.grid.two{ grid-template-columns: 1fr 1fr; }
.grid.three{ grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 520px){
  .grid.two{ grid-template-columns:1fr; }
  .grid.three{ grid-template-columns:1fr; }
  .top-actions{ gap:6px; }
}

.row{ margin-top:10px; }
.row-inline{ display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap; }

.label{ display:block; color:var(--muted); font-size:12px; margin-bottom: 0px; }
.micro{ color:var(--muted); font-size:12px; }
.big{ font-size:24px; font-weight:950; letter-spacing:.2px; }

/* Inputs */
.input,.textarea,select{
  width:100%;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.38);
  color:var(--text);
  padding:10px 12px;
  outline:none;
}
.textarea{ resize: vertical; min-height: 110px; }

/* Buttons */
.btn{
  border:1px solid rgba(168,85,247,.35);
  background: rgba(168,85,247,.16);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:900;
}
.btn:hover{ filter: brightness(1.05); }
.btn.ghost{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  color:var(--text);
}
.btn.small{ padding:8px 10px; border-radius:12px; font-weight:900; }

.chip{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  color:var(--text);
  padding:7px 10px;
  border-radius:999px;
  cursor:pointer;
}
.chip.active{
  border-color: rgba(168,85,247,.45);
  background: rgba(168,85,247,.14);
}

.stack{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.item{
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:12px;
  background: rgba(0,0,0,.26);
}
.item-title{ font-weight:950; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.item-sub{ color:var(--muted); font-size:12px; margin-top:4px; }
.item-body{ margin-top:10px; white-space:pre-wrap; line-height:1.4; }

.pill{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
}

.divider{ height:1px; background: var(--stroke); margin:14px 0; }

.mood{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }

.summary{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:10px; }
.stat{ border:1px solid var(--stroke); border-radius:16px; padding:10px; background: rgba(0,0,0,.22); }

.cal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.cal-title{ font-weight:950; letter-spacing:.2px; }
.cal-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:8px;
}
.day{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  border-radius:14px;
  padding:10px 8px;
  min-height:52px;
  cursor:pointer;
  position:relative;
  -webkit-tap-highlight-color: transparent;
}
.day.dim{ opacity:.45; }
.day.selected{ border-color: rgba(168,85,247,.45); background: rgba(168,85,247,.10); }
.day .num{ font-weight:950; }
.dot{
  width:8px; height:8px; border-radius:999px;
  background: rgba(168,85,247,.9);
  position:absolute; right:10px; bottom:10px;
  box-shadow: 0 0 0 4px rgba(168,85,247,.12);
}

/* Bottom navigation */
.bottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  background: rgba(8,4,14,.95);
  border-top: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  z-index: 50;
}
.navbtn{
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  color: var(--muted);
  border-radius: 16px;
  padding: 10px 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: 4px;
  font-weight: 950;
  -webkit-tap-highlight-color: transparent;
}
.navbtn .ico{ font-size: 18px; line-height: 1; }
.navbtn .lbl{ font-size: 11px; letter-spacing: .2px; }
.navbtn.active{
  color: var(--text);
  border-color: rgba(168,85,247,.35);
  background: rgba(168,85,247,.14);
}

.footer{ max-width:860px; margin:0 auto; padding:12px 12px 140px; opacity:.9; }


/* Journal accent aesthetics (v6) */
.j-title-mini{
  color: var(--accent);
  text-shadow: 0 0 8px rgba(168,85,247,.35);
}
.j-mood-mini{
  filter: drop-shadow(0 0 6px rgba(168,85,247,.45));
}


/* Options panel helpers */
#panel-options .row-inline{ justify-content:flex-start; }

/* Display toggles */
.compact .stack{ gap:8px; }
.compact .item{ padding:10px; }
.large-text body{ font-size: 17px; }
.large-text .big{ font-size: 26px; }



/* --- v9: prevent content being hidden behind bottom nav --- */
body{
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
.layout{
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
}
.panel{
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
}


/* --- v9: bottom nav shouldn't show "see-through" gaps --- */
.bottom-nav{
  bottom: 0;
  background: rgba(8,4,14,.98) !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 -16px 40px rgba(0,0,0,.55);
  padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
}


/* Mobile: avoid resize handle fighting the nav */
@media (max-width: 700px){
  .textarea{ resize: none; }
}



/* --- v10: reduce fixed-nav jitter on mobile (esp. Firefox/URL bar) --- */
.bottom-nav{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translateZ(0);
  will-change: transform;
  contain: paint;
}
.navbtn{
  transform: translateZ(0);
}

/* Also reduce blur on topbar which can trigger repaints */
.topbar{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


html, body{
  overscroll-behavior: none;
  scroll-behavior: auto;
}



/* --- v11: fix button overlap (Meals + Tasks) --- */
/* When a button is a direct child of a card (i.e., not inside .row-inline), give it breathing room */
#panel-meals .card > .btn,
#panel-meals .card > button.btn,
#panel-tasks .card > .btn,
#panel-tasks .card > button.btn{
  margin-top: 8px;
  display: inline-block;
}

/* Also ensure text inputs/areas have a little bottom margin inside these panels */
#panel-meals .input,
#panel-meals .textarea,
#panel-tasks .input,
#panel-tasks .textarea{
  margin-bottom: 0px;
}



/* --- v12: prevent huge blank space in Meals/Tasks lists --- */
#panel-meals .item-body,
#panel-tasks .item-body{
  white-space: normal;
}



/* --- v15: prevent huge blank space in Calendar meals list --- */
#panel-calendar #dayMeals .item-body{
  white-space: normal;
}