/* Custom selection highlight to match theme */
::selection {
  background: var(--accent); /* Your theme's green */
  color: #ffffff;      /* Keeps text WHITE */
}
::-moz-selection { /* Firefox-specific */
  background: var(--accent);
  color: #ffffff;
}

:root{
  --bg:#0b1a12;
  --panel:#0d2217;
  --text:#ffffff;
  --muted:#d1e7db;
  --accent:#34d399;
  --accent2:#22c55e;
  --danger:#ef4444;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,Helvetica,Arial;
  background:
    radial-gradient(1200px 600px at 10% 10%, #0b1f15, #09130f 70%),
    linear-gradient(45deg, #0a1b13, #08130e);
  color:var(--text);
}
a{ color:inherit; text-decoration:none }

.topbar{
  position:sticky; top:0; z-index:10;
  background:rgba(13,34,23,.85);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-bottom:1px solid #113522;
}
.brand{ font-weight:800; letter-spacing:.5px; display:flex; align-items:center; gap:8px }
.brand img{ width:28px; height:28px; border-radius:6px }
.tabs{ display:flex; gap:8px; margin-left:auto }
.tab{
  background:transparent; border:1px solid #15452a; color:#fff;
  padding:8px 12px; border-radius:12px; cursor:pointer; font-weight:600;
}
/* THIS LINE IS NOW CHANGED */
.tab.active{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#ffffff; /* Was #0b1a12 */
  border-color:transparent;
}

#app{ max-width:1100px; margin:0 auto; padding:16px }
.route{ display:none }
.route.visible{ display:block }

.card{
  background:linear-gradient(180deg,#0d2217,#0b1a12);
  border:1px solid #123a24;
  border-radius:20px;
  padding:16px;
  margin:16px 0;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
}
.card.muted{ background:transparent; border-style:dashed }

.row{ display:flex; align-items:center }
.row.between{ justify-content:space-between }
.row.end{ justify-content:flex-end }
.row.gap{ gap:8px }
.row.equal > button{ flex:1 1 0 } /* make buttons equal width when desired */
.item .row.gap > button{ flex:1 1 0 } /* equalize action buttons in lists */
.full{ width:100% }

h2{ margin:8px 0 4px }
.muted-text{ color:var(--muted); margin-top:4px }

/* Buttons */
.primary,.ghost,.danger,button{
  min-height:44px;
  padding:12px 16px;
  border-radius:14px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  border:1px solid transparent;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.primary{ background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#ffffff !important }
.ghost{ background:transparent; border-color:#1a5131 }
.danger{ background:transparent; border-color:var(--danger) }
button *, .primary *, .ghost *, .danger *{
  color:inherit !important; -webkit-text-fill-color:inherit !important;
}
button svg{ fill:currentColor !important }

/* Inputs */
label, .dialog-card h3, .item .meta{ color:#fff !important }
input,select,textarea{
  width:100%; background:#0a1f15; color:#fff;
  border:1.25px solid #164b30; border-radius:14px;
  padding:12px 14px; font-size:16px;
}
::placeholder{ color:rgba(255,255,255,.6) }
.big-select{ font-size:16px; padding:14px 16px; border-radius:14px }

/* Input group for +/- and clear */
.input-group{
  display:flex; align-items:stretch; gap:0;
  border:1px solid #164b30; border-radius:14px; overflow:hidden;
  background:#0a1f15;
}
.input-group input{
  border:none !important; background:transparent !important;
  color:#fff !important; padding:12px 14px; flex:1 1 auto; min-width:0;
}
.input-group .group-btn{
  flex:0 0 52px; display:flex; align-items:center; justify-content:center;
  background:#0a1f15; color:#fff; border:none; cursor:pointer; font-weight:800;
}
.input-group .group-btn:active{ background:#0d261a }
#adjGroup{ border-color:#174f32 }

/* Chips for Cut/Bulk sign */
.sign-row{ display:flex; gap:8px; margin-bottom:8px }
.chip{
  border:1px solid #1a5131; background:#0a1f15; color:#fff;
  border-radius:999px; padding:8px 14px; font-weight:800; cursor:pointer;
}
/* THIS LINE IS NOW CHANGED */
.chip.active{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-color:transparent;
  color:#ffffff !important; /* Was #0b1a12 */
}
.hint{ color:rgba(255,255,255,.75); font-size:13px; margin-top:6px }

/* Lists */
.list{ display:flex; flex-direction:column; gap:8px }
.item{
  display:flex; justify-content:space-between; gap:10px; align-items:center;
  background:#0a1f15; border:1px solid #174f32; padding:12px; border-radius:14px;
}
.caption{ margin-top:6px }

/* HERO & RINGS */
.hero{ display:grid; grid-template-columns:1fr; gap:16px }
.rings{ display:flex; gap:18px; align-items:center; justify-content:center; flex-wrap:wrap }
.ring-svg{ width:260px; height:260px }
.ring-bg{ fill:none; stroke:#123a24; stroke-width:16 }
.ring{
  fill:none; stroke-width:16; stroke-linecap:round;
  transform:rotate(-90deg); transform-origin:50% 50%;
  transition:stroke-dashoffset .6s ease;
}
.ring-cal{ stroke:#22c55e }
.ring-p{ stroke:#86efac }
.ring-c{ stroke:#4ade80 }
.ring-f{ stroke:#16a34a }
.ring-title{ fill:#eafff1; font-size:14px }
.ring-big{ fill:#ffffff; font-size:22px; font-weight:800 }
.mini-rings{ display:flex; gap:12px }
.mini svg{ width:120px; height:120px }
.mini-title{ fill:#eafff1; font-size:10px }
.mini-value{ fill:#ffffff; font-size:12px; font-weight:700 }

.targets{ display:flex; flex-direction:column; gap:8px; align-items:center }
.target-line{ color:#ffffff }

dialog{ border:none; border-radius:16px; padding:0; background:transparent }
.dialog-card{
  background:#0b1a12; border:1px solid #174f32; padding:16px;
  border-radius:16px; width:min(700px,95vw)
}
.dialog-actions{ margin-top:12px }

.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; align-items:end }
.grid2{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }

.toolbar{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
@media (min-width:900px){
  .toolbar{ display:flex; overflow-x:auto; gap:10px }
  .toolbar>button{ flex:0 0 auto }
}

@media (min-width:900px){
  .hero{ grid-template-columns:1.1fr .9fr }
}

@media (max-width:768px){
  .ring-svg{ width:220px; height:220px }
  .mini svg{ width:100px; height:100px }
  .mini-value{ font-size:12px }
  .grid { grid-template-columns: 1fr; gap: 10px; }
  .grid2 { grid-template-columns: 1fr; gap: 10px; }
  .tabs { overflow-x: auto; padding-bottom: 4px; }
  .tab { flex: 0 0 auto; }
  dialog .dialog-card { width: 95vw; }
}

/* iOS text color quirk */
button, .primary, .ghost, .danger,
button:focus, button:hover, button:active,
.primary:focus, .primary:hover, .primary:active {
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
button *, .primary *, .ghost *, .danger * {
  color:inherit !important; -webkit-text-fill-color:inherit !important;
}

calorie-tracker-section {
  margin-top: 24px;
  background: linear-gradient(180deg, #0d2217, #0b1a12);
}

calorie-chart-container {
  margin-top: 16px;
  text-align: center;
}

calorieChart {
  border: 1px solid #174f32;
  border-radius: 12px;
  background: #0a1f15;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.huge {
  font-size: 1.3rem;
  padding: 1rem 2rem;
  border-radius: 12px;
}

.highlight {
  font-weight: bold;
  color: #00e676;
  font-size: 1.1rem;
}

.highlight {
  font-weight: bold;
  color: #00e676;
}