/* styles/03-components.css — Кнопки, карточки, ряды, чипы */
  .ringwrap{display:flex;align-items:center;gap:18px;background:var(--card);border-radius:var(--r);padding:18px;margin:8px 16px;border:1px solid var(--sep)}
  .ring{position:relative;width:120px;height:120px;flex:none}
  .ring .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .ring .ctr .big{font-size:26px;font-weight:800;line-height:1;color:var(--label)}
  .ring .ctr .sm{font-size:11px;color:var(--label2);margin-top:3px}
  .macros{flex:1;display:flex;flex-direction:column;gap:11px}
  .macro .top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;color:var(--label)}
  .macro .top b{font-weight:600}
  .bar{height:7px;border-radius:4px;background:rgba(255,255,255,.10);overflow:hidden}
  .bar i{display:block;height:100%;border-radius:4px}

  .meal{margin:8px 16px}
  .meal .mh{display:flex;justify-content:space-between;align-items:center;padding:6px 4px;font-weight:700;font-size:17px;color:var(--label)}
  .empty{text-align:center;color:var(--label2);padding:40px 24px;font-size:15px;line-height:1.5}
  .empty .gl{font-size:46px;display:block;margin-bottom:10px}

  #sheetbg{position:absolute;inset:0;background:rgba(0,0,0,.6);display:none;align-items:flex-end;justify-content:center;z-index:50}
  #sheetbg.on{display:flex}
  .sheet{background:var(--bg2);width:100%;border-radius:20px 20px 0 0;padding:8px 16px 22px;max-height:88%;overflow-y:auto;animation:up .25s ease;border-top:1px solid var(--sep)}
  @keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .grip{width:38px;height:5px;border-radius:3px;background:var(--label3);margin:8px auto 14px}
  .field{margin:10px 0}
  .field label{font-size:13px;color:var(--label2);display:block;margin-bottom:6px;font-weight:500}
  .field input,.field select{width:100%;border:1px solid var(--sep);background:var(--card);border-radius:11px;padding:13px;font-size:17px;font-family:inherit;color:var(--label);outline:none}
  .seg{display:flex;background:rgba(255,255,255,.07);border-radius:10px;padding:3px;gap:3px}
  .seg button{flex:1;border:0;background:transparent;padding:9px;border-radius:8px;font-size:15px;font-weight:500;color:var(--label);cursor:pointer;font-family:inherit}
  .seg button.on{background:var(--card2);font-weight:700;color:#fff}

  .qty{display:flex;align-items:center;gap:16px;color:var(--label)}
  .qty button{width:30px;height:30px;border-radius:15px;border:0;background:rgba(255,255,255,.10);font-size:20px;cursor:pointer;color:var(--acc);font-family:inherit;display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0}
  .heart{width:42px;height:42px;border-radius:21px;background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--sep);flex:none}

  #onb{position:absolute;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column;overflow-y:auto}
  .onbhero{background:linear-gradient(160deg,#3A2A78,#141019);color:#fff;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 30px;min-height:60%}
  .onbhero .logo{font-size:64px;margin-bottom:18px}
  .onbhero h1{font-size:30px;font-weight:800;margin-bottom:10px;letter-spacing:-.5px}
  .onbhero p{font-size:16px;opacity:.92;line-height:1.5;max-width:300px}
  .onbbody{padding:22px}
  .pill{display:inline-block;background:rgba(199,249,75,.16);color:var(--acc);padding:6px 13px;border-radius:14px;font-size:13px;font-weight:700;margin-bottom:18px}
  .toast{position:absolute;left:50%;bottom:104px;transform:translateX(-50%) translateY(20px);background:rgba(40,42,50,.96);color:#fff;padding:11px 18px;border-radius:14px;font-size:14px;font-weight:500;opacity:0;transition:.3s;z-index:60;pointer-events:none;white-space:nowrap;border:1px solid var(--sep)}
  .toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
  .totalbar{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;font-size:17px;color:var(--label)}
  .totalbar b{font-size:22px;font-weight:800}

  .pcard .thumb{align-items:center;justify-content:center}
  .pcard .thumb .pimg{max-width:88%;max-height:98px;object-fit:contain}
  .pcard .thumb .gf{position:static;top:auto;right:auto;font-size:42px}
  .hero{align-items:center;justify-content:center}
  .hero .himg{max-height:196px;max-width:74%;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.22))}
  .hero .gf{position:static;top:auto;right:auto}
  .hero .badge{position:absolute!important;top:18px;left:18px;z-index:3}