/* =====================================================================
   Market · Профиль клиента · v1 (5 окт 2026)
   Стили экрана «Профиль» один в один с макетом docs/Market-Profile.html.
   Все классы с префиксом pf-, чтобы не пересекаться со стилями приложения.
   Тема: класс .pf-dark на корне .pf (ставится по выбору «Тема», см. README §5).
   Шрифт Onest 400/500/600/700/800 — как во всём Market.
   ===================================================================== */

/* ---------- 1. Токены ---------- */
@font-face{font-family:ProfileOnest;src:url('/assets/profile-assets/fonts/Onest-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:ProfileOnest;src:url('/assets/profile-assets/fonts/Onest-500.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:ProfileOnest;src:url('/assets/profile-assets/fonts/Onest-600.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:ProfileOnest;src:url('/assets/profile-assets/fonts/Onest-700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:ProfileOnest;src:url('/assets/profile-assets/fonts/Onest-800.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
.pf{
  --pf-bg:#F2F4F6; --pf-sur:#FFFFFF; --pf-s2:#EEF1F4; --pf-line:#E3E8EC;
  --pf-t:#15202B; --pf-t2:#56626A; --pf-t3:#7A8590;
  --pf-accent:#0E9F87; --pf-on:#FFFFFF;
  --pf-amber:#A86A0A; --pf-amber-bg:#F7EBD6;
  --pf-glow:13%; --pf-ico:26%; --pf-ico-edge:rgba(19,26,32,.24);
  --pf-shadow:0 1px 2px rgba(19,26,32,.05),0 4px 14px -6px rgba(19,26,32,.10);
  --pf-press:rgba(19,26,32,.045); --pf-seg-on:#FFFFFF;
  --pf-ease:cubic-bezier(.23,1,.32,1);
}
.pf.pf-dark{
  --pf-bg:#0C0F12; --pf-sur:#14181D; --pf-s2:#1C2229; --pf-line:#262D35;
  --pf-t:#EEF2F5; --pf-t2:#A6B0BA; --pf-t3:#848F9A;
  --pf-accent:#2EE0BE; --pf-on:#06221D;
  --pf-amber:#F5B142; --pf-amber-bg:#2E2412;
  --pf-glow:17%; --pf-ico:36%; --pf-ico-edge:rgba(0,0,0,.4);
  --pf-shadow:none; --pf-press:rgba(255,255,255,.04); --pf-seg-on:#2A323B;
}

/* ---------- 2. Экран ---------- */
.pf{background:var(--pf-bg);color:var(--pf-t);font-family:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased}
.pf *{box-sizing:border-box}
.pf [hidden]{display:none!important}
.pf button{font:inherit;color:inherit}
/* .pf-screen — прокручиваемая область между шапкой Telegram и нижним меню */
.pf-screen{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px 16px 28px;overflow-y:auto;overscroll-behavior:contain}
.pf-screen>*{position:relative;z-index:1;flex-shrink:0}

.pf-i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.pf-chev{width:18px;height:18px;color:var(--pf-t3);stroke-width:2}
.pf-3d{display:block;object-fit:contain;flex:none}
.pf-tap{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .16s var(--pf-ease)}
.pf-tap:active{transform:scale(.97)}

/* ---------- 3. Заголовок ---------- */
.pf-head{display:flex;flex-direction:column;gap:3px;padding:0 2px 2px}
.pf-head h1{font-size:28px;line-height:1.05;letter-spacing:-.035em;font-weight:800;margin:0}
.pf-id{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;min-height:40px;margin:-8px 0 -10px;color:var(--pf-t2);font-size:14px;cursor:pointer}
.pf-id b{font-weight:600;color:var(--pf-t);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.pf-id .pf-i{width:15px;height:15px;color:var(--pf-t3)}

/* ---------- 4. Партнёрам (главная карточка) ---------- */
.pf-partner{position:relative;overflow:hidden;width:100%;text-align:left;border-radius:20px;border:1px solid color-mix(in srgb,var(--pf-accent) 26%,var(--pf-line));
  background:var(--pf-sur);padding:14px 14px 14px 12px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--pf-shadow)}
.pf-partner::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(156deg,color-mix(in srgb,var(--pf-accent) 18%,transparent),transparent 60%)}
.pf-partner>*{position:relative;z-index:1}
.pf-edge{position:absolute!important;left:18px;right:18px;top:0;height:2px;z-index:2!important;background:linear-gradient(90deg,transparent,var(--pf-accent),transparent);opacity:.75}
.pf-partner-hdr{display:flex;align-items:center;gap:10px}
.pf-partner .pf-3d{width:68px;height:68px;margin:-6px -2px -6px -4px;
  filter:drop-shadow(0 1px 1.5px var(--pf-ico-edge)) drop-shadow(0 6px 14px color-mix(in srgb,var(--pf-accent) var(--pf-ico),transparent))}
.pf-partner-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.pf-partner-tt b{font-size:19px;font-weight:800;letter-spacing:-.022em;line-height:1.12}
.pf-partner-tt span{font-size:14px;color:var(--pf-t2);line-height:1.35;text-wrap:balance}
.pf-partner-tt em{font-style:normal;font-weight:800;color:var(--pf-t)}
.pf-partner-ft{display:flex;align-items:center;gap:10px;min-height:40px}
/* состояние «ещё никого»: бонус + кнопка */
.pf-bonus{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;padding-left:4px;line-height:1.3}
.pf-bonus b{font-size:14px;font-weight:600;white-space:nowrap}
.pf-bonus em{font-style:normal;font-weight:800;color:var(--pf-amber)}
.pf-bonus span{font-size:13px;color:var(--pf-t2)}
.pf-invite{flex:none;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border:0;border-radius:12px;background:var(--pf-accent);color:var(--pf-on)!important;
  font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 6px 16px color-mix(in srgb,var(--pf-accent) 26%,transparent);transition:transform .16s var(--pf-ease)}
.pf-invite:active{transform:scale(.96)}
.pf-invite .pf-i{width:17px;height:17px;stroke-width:2}
/* состояние «уже зарабатывает»: три цифры */
.pf-stats{flex:1;display:grid;grid-template-columns:1.15fr 1fr .8fr;border-top:1px solid color-mix(in srgb,var(--pf-line) 80%,transparent);padding-top:10px;margin-top:-2px}
.pf-stats>div{display:flex;flex-direction:column;gap:2px;padding-left:10px;border-left:1px solid var(--pf-line)}
.pf-stats>div:first-child{padding-left:2px;border-left:0}
.pf-stats small{font-size:12px;color:var(--pf-t2)}
.pf-stats b{font-size:17px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pf-stats .pf-up{color:var(--pf-accent)}
.pf-flash{animation:pf-flash .9s var(--pf-ease)}
@keyframes pf-flash{25%{text-shadow:0 0 14px color-mix(in srgb,var(--pf-accent) 70%,transparent)}}

/* ---------- 5. Баланс и Поддержка ---------- */
.pf-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pf-tile{position:relative;width:100%;min-height:132px;text-align:left;border-radius:18px;border:1px solid var(--pf-line);background:var(--pf-sur);padding:12px 12px 13px;
  display:flex;flex-direction:column;align-items:flex-start;box-shadow:var(--pf-shadow)}
.pf-tile .pf-3d{width:46px;height:46px;margin:-3px 0 7px -3px;
  filter:drop-shadow(0 1px 1.5px var(--pf-ico-edge)) drop-shadow(0 5px 10px color-mix(in srgb,var(--pf-accent) calc(var(--pf-ico) * .7),transparent))}
.pf-tile .pf-chev{position:absolute;top:14px;right:10px}
.pf-tile-t{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.pf-tile-v{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pf-tile-s{font-size:13px;color:var(--pf-t2);line-height:1.3;margin-top:2px;white-space:nowrap}
.pf-tile-s b{font-weight:600;color:var(--pf-t)}
.pf-tile-s.pf-go{color:var(--pf-accent);font-weight:700}
.pf-status{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;margin-top:4px;line-height:1.25}
.pf-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--pf-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--pf-accent) 22%,transparent)}
.pf-dot.pf-off{background:var(--pf-t3);box-shadow:none}

/* ---------- 6. Стать исполнителем ---------- */
.pf-exec{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border-radius:18px;border:1px solid var(--pf-line);background:var(--pf-sur);padding:10px 12px 10px 10px;box-shadow:var(--pf-shadow)}
.pf-exec .pf-3d{width:52px;height:52px;margin:-4px 0;
  filter:drop-shadow(0 1px 1.5px var(--pf-ico-edge)) drop-shadow(0 5px 10px color-mix(in srgb,var(--pf-accent) calc(var(--pf-ico) * .6),transparent))}
.pf-exec-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pf-exec-tt b{font-size:16px;font-weight:700;letter-spacing:-.012em}
.pf-exec-tt span{font-size:13.5px;color:var(--pf-t2);line-height:1.3}
.pf-exec-tt .pf-pill{display:inline-flex;align-self:flex-start;font-size:12px;font-weight:700;color:var(--pf-amber);background:var(--pf-amber-bg);border-radius:7px;padding:3px 7px;margin-top:2px}

/* ---------- 7. Списки настроек ---------- */
.pf-list{border-radius:18px;border:1px solid var(--pf-line);background:var(--pf-sur);overflow:hidden;box-shadow:var(--pf-shadow)}
.pf-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:0 12px;background:none;border:0;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background-color .12s}
.pf-row:active{background:var(--pf-press)}
.pf-row+.pf-row::before{content:"";position:absolute;top:0;left:56px;right:0;border-top:1px solid var(--pf-line)}
.pf-ri{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--pf-s2);color:var(--pf-t2);flex:none}
.pf-ri .pf-i{width:18px;height:18px}
.pf-row-g{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;padding:10px 0}
.pf-row-g b{font-size:15px;font-weight:600}
.pf-row-g span{font-size:13px;color:var(--pf-t2);line-height:1.3}
.pf-row-val{font-size:15px;color:var(--pf-t2)}
.pf-row.pf-static{cursor:default}.pf-row.pf-static:active{background:none}
.pf-tseg{display:inline-flex;background:var(--pf-s2);border-radius:10px;padding:2px;gap:2px;flex:none}
.pf-tseg button{border:0;background:none;color:var(--pf-t2);font-size:13px;font-weight:600;border-radius:8px;padding:0 9px;height:40px;cursor:pointer}
.pf-tseg button[aria-pressed="true"]{background:var(--pf-seg-on);color:var(--pf-t);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* ---------- 8. Тост ---------- */
.pf-toast{position:absolute;left:16px;right:16px;bottom:16px;z-index:5;background:color-mix(in srgb,var(--pf-t) 92%,transparent);color:var(--pf-bg);border-radius:14px;padding:12px 14px;
  font-size:14px;line-height:1.35;font-weight:500;opacity:0;transform:translateY(8px);transition:opacity .2s var(--pf-ease),transform .2s var(--pf-ease);pointer-events:none}
.pf-toast.pf-on{opacity:1;transform:none}

/* ---------- 9. Появление (один раз за сессию) ---------- */
.pf-enter .pf-screen>*{animation:pf-rise .3s var(--pf-ease) both;animation-delay:calc(var(--pf-i,0) * 35ms)}
@keyframes pf-rise{from{opacity:0;transform:translateY(8px)}}

@media (prefers-reduced-motion:reduce){
  .pf-tap,.pf-invite,.pf-row,.pf-toast{transition:none}
  .pf-enter .pf-screen>*,.pf-flash{animation:none}
}

/* Integration with the existing scroll area and local Onest font. */
html.profile-screen #view{padding:0}
html.profile-screen{scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
.pf{font-family:ProfileOnest,Onest,system-ui,sans-serif;isolation:isolate}
.pf .pf-screen *{letter-spacing:0}
.pf-screen{overflow:visible}
.pf picture{display:block;flex:none}
.pf .pf-id{font-size:14px;color:var(--pf-t2)}
.pf .pf-invite{font-weight:700}
.pf-symbol{background:currentColor;mask:var(--pf-symbol) center/contain no-repeat;-webkit-mask:var(--pf-symbol) center/contain no-repeat}
.pf-partner-hdr>.pf-symbol,.pf-tile>.pf-symbol,.pf-exec>.pf-symbol,.pf-row>.pf-symbol{width:18px;height:18px;color:var(--pf-t3)}
.pf-tile>.pf-symbol{position:absolute;top:14px;right:10px}
.pf-tile,.pf-stats>div{min-width:0}
.pf .pf-tile-v,.pf .pf-tile-s,.pf .pf-stats b,.pf .pf-bonus b{white-space:normal;overflow-wrap:anywhere}
.pf-row-g,.pf-exec-tt,.pf-head h1{overflow-wrap:anywhere}
.pf [data-profile-disabled],.pf-refresh-error{color:var(--pf-amber)}
.pf-toast{position:fixed;bottom:calc(84px + env(safe-area-inset-bottom,0px));left:50%;right:auto;max-width:calc(100% - 32px);width:390px;transform:translate(-50%,8px)}
.pf-toast.pf-on{transform:translate(-50%,0)}
.pf-skeleton{background:var(--pf-s2);border-radius:18px}
.pf-skeleton-head{height:60px}.pf-skeleton-partner{height:152px}.pf-skeleton-tile{height:150px}.pf-skeleton-exec{height:74px}
.pf [role=button]:focus-visible,.pf button:focus-visible{outline:2px solid var(--pf-accent);outline-offset:3px}
@media(max-width:350px){.pf-theme-row{flex-wrap:wrap;padding-block:8px}.pf-theme-row .pf-tseg{margin-left:44px}.pf-invite{padding-inline:10px}.pf-bonus{padding-left:0}}