*{box-sizing:border-box}
:root{
  --bg:#0f1117;--surface:#1a1d27;--card:#22263a;--border:#2e3348;
  --text:#e4e6f0;--muted:#8890a8;--accent:#6ce08e;--accent2:#4fc3f7;
  --warn:#ff8a65;--danger:#ef5350;--radius:12px;--radius-sm:8px;
}
body{margin:0;min-height:100vh;font-family:'SN Pro',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}

/* ===== NAV ===== */
.topnav{display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;flex-wrap:wrap}
.topnav__logo{font-size:1.15rem;font-weight:700;white-space:nowrap}
.topnav__tabs{display:flex;gap:.35rem;margin-left:auto;flex-wrap:wrap}
.tab{background:none;border:none;color:var(--muted);padding:.5rem 1rem;border-radius:var(--radius-sm);cursor:pointer;font-size:.875rem;font-weight:600;transition:.2s}
.tab:hover{color:var(--text);background:rgba(255,255,255,.05)}
.tab.active{color:var(--accent);background:rgba(108,224,142,.1)}

/* ===== PAGES ===== */
.page{display:none;padding:1.5rem;max-width:1100px;margin:0 auto}
.page.active{display:block}

/* ===== CARDS ===== */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.25rem}
.card h2{margin:0 0 .25rem;font-size:1.15rem}
.card h3{margin:0 0 .25rem;font-size:1rem}
.subtitle{margin:0 0 1rem;color:var(--muted);font-size:.85rem}

/* ===== NORM PAGE ===== */
.norm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-bottom:1.25rem}
.norm-item label{display:block;margin-bottom:.3rem;font-size:.82rem;color:var(--muted)}
.norm-item input{width:100%;padding:.55rem .7rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:1rem;outline:none}
.norm-item input:focus{border-color:var(--accent)}

/* Calculator */
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1rem}
.calc-item label{display:block;margin-bottom:.3rem;font-size:.82rem;color:var(--muted)}
.calc-item.full-width{grid-column:1/-1}
.calc-item input,.calc-item select{width:100%;padding:.55rem .7rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:.95rem;outline:none}
.calc-item input:focus,.calc-item select:focus{border-color:var(--accent2)}
.radio-group{display:flex;gap:1rem;margin-top:.3rem}
.radio-label{font-size:.9rem;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:.3rem}
.radio-label input{accent-color:var(--accent2)}

.calc-result{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem;margin-top:1rem}
.calc-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:.75rem}
.result-item{text-align:center}
.result-label{display:block;font-size:.75rem;color:var(--muted);margin-bottom:.2rem}
.result-item span:last-child{font-size:1.3rem;font-weight:700;color:var(--accent2)}

/* ===== BUTTONS ===== */
.btn{padding:.6rem 1.2rem;border:none;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;font-size:.9rem;transition:.15s}
.btn-primary{background:var(--accent);color:#0f1117}
.btn-primary:hover{filter:brightness(1.1)}
.btn-secondary{background:var(--accent2);color:#0f1117}
.btn-secondary:hover{filter:brightness(1.1)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(1.1)}
.btn-small{padding:.35rem .7rem;font-size:.85rem}

.status-msg{margin-top:.75rem;font-size:.85rem;color:var(--accent);min-height:1.2em}

/* ===== LIBRARY ===== */
.lib-tabs{display:flex;gap:.5rem;margin-bottom:1.25rem}
.lib-tab{background:var(--surface);border:1px solid var(--border);color:var(--muted);padding:.5rem 1.2rem;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;font-size:.9rem;transition:.2s}
.lib-tab.active{color:var(--accent);border-color:var(--accent);background:rgba(108,224,142,.08)}
.lib-panel{display:none}
.lib-panel.active{display:block}

.search-row{margin-bottom:1rem}
.search-input{width:100%;padding:.55rem .75rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:.9rem;outline:none}
.search-input:focus{border-color:var(--accent)}

.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:.88rem}
.data-table th{text-align:left;padding:.5rem .6rem;border-bottom:2px solid var(--border);color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
.data-table td{padding:.45rem .6rem;border-bottom:1px solid var(--border)}
.data-table tbody tr:hover{background:rgba(255,255,255,.03)}
.data-table .del-btn{background:none;border:none;color:var(--danger);cursor:pointer;font-size:1rem;padding:.2rem .4rem;border-radius:4px;transition:.15s}
.data-table .del-btn:hover{background:rgba(239,83,80,.15)}

.add-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:.6rem;align-items:end}
.add-form input{padding:.5rem .6rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:.88rem;outline:none}
.add-form input:focus{border-color:var(--accent)}
.add-form .btn{grid-column:1/-1;justify-self:start}

/* ===== PLAN PAGE ===== */
.norms-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.norm-pill{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem 1rem}
.pill-label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.pill-value{display:block;font-size:1rem;font-weight:700;margin:.2rem 0 .4rem}
.pill-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.pill-fill{height:100%;width:0%;border-radius:3px;transition:width .4s ease}
#pill-pro .pill-fill{background:var(--accent)}
#pill-fat .pill-fill{background:#ff8a65}
#pill-carb .pill-fill{background:var(--accent2)}
#pill-cal .pill-fill{background:#ce93d8}

.meals-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-bottom:1.25rem}
.meal-card h3{margin-bottom:.75rem}
.meal-items{margin-bottom:.75rem;min-height:2.5rem}
.meal-items:empty::after{content:'Пока пусто — добавьте продукт или блюдо';color:var(--muted);font-size:.82rem;font-style:italic}
.meal-item{display:flex;align-items:center;gap:.5rem;padding:.35rem .5rem;background:var(--surface);border-radius:var(--radius-sm);margin-bottom:.35rem;font-size:.85rem;animation:fadeIn .25s}
.meal-item__info{flex:1;display:flex;flex-wrap:wrap;gap:.2rem .6rem}
.meal-item__name{font-weight:600;min-width:60px}
.meal-item__macros{color:var(--muted);font-size:.8rem}
.meal-item__del{background:none;border:none;color:var(--danger);cursor:pointer;font-size:.95rem;padding:0 .2rem}

.meal-add-row{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.meal-select{padding:.4rem .5rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:.82rem;outline:none}
.meal-grams{width:60px;padding:.4rem .5rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:.82rem;text-align:center;outline:none}
.flex-1{flex:1;min-width:0}

/* Suggestions */
.suggestions-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem}
.suggestion-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem;cursor:pointer;transition:.15s}
.suggestion-card:hover{border-color:var(--accent);background:rgba(108,224,142,.05)}
.suggestion-card .sg-name{font-weight:600;font-size:.9rem;margin-bottom:.3rem}
.suggestion-card .sg-macros{font-size:.78rem;color:var(--muted)}
.suggestion-card .sg-reason{font-size:.75rem;color:var(--accent2);margin-top:.3rem}

@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ===== RESPONSIVE ===== */
@media(max-width:600px){
  .topnav{padding:.5rem .75rem}
  .topnav__tabs{width:100%;justify-content:center}
  .page{padding:.75rem}
  .norm-grid{grid-template-columns:1fr 1fr}
  .meals-grid{grid-template-columns:1fr}
  .norms-bar{grid-template-columns:1fr 1fr}
}