:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f4f4f4;
  background: #0c0c0c;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: #0c0c0c; }
button, input, textarea, select { font: inherit; }
.shell { max-width: 760px; margin: 0 auto; padding: 22px 18px 80px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.eyebrow { font-size:12px; letter-spacing:.16em; color:#77d957; font-weight:800; }
h1 { margin:4px 0 0; font-size:30px; }
h2 { margin-top:0; font-size:20px; }
.card { background:#1a1a1a; border:1px solid #2a2a2a; border-radius:18px; padding:18px; }
.auth { display:grid; gap:14px; }
label { display:grid; gap:8px; color:#bdbdbd; font-size:14px; }
input, textarea, select {
  width:100%; border:1px solid #353535; border-radius:12px; background:#101010; color:#fff;
  padding:14px; outline:none;
}
input:focus, textarea:focus, select:focus { border-color:#77d957; }
select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,#8a8a8a 50%),linear-gradient(135deg,#8a8a8a 50%,transparent 50%); background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%; background-size:5px 5px; background-repeat:no-repeat; }
textarea { min-height:250px; resize:vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; }
.primary, .ghost, .tab {
  border:0; border-radius:12px; padding:13px 16px; cursor:pointer; font-weight:750;
}
.primary { background:#67d348; color:#081006; }
.ghost { background:#222; color:#ddd; }
.full { width:100%; margin-top:14px; }
.hidden { display:none !important; }
.tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
.tab { background:#171717; color:#aaa; }
.tab.active { color:#fff; background:#2a2a2a; }
.panel { display:none; }
.panel.active { display:block; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.grid > *, .tabs > *, .dashboardControls > * { min-width:0; }
.metric { min-height:150px; }
.label { color:#9f9f9f; font-size:13px; margin-bottom:10px; }
.big { font-size:28px; font-weight:800; letter-spacing:-.03em; }
.muted { color:#8a8a8a; }
.sub { color:#9f9f9f; margin-top:10px; font-size:13px; }
.budget { color:#d5d5d5; line-height:1.35; }
.budget.met { color:#8be46e; }
.bar { height:7px; background:#303030; border-radius:10px; margin-top:18px; overflow:hidden; }
.bar span { display:block; width:0; height:100%; background:#67d348; transition:width .25s ease; }
.trend { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:12px; }
.dashboardControls { display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end; margin-bottom:12px; }
.dashboardControls .label { margin-bottom:8px; }
.dashboardControls label { gap:8px; }
.dashboardControls .primary { min-height:49px; }
.rangeLabel { color:#9f9f9f; font-size:13px; margin:0 2px 12px; }
.dashboardMessage { min-height:20px; color:#8be46e; font-size:13px; margin:0 2px 8px; }
.dashboardMessage.error { color:#ff8e8e; }
.chartCard { margin-top:12px; overflow:hidden; }
.chartHeader { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.chartHeader h2 { margin:0; }
.legend { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 12px; color:#9f9f9f; font-size:12px; }
.legendItem { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.legendItem i { width:9px; height:9px; display:inline-block; border-radius:3px; background:#67d348; }
.legendItem.intake i { background:#c7c9c5; }
.legendItem.outtake i { background:#67d348; }
.legendItem.protein i { background:#f1c75b; border-radius:999px; }
.legendItem.weight i { background:#83b9ff; border-radius:999px; }
.legendItem.benchmark i { width:14px; height:0; border-top:2px dashed #8a8a8a; border-radius:0; background:none; }
.chart { width:100%; min-height:220px; margin-top:18px; overflow:hidden; }
.chart svg { display:block; width:100%; max-width:100%; height:auto; min-height:220px; }
.chartEmpty { min-height:220px; display:grid; place-items:center; color:#777; }
.addHeader { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.addHeader h2 { margin:0; }
.pasteButton { display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:0 0 auto; }
.pasteButton svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pasteButton:disabled { opacity:.55; cursor:not-allowed; }
.buttonRow { display:grid; grid-template-columns:1fr 2fr; gap:10px; margin-top:14px; }
.buttonRow .primary, .buttonRow .ghost { width:100%; }
.saveMessage { min-height:20px; margin-top:10px; color:#8be46e; font-size:13px; }
.saveMessage.error { color:#ff8e8e; }
.preview { min-height:72px; margin-top:12px; padding:12px; border-radius:12px; background:#111; white-space:pre-wrap; font-size:13px; }
.weightRow { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; margin-bottom:10px; }
.weightRow input { font-size:32px; font-weight:800; text-align:center; }
.status { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#242424; padding:11px 16px; border-radius:999px; display:none; max-width:90vw; }
.status.show { display:block; }
.status.ok { color:#8be46e; }
.status.error { color:#ff8e8e; }
.bridge { width:1px; height:1px; border:0; position:absolute; left:-9999px; }
@media (max-width:560px) {
  input, textarea, select { font-size:16px; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric { min-height:136px; padding:15px; }
  .big { font-size:24px; }
  .dashboardControls { display:flex; flex-direction:column; width:100%; }
  .dashboardControls > *, .dashboardControls input, .dashboardControls select, .dashboardControls .primary { width:100%; min-width:0; max-width:100%; }
  .dashboardControls input[type="date"] { display:block; -webkit-appearance:none; appearance:none; }
  .chartHeader { align-items:flex-start; }
  .legend { max-width:150px; }
  .chart svg { min-height:180px; }
}