@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;500;600&display=swap');

:root {
  --bg: #0a0a0a;
  --surface: #131313;
  --surface2: #1a1a1a;
  --surface3: #222;
  --border: #2a2a2a;
  --border-light: #333;
  --accent: #ff3c00;
  --accent-dim: rgba(255,60,0,0.15);
  --accent-border: rgba(255,60,0,0.3);
  --text: #e8e8e8;
  --text-dim: #999;
  --text-muted: #555;
  --green: #22c55e;
  --green-dim: rgba(34,197,94,0.12);
  --blue: #3b82f6;
  --blue-dim: rgba(59,130,246,0.12);
  --yellow: #eab308;
  --yellow-dim: rgba(234,179,8,0.12);
  --red: #ef4444;
  --red-dim: rgba(239,68,68,0.12);
  --purple: #a855f7;
  --purple-dim: rgba(168,85,247,0.12);
  --radius: 10px;
  --radius-sm: 6px;
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;
  --nav-height: 64px;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { font-size: 16px; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height:1.5; min-height:100vh; min-height:100dvh; overscroll-behavior:none; padding-bottom: calc(var(--nav-height) + 20px); }
input, button, select, textarea { font-family: var(--font-body); }

/* ---- UTILITY ---- */
.hidden { display:none !important; }
.text-dim { color: var(--text-dim); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-green { color: var(--green); }
.text-sm { font-size: 0.82rem; }
.text-xs { font-size: 0.7rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.gap-1 { gap: 0.5rem; }
.flex { display:flex; }
.flex-col { flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.justify-center { justify-content:center; }
.w-full { width:100%; }
.text-center { text-align:center; }
.font-display { font-family: var(--font-display); }

/* ---- SCROLL ---- */
.page { padding: 1rem; max-width: 600px; margin: 0 auto; }
.page-title { font-family:var(--font-display); font-size:1.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; }
.page-subtitle { color:var(--text-dim); font-size:0.85rem; margin-top:0.15rem; }

/* ---- CARDS ---- */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; margin-bottom:0.75rem; }
.card-header { font-family:var(--font-display); font-size:1rem; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:0.5rem; }
.card-row { display:flex; justify-content:space-between; align-items:center; padding:0.6rem 0; border-bottom:1px solid var(--border); }
.card-row:last-child { border-bottom:none; }

/* ---- BUTTONS ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.4rem; padding:0.7rem 1.2rem; border:none; border-radius:var(--radius-sm); font-family:var(--font-display); font-size:0.85rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; cursor:pointer; transition:all 0.15s; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:active { background:#e03500; transform:scale(0.97); }
.btn-secondary { background:var(--surface2); color:var(--text); border:1px solid var(--border); }
.btn-secondary:active { background:var(--surface3); }
.btn-ghost { background:transparent; color:var(--text-dim); border:1px solid var(--border); }
.btn-ghost:active { background:var(--surface2); }
.btn-danger { background:var(--red-dim); color:var(--red); border:1px solid rgba(239,68,68,0.25); }
.btn-success { background:var(--green-dim); color:var(--green); border:1px solid rgba(34,197,94,0.25); }
.btn-block { width:100%; }
.btn-lg { padding:0.9rem 1.5rem; font-size:1rem; }
.btn-sm { padding:0.4rem 0.8rem; font-size:0.75rem; }

/* ---- INPUTS ---- */
.input-group { margin-bottom: 0.85rem; }
.input-group label { display:block; font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim); margin-bottom:0.3rem; }
.input { width:100%; padding:0.65rem 0.85rem; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:0.95rem; outline:none; transition:border-color 0.15s; }
.input:focus { border-color:var(--accent); }
.input::placeholder { color:var(--text-muted); }
select.input { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.8rem center; padding-right:2rem; }
.input-row { display:flex; gap:0.5rem; }
.input-row > * { flex:1; }

/* ---- TAGS ---- */
.tag { display:inline-flex; align-items:center; padding:0.15rem 0.55rem; border-radius:3px; font-size:0.65rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; }
.tag-accent { background:var(--accent-dim); color:var(--accent); border:1px solid var(--accent-border); }
.tag-green { background:var(--green-dim); color:var(--green); border:1px solid rgba(34,197,94,0.25); }
.tag-blue { background:var(--blue-dim); color:var(--blue); border:1px solid rgba(59,130,246,0.25); }
.tag-yellow { background:var(--yellow-dim); color:var(--yellow); border:1px solid rgba(234,179,8,0.25); }
.tag-purple { background:var(--purple-dim); color:var(--purple); border:1px solid rgba(168,85,247,0.25); }

/* ---- STAT BLOCKS ---- */
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; margin-bottom:1rem; }
.stat-block { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:0.85rem; }
.stat-value { font-family:var(--font-display); font-size:1.6rem; font-weight:700; line-height:1.1; }
.stat-label { font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim); margin-top:0.2rem; }

/* ---- SECTION LABEL ---- */
.section-label { font-family:var(--font-display); font-size:0.7rem; font-weight:500; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-muted); margin:1.2rem 0 0.6rem; display:flex; align-items:center; gap:0.5rem; }
.section-label::after { content:''; flex:1; height:1px; background:var(--border); }

/* ---- EXERCISE CARD (workout mode) ---- */
.ex-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:0.6rem; overflow:hidden; }
.ex-card-header { display:flex; align-items:center; padding:0.75rem 0.85rem; cursor:pointer; }
.ex-card-num { width:28px; height:28px; border-radius:50%; background:var(--surface3); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:0.8rem; font-weight:600; color:var(--text-muted); margin-right:0.65rem; flex-shrink:0; }
.ex-card-num.done { background:var(--green-dim); color:var(--green); }
.ex-card-info { flex:1; }
.ex-card-name { font-family:var(--font-display); font-size:0.95rem; font-weight:500; text-transform:uppercase; letter-spacing:0.02em; }
.ex-card-meta { font-size:0.75rem; color:var(--text-dim); margin-top:0.1rem; }
.ex-card-toggle { color:var(--text-muted); font-size:0.9rem; transition:transform 0.2s; padding:0.5rem; }
.ex-card.open .ex-card-toggle { transform:rotate(180deg); }
.ex-card-body { display:none; padding:0 0.85rem 0.85rem; border-top:1px solid var(--border); }
.ex-card.open .ex-card-body { display:block; }

/* ---- SET LOGGER ---- */
.set-row { display:flex; align-items:center; gap:0.4rem; padding:0.5rem 0; border-bottom:1px solid var(--border); }
.set-row:last-child { border-bottom:none; }
.set-num { width:24px; font-family:var(--font-display); font-size:0.8rem; color:var(--text-muted); text-align:center; flex-shrink:0; }
.set-input { width:70px; padding:0.45rem; background:var(--surface2); border:1px solid var(--border); border-radius:4px; color:var(--text); font-size:0.9rem; text-align:center; }
.set-input:focus { border-color:var(--accent); outline:none; }
.set-input-label { font-size:0.6rem; color:var(--text-muted); text-transform:uppercase; text-align:center; }
.set-check { width:32px; height:32px; border-radius:50%; border:2px solid var(--border); background:none; color:var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:all 0.15s; font-size:1rem; }
.set-check.logged { border-color:var(--green); background:var(--green-dim); color:var(--green); }
.set-pr { font-size:0.65rem; background:var(--yellow-dim); color:var(--yellow); padding:0.1rem 0.4rem; border-radius:3px; font-weight:700; margin-left:0.3rem; }

/* ---- REST TIMER ---- */
.timer-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.85); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1000; backdrop-filter:blur(8px); }
.timer-circle { width:200px; height:200px; border-radius:50%; border:4px solid var(--border); display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
.timer-time { font-family:var(--font-display); font-size:3.5rem; font-weight:700; }
.timer-label { font-size:0.8rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.1em; }
.timer-svg { position:absolute; top:-4px; left:-4px; width:calc(100% + 8px); height:calc(100% + 8px); transform:rotate(-90deg); }
.timer-svg circle { fill:none; stroke-width:4; }
.timer-svg .bg { stroke:var(--border); }
.timer-svg .progress { stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset 1s linear; }

/* ---- BOTTOM NAV ---- */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; height:var(--nav-height); background:var(--surface); border-top:1px solid var(--border); display:flex; z-index:100; padding-bottom:env(safe-area-inset-bottom); }
.nav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.15rem; color:var(--text-muted); text-decoration:none; font-size:0.6rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; cursor:pointer; transition:color 0.15s; border:none; background:none; }
.nav-item.active { color:var(--accent); }
.nav-item svg { width:22px; height:22px; }

/* ---- FOOD SEARCH ---- */
.food-result { display:flex; align-items:center; gap:0.75rem; padding:0.75rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:0.5rem; cursor:pointer; transition:border-color 0.15s; }
.food-result:active { border-color:var(--accent); }
.food-result-img { width:44px; height:44px; border-radius:6px; object-fit:cover; background:var(--surface2); flex-shrink:0; }
.food-result-info { flex:1; min-width:0; }
.food-result-name { font-size:0.88rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.food-result-brand { font-size:0.75rem; color:var(--text-dim); }
.food-result-cals { font-family:var(--font-display); font-size:0.9rem; font-weight:600; color:var(--accent); flex-shrink:0; }

/* ---- MACRO BAR ---- */
.macro-bar { display:flex; gap:0; height:8px; border-radius:4px; overflow:hidden; background:var(--surface2); margin:0.5rem 0; }
.macro-bar > div { transition:width 0.3s; }
.macro-protein { background:#22c55e; }
.macro-carbs { background:#3b82f6; }
.macro-fat { background:#eab308; }

.macro-legend { display:flex; gap:1rem; font-size:0.75rem; }
.macro-legend span { display:flex; align-items:center; gap:0.3rem; }
.macro-legend .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ---- FORM TIPS ---- */
.form-tips { margin-top:0.6rem; }
.form-tips-title { font-size:0.65rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent); margin-bottom:0.3rem; }
.form-tips ul { padding-left:1rem; }
.form-tips li { font-size:0.8rem; color:var(--text-dim); margin-bottom:0.2rem; line-height:1.4; }

/* ---- AUTH SCREEN ---- */
.auth-screen { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem; }
.auth-logo { font-family:var(--font-display); font-size:2.5rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.3rem; }
.auth-tagline { color:var(--text-dim); font-size:0.85rem; margin-bottom:2rem; }
.auth-form { width:100%; max-width:360px; }
.auth-toggle { color:var(--text-dim); font-size:0.85rem; text-align:center; margin-top:1rem; }
.auth-toggle a { color:var(--accent); text-decoration:none; cursor:pointer; }

/* ---- ANIMATIONS ---- */
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.fade-in { animation:fadeIn 0.3s ease; }
.pulse { animation:pulse 1.5s infinite; }

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }