*{box-sizing:border-box}
body{margin:0}
h2{font-size:18px;margin:0 0 14px}

/* ===================== Unified controls (single format) ===================== */
/* Secondary button: bordered, icon + text, muted text → primary accent on hover.
   This is the one shared format used across the report viewer, dropzone,
   service and other secondary actions. */
.ui-btn,
.report-viewer__action,
.report-viewer__back,
.drop-upload-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--bk-color-border); border-radius:9px;
  background:var(--bk-color-surface); color:var(--bk-color-text-muted);
  padding:8px 12px; font:inherit; font-size:13px; font-weight:600; line-height:1;
  text-decoration:none; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.ui-btn:hover,
.report-viewer__action:hover,
.report-viewer__back:hover,
.drop-upload-btn:hover {
  border-color:var(--bk-color-primary); color:var(--bk-color-primary);
}

/* Icon-only square button — same border/radius language, fixed square size. */
.ui-iconbtn,
.report-viewer__close,
.app-nav__logout,
.popover__close {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:34px; height:34px; padding:0;
  border:1px solid var(--bk-color-border); border-radius:9px;
  background:var(--bk-color-surface); color:var(--bk-color-text-muted); cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.ui-iconbtn:hover,
.app-nav__logout:hover {
  border-color:var(--bk-color-primary); color:var(--bk-color-primary);
}
/* Dismiss/close icon buttons use the danger accent on hover. */
.report-viewer__close:hover,
.popover__close:hover {
  border-color:var(--bk-color-danger); color:var(--bk-color-danger);
}

/* ===================== Landing ===================== */
.skip-link{
  position:fixed;z-index:100;left:16px;top:12px;transform:translateY(-160%);
  visibility:hidden;
  padding:10px 14px;border-radius:8px;background:#1c1b22;color:#fff;text-decoration:none;
}
.skip-link:focus{visibility:visible;transform:translateY(0)}

.landing2{
  min-height:100vh;
  min-height:100dvh;
  color:#383641;
  font-family:var(--bk-font,'Gazprombank-Sans',sans-serif);
  background-color:#f7f6fc;
  background-image:radial-gradient(circle at 0 0,rgba(104,98,128,.42) 2px,transparent 2.1px);
  background-size:28px 28px;
  overflow:hidden;
}
.lp-main{
  width:min(calc(100% - 44px),978px);
  min-height:100vh;
  min-height:100dvh;
  margin:0 auto;
  padding:130px 0 100px;
}
.lp-hero{min-width:0}
.lp-title{
  margin:0;
  font-size:56px;
  font-weight:700;
  line-height:74px;
  letter-spacing:0;
  text-wrap:balance;
}
.lp-title__line{
  display:flex;
  align-items:center;
  height:74px;
  min-width:0;
  gap:28px;
}
.lp-title__line--sources{position:relative;justify-content:flex-start}
.lp-title__line--analysis{padding-left:39px;gap:37px}
.lp-source-coins{position:absolute;left:515px;top:.25px;display:inline-flex;align-items:center;gap:19.22px;flex-shrink:0}
.lp-source-coin{
  display:block;
  width:80.52px;height:80.52px;
  border-radius:50%;
  flex:0 0 auto;
  object-fit:contain;
}
.lp-signal-switch{
  display:block;flex:0 0 auto;
  width:127px;height:72.73px;
  border-radius:999px;
  object-fit:contain;
  transform:translateY(4.77px);
}

.lp-card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,465px));
  gap:48px;
  margin-top:96px;
}
.lp-card{
  position:relative;
  min-width:0;
  aspect-ratio:1;
  border-radius:64px;
  background:#fff;
  overflow:hidden;
  box-shadow:none;
}
.lp-card__title{
  margin:0;
  font-size:40px;
  font-weight:700;
  line-height:56px;
  letter-spacing:0;
  text-wrap:balance;
}
.lp-card__description{
  margin:8px 0 0;
  max-width:none;
  font-size:24px;
  line-height:29px;
  color:#383641;
  text-wrap:pretty;
}

.lp-workflow{padding:66px 0 0}
.lp-workflow>.lp-card__title{padding:0 40px;text-align:center}
.workflow-steps{display:grid;gap:40px;list-style:none;margin:32px 40px 0 44px;padding:0}
.workflow-step{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  align-items:center;gap:32px;height:56px;
}
.workflow-step__number{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:#f0eff6;color:#383641;
  font-size:24px;font-weight:700;line-height:29px;
}
.workflow-step__copy{
  color:#000;
  font-size:24px;font-weight:500;line-height:29px;
  text-wrap:balance;
}

.lp-access{overflow:visible;background:transparent;perspective:1400px}
.telegram-flip{
  width:100%;height:100%;border-radius:inherit;
  transform-style:preserve-3d;
  transition:transform 700ms cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.telegram-flip__inner{
  position:relative;width:100%;height:100%;border-radius:inherit;
  transform-style:preserve-3d;
}
.telegram-flip[data-flipped="true"]{transform:rotateY(180deg)}
.telegram-flip__face{
  position:absolute;inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:inherit;
  background:#fff;
}
.telegram-flip__front{
  display:flex;flex-direction:column;
  padding:64px 32px 32px;
}
.telegram-access__copy{display:block;width:465px;margin:0 -32px}
.telegram-access__copy .lp-card__title{text-align:center}
.telegram-access__copy .lp-card__description{text-align:center}
.telegram-access__actions{
  display:grid;grid-template-columns:81px minmax(0,1fr);gap:10px;
  margin-top:auto;
}
.telegram-icon-button{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:81px;height:81px;padding:0;border:0;border-radius:50%;
  background:#229ed9;color:#fff;cursor:pointer;
  box-shadow:0 8px 24px rgba(34,158,217,.18);
  transition:transform 220ms cubic-bezier(.16,1,.3,1),box-shadow 220ms,background 220ms;
}
.telegram-icon-button:hover{transform:translateY(-3px) scale(1.02);background:#178fc8;box-shadow:0 14px 28px rgba(34,158,217,.28)}
.telegram-icon-button:active{transform:scale(.97)}
.telegram-icon-button:focus-visible,.telegram-access__button:focus-visible,.telegram-qr:focus-visible{outline:3px solid rgba(43,97,236,.34);outline-offset:5px}
.telegram-icon-button__badge{
  position:absolute;left:39px;top:-16px;display:inline-flex;align-items:center;justify-content:center;
  min-width:53px;height:37px;padding:0 10px;border-radius:20px;background:#aeb0b5;color:#fff;
  font-size:16px;font-weight:600;box-shadow:0 4px 12px rgba(20,20,24,.09);
}
.telegram-access__button{
  display:flex;align-items:center;justify-content:center;min-width:0;height:81px;
  border:2px solid #111;border-radius:999px;background:#fff;color:#383641;
  font-size:24px;font-weight:500;line-height:29px;text-decoration:none;
  transition:transform 180ms cubic-bezier(.16,1,.3,1),background 180ms,color 180ms;
}
.telegram-access__button:hover{background:#17171a;color:#fff;transform:translateY(-2px)}
.telegram-access__button:active{transform:scale(.985)}
.telegram-access__button[aria-disabled="true"]{opacity:.48;cursor:wait;pointer-events:none}
.telegram-access__message{position:absolute;left:32px;right:32px;bottom:13px;text-align:center;font-size:12px}

.telegram-flip__back{
  transform:rotateY(180deg);
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;padding:0;
  background:#fff;color:#17171a;
}
.telegram-qr{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:320px;height:320px;
  border-radius:36px;
  background:#f1f0f7;
  color:#229ed9;text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(56,54,65,.035);
  opacity:0;
  transform:scale(.94);
  transition:opacity 220ms ease,transform 460ms cubic-bezier(.16,1,.3,1);
  transition-delay:0ms;
  cursor:pointer;
}
.telegram-flip[data-flipped="true"] .telegram-qr{
  opacity:1;
  transform:scale(1);
  transition-delay:420ms;
}
.telegram-qr[aria-disabled="true"]{pointer-events:none}
.telegram-qr__image{
  display:block;width:244px;height:244px;object-fit:contain;
  background:#fff;
}
.telegram-qr__loader{color:#383641;font-size:18px;font-weight:700}
.telegram-qr__brand{
  position:absolute;left:50%;top:50%;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:5px solid #fff;border-radius:50%;
  background:#229ed9;color:#fff;
  box-shadow:0 6px 16px rgba(34,158,217,.22);
  transform:translate(-50%,-50%) scale(.82);
  opacity:0;
}
.telegram-flip[data-flipped="true"] .telegram-qr__brand{
  animation:telegramBrandIn 380ms 620ms cubic-bezier(.16,1,.3,1) forwards;
}
.telegram-qr__corner{
  position:absolute;z-index:3;width:29px;height:29px;
  color:#383641;
  opacity:0;
  transform:scale(1.3);
}
.telegram-qr__corner--tl{left:16px;top:16px;border-left:3px solid;border-top:3px solid;border-radius:8px 0 0}
.telegram-qr__corner--tr{right:16px;top:16px;border-right:3px solid;border-top:3px solid;border-radius:0 8px 0 0}
.telegram-qr__corner--br{right:16px;bottom:16px;border-right:3px solid;border-bottom:3px solid;border-radius:0 0 8px}
.telegram-qr__corner--bl{left:16px;bottom:16px;border-left:3px solid;border-bottom:3px solid;border-radius:0 0 0 8px}
.telegram-flip[data-flipped="true"] .telegram-qr__corner{
  animation:telegramCornerIn 440ms 540ms cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes telegramCornerIn{to{opacity:.84;transform:scale(1)}}
@keyframes telegramBrandIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

@media (prefers-reduced-motion:reduce){
  .telegram-flip{transition-duration:1ms}
  .telegram-icon-button,.telegram-access__button{transition-duration:1ms}
  .telegram-qr{transition-delay:0ms;transition-duration:1ms}
  .telegram-flip[data-flipped="true"] .telegram-qr__corner,
  .telegram-flip[data-flipped="true"] .telegram-qr__brand{animation-delay:0ms;animation-duration:1ms}
}

/* ===================== App shell (unified Mobbin-DNA) ===================== */
/* Shared refined language, mirrored from the landing so both screens read as
   one product: monochrome ink, one quiet blue accent, soft shadows, calm canvas. */
.app-workspace {
  width: 100%;
  --ink: #0a0a0b;
  --ink-2: #5a5a5f;
  --ink-3: #8a8a8f;
  --line: rgba(10, 10, 11, .10);
  --line-2: rgba(10, 10, 11, .06);
  --surface: #fff;
  --canvas: #f6f6f7;
  --accent: #2b61ec;
  --accent-soft: rgba(43, 97, 236, .10);
  --shadow-s: 0 1px 2px rgba(10, 10, 11, .04), 0 6px 20px rgba(10, 10, 11, .05);
  --shadow-l: 0 24px 60px rgba(10, 10, 11, .09);
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
}

/* Authenticated canvas: drop the guest blue radial for a calm neutral field. */
body.bk-page:not(.is-guest) { background: #f6f6f7; }

.app-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) 360px;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 1560px;
  margin: 0 auto;
  background: var(--canvas);
  color: var(--ink);
}

/* Left sidebar — quiet history rail */
.app-nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px 14px;
  border-right: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.app-nav__brand { display: inline-flex; align-items: center; gap: 10px; padding: 2px 6px; }
.app-nav__logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--ink); color: #fff; font-weight: 800; font-size: 16px;
}
.app-nav__name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); }

/* Secondary/ghost action so it doesn't compete with the black run CTA */
.app-nav__new {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  padding: 11px 16px; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.app-nav__new:hover { border-color: rgba(10, 10, 11, .28); background: rgba(10, 10, 11, .02); }

.app-nav__section { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.app-nav__label {
  padding: 4px 8px 10px;
  color: var(--ink-3);
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
}
.nav-jobs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 2px; }
.nav-jobs .empty { padding: 8px; color: var(--ink-3); font-size: 13px; }

.nav-job {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 10px; border-radius: var(--r-sm); cursor: pointer;
  transition: background 0.12s;
}
.nav-job:hover { background: rgba(10, 10, 11, .04); }
.nav-job.is-active { background: rgba(10, 10, 11, .06); }
.nav-job__dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--ink-3); }
.nav-job--done .nav-job__dot { background: var(--gpb-green-100); }
.nav-job--processing .nav-job__dot { background: var(--accent); animation: nav-pulse 1.2s ease-in-out infinite; }
.nav-job--pending .nav-job__dot { background: var(--gpb-orange-100); }
.nav-job--failed .nav-job__dot { background: var(--gpb-red-100); }
@keyframes nav-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.nav-job__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nav-job__title { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-job__meta { color: var(--ink-3); font-size: 11.5px; }
.nav-job__progress { height: 4px; border-radius: 999px; background: rgba(10, 10, 11, .07); overflow: hidden; }
.nav-job__progress i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.nav-job__retry {
  flex-shrink: 0; border: 0; background: transparent; color: var(--ink-3);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 6px;
}
.nav-job__retry:hover { background: rgba(10, 10, 11, .06); color: var(--ink); }

.app-nav__footer { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 12px; }
.app-nav__link {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: transparent; color: var(--ink-2);
  padding: 9px 8px; border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  text-align: left;
}
.app-nav__link:hover { background: rgba(10, 10, 11, .04); color: var(--ink); }
.app-nav__user { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; }
.app-nav__userinfo { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* .app-nav__logout uses unified .ui-iconbtn format */

/* Main column — the calm canvas, content centered to avoid left-pinning */
.app-main2 {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px) 64px;
  overflow-x: hidden;
}
.app-main2 > .page-head,
.app-main2 > .job-form { width: 100%; max-width: 700px; }

.page-head { margin-bottom: 26px; }
.page-head__crumbs { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; }
.page-head__sep { opacity: 0.5; }
.page-head__crumb-active { color: var(--ink-2); font-weight: 600; }
.page-head__title { margin: 14px 0 8px; font-size: clamp(30px, 3.4vw, 40px); font-weight: 600; line-height: 1.03; letter-spacing: -0.03em; color: var(--ink); }
.page-head__sub { margin: 0; max-width: 620px; color: var(--ink-2); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.5; }

/* Right preview panel — quiet live status */
.app-preview {
  border-left: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
.preview-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 20px 22px; border-bottom: 1px solid var(--line);
}
.preview-head__title { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.preview-head__status:empty { display: none; }
.preview-body { flex: 1; overflow-y: auto; padding: 22px; }

.preview-job__pct { color: var(--accent); font-size: 13px; font-weight: 700; }
.preview-job__error { color: var(--bk-color-danger); font-size: 13px; margin: 2px 0 4px; line-height: 1.45; }
.preview-job__open {
  margin-top: 4px;
  width: 100%;
  min-width: 0;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}
.preview-job__open:hover { background: #232326; }

/* --- Summary panel content (state-driven: idle / draft / running / done / failed) --- */
.pv-block-group { display: flex; flex-direction: column; }
.pv-block-group + .pv-block-group { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.pv-kicker {
  color: var(--ink-3);
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  margin-bottom: 12px;
}

/* Value block ("Что попадёт в отчёт") */
.pv-value__lead { margin: 0 0 12px; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.pv-blocks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pv-blocks__item {
  position: relative; padding-left: 20px; color: var(--ink); font-size: 13.5px; font-weight: 550; line-height: 1.35;
}
.pv-blocks__item::before {
  content: ''; position: absolute; left: 4px; top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.pv-value__note { margin: 14px 0 0; color: var(--ink-3); font-size: 12px; line-height: 1.45; font-style: italic; }

/* Live composition summary (draft) */
.pv-summary { display: flex; flex-direction: column; gap: 12px; }
.pv-summary__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pv-summary__label { color: var(--ink-3); font-size: 12.5px; font-weight: 600; flex-shrink: 0; }
.pv-summary__value { color: var(--ink); font-size: 13.5px; font-weight: 650; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-summary__value.is-muted { color: var(--ink-3); font-weight: 500; }
.pv-chips { display: flex; gap: 6px; }
.pv-chip {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: 11.5px; font-weight: 650;
}
.pv-summary__row--count .pv-count { color: var(--ink-3); font-size: 13px; }
.pv-count b { color: var(--ink); font-size: 20px; font-weight: 750; letter-spacing: -0.01em; }

/* Readiness checklist */
.pv-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pv-check__item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.pv-check__mark {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 800;
}
.pv-check__item.is-done { color: var(--ink); }
.pv-check__item.is-done .pv-check__mark { background: var(--gpb-green-100); color: #fff; }
.pv-check__item.is-todo { color: var(--ink-3); }
.pv-check__item.is-todo .pv-check__mark { border: 1.5px dashed rgba(10, 10, 11, .22); }

/* Running: title + meta + bar + stages */
.pv-run__title { font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--ink); letter-spacing: -0.01em; }
.pv-run__meta { margin-top: 4px; color: var(--ink-2); font-size: 13px; }
.pv-run__bar { display: flex; align-items: center; gap: 10px; margin: 14px 0 16px; }
.pv-run__bar .upload-progress__track { flex: 1; }
.pv-run__queued { margin-top: 12px; color: var(--ink-3); font-size: 12.5px; }

.pv-stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.pv-stage { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 0 0 16px; }
.pv-stage:last-child { padding-bottom: 0; }
/* connector line between stage dots */
.pv-stage:not(:last-child)::before {
  content: ''; position: absolute; left: 6px; top: 16px; bottom: 0;
  width: 2px; background: var(--line);
}
.pv-stage__dot {
  position: relative; z-index: 1; flex-shrink: 0; margin-top: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(10, 10, 11, .18); background: var(--surface);
}
.pv-stage__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pv-stage__label { font-size: 13px; font-weight: 600; }
.pv-stage__sub { color: var(--ink-3); font-size: 12px; }
.pv-stage.is-pending { color: var(--ink-3); }
.pv-stage.is-pending .pv-stage__label { color: var(--ink-3); font-weight: 500; }
.pv-stage.is-done .pv-stage__label { color: var(--ink); }
.pv-stage.is-done .pv-stage__dot { border-color: var(--gpb-green-100); background: var(--gpb-green-100); }
.pv-stage.is-active .pv-stage__label { color: var(--ink); }
.pv-stage.is-active .pv-stage__dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: nav-pulse 1.2s ease-in-out infinite; }

/* --- In-app report viewer (Devplan-style) --- */
.report-viewer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: var(--bk-color-bg);
  opacity: 1;
  transition: opacity 0.18s ease;
}
.report-viewer.hidden { display: none; }
.report-viewer.is-entering { opacity: 0; }

.report-viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px clamp(16px, 3vw, 28px);
  border-bottom: 1px solid var(--bk-color-border);
  background: var(--bk-color-surface);
}
.report-viewer__lead { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* .report-viewer__back is identical to .ui-btn / .report-viewer__action */

.report-viewer__titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.report-viewer__eyebrow { color: var(--bk-color-text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.report-viewer__title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }

/* .report-viewer__action → .ui-btn · .report-viewer__close → .ui-iconbtn */
.report-viewer__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.report-viewer__stage { position: relative; flex: 1; min-height: 0; background: var(--bk-color-bg); }
.report-viewer__frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.report-viewer__loader {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bk-color-bg);
}
.report-viewer__loader.hidden { display: none; }
.report-viewer__spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--bk-color-border); border-top-color: var(--bk-color-primary);
  animation: report-spin 0.7s linear infinite;
}
@keyframes report-spin { to { transform: rotate(360deg); } }

body.report-open { overflow: hidden; }

@media (max-width: 640px) {
  .report-viewer__action span { display: none; }
  .report-viewer__back span { display: none; }
  .report-viewer__title { max-width: 50vw; }
}

/* --- Job form (hero card) --- */
.job-form {
  max-width: 760px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-l);
  overflow: hidden;
}

.job-form-body {
  display: grid;
  gap: 26px;
  padding: 30px 32px 14px;
}

/* Flattened sections — no boxes-in-boxes, just calm dividers + rhythm */
.job-panel,
.upload-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.job-panel__title,
.upload-panel__title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.job-panel {
  padding: 0;
}

.job-field {
  display: block;
  margin: 12px 0 0;
}

.job-input {
  height: 52px;
  border: 1px solid rgba(10, 10, 11, .14);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  padding: 0 15px;
  font-size: 16px;
  transition: border-color .15s, box-shadow .15s;
}
.job-input::placeholder { color: #a3a3a8; }
.job-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.job-field-hint {
  display: block;
  margin-top: 9px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.upload-panel {
  border-top: 1px solid var(--line-2);
  padding-top: 24px;
}

.upload-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 14px;
}

.job-count {
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.upload-panel .drop {
  margin: 2px 0 0;
  border: 1.5px dashed rgba(10, 10, 11, .16);
  border-radius: var(--r-md);
  background: #fafafa;
  padding: 26px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  outline: none;
}

.upload-panel .drop:hover,
.upload-panel .drop:focus-visible,
.upload-panel .drop.over {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(43, 97, 236, 0.08);
}

.drop-inner {
  display: grid;
  gap: 8px;
  justify-items: center;
}

/* .drop-upload-btn uses unified .ui-btn format; a touch more padding for the dropzone */
.drop-upload-btn { padding: 10px 18px; }

.drop-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}

.drop-hint {
  margin: 0;
  color: var(--ink-3);
  font-size: 12.5px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
  padding: 18px 0 6px;
}

.gallery-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.gallery-card:hover {
  border-color: rgba(10, 10, 11, 0.22);
  box-shadow: var(--shadow-s);
}

.gallery-card.is-dragging {
  opacity: 0.45;
  transform: scale(0.98);
}

.gallery-card.is-drop-target {
  border-color: var(--bk-color-primary);
  box-shadow: 0 0 0 3px rgba(43, 97, 236, 0.16);
}

.gallery-card__preview {
  position: relative;
  background: #0a0a0b;
}

.gallery-card__preview img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

.gallery-card__order {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.gallery-card__delete {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, transform 0.15s;
}

.gallery-card:hover .gallery-card__delete,
.gallery-card__delete:focus-visible {
  opacity: 1;
}

.gallery-card__delete:hover {
  background: #e53935;
  transform: scale(1.05);
}

.gallery-card__info {
  display: grid;
  gap: 6px;
  padding: 10px 10px 0;
}

.gallery-card__name {
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.file-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(10, 10, 11, .05);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: lowercase;
}

.file-size {
  color: var(--ink-3);
  font-size: 11.5px;
}

.gallery-card__fields {
  display: grid;
  gap: 6px;
  padding: 8px 10px 10px;
}

.gallery-field {
  padding: 8px 10px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  border-color: var(--line) !important;
}

.gallery-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 220px;
  border: 1.5px dashed rgba(10, 10, 11, .16);
  border-radius: var(--r-md);
  background: #fafafa;
  color: var(--ink-3);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.gallery-slot--empty:hover,
.gallery-slot--empty:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.gallery-slot__plus {
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

.upload-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
}

.upload-progress__track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(10, 10, 11, .07);
  overflow: hidden;
}

.upload-progress__track span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.15s ease;
}

.upload-progress__pct {
  min-width: 36px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.job-form-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 32px 30px;
  border-top: 1px solid var(--line-2);
  background: var(--surface);
}

/* Main CTA: black, mirroring the landing submit for a single visual language */
.job-form-footer #run {
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
}
.job-form-footer #run:hover:not(:disabled) { background: #232326; }
.job-form-footer #run:active:not(:disabled) { transform: translateY(1px); }
.job-form-footer #run:disabled { opacity: 0.4; }
.job-form-footer #run.is-loading .run-spinner {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}

.msg {
  margin-top: 0;
  font-size: 13.5px;
  min-height: 18px;
}

.msg.ok { color: var(--bk-color-success); }
.msg.err { color: var(--bk-color-danger); }

.empty{color:var(--bk-color-text-muted);font-size:14px}

.feedback-form{display:grid;gap:14px}
.hidden{display:none !important}

/* --- Feedback popover (Mobbin-style floating window) --- */
.popover {
  position: fixed;
  z-index: 100;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--bk-color-surface);
  border: 1px solid var(--bk-color-border);
  border-radius: var(--bk-radius-lg);
  box-shadow: 0 18px 48px rgba(10, 10, 11, 0.22);
  padding: 18px;
  transform-origin: left bottom;
  animation: popover-in 0.16s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.popover__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.popover__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--gpb-blue-ultralight);
  color: var(--bk-color-primary);
}
.popover__titles { flex: 1; min-width: 0; }
.popover__title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.popover__sub { margin: 2px 0 0; color: var(--bk-color-text-muted); font-size: 12.5px; }
/* .popover__close uses unified .ui-iconbtn format */

.popover .feedback-form { gap: 12px; }

.popover__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
}

/* textarea with counter */
.ta-wrap { position: relative; }
.ta-counter {
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: var(--bk-color-text-muted);
  font-size: 11px;
  pointer-events: none;
}
.ta-wrap .bk-textarea { padding-bottom: 24px; }

/* message: no reserved space unless it has text */
.popover .msg { min-height: 0; }
.popover .msg:empty { display: none; }

@keyframes popover-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 560px) {
  .popover {
    left: 0 !important;
    right: 0;
    bottom: 0 !important;
    width: auto;
    max-width: none;
    border-radius: 18px 18px 0 0;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    transform-origin: bottom center;
    animation: popover-sheet 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  @keyframes popover-sheet {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
}

/* Hide preview panel first (tablet) */
@media (max-width:1200px){
  .app-shell { grid-template-columns: 264px minmax(0, 1fr); }
  .app-preview { display: none; }
  .job-form { max-width: 820px; }
}

/* Landing: stack on tablet */
@media (max-width:900px){
  .landing2{overflow:auto}
  .lp-main{width:min(calc(100% - 44px),606px);padding:56px 0 64px}
  .lp-title{font-size:clamp(42px,8vw,58px)}
  .lp-title__line{gap:16px}
  .lp-title__line--analysis{padding-left:0}
  .lp-source-coins,.lp-signal-switch{display:none}
  .lp-card-grid{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:46px}
  .lp-card{aspect-ratio:auto;min-height:465px}
  .telegram-access__copy{width:100%;margin:0}
}

/* Mobile: collapse sidebar into stacked layout */
@media (max-width:760px){
  .app-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .app-nav {
    position: static;
    height: auto;
    flex-direction: column;
    border-right: 0;
    border-bottom: 1px solid var(--bk-color-border);
    gap: 12px;
  }
  .app-nav__section { flex: none; }
  .nav-jobs { max-height: 240px; }
  .app-main2 { padding: 24px 16px 48px; }

  .job-form-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--bk-color-surface);
    box-shadow: 0 -8px 24px rgba(10, 10, 11, 0.08);
  }
  .bk-button-lg { width: 100%; min-width: 0; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-card__delete { opacity: 1; }
}

@media (max-width:560px){
  html,body{max-width:100%;overflow-x:hidden}
  .landing2{background-size:22px 22px}
  .lp-main{width:min(calc(100% - 28px),465px);padding:38px 0 42px}
  .lp-title{font-size:clamp(34px,10.4vw,44px);line-height:1.08}
  .lp-title__line{height:auto;min-height:48px;align-items:center;gap:10px;flex-wrap:wrap}
  .lp-title__line--sources{display:flex}
  .lp-source-coins{gap:5px}
  .lp-source-coin{width:39px;height:39px}
  .lp-signal-switch{width:76px;height:42px}
  .lp-title__line--analysis{gap:12px}
  .lp-card-grid{margin-top:34px}
  .lp-card{min-height:430px;border-radius:42px}
  .lp-card__title{font-size:32px}
  .lp-card__title{line-height:42px}
  .lp-card__description{font-size:19px;line-height:1.35}
  .lp-workflow{padding-top:46px}
  .lp-workflow>.lp-card__title{padding:0 24px}
  .workflow-steps{gap:26px;margin:28px 24px 0}
  .workflow-step{grid-template-columns:48px minmax(0,1fr);gap:20px;height:62px}
  .workflow-step__number{width:48px;height:48px;font-size:21px}
  .workflow-step__copy{font-size:20px;line-height:25px}
  .telegram-flip__front{padding:48px 22px 24px}
  .telegram-access__copy{width:100%;margin:0}
  .telegram-access__actions{grid-template-columns:72px minmax(0,1fr);gap:9px}
  .telegram-icon-button{width:72px;height:72px}
  .telegram-icon-button svg{width:39px;height:39px}
  .telegram-icon-button__badge{left:35px;right:auto;top:-14px;min-width:46px;height:32px;font-size:14px}
  .telegram-access__button{height:72px;font-size:19px}
  .telegram-qr{width:min(74vw,280px);height:min(74vw,280px);border-radius:32px}
  .telegram-qr__image{width:calc(100% - 64px);height:calc(100% - 64px)}
  .telegram-qr__corner{width:25px;height:25px}
  .telegram-qr__corner--tl{left:13px;top:13px}
  .telegram-qr__corner--tr{right:13px;top:13px}
  .telegram-qr__corner--br{right:13px;bottom:13px}
  .telegram-qr__corner--bl{left:13px;bottom:13px}
}