/* Fit-or-Fat design system — dark slate + electric lime / coral */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg:        #0f1420;
    --bg-2:      #131a2a;
    --card:      #161d2e;
    --card-2:    #1b2438;
    --border:    #232c42;
    --text:      #e8edf7;
    --muted:     #9aa7bf;
    --faint:     #5c6880;
    --lime:      #c8f454;
    --lime-dim:  rgba(200,244,84,0.12);
    --coral:     #ff6b81;
    --coral-dim: rgba(255,107,129,0.12);
    --blue:      #5cc8ff;
    --ease:      cubic-bezier(0.16,1,0.3,1);
    --r:         16px;
    --display:   "Unbounded", sans-serif;
    --body:      "Manrope", sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    background:var(--bg); color:var(--text);
    font-family:var(--body); font-size:15px; line-height:1.6;
    min-height:100vh;
}
::selection { background:var(--lime); color:var(--bg); }
a { color:var(--lime); }
h1,h2,h3 { font-family:var(--display); font-weight:700; line-height:1.15; }

/* ---- brand wordmark ---- */
.wordmark { font-family:var(--display); font-weight:900; font-size:18px; text-decoration:none; letter-spacing:0.02em; white-space:nowrap; }
.wordmark .fit { color:var(--lime); }
.wordmark .or  { color:var(--faint); font-weight:500; }
.wordmark .fat { color:var(--coral); }

/* ---- app nav ---- */
.topnav {
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; gap:28px;
    padding:14px clamp(16px,4vw,40px);
    background:rgba(15,20,32,0.85); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
}
.topnav .links { display:flex; gap:6px; flex:1; }
.topnav .links a {
    color:var(--muted); text-decoration:none; font-weight:600; font-size:14px;
    padding:8px 16px; border-radius:999px; transition:all .2s;
}
.topnav .links a:hover { color:var(--text); background:var(--card-2); }
.topnav .links a.active { color:var(--bg); background:var(--lime); }
.topnav .user { color:var(--faint); font-size:13px; display:flex; align-items:center; gap:14px; }
.topnav .user a { color:var(--muted); text-decoration:none; }
@media (max-width:720px) {
    .topnav { flex-wrap:wrap; gap:10px; }
    .topnav .links { order:3; width:100%; overflow-x:auto; }
    .topnav .user span.name { display:none; }
}

.wrap { max-width:1100px; margin:0 auto; padding:clamp(20px,4vw,40px); }
.wrap-narrow { max-width:560px; margin:0 auto; padding:clamp(20px,4vw,40px); }

/* ---- cards / layout ---- */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:24px; }
.card + .card { margin-top:18px; }
.card h2 { font-size:18px; margin-bottom:16px; }
.card h2 .accent { color:var(--lime); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:860px){ .grid2,.grid3 { grid-template-columns:1fr; } }

/* ---- stats ---- */
.stat { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:18px 20px; }
.stat .v { font-family:var(--display); font-weight:700; font-size:26px; color:var(--lime); }
.stat .v.coral { color:var(--coral); }
.stat .v.blue { color:var(--blue); }
.stat .l { font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.08em; margin-top:4px; }

/* ---- forms ---- */
label { display:block; font-weight:700; font-size:13px; margin:16px 0 6px; color:var(--text); }
label .opt { color:var(--faint); font-weight:500; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], select, textarea {
    width:100%; background:var(--bg-2); border:1px solid var(--border); color:var(--text);
    border-radius:12px; padding:12px 14px; font:inherit; font-size:15px;
    transition:border-color .2s;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--lime); }
textarea { resize:vertical; min-height:80px; }
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa7bf' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }

.btn {
    display:inline-block; border:none; cursor:pointer; text-decoration:none; text-align:center;
    font:700 15px var(--body); padding:13px 26px; border-radius:999px;
    background:var(--lime); color:var(--bg); transition:all .2s var(--ease);
}
.btn:hover { transform:translateY(-1px); box-shadow:0 10px 28px -10px rgba(200,244,84,0.5); }
.btn.block { display:block; width:100%; }
.btn.ghost { background:transparent; border:1px solid var(--border); color:var(--text); }
.btn.ghost:hover { border-color:var(--lime); color:var(--lime); box-shadow:none; }
.btn.coral { background:var(--coral); color:#fff; }
.btn.sm { padding:8px 16px; font-size:13px; }
.btn:disabled { opacity:0.5; cursor:wait; transform:none; box-shadow:none; }

/* ---- alerts / badges ---- */
.alert { border-radius:12px; padding:13px 16px; font-size:14px; font-weight:600; margin-bottom:16px; }
.alert.ok { background:var(--lime-dim); color:var(--lime); border:1px solid rgba(200,244,84,0.3); }
.alert.err { background:var(--coral-dim); color:var(--coral); border:1px solid rgba(255,107,129,0.3); }
.badge { display:inline-block; font-size:11px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; border-radius:999px; padding:4px 10px; }
.badge.lime { background:var(--lime-dim); color:var(--lime); }
.badge.coral { background:var(--coral-dim); color:var(--coral); }
.badge.grey { background:var(--card-2); color:var(--muted); }

/* ---- auth pages ---- */
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:24px; position:relative; overflow:hidden; }
.auth-shell::before {
    content:""; position:absolute; width:560px; height:560px; border-radius:50%;
    background:radial-gradient(circle, rgba(200,244,84,0.13), transparent 65%);
    top:-200px; right:-140px; pointer-events:none;
}
.auth-shell::after {
    content:""; position:absolute; width:480px; height:480px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,107,129,0.10), transparent 65%);
    bottom:-180px; left:-120px; pointer-events:none;
}
.auth-card { width:100%; max-width:420px; background:var(--card); border:1px solid var(--border); border-radius:24px; padding:36px; position:relative; z-index:1; }
.auth-card .wordmark { font-size:24px; display:block; text-align:center; margin-bottom:6px; }
.auth-card .tag { text-align:center; color:var(--faint); font-size:13px; margin-bottom:24px; }
.auth-card .foot { margin-top:20px; text-align:center; font-size:13px; color:var(--muted); }
.code-input { text-align:center; font-size:28px !important; letter-spacing:12px; font-weight:800; }

/* ---- onboarding wizard ---- */
.wiz-progress { display:flex; gap:8px; margin-bottom:26px; }
.wiz-progress span { flex:1; height:5px; border-radius:99px; background:var(--border); }
.wiz-progress span.done { background:var(--lime); }
.wiz-step { display:none; }
.wiz-step.show { display:block; animation:fadeUp .4s var(--ease); }
@keyframes fadeUp { from { opacity:0; transform:translateY(14px); } }
.choice-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-top:6px; }
.choice {
    position:relative; border:1px solid var(--border); border-radius:14px; padding:14px;
    cursor:pointer; text-align:center; font-weight:700; font-size:14px; color:var(--muted);
    transition:all .15s; user-select:none; background:var(--bg-2);
}
.choice small { display:block; font-weight:500; font-size:11.5px; color:var(--faint); margin-top:3px; }
.choice input { position:absolute; opacity:0; pointer-events:none; }
.choice:has(input:checked) { border-color:var(--lime); color:var(--lime); background:var(--lime-dim); }
.wiz-nav { display:flex; justify-content:space-between; gap:12px; margin-top:28px; }

/* ---- plan view ---- */
.day-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:20px 22px; margin-bottom:14px; }
.day-card h3 { font-size:15px; display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.day-card h3 .focus { font-family:var(--body); font-weight:600; font-size:12px; color:var(--lime); background:var(--lime-dim); border-radius:99px; padding:3px 10px; }
table.x { width:100%; border-collapse:collapse; font-size:14px; }
table.x th { text-align:left; color:var(--faint); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; padding:6px 10px 6px 0; border-bottom:1px solid var(--border); }
table.x td { padding:9px 10px 9px 0; border-bottom:1px solid var(--border); vertical-align:top; }
table.x tr:last-child td { border-bottom:none; }
.meal { display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--border); }
.meal:last-child { border-bottom:none; }
.meal .slot { min-width:86px; font-weight:800; font-size:12px; color:var(--coral); text-transform:uppercase; letter-spacing:0.05em; padding-top:2px; }
.meal .body b { font-size:14.5px; }
.meal .body p { color:var(--muted); font-size:13.5px; margin-top:2px; }
.meal .body .kcal { color:var(--faint); font-size:12px; font-weight:700; margin-top:4px; }
.macro-row { display:flex; gap:12px; flex-wrap:wrap; margin:14px 0; }
.macro { background:var(--bg-2); border:1px solid var(--border); border-radius:12px; padding:10px 16px; font-size:13px; color:var(--muted); }
.macro b { color:var(--lime); font-size:16px; display:block; font-family:var(--display); font-weight:700; }

/* ---- tabs (button style) ---- */
.tab-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.tab-btn { background:var(--card); border:1px solid var(--border); color:var(--muted); border-radius:999px; padding:9px 18px; font:700 13.5px var(--body); cursor:pointer; transition:all .15s; }
.tab-btn:hover { color:var(--text); }
.tab-btn.active { background:var(--lime); border-color:var(--lime); color:var(--bg); }

/* ---- pricing cards ---- */
.price-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.price-card { background:var(--card); border:1px solid var(--border); border-radius:22px; padding:30px 28px; position:relative; }
.price-card.hot { border-color:var(--lime); }
.price-card .flag { position:absolute; top:-12px; left:24px; background:var(--coral); color:#fff; font-size:11px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; padding:4px 12px; border-radius:99px; }
.price-card .plan-name { font-weight:800; color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:0.1em; }
.price-card .zar { font-family:var(--display); font-weight:900; font-size:38px; margin:10px 0 2px; }
.price-card .zar small { font-size:15px; color:var(--muted); font-weight:500; font-family:var(--body); }
.price-card .was { color:var(--faint); text-decoration:line-through; font-size:14px; }
.price-card .usd { color:var(--faint); font-size:12.5px; margin-bottom:18px; }
.price-card ul { list-style:none; margin:0 0 22px; }
.price-card li { padding:5px 0 5px 26px; font-size:14px; color:var(--muted); position:relative; }
.price-card li::before { content:"✓"; position:absolute; left:0; color:var(--lime); font-weight:800; }

/* ---- progress page bits ---- */
.chart-box { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:20px; }
.chart-box h3 { font-size:14px; margin-bottom:14px; color:var(--muted); font-family:var(--body); font-weight:800; text-transform:uppercase; letter-spacing:0.07em; }
canvas { max-width:100%; }
.morph-box { display:flex; align-items:center; justify-content:space-around; gap:10px; }
.morph-box svg { height:300px; }
.morph-legend { font-size:12px; color:var(--muted); text-align:center; margin-top:8px; }
.morph-legend .dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin:0 4px 0 12px; vertical-align:middle; }

input[type=range] { width:100%; accent-color:var(--lime); }

/* ---- admin tables ---- */
.data-table { width:100%; border-collapse:collapse; font-size:14px; }
.data-table th { text-align:left; padding:10px 12px; color:var(--faint); font-size:11px; text-transform:uppercase; letter-spacing:0.07em; border-bottom:1px solid var(--border); }
.data-table td { padding:11px 12px; border-bottom:1px solid var(--border); }
.data-table tr:hover td { background:var(--bg-2); }

footer.app-foot { text-align:center; color:var(--faint); font-size:12px; padding:30px 20px 40px; }
footer.app-foot a { color:var(--muted); }