/* Поликопи editorial redesign — scoped tokens + components.
 * Locked: redesign/STYLE_GUIDE.md. All classes prefixed .pk- and live under .pk-root
 * so they never leak into the existing live UI. Fonts: serif headings, mono numbers. */

.pk-root, .pk-leaders {
  /* Derive editorial tokens from the app's theme system (App.css :root /
     [data-theme="light"] / [data-accent="…"]) so light/dark + the 6 accent
     themes all work automatically. COPY/FADE stay semantic (profit/loss). */
  --ink: var(--bg-primary); --ink-panel: var(--bg-card);
  --ink-bd: var(--border); --ink-bd2: var(--border-light);
  --tx: var(--text-primary); --tx-hi: var(--text-primary); --mut: var(--text-secondary);
  --cream: #f4f1ea; --cream-panel: #fbf9f4; --cream-bd: #e2ddd0;
  --ink-on-cream: #1a1a16; --mut-on-cream: #8a8576;
  --g: var(--profit); --g-soft: var(--profit); --r: var(--loss); --gold: var(--accent);
  --pk-serif: 'Newsreader', Georgia, serif;
  --pk-sans: 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  --pk-mono: 'Inter', system-ui, 'Segoe UI', sans-serif;

  font-family: var(--pk-sans);
  background: var(--ink);
  color: var(--tx);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.pk-root * { box-sizing: border-box; margin: 0; }
.pk-serif { font-family: var(--pk-serif); font-weight: 400; }
.pk-mono { font-family: var(--pk-mono); }

/* Font tokens on ALL editorial containers (color tokens stay app-derived; no bg/min-height
   here so the modal overlay etc. aren't affected). Fixes var(--pk-serif) resolving to nothing
   on More/Settings/Copy/Market/Wallet/Modal. */
.pk-more, .pk-settings, .pk-profile, .pk-portfolio, .pk-ccm, .pk-market, .pk-copy, .pk-wallet {
  --pk-serif: 'Newsreader', Georgia, serif;
  --pk-sans: 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  --pk-mono: 'Inter', system-ui, 'Segoe UI', sans-serif;
}

/* surfaces */
.pk-screen { max-width: 480px; margin: 0 auto; padding: 0 22px 84px; }
.pk-screen.pk-cream { background: var(--cream); color: var(--ink-on-cream); min-height: 100vh; }
.pk-toptag { font-size: 11px; letter-spacing: 2px; color: var(--mut); font-weight: 700; text-transform: uppercase; }
.pk-h1 { font-family: var(--pk-serif); font-weight: 400; font-size: clamp(34px, 10vw, 42px); line-height: 1.04; letter-spacing: -.5px; color: var(--tx-hi); margin: 14px 0 6px; }
.pk-lbl { font-size: 10px; letter-spacing: 1.5px; color: var(--mut); font-weight: 700; text-transform: uppercase; margin: 18px 0 8px; }
.pk-rule { height: 1px; background: var(--ink-bd); margin: 10px 0; }

/* COPY⇄FADE toggle — glow only on active side */
.pk-toggle { display: inline-flex; border: 1px solid var(--ink-bd); border-radius: 30px; overflow: hidden; font-size: 13px; font-weight: 700; cursor: pointer; user-select: none; }
.pk-toggle > span { padding: 8px 18px; display: flex; align-items: center; gap: 6px; color: var(--mut); transition: all .15s; }
.pk-toggle[data-side="copy"] .pk-t-copy { background: rgba(31,158,87,.16); color: var(--g-soft); box-shadow: inset 0 0 20px rgba(31,158,87,.25); }
.pk-toggle[data-side="fade"] .pk-t-fade { background: rgba(216,66,95,.16); color: var(--r); box-shadow: inset 0 0 20px rgba(216,66,95,.25); }

/* leaderboard row */
.pk-leader-row { display: flex; align-items: center; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--ink-bd2); cursor: pointer; }
.pk-rk { font-family: var(--pk-serif); font-size: 15px; color: var(--mut); width: 16px; text-align: center; }
.pk-av { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px; border: 1px solid #333; background: #1a1d24 center/cover; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.pk-who { flex: 1; min-width: 0; }
.pk-who .pk-nm { font-family: var(--pk-serif); font-size: 16px; color: var(--tx-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-pill { font-size: 10px; font-weight: 800; letter-spacing: .5px; padding: 1px 6px; border-radius: 5px; display: inline-block; margin-top: 2px; }
.pk-pill.pk-c { background: var(--profit-bg); color: var(--g-soft); }
.pk-pill.pk-f { background: var(--loss-bg); color: var(--r); }
.pk-edge { text-align: right; }
.pk-edge .pk-e { font-size: 9px; color: var(--mut); letter-spacing: 1px; font-family: var(--pk-mono); }
.pk-edge .pk-v { font-family: var(--pk-mono); font-size: 18px; font-weight: 700; }
.pk-pos-num { color: var(--g-soft); } .pk-neg-num { color: var(--r); }

/* trader profile (cream) */
.pk-hero { width: 150px; height: 150px; margin: 14px auto 6px; border-radius: 50%; background: #1a1d24 center/cover; border: 1px solid var(--cream-bd); box-shadow: 0 10px 30px rgba(0,0,0,.12), inset 0 0 0 6px #fff; }
.pk-tn { text-align: center; font-family: var(--pk-serif); font-size: 22px; font-weight: 600; }
.pk-tradertag { text-align: center; margin: 6px 0 2px; }
.pk-tradertag span { font-size: 11px; font-weight: 800; letter-spacing: 1px; background: rgba(31,158,87,.12); color: var(--g); padding: 4px 12px; border-radius: 20px; }
.pk-edgebig { text-align: center; margin: 14px 0 2px; }
.pk-edgebig .pk-l { font-family: var(--pk-mono); font-size: 11px; letter-spacing: 3px; color: var(--mut-on-cream); }
.pk-edgebig .pk-n { font-family: var(--pk-serif); font-size: 62px; line-height: 1; letter-spacing: -1px; }
.pk-edgebig .pk-t3 { font-family: var(--pk-mono); font-size: 13px; letter-spacing: 2px; color: var(--mut-on-cream); font-weight: 600; }

/* YES/NO action buttons */
.pk-actions { display: flex; gap: 12px; margin-top: 16px; }
.pk-btn { flex: 1; border-radius: 14px; padding: 13px 0; text-align: center; border: 1.5px solid; background: none; cursor: pointer; }
.pk-btn .pk-big2 { font-family: var(--pk-serif); font-size: 16px; font-weight: 800; letter-spacing: .5px; }
.pk-btn .pk-sm { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; opacity: .7; }
.pk-btn-yes { border-color: var(--g); color: var(--g); }
.pk-btn-no { border-color: var(--r); color: var(--r); }

/* portfolio position */
.pk-pos { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--ink-bd2); }
.pk-pos .pk-t { flex: 1; min-width: 0; }
.pk-pos .pk-q { font-family: var(--pk-serif); font-size: 14px; color: #e8e5dc; line-height: 1.25; }
.pk-pos .pk-yn { font-size: 11px; margin-top: 3px; color: var(--mut); }
.pk-yes { color: var(--g-soft); font-weight: 700; font-family: var(--pk-mono); }
.pk-no { color: var(--r); font-weight: 700; font-family: var(--pk-mono); }
.pk-pl { text-align: right; font-family: var(--pk-mono); font-weight: 700; font-size: 15px; }
.pk-big { font-family: var(--pk-serif); font-size: 44px; font-weight: 400; letter-spacing: -1px; color: var(--tx-hi); margin-top: 4px; }
.pk-big .pk-u { font-family: var(--pk-mono); font-size: 15px; color: var(--g-soft); font-weight: 600; }

/* bottom nav */
.pk-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 62px; display: flex; align-items: center; justify-content: space-around; border-top: 1px solid var(--ink-bd); background: var(--ink); max-width: 480px; margin: 0 auto; z-index: 50; }
.pk-nav .pk-i { width: 22px; height: 22px; color: #5a5f6b; }
.pk-nav .pk-i.pk-on { color: var(--gold); }

/* status bar mock (preview only) */
.pk-sb { display: flex; justify-content: space-between; font-family: var(--pk-mono); font-size: 13px; padding: 14px 0 0; color: inherit; }

/* ===== Leaders production skin (inside existing Layout — no fixed nav here) ===== */
.pk-leaders { background: var(--ink); color: var(--tx); min-height: 100%; padding: 4px 16px 24px; font-family: var(--pk-sans); }
.pk-leaders * { box-sizing: border-box; }
.pk-leaders .pk-hh { padding: 10px 2px 4px; }
.pk-leaders .pk-hh h1 { font-family: var(--pk-serif); font-weight: 400; font-size: 28px; line-height: 1.05; letter-spacing: -.5px; color: var(--tx-hi); }
.pk-leaders .pk-hh p { font-size: 13px; color: var(--mut); margin-top: 6px; }
/* brand toggle (COPY active / FADE soon) */
.pk-ltoggle { display: inline-flex; border: 1px solid var(--ink-bd); border-radius: 30px; overflow: hidden; font-size: 13px; font-weight: 700; margin: 12px 0 4px; }
.pk-ltoggle .pk-c, .pk-ltoggle .pk-f { padding: 8px 18px; color: var(--mut); cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all .15s; }
.pk-ltoggle[data-side="copy"] .pk-c { background: var(--profit-bg); color: var(--g-soft); box-shadow: inset 0 0 22px var(--profit-bg); }
.pk-ltoggle[data-side="fade"] .pk-f { background: var(--loss-bg); color: var(--r); box-shadow: inset 0 0 22px var(--loss-bg); }
.pk-ccopy.pk-ccopy-fade { background: var(--loss-bg); border: 1px solid var(--r); color: var(--r); }
.pk-ltoggle .pk-soon { font-size: 8px; font-weight: 800; letter-spacing: .5px; background: #2a2d36; color: var(--mut); padding: 1px 5px; border-radius: 5px; }
/* sort chips */
.pk-sortbar { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 4px; scrollbar-width: none; }
.pk-sortbar::-webkit-scrollbar { display: none; }
.pk-sort { flex: 0 0 auto; background: var(--ink-panel); border: 1px solid var(--ink-bd); color: var(--mut); border-radius: 20px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pk-sort.active { background: var(--bg-card-hover); border-color: var(--gold); color: var(--gold); }
/* filter bar (panel reuses existing lead-filter-* styles) */
.pk-fbar { display: flex; align-items: center; gap: 12px; padding: 10px 2px 6px; font-size: 12px; }
.pk-ftoggle { background: var(--ink-panel); border: 1px solid var(--ink-bd); color: var(--tx); border-radius: 18px; padding: 6px 12px; font-size: 12px; cursor: pointer; }
.pk-ftoggle.active { border-color: var(--gold); color: var(--gold); }
.pk-found { color: var(--mut); }
.pk-freset { margin-left: auto; background: none; border: none; color: var(--r); font-size: 12px; cursor: pointer; }
/* card */
.pk-card { background: var(--ink-panel); border: 1px solid var(--ink-bd); border-radius: 16px; padding: 14px 15px; margin-bottom: 11px; cursor: pointer; }
.pk-chead { display: flex; align-items: center; gap: 12px; }
.pk-crank { font-family: var(--pk-serif); font-size: 15px; color: var(--mut); width: 22px; }
.pk-cav { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px; border: 1px solid var(--ink-bd); background: var(--bg-card-hover, #0c1320); display: flex; align-items: center; justify-content: center; font-size: 21px; line-height: 1; }
.pk-cid { flex: 1; min-width: 0; }
.pk-cname { font-family: var(--pk-serif); font-size: 15.5px; color: var(--tx-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-cmeta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 10.5px; flex-wrap: wrap; }
.pk-cedge { font-family: var(--pk-mono); font-weight: 800; color: var(--gold); letter-spacing: .3px; }
.pk-ccat { color: var(--mut); }
.pk-conline { color: var(--mut); display: inline-flex; align-items: center; gap: 4px; }
.pk-cdot { width: 6px; height: 6px; border-radius: 50%; background: var(--g-soft); display: inline-block; }
.pk-cwr { text-align: right; flex: 0 0 auto; min-width: 46px; }
.pk-cwr .pk-wrv { display: block; font-family: var(--pk-mono); font-size: 19px; font-weight: 700; line-height: 1.1; }
.pk-cwr .pk-wrv.good { color: var(--g-soft); } .pk-cwr .pk-wrv.bad { color: var(--r); }
.pk-cwr .pk-wrc { font-size: 8.5px; color: var(--mut); letter-spacing: .5px; text-transform: uppercase; }
.pk-cstats { display: flex; justify-content: space-between; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--ink-bd2); }
.pk-cstat { text-align: left; }
.pk-cstat b { display: block; font-family: var(--pk-mono); font-size: 15px; font-weight: 700; color: var(--tx); }
.pk-cstat span { font-size: 9.5px; color: var(--mut); letter-spacing: .3px; }
.pk-cfoot { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.pk-cpublic { font-size: 11px; color: var(--mut); }
.pk-cspark { width: 48px; height: 22px; margin-left: auto; }
.pk-ccopy { background: var(--profit-bg); border: 1px solid var(--g); color: var(--g-soft); border-radius: 11px; padding: 8px 18px; font-family: var(--pk-serif); font-size: 14px; font-weight: 700; cursor: pointer; }
.pk-skel { height: 110px; background: var(--ink-panel); border: 1px solid var(--ink-bd); border-radius: 16px; margin-bottom: 11px; opacity: .5; }

/* ===== Whale Profile editorial reskin (CSS-only over existing wp-* — money flow untouched) ===== */
.pk-profile .wp-header { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-top: 4px; }
.pk-profile .wp-avatar {
  width: 96px; height: 96px; font-size: 0; color: transparent;
  background-image: url('/brand/shark.png'); background-size: cover; background-position: center 28%;
  border: 1px solid var(--border); box-shadow: 0 8px 26px rgba(0,0,0,.25), inset 0 0 0 4px var(--bg-card);
}
/* Фейд-подписка → череп вместо акулы (отличаем фейд от копи) */
.pk-profile.pk-fade .wp-avatar {
  background-image: url('/brand/skull.png');
  box-shadow: 0 8px 26px rgba(0,0,0,.25), inset 0 0 0 4px var(--bg-card), 0 0 0 1px var(--loss, #e0556b);
}
/* Fade-подписка в «Мои копии»: красный чип + тонкий акцент карточки */
.pk-copy .mc-fade-tag { color: var(--loss, #e0556b); font-weight: 700; margin-right: 8px; }
.pk-copy .mc-card.mc-fade { border-color: rgba(224, 85, 107, .35); }
.pk-profile .wp-info { text-align: center; }
.pk-profile .wp-name { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 22px; letter-spacing: -.3px; }
.pk-profile .wp-info > div { justify-content: center; }
.pk-profile .wp-alert-btn { margin-top: 2px; }
.pk-profile .wp-stat-value { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 17px; letter-spacing: -.3px; }
.pk-profile .wp-stat { border-radius: 13px; padding: 13px 12px; }
.pk-profile .wp-section-title { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 17px; letter-spacing: -.2px; }
.pk-profile .wpp-cta { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 16px; letter-spacing: .3px; border-radius: 14px; }

/* ===== Portfolio (My Trades) editorial reskin — CSS-only over portfolio-* / pos-* ===== */
.pk-portfolio .portfolio-title { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 25px; letter-spacing: -.5px; color: var(--text-primary); }
.pk-portfolio .summary-card { border-radius: 14px; }
.pk-portfolio .summary-card-value { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 18px; letter-spacing: -.3px; }
.pk-portfolio .summary-card-value small { font-family: var(--pk-mono); font-size: 12px; }
.pk-portfolio .sort-btn-active { color: var(--accent); border-color: var(--accent); }
.pk-portfolio .portfolio-tab-active { color: var(--accent); border-color: var(--accent); }
.pk-portfolio .position-card { border-radius: 14px; }
.pk-portfolio .pos-title { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 14px; letter-spacing: -.2px; }
.pk-portfolio .pos-stat-value { font-family: var(--pk-mono); font-weight: 700; }
.pk-portfolio .pos-outcome-yes { color: var(--profit); }
.pk-portfolio .pos-outcome-no { color: var(--loss); }

/* ===== Copy Config modal editorial reskin — CSS-only over ccm-* (money flow intact) ===== */
.pk-ccm .ccm-modal { border-radius: 18px; }
.pk-ccm .ccm-title { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 18px; letter-spacing: -.2px; }
.pk-ccm .ccm-save { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 15px; letter-spacing: .3px; border-radius: 12px; }
.pk-ccm .ccm-cancel { border-radius: 12px; }
.pk-ccm .ccm-input { font-family: var(--pk-mono); }
.pk-ccm .ccm-field { border-radius: 12px; }

/* tabular figures for all numbers in editorial containers (#4 Inter tabular) */
.pk-root, .pk-leaders, .pk-profile, .pk-portfolio, .pk-ccm { font-feature-settings: 'tnum' 1, 'lnum' 1; }

/* ===== More & Settings editorial reskin — CSS-only ===== */
.pk-more .more-title, .pk-settings .set-title { font-family: var(--pk-serif); font-weight: 400; font-size: 26px; letter-spacing: -.4px; color: var(--text-primary); }
.pk-settings .set-section-title { font-family: var(--pk-serif); font-weight: 400; font-size: 18px; letter-spacing: -.2px; }
.pk-more .more-item { border-radius: 13px; }
.pk-more .more-label { font-family: var(--pk-serif); font-weight: 400; font-size: 16px; }
.pk-settings .set-row { border-radius: 13px; }
.pk-settings .set-row-label { font-family: var(--pk-serif); font-weight: 400; font-size: 16px; }
.pk-more .more-ver { font-family: var(--pk-serif); }

/* ===== Wallet / Market Detail / Copy-subscriptions editorial reskin — CSS-only ===== */
.pk-market .detail-title { font-family: var(--pk-serif); font-weight: 400; letter-spacing: -.3px; }
.pk-copy .mc-title { font-family: var(--pk-serif); font-weight: 400; font-size: 26px; letter-spacing: -.4px; color: var(--text-primary); }
.pk-wallet .wallet-summary { font-family: var(--pk-mono); }

/* ===== Header wordmark — editorial serif ===== */
.pk-wordmark { font-family: 'Newsreader', Georgia, serif !important; font-weight: 500; letter-spacing: -.2px; font-feature-settings: 'tnum' 1; }

/* Copy-config FADE direction segment — active = loss/red (semantic) */
.pk-ccm .ccm-seg-btn.pk-seg-fade.active { background: var(--loss-bg); color: var(--loss); box-shadow: inset 0 0 16px var(--loss-bg); }