/* Личный кабинет poel — PWA. Премиум: тёмный герой с кольцами активности, живые карточки, движение. */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&display=swap');

:root {
  --navy:#16255C; --navy-2:#243A82; --navy-3:#31488F; --navy-tint:#EEF1FA;
  --amber:#E8952E; --amber-2:#F4B454; --amber-d:#B26F1C; --amber-tint:#FCF2E1;
  --ink:#1B1F2B; --muted:#6B7180; --faint:#9AA0AE;
  --bg:#F5F4F1; --surface:#FFFFFF; --line:#EDEDF0; --line-2:#E1E2E8;
  --ok:#1E9A63; --ok-t:#E5F3EC; --warn:#C0392B;
  --c-prot:#5B8CF0; --c-fat:#EE7A6B; --c-carb:#43C08A;
  --c-breakfast:#4A66C8; --c-breakfast-a:#ECEFFB; --c-breakfast-b:#DBE2F8;
  --c-lunch:#D0563F;     --c-lunch-a:#FCEBE6;     --c-lunch-b:#F7D9CF;
  --c-dinner:#C98A2C;    --c-dinner-a:#FCF2DF;    --c-dinner-b:#F6E5C5;
  --c-salad:#37A06A;     --c-salad-a:#E7F5EC;     --c-salad-b:#D4EDDD;
  --c-other:#6B7280;     --c-other-a:#EEEFF2;     --c-other-b:#E4E6EC;
  --r:22px; --r-sm:16px; --r-xs:11px;
  --sh-sm:0 1px 2px rgba(16,22,44,.05);
  --sh:0 2px 5px rgba(16,22,44,.04), 0 12px 28px rgba(16,22,44,.07);
  --sh-lg:0 8px 20px rgba(16,22,44,.10), 0 30px 60px rgba(16,22,44,.14);
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; }
body { font-family:'Hanken Grotesk',-apple-system,'Segoe UI',Roboto,sans-serif; color:var(--ink);
  background:var(--bg); line-height:1.45; -webkit-font-smoothing:antialiased; min-height:100dvh; font-variant-numeric:tabular-nums; }
.c-loading { text-align:center; color:var(--muted); padding:100px 0; }
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

/* ══ ГЕРОЙ (тёмный, с кольцами) ══ */
.hero { position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(130% 90% at 82% -10%, rgba(232,149,46,.30), transparent 55%),
             linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 78%, var(--navy-3) 100%);
  padding:calc(16px + env(safe-area-inset-top)) 20px 26px; border-radius:0 0 30px 30px; box-shadow:var(--sh-lg); }
.hero::after { content:""; position:absolute; inset:0; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero .top { display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
.hero .logo { font-size:20px; font-weight:900; letter-spacing:-.03em; }
.hero .logo .dot { color:var(--amber-2); }
.hero .plan { margin-left:auto; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.16);
  border-radius:999px; padding:5px 13px; font-weight:800; font-size:12.5px; }
.hero .help { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.16);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.hero .greet { font-size:23px; font-weight:800; letter-spacing:-.02em; margin-top:16px; position:relative; z-index:1; }
.hero .addr { font-size:12.5px; opacity:.72; margin-top:4px; position:relative; z-index:1; line-height:1.35; }

.rings { display:flex; align-items:center; gap:20px; margin-top:22px; position:relative; z-index:1; }
.ring-big { position:relative; width:130px; height:130px; flex:0 0 auto; }
.ring-big .lab { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-big .v { font-size:30px; font-weight:900; letter-spacing:-.03em; line-height:1; }
.ring-big .g { font-size:12px; opacity:.7; margin-top:3px; } .ring-big .k { font-size:10px; text-transform:uppercase; letter-spacing:.1em; opacity:.55; margin-top:2px; }
.macros3 { flex:1; display:flex; justify-content:space-around; gap:8px; }
.mini { display:flex; flex-direction:column; align-items:center; gap:6px; }
.mini .ring-s { position:relative; width:58px; height:58px; }
.mini .ring-s .mv { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; }
.mini .cap { font-size:11px; opacity:.72; font-weight:600; }
svg.rr { transform:rotate(-90deg); overflow:visible; }
svg.rr .trk { fill:none; stroke:rgba(255,255,255,.15); }
svg.rr .fll { fill:none; stroke-linecap:round; transition:stroke-dashoffset 1s cubic-bezier(.4,0,.15,1); }

/* компактная шапка (Баллы/Профиль) */
.chead { color:#fff; padding:calc(16px + env(safe-area-inset-top)) 20px 22px; border-radius:0 0 26px 26px; box-shadow:var(--sh);
  background:radial-gradient(120% 80% at 85% -20%, rgba(232,149,46,.26), transparent 55%), linear-gradient(160deg,var(--navy),var(--navy-2)); }
.chead .top { display:flex; align-items:center; gap:10px; }
.chead .logo { font-size:20px; font-weight:900; letter-spacing:-.03em; } .chead .logo .dot { color:var(--amber-2); }
.chead .greet { font-size:22px; font-weight:800; margin-top:14px; letter-spacing:-.02em; }

/* ══ КОНТЕНТ ══ */
.c-main { max-width:600px; margin:0 auto; padding:2px 14px calc(94px + env(safe-area-inset-bottom)); }
.c-main > * { animation:rise .4s ease both; }
.c-main > *:nth-child(2){ animation-delay:.04s } .c-main > *:nth-child(3){ animation-delay:.08s }
.c-main > *:nth-child(4){ animation-delay:.12s } .c-main > *:nth-child(5){ animation-delay:.16s }
.sec-h { display:flex; align-items:baseline; gap:8px; margin:26px 6px 13px; }
.sec-h h2 { font-size:18px; font-weight:800; letter-spacing:-.02em; } .sec-h .n { font-size:12.5px; color:var(--faint); font-weight:700; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); }

.confirm { display:flex; align-items:center; gap:13px; padding:16px; margin-top:16px; width:100%;
  background:linear-gradient(150deg,#fff,var(--amber-tint)); border:1px solid #F0DEBF; border-radius:var(--r); color:var(--amber-d);
  font-weight:800; font-size:14.5px; text-align:left; cursor:pointer; transition:transform .1s; box-shadow:var(--sh); }
.confirm:active { transform:scale(.99); }
.confirm.done { background:linear-gradient(150deg,#fff,var(--ok-t)); border-color:#C7E4D5; color:var(--ok); }
.confirm .ico { width:38px; height:38px; flex:0 0 auto; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:19px; box-shadow:var(--sh-sm); }

/* карточки блюд — 2 в ряд, крупное фото сверху */
.dishes { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.dish { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh);
  animation:rise .4s ease both; transition:transform .1s, box-shadow .15s; }
.dish.tap { cursor:pointer; } .dish.tap:active { transform:scale(.985); }
.dish .ph { position:relative; aspect-ratio:1/1; background:#EEF0F3; display:flex; align-items:center; justify-content:center; }
.dish .ph img { width:100%; height:100%; object-fit:cover; display:block; }
.dish .ph svg { width:46px; height:46px; color:var(--c-other); }
.dish .ph .tag { position:absolute; top:9px; left:9px; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:#fff; padding:3px 9px; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.18); }
.dish .ph .kcal { position:absolute; bottom:9px; left:9px; background:rgba(255,255,255,.95); color:var(--ink); font-size:11px; font-weight:800;
  padding:3px 9px; border-radius:999px; box-shadow:var(--sh-sm); backdrop-filter:blur(2px); }
.dish .b { padding:11px 12px 13px; }
.dish .nm { font-size:13.5px; font-weight:800; letter-spacing:-.01em; line-height:1.24; min-height:2.5em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dish .bju { display:flex; gap:10px; font-size:11px; color:var(--muted); font-weight:600; margin-top:7px; }
.dish .bju b { color:var(--ink); }
.dish .rr5 { display:flex; align-items:center; gap:3px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.dish .rr5 .sp { width:16px; height:16px; color:var(--line-2); flex:0 0 auto; } .dish .rr5 .sp.on { color:var(--amber); }
.dish .rr5 .hint { font-size:10.5px; color:var(--faint); font-weight:700; margin-left:3px; }
.dish .rr5 .done { font-size:10.5px; color:var(--ok); font-weight:800; margin-left:auto; }
.m-breakfast .ph svg { color:var(--c-breakfast); } .m-breakfast .ph .tag { background:var(--c-breakfast); }
.m-lunch .ph svg { color:var(--c-lunch); }        .m-lunch .ph .tag { background:var(--c-lunch); }
.m-dinner .ph svg { color:var(--c-dinner); }       .m-dinner .ph .tag { background:var(--c-dinner); }
.m-salad .ph svg { color:var(--c-salad); }          .m-salad .ph .tag { background:var(--c-salad); }
.m-other .ph svg { color:var(--c-other); }          .m-other .ph .tag { background:var(--c-other); }

/* лист оценки блюда */
.rate-sheet .photo { width:100%; aspect-ratio:16/11; border-radius:16px; overflow:hidden; background:#EEF0F3; margin-top:6px; }
.rate-sheet .photo img { width:100%; height:100%; object-fit:cover; display:block; }
.rate-sheet .spoons { display:flex; gap:10px; justify-content:center; margin:18px 0 4px; }
.rate-sheet .spoons .sp { width:42px; height:42px; color:var(--line-2); cursor:pointer; transition:transform .08s, color .12s; }
.rate-sheet .spoons .sp svg { width:100%; height:100%; display:block; }
.rate-sheet .spoons .sp.on { color:var(--amber); } .rate-sheet .spoons .sp:active { transform:scale(.88); }

/* баллы */
.points-card { position:relative; overflow:hidden; background:linear-gradient(145deg,var(--navy),var(--navy-3)); color:#fff;
  border-radius:var(--r); padding:24px; margin-top:10px; box-shadow:var(--sh-lg); }
.points-card::after { content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle,rgba(232,149,46,.4),transparent 68%); }
.points-card .lbl { font-size:11px; text-transform:uppercase; letter-spacing:.16em; opacity:.65; }
.points-card .big { font-size:48px; font-weight:900; letter-spacing:-.04em; margin-top:4px; display:flex; align-items:center; gap:10px; }
.points-card .big .z { color:var(--amber-2); }
.points-card .sub { font-size:13.5px; color:#8FE7BE; font-weight:800; margin-top:2px; }
.points-card .lvlrow { margin-top:18px; position:relative; z-index:1; }
.points-card .lvlrow .t { display:flex; justify-content:space-between; font-size:12px; opacity:.9; margin-bottom:7px; font-weight:600; }
.points-card .lvlrow .tr { height:7px; border-radius:5px; background:rgba(255,255,255,.16); overflow:hidden; }
.points-card .lvlrow .tr i { display:block; height:100%; background:linear-gradient(90deg,var(--amber),var(--amber-2)); border-radius:5px; transition:width 1s cubic-bezier(.4,0,.15,1); }
.hist .row { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); font-size:14px; }
.hist .row:last-child { border-bottom:none; }
.hist .row .ic { width:32px; height:32px; border-radius:10px; background:var(--amber-tint); display:flex; align-items:center; justify-content:center; font-size:15px; flex:0 0 auto; }
.hist .row .d { margin-left:auto; font-weight:900; color:var(--ok); } .hist .row .d.minus { color:var(--amber-d); }
.soon { display:flex; align-items:center; gap:12px; padding:17px; margin-top:12px; border:1.5px dashed var(--line-2); border-radius:var(--r); color:var(--muted); font-size:14px; background:var(--surface); }
.soon .em { font-size:19px; } .soon .tag { margin-left:auto; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--amber-d); background:var(--amber-tint); border-radius:999px; padding:3px 11px; }

/* профиль */
.p-hero { display:flex; align-items:center; gap:15px; padding:20px 18px; margin-top:10px; }
.p-hero .av { width:60px; height:60px; border-radius:20px; background:linear-gradient(145deg,var(--amber),var(--amber-d)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:900; flex:0 0 auto; box-shadow:var(--sh); }
.p-hero .nm { font-size:19px; font-weight:900; letter-spacing:-.02em; } .p-hero .lv { font-size:13px; color:var(--muted); margin-top:3px; font-weight:600; }
.p-list { margin-top:14px; } .p-row { display:flex; align-items:center; gap:12px; padding:15px 17px; border-bottom:1px solid var(--line); font-size:14.5px; }
.p-row:last-child { border-bottom:none; } .p-row .k { color:var(--muted); } .p-row .v { margin-left:auto; font-weight:700; text-align:right; }
.p-row.tap { cursor:pointer; } .p-row.tap:active { background:var(--bg); } .p-row .chev { margin-left:auto; color:var(--faint); font-size:19px; }
.p-row .kk { display:flex; align-items:center; gap:10px; } .p-row .kk .e { font-size:17px; }
.p-danger { color:var(--warn); }

/* нижняя навигация */
.c-nav { position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; background:rgba(255,255,255,.9); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.c-nav a { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:11px 0 9px; color:var(--faint); text-decoration:none; font-size:11px; font-weight:800; transition:color .15s; }
.c-nav a.active { color:var(--amber); } .c-nav a svg { width:23px; height:23px; transition:transform .15s; } .c-nav a.active svg { transform:translateY(-2px); }

/* установка на экран */
.install { display:flex; align-items:center; gap:12px; margin-top:16px; padding:15px; border-radius:var(--r); background:linear-gradient(150deg,var(--navy-tint),#E4E9F8); border:1px solid #D6DDF2; box-shadow:var(--sh-sm); }
.install .ic { width:42px; height:42px; flex:0 0 auto; border-radius:13px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-sm); color:var(--navy); }
.install .tx { flex:1; min-width:0; } .install .tx b { font-size:14px; } .install .tx span { display:block; font-size:12px; color:var(--muted); margin-top:1px; }
.install .go { background:var(--navy); color:#fff; border:none; border-radius:11px; font:inherit; font-weight:800; font-size:13px; padding:10px 15px; cursor:pointer; white-space:nowrap; }
.install .x { background:none; border:none; color:var(--faint); font-size:22px; cursor:pointer; padding:2px 4px; line-height:1; }
.ios-tip { margin-top:12px; padding:15px 17px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); font-size:13.5px; box-shadow:var(--sh-sm); }
.ios-tip .shr { display:inline-flex; vertical-align:-3px; margin:0 2px; }

/* плавающая кнопка «У меня проблема» — всегда под рукой */
.fab { position:fixed; right:16px; bottom:calc(80px + env(safe-area-inset-bottom)); z-index:25;
  width:50px; height:50px; border-radius:50%; border:none; cursor:pointer; color:#fff;
  background:linear-gradient(145deg,var(--navy-2),var(--navy)); box-shadow:0 6px 16px rgba(22,37,92,.38), var(--sh);
  display:flex; align-items:center; justify-content:center; transition:transform .12s; animation:rise .4s .2s ease both; }
.fab:active { transform:scale(.92); }
.fab svg { width:23px; height:23px; }
.fab .dot { position:absolute; top:9px; right:10px; width:7px; height:7px; border-radius:50%; background:var(--amber-2); box-shadow:0 0 0 2px var(--navy); }

/* нижний лист (проблема) */
.ov { position:fixed; inset:0; background:rgba(16,20,38,.5); backdrop-filter:blur(2px); z-index:50; opacity:0; transition:opacity .25s; display:flex; align-items:flex-end; }
.ov.show { opacity:1; }
.sheet { width:100%; max-width:600px; margin:0 auto; background:var(--surface); border-radius:24px 24px 0 0; padding:8px 20px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .3s cubic-bezier(.3,0,.2,1); box-shadow:var(--sh-lg); }
.ov.show .sheet { transform:none; }
.sheet .grab { width:40px; height:4px; border-radius:3px; background:var(--line-2); margin:8px auto 14px; }
.sheet h3 { font-size:19px; font-weight:800; letter-spacing:-.02em; } .sheet p { color:var(--muted); font-size:13.5px; margin-top:6px; }
.sheet textarea { width:100%; min-height:96px; margin-top:14px; padding:13px 15px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  font:inherit; font-size:15px; resize:vertical; background:var(--bg); color:var(--ink); }
.sheet textarea:focus { outline:none; border-color:var(--navy); background:#fff; }
.sheet .send { width:100%; margin-top:14px; background:var(--navy); color:#fff; border:none; border-radius:var(--r-sm); font:inherit; font-weight:800; font-size:16px; padding:16px; cursor:pointer; }
.sheet .send:active { background:var(--navy-2); }
.sheet .tglink { display:block; text-align:center; margin-top:14px; color:var(--navy); font-weight:700; font-size:14px; text-decoration:none; }

/* вход / состояния / тост */
.login { min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 28px;
  background:radial-gradient(130% 60% at 50% 0%,var(--navy-tint),var(--bg) 62%); }
.login .logo { font-size:40px; font-weight:900; color:var(--navy); letter-spacing:-.04em; } .login .logo .dot { color:var(--amber); }
.login h1 { font-size:24px; font-weight:900; margin:24px 0 10px; letter-spacing:-.02em; } .login p { color:var(--muted); font-size:14.5px; max-width:32ch; line-height:1.5; }
.btn-tg { margin-top:28px; background:#2AA0DE; color:#fff; border:none; border-radius:16px; font:inherit; font-size:16px; font-weight:800; padding:16px 28px; display:inline-flex; align-items:center; gap:10px; cursor:pointer; box-shadow:0 10px 26px rgba(42,160,222,.4); transition:transform .1s; }
.btn-tg:active { transform:scale(.98); } .login .wait { margin-top:22px; color:var(--muted); font-size:13.5px; } .login .fine { margin-top:auto; padding-top:26px; font-size:11.5px; color:var(--faint); max-width:34ch; }
.state { text-align:center; padding:70px 28px; } .state .em { font-size:44px; } .state h1 { font-size:21px; font-weight:800; margin-top:12px; } .state p { color:var(--muted); margin-top:8px; font-size:14px; }
.toast { position:fixed; left:50%; bottom:104px; transform:translateX(-50%) translateY(10px); background:var(--ink); color:#fff; padding:13px 24px; border-radius:999px; font-size:14.5px; font-weight:800; opacity:0; transition:.25s; pointer-events:none; z-index:60; box-shadow:var(--sh-lg); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }