:root {
  --ink: #f5f8ef;
  --muted: #9eb0a7;
  --canvas: #091411;
  --panel: rgba(18, 37, 31, 0.82);
  --line: rgba(220, 240, 224, 0.11);
  --lime: #c8f36b;
  --mint: #69dfba;
  --amber: #ffc76d;
  --blue: #79b8ff;
  --danger: #ff8f82;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 70% 0%, #16352b 0, transparent 36%), var(--canvas); }
button, textarea, input { font: inherit; }
button { color: inherit; }
.ambient { position: fixed; width: 32rem; height: 32rem; border-radius: 50%; filter: blur(110px); opacity: .12; pointer-events: none; }
.ambient-one { background: var(--lime); right: -14rem; top: 15rem; }
.ambient-two { background: var(--blue); left: -18rem; bottom: -12rem; }
.shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 30px 0 60px; position: relative; }
.topbar { display: flex; justify-content: space-between; align-items: center; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.nav-link { color: var(--muted); border: 1px solid transparent; border-radius: 999px; padding: 9px 13px; font-size: 12px; text-decoration: none; }
.nav-link:hover { color: var(--lime); border-color: var(--line); background: rgba(255,255,255,.035); }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #102019; background: var(--lime); font-weight: 900; letter-spacing: -.04em; box-shadow: 0 10px 30px rgba(200,243,107,.15); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 16px; }
.brand small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.date-pill, .live-dot { border: 1px solid var(--line); background: rgba(255,255,255,.035); border-radius: 999px; color: var(--muted); font-size: 12px; padding: 9px 14px; }
.hero { display: flex; justify-content: space-between; align-items: center; min-height: 315px; padding: 54px 5% 40px; }
.eyebrow { color: var(--lime); text-transform: uppercase; letter-spacing: .17em; font-size: 11px; font-weight: 800; margin: 0 0 10px; }
h1 { font-size: clamp(42px, 6.4vw, 78px); line-height: .98; letter-spacing: -.055em; margin: 0; max-width: 800px; }
h1 span { color: var(--muted); font-weight: 500; }
.hero-copy { max-width: 540px; color: var(--muted); font-size: 16px; line-height: 1.7; margin: 22px 0 0; }
.status-orbit { flex: 0 0 180px; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; border: 1px solid rgba(200,243,107,.34); box-shadow: inset 0 0 50px rgba(200,243,107,.05), 0 0 0 14px rgba(200,243,107,.025); }
.status-orbit::before { content: ""; position: absolute; }
.orbit-value { color: var(--lime); font-size: 48px; font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.orbit-value small { font-size: 20px; margin-left: 3px; }
.status-orbit > span { color: var(--muted); font-size: 11px; margin-top: 8px; text-transform: uppercase; letter-spacing: .12em; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.metric, .panel { border: 1px solid var(--line); background: var(--panel); box-shadow: 0 20px 70px rgba(0,0,0,.16); backdrop-filter: blur(16px); }
.metric { border-radius: 18px; padding: 20px; min-height: 128px; }
.metric-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.metric-head span, .metric-supplements span { color: var(--muted); font-size: 12px; }
.metric-head strong { font-size: 14px; }
.progress { height: 5px; border-radius: 9px; background: rgba(255,255,255,.08); overflow: hidden; margin: 25px 0 13px; }
.progress span { display: block; width: 0; height: 100%; border-radius: inherit; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.metric small { color: var(--muted); font-size: 11px; }
.metric-protein .progress span { background: var(--lime); }
.metric-calories .progress span { background: var(--amber); }
.metric-water .progress span { background: var(--blue); }
.metric-supplements { display: flex; align-items: center; gap: 16px; }
.metric-supplements strong { display: block; font-size: 22px; margin-top: 5px; }
.supplement-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: rgba(105,223,186,.12); color: var(--mint); font-size: 23px; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 18px; }
.panel { border-radius: 22px; padding: 26px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.panel-heading h2 { margin: 0; font-size: 24px; letter-spacing: -.035em; }
.live-dot::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--lime); border-radius: 50%; margin-right: 7px; box-shadow: 0 0 10px var(--lime); }
form > label, .token-row label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 9px; }
textarea, input { width: 100%; color: var(--ink); background: rgba(3,12,9,.55); border: 1px solid var(--line); border-radius: 14px; outline: none; transition: border-color .2s, box-shadow .2s; }
textarea { resize: vertical; min-height: 112px; padding: 16px; line-height: 1.55; }
input { padding: 11px 13px; }
textarea:focus, input:focus { border-color: rgba(200,243,107,.55); box-shadow: 0 0 0 3px rgba(200,243,107,.07); }
.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
.quick-actions button, .icon-button { border: 1px solid var(--line); background: rgba(255,255,255,.035); border-radius: 10px; cursor: pointer; }
.quick-actions button { color: var(--muted); padding: 8px 11px; font-size: 11px; }
.quick-actions button:hover, .icon-button:hover { border-color: rgba(200,243,107,.45); color: var(--lime); }
.token-row { margin: 0 0 16px; }
.token-row label span { opacity: .65; }
.primary-button { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 14px; padding: 14px 17px; background: var(--lime); color: #102019; cursor: pointer; font-weight: 800; }
.primary-button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.primary-button:disabled { cursor: wait; opacity: .65; transform: none; }
.result { white-space: pre-wrap; margin-top: 18px; border-left: 2px solid var(--lime); background: rgba(200,243,107,.045); border-radius: 0 12px 12px 0; padding: 16px; color: #dbe6dd; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; max-height: 340px; overflow: auto; }
.result.error { border-color: var(--danger); background: rgba(255,143,130,.05); color: #ffd2cd; }
.icon-button { width: 36px; height: 36px; color: var(--muted); font-size: 18px; }
.entry-list { display: grid; gap: 9px; max-height: 502px; overflow-y: auto; padding-right: 3px; }
.entry { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); padding: 10px 3px 14px; }
.entry-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.045); color: var(--lime); font-size: 13px; font-weight: 800; }
.entry strong { display: block; font-size: 13px; }
.entry small { color: var(--muted); display: block; font-size: 11px; margin-top: 4px; }
.entry-macros { text-align: right; font-size: 11px; color: var(--muted); }
.entry-macros b { display: block; color: var(--ink); font-size: 13px; margin-bottom: 3px; }
.empty-state { color: var(--muted); padding: 48px 12px; text-align: center; font-size: 13px; }
.empty-state a { color: var(--lime); }
.settings-shell { max-width: 980px; }
.settings-hero { padding: 74px 4% 42px; }
.settings-hero h1 { font-size: clamp(45px, 7vw, 72px); }
.settings-panel { padding: 32px; }
.settings-heading { align-items: center; }
.database-badge { color: var(--mint); border: 1px solid rgba(105,223,186,.22); background: rgba(105,223,186,.07); border-radius: 999px; padding: 8px 12px; font-size: 11px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.setting-field { display: block; border: 1px solid var(--line); background: rgba(3,12,9,.38); border-radius: 16px; padding: 17px; }
.setting-field > span { display: block; font-size: 13px; font-weight: 750; }
.setting-field > small { display: block; color: var(--muted); min-height: 32px; margin: 6px 0 15px; font-size: 11px; line-height: 1.45; }
.number-input { display: flex; align-items: center; gap: 10px; }
.number-input input { min-width: 0; font-size: 18px; font-weight: 750; }
.number-input b { color: var(--muted); width: 34px; font-size: 11px; }
.settings-footer { display: grid; grid-template-columns: 1fr 220px; align-items: end; gap: 14px; margin-top: 20px; }
.settings-token { margin: 0; }
.save-button { height: 45px; }
.settings-result { margin-bottom: 0; }

@media (max-width: 900px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .workspace-grid { grid-template-columns: 1fr; }
  .status-orbit { display: none; }
  .hero { min-height: 285px; padding-inline: 2%; }
}

@media (max-width: 560px) {
  .shell { width: min(100% - 22px, 1180px); padding-top: 18px; }
  .date-pill { display: none; }
  .settings-grid, .settings-footer { grid-template-columns: 1fr; }
  .settings-hero { padding: 54px 2% 32px; }
  .settings-panel { padding: 19px; }
  .database-badge { display: none; }
  .hero { min-height: 270px; padding-top: 44px; }
  h1 { font-size: 44px; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric { padding: 15px; min-height: 118px; }
  .metric-head { display: block; }
  .metric-head strong { display: block; margin-top: 5px; }
  .metric-supplements { display: block; }
  .supplement-icon { width: 36px; height: 36px; margin-bottom: 8px; }
  .panel { padding: 19px; }
  .entry { grid-template-columns: 36px 1fr; }
  .entry-icon { width: 34px; height: 34px; }
  .entry-macros { grid-column: 2; text-align: left; display: flex; gap: 6px; }
  .entry-macros b { display: inline; }
}