/* ═══════════════════════════════════════════════════════════════════════════
   ATLLAS by SellerHub — the whole stylesheet.

   Replaces Bootstrap and the old styles.css. Bootstrap was a CDN dependency
   serving three pages, and every element that gives this product its look -
   the pill controls, the ghost cards, the ranked rows, the ring, the drawer -
   was custom CSS sitting on top of it anyway. What is left is the part that
   was doing the work.

   The subject is a marketplace instrument: a seller opens it to find out what
   the market is worth today and what is winning inside it. So it is built like
   an instrument - a quiet mint ground, white cards that float rather than
   frame, and every figure set in a monospace face with tabular numerals so a
   column of сум stays aligned as the values change. Colour is used to MEAN
   something and almost never to decorate: mint is the money, warm orange is
   the quantity, and nothing else is coloured at all.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tokens ──────────────────────────────────────────────────────────────────
   Contrast is checked, not eyeballed. Mint at #12A87A is 3.04:1 on white -
   fine for a chart stroke, a filled pill or a 2rem headline, and NOT fine for
   a 12px label, which is why green text has its own darker token at 5.1:1. */
:root {
  /* Design 1d, "Top band". Values taken from the canvas rather than eyeballed:
     the page ground is the #eef3f4 the artboard paints under its cards, and
     #dfe9ea is the canvas behind the artboard itself - not part of the app. */
  --an-ground:#eef3f4;
  --an-canvas:#dfe9ea;       /* the ground the artboard's own frame sits on */
  --an-surface:#FFFFFF;
  --an-ink:#12181c;
  --an-ink-2:#3b464e;
  --an-muted:#61707a;
  --an-faint:#7d8a90;
  --an-faintest:#98a2aa;
  --an-line:#eceff0;
  --an-line-soft:#f2f5f6;
  --an-track:#f0f3f4;
  /* Three greys the canvas uses for text that must recede completely: the date
     under a chart column, a rank numeral, and a product's shop line. None of
     them is ever the only carrier of a fact. */
  --an-hair:#c3ccd2;
  --an-rank:#b3bdc4;
  --an-sub:#a3adb4;

  /* The active control is INK, not a colour. In this direction colour belongs
     to the data - the donut, the category bars - and the chrome stays neutral,
     which is the opposite of the mint version this replaces. */
  --an-accent:#12181c;
  --an-link:#3f6fd0;
  --an-bar:#67BBFF;          /* the column */
  --an-bar-2:#b3df6a;        /* the quantity, in the readout only */
  --an-bar-line:#6f9ae4;

  /* The calendar. Blue, not the ink the rest of the chrome uses: a picked
     date is a value, and the band between the window's two ends is data about
     what is on screen - not a control in its active state. #3f6fd0 carries
     white at 5.4:1; the bar colour beside it would not. */
  --an-cal-on:#3f6fd0;
  --an-cal-band:#e9f0fb;
  --an-cal-off:#c9d1d6;

  --an-up:#4b9e3f;   --an-up-soft:#eef7e8;
  --an-down:#e0574f; --an-down-soft:#fdeeed;

  /* Упущенная выручка. Deliberately NOT --an-down: that red is reserved for a
     measured fall against the previous window, and money never earned is an
     estimate rather than a movement. Amber says "look here" without claiming
     the certainty the red one has already been taught to mean. 4.9:1 on the
     surface, and the soft tone carries the ink at 8.1:1. */
  --an-lost:#a3701c; --an-lost-soft:#fbf2e2;

  --an-r-lg:26px;     /* the page's own frame */
  --an-r:20px;        /* a card */
  --an-r-sm:16px;     /* a metric tile */
  --an-r-xs:12px;     /* a control */
  --an-r-2xs:9px;     /* a pill inside a control, a thumbnail */
  --an-pill:999px;

  --an-shadow:0 1px 2px rgba(16,32,48,.04);
  --an-shadow-lg:0 30px 70px -40px rgba(16,40,56,.4);

  --an-sans:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Chivo Mono, and the reason is one glyph: JetBrains Mono's zero has a DOT
     in it and nothing turns it off. "zero" 0, "zero" 1 and
     font-variant-numeric:slashed-zero were all tried in a real browser and
     render the identical dotted glyph — a dotted zero is the only zero that
     webfont ships.

     Twenty-four monospaced Google faces were then classified by scanline (an
     ink band across the middle of the glyph: two bands is a plain zero, three
     is a dot or a slash). Exactly three came back plain — Azeret Mono, Chivo
     Mono and Courier Prime — and none of the three carries Cyrillic, because
     marking the zero is the whole point of a coding face. That is acceptable
     HERE and only here: this face is for DIGITS, and any word glued to a
     number is split off into the sans face on purpose (see the .an-unit rule
     and templates/_analytics.html's `an.figbare`). If Cyrillic ever reaches an
     element set in this face, the bug is the Cyrillic, not the font.

     Chivo over Azeret on width: Azeret's digits are appreciably wider and every
     table column measured against the old face would have had to move. Do not
     eyeball a replacement at 40px — Roboto Mono was picked and reverted that
     way; its zero is slashed and the slash is invisible until about 100px. */
  --an-mono:'Chivo Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

/* Rank-ordered, and used by two elements at once: slice N and category row N
   carry the same hue, which is what lets the ring be read without a legend. */
:root {
  --an-c1:#6f9ae4; --an-c2:#b3df6a; --an-c3:#5fc9b0; --an-c4:#f9c56b;
  --an-c5:#f4826b; --an-c6:#a99cf2; --an-c7:#8fd3f4; --an-c8:#c6d0d6;
}

/* ── reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; }
/* The UA sheet hides [hidden] with `display:none`, and ANY class that sets
   display beats it. A panel that set `display:flex` therefore stayed in the
   layout with `hidden` set — it only LOOKED shut because it was also
   translated off-screen, and it kept its tab stops and was still read out by
   a screen reader. This is the rule that actually closes such a thing. */
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--an-canvas); color:var(--an-ink);
  font-family:var(--an-sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1, h2, h3, h4, p, ul, ol, figure { margin:0; }
ul, ol { padding:0; list-style:none; }
a { color:inherit; text-decoration:none; }
img, svg { max-width:100%; }
button, input, select { font:inherit; color:inherit; }
button { cursor:pointer; border:0; background:none; }
table { border-collapse:collapse; width:100%; }
:focus-visible { outline:2px solid var(--an-bar-line); outline-offset:2px; border-radius:var(--an-r-2xs); }

/* ── chrome ──────────────────────────────────────────────────────────────────
   A single bar. Two destinations survive - what the market is worth, and who
   holds it - so the nav is two words and does not need to be anything more. */
.sh-nav {
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.7rem clamp(.9rem,3vw,1.75rem);
  background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--an-line);
}
/* The lockup is ONE size, set once. The mark, the name and the line under it
   are three elements that have to grow together or the thing stops being a
   logo and becomes three things next to each other, so every measurement in
   it - type, mark, corner radius, the gap between them - is the same base
   times --sh-brand. Change that number and the whole lockup moves.

   1.3, against the 26px mark and 1rem name it was drawn at. 1.7 was tried
   first and read as too big for a bar this height. */
.sh-brand { --sh-brand:1.3;
            display:flex; align-items:baseline; gap:calc(.5rem * var(--sh-brand));
            font-weight:700; letter-spacing:-.02em; margin-right:.25rem; }
/* Set in capitals in the markup, not by the stylesheet: ATLLAS is spelled
   that way, and a name that only looks right because CSS shouted it is a name
   that comes out wrong everywhere CSS is not - a page title, a tab, a
   workbook header. -.02em was tracking for a mixed-case word; a run of
   capitals needs the opposite. Six letters, and the double L is the spelling,
   not a typo. */
.sh-brand b { font-size:calc(1rem * var(--sh-brand)); letter-spacing:.01em; }
.sh-brand span { font-size:calc(.7rem * var(--sh-brand)); font-weight:600;
                 color:var(--an-muted); }
/* The mark. It was a hand-drawn ring standing in for a logo that did not
   exist yet; this is the real one, and the same file the browser tab loads.

   align-self:center inside a baseline row: the name and the line under it sit
   on ONE baseline, which is how a wordmark and its tagline are set, and the
   mark centres against them rather than standing on that baseline - a square
   sitting on a baseline hangs above the descenders and reads as floating. */
.sh-mark { width:26px; height:26px; flex:0 0 auto; align-self:center;
           border-radius:7px; display:block; }
.sh-brand .sh-mark { width:calc(26px * var(--sh-brand));
                     height:calc(26px * var(--sh-brand));
                     border-radius:calc(7px * var(--sh-brand)); }

.sh-links { display:flex; align-items:center; gap:.15rem; margin-right:auto;
            overflow-x:auto; scrollbar-width:none; min-width:0; }
.sh-links::-webkit-scrollbar { display:none; }
.sh-links a { padding:.4rem .75rem; border-radius:var(--an-pill); font-size:.85rem;
              font-weight:550; color:var(--an-muted); white-space:nowrap; }
.sh-links a:hover { color:var(--an-ink); background:var(--an-line-soft); }
.sh-links a.on { color:#fff; background:var(--an-accent); font-weight:600; }

.sh-lang { display:inline-flex; gap:2px; background:var(--an-line-soft);
           border-radius:var(--an-pill); padding:3px; flex:0 0 auto; }
.sh-lang a { padding:.2rem .55rem; border-radius:var(--an-pill); font-size:.7rem;
             font-weight:700; letter-spacing:.06em; color:var(--an-muted); }
.sh-lang a.on { background:var(--an-surface); color:var(--an-ink);
                box-shadow:0 1px 2px rgba(16,42,32,.12); }

.sh-btn { display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
          padding:.44rem .9rem; border-radius:var(--an-pill); font-size:.82rem;
          font-weight:650; color:#fff; background:var(--an-accent);
          box-shadow:0 1px 2px rgba(16,42,32,.14); transition:background .14s ease; }
.sh-btn:hover:not(:disabled) { background:#2b343a; }
.sh-btn:disabled { background:var(--an-faint); cursor:default; }
.sh-quiet { font-size:.78rem; color:var(--an-muted); padding:.3rem .5rem; }
.sh-quiet:hover { color:var(--an-ink); }

/* The page is one card on a darker ground. That frame is the artboard's own,
   and it is what makes the white cards inside read as floating on a surface
   rather than scattered loose on the page. Below 520px it is dropped whole:
   the narrow layout was measured against the full 320px and every pixel the
   frame takes comes off the one column that cannot give, the product name. */
main {
  background:var(--an-ground); border-radius:var(--an-r-lg);
  margin:clamp(10px,1.4vw,18px); padding:clamp(16px,2.2vw,30px);
  box-shadow:var(--an-shadow-lg);
}
@media (max-width:520px) {
  main { margin:0; border-radius:0; box-shadow:none;
         padding:1rem .9rem 3rem; }
}

/* ── the few utilities market.html still asks for ─────────────────────────── */
.small { font-size:.82rem; }
.text-muted { color:var(--an-muted); }
.h4 { font-size:1.2rem; font-weight:700; letter-spacing:-.02em; }
.mb-1 { margin-bottom:.25rem; } .mb-3 { margin-bottom:1rem; }
.me-1 { margin-right:.25rem; } .ms-3 { margin-left:1rem; }
.alert { padding:.7rem 1rem; border-radius:var(--an-r-sm); margin-bottom:1rem;
         background:#fdf6e8; color:var(--an-ink);
         border:1px solid #F3DCC2; font-size:.88rem; }

/* ── page rhythm ────────────────────────────────────────────────────────────
   Design 1d, "Top band": the donut, the trend and the headline metrics sit in
   ONE band across the top, and the two rankings fill the row beneath. Every
   number the page exists to report is above the fold; you scroll for detail,
   never for the answer. */
.an-head { display:flex; flex-wrap:wrap; align-items:flex-end;
           justify-content:space-between; gap:16px; margin-bottom:20px; }
.an-title { font:600 32px/1.1 var(--an-sans); letter-spacing:-.02em; color:var(--an-ink); }
.an-top { display:grid; grid-template-columns:392px minmax(0,1fr) 216px;
          gap:14px; margin-bottom:14px; align-items:stretch; }
/* Two parts: /analytics/c/<id> draws its shares below the band as blocks, so
   nothing stands where the ring stands on /analytics. */
.an-top-2 { grid-template-columns:minmax(0,1fr) 216px; }
.an-mid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
          gap:14px; align-items:stretch; }
/* A leaf has no subcategories, and one card in a two-track grid is a card
   filling 60% of the row with an empty track beside it. */
.an-mid-1 { grid-template-columns:minmax(0,1fr); }
.an-mid > .an-card { display:flex; flex-direction:column; min-width:0; }

/* ── surfaces ─────────────────────────────────────────────────────────────── */
.an-card { background:var(--an-surface); border:1px solid var(--an-line);
           border-radius:var(--an-r); box-shadow:var(--an-shadow); overflow:hidden; }
.an-pad { padding:24px; }
.an-card-head { display:flex; align-items:baseline; justify-content:space-between;
                gap:16px; padding:20px 24px 12px; }
.an-card-head > * { min-width:0; }
.an-card-head-col { flex-direction:column; align-items:stretch; gap:12px; }
.an-card-title { font:600 17px/1.2 var(--an-sans); color:var(--an-ink); }

.an-label { font:600 10px/1.2 var(--an-sans); color:var(--an-faint);
            text-transform:uppercase; letter-spacing:.11em; }
.an-sub { display:block; font:400 12px/1.3 var(--an-sans); color:var(--an-faint);
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.an-num { font-family:var(--an-mono); font-variant-numeric:tabular-nums lining-nums;
          font-weight:700; color:var(--an-ink); letter-spacing:-.02em; }
.an-unit { font-family:var(--an-sans); font-weight:500; color:var(--an-faint);
           letter-spacing:0; margin-left:.35em; }
.an-empty { padding:44px 24px; text-align:center; color:var(--an-muted); font-size:14px; }
.seed-cmd { display:inline-block; background:var(--an-ink); color:#b3df6a;
            padding:.6rem 1rem; border-radius:var(--an-r-xs);
            font-family:var(--an-mono); font-size:13px; }

/* ── the headline ─────────────────────────────────────────────────────────── */
.an-money { font:700 46px/1 var(--an-mono); letter-spacing:-.04em; color:var(--an-ink); }
.an-money .an-unit { font:500 17px/1 var(--an-sans); color:var(--an-muted);
                     white-space:nowrap; }
/* The fraction was set smaller here to close the digit-wide cell the mono
   Mono gives its comma. The canvas sets the whole figure at one size and the
   -.04em tracking closes the same gap, so the two halves now match. */
.an-frac { font-size:1em; }
.an-fig-v { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
/* Sans, not mono. This caption is a SENTENCE — «18,56 млрд — 26,79 млрд сум ·
   7 дн.» — and the mono face is for digits. It was merely odd while that face
   had Cyrillic in it; with a Latin-only face every word in it would fall back
   to a different font. The figures inside it are still tabular. */
.an-range { font:400 12px/1 var(--an-sans); font-variant-numeric:tabular-nums;
            color:var(--an-sub); white-space:nowrap; }
.an-hero-note { margin-top:14px; font:400 12px/1.5 var(--an-sans); color:var(--an-faint); }

/* Four tiles in their own column, one fact each. */
.an-metrics { display:flex; flex-direction:column; gap:10px; }
.an-metric { flex:1; background:var(--an-surface); border:1px solid var(--an-line);
             border-radius:var(--an-r-sm); padding:16px 18px; box-shadow:var(--an-shadow);
             display:flex; flex-direction:column; justify-content:center; gap:8px; }
.an-metric .an-num { font:700 30px/1 var(--an-mono); letter-spacing:-.035em; }
.an-metric .an-unit { font-size:13px; }

.an-delta { display:inline-flex; align-items:center; justify-content:center;
            font:600 13px/1 var(--an-mono); font-variant-numeric:tabular-nums;
            padding:5px 9px; border-radius:7px; white-space:nowrap; }
.an-up   { color:var(--an-up);   background:var(--an-up-soft); }
.an-down { color:var(--an-down); background:var(--an-down-soft); }
.an-flat { color:var(--an-faint); background:var(--an-line-soft); }

/* ── the chart ──────────────────────────────────────────────────────────────
   HTML columns, not SVG. Percentage heights inside a fixed-height rail: the
   rail is what makes the percentages resolve, and the whole column - the bar
   plus its date - is one hit target.

   ONE series, per design 1d. The quantity used to stand beside the money as a
   second column, which put two scales in one picture and made the card the
   loudest thing on the page. It is not lost: the readout for the day under the
   pointer still hands over both figures, which is the only place the two were
   ever read anyway. */
.an-chart { position:relative; margin-top:4px; flex:1; display:flex;
            flex-direction:column; justify-content:flex-end;
            /* The two numbers the axis is built out of. The gridlines sit in
               an absolute layer and the day labels sit in the flow, so the
               only way the line for 0 can land exactly on the foot of the
               columns is for both to be computed from the SAME two values.
               Change the day label's size here and the grid follows it. */
            --an-colday-h:9px; --an-colgap:6px;
            /* The rail the axis figures are printed in. Sized for the widest
               label these charts produce - "1,5 млрд" is 8 characters of 9px
               mono - plus the 7px that keeps a figure off its own line. */
            --an-ax-w:50px; }
/* Grows to fill the card, so the band's three cards agree on a height
   without the chart leaving a hole under itself. The height lives on the plot
   and not on the columns now: the columns are one layer inside it, the
   gridlines are the other, and both have to be measured against one box. */
.an-plot { position:relative; flex:1 1 0; display:flex; min-height:82px;
           height:132px; padding:0 var(--an-ax-w); }
/* No trade in the window, so no scale to print - and no rails to indent for. */
.an-plot-bare { padding:0; }
/* Above the gridlines. Both layers are children of the same box, and an
   in-flow child paints UNDER a positioned sibling: without this the ruler is
   drawn across the face of every column instead of behind it. */
.an-cols { position:relative; z-index:1; display:flex; align-items:flex-end;
           gap:5px; flex:1 1 auto; min-width:0; height:100%; }

/* ── the scale ───────────────────────────────────────────────────────────────
   The grid stops where the columns stop. Its bottom is the day-label row plus
   the gap above it, which is exactly the offset the bars' own feet sit at - so
   the line for 0 IS the baseline the columns stand on, rather than a fifth
   line floating near it. */
.an-grid { position:absolute; top:0; left:var(--an-ax-w); right:var(--an-ax-w);
           bottom:calc(var(--an-colday-h) + var(--an-colgap));
           pointer-events:none; }
/* One element per value: a 0-height box whose top border IS the line, and
   whose two labels hang off either end of it. Nothing here can drift, because
   there is only one coordinate. */
.an-gl { position:absolute; left:0; right:0; height:0;
         border-top:1px solid var(--an-line); }
.an-gl b { position:absolute; top:50%; transform:translateY(-50%);
           font:400 var(--an-colday-h)/1 var(--an-mono); color:var(--an-hair);
           white-space:nowrap; }
.an-gl b:first-child { right:100%; padding-right:7px; }
.an-gl b:last-child { left:100%; padding-left:7px; text-align:left; }
/* Overrides the absolute positioning .an-hit carries for other uses. */
.an-chart .an-col { position:static; top:auto; bottom:auto;
                    flex:1 1 0; min-width:0; height:100%; display:flex;
                    flex-direction:column; justify-content:flex-end;
                    align-items:center; gap:var(--an-colgap); cursor:pointer;
                    border-radius:var(--an-r-2xs); }
.an-chart .an-col:hover, .an-chart .an-col.on { background:rgba(18,24,28,.045); }
/* The bar fills its column, at every span. What stays constant across the
   spans is the GAP - 5px, whether the window holds one day or ninety - so the
   columns are equally close at 3 days as at 14 and the plot is always the full
   width of the rail. A max-width here looked reasonable in the abstract and
   was wrong on screen: it made a 7-day window a row of thin bars adrift in
   white space, next to a 14-day window that was packed. Same chart, two
   densities, for no reason a reader could see. */
.an-colbars { display:flex; align-items:flex-end; width:100%; flex:1; }
.an-colbars i { flex:1 1 0; display:block; border-radius:5px;
                min-height:2px; background:var(--an-bar); }
.an-colday { font:400 var(--an-colday-h)/1 var(--an-mono); color:var(--an-hair); }

.an-tip { position:absolute; top:-.35rem; z-index:6; pointer-events:none;
          background:var(--an-ink); color:#fff; border-radius:var(--an-r-xs);
          padding:.5rem .7rem; box-shadow:0 8px 24px rgba(16,32,48,.28);
          white-space:nowrap; }
.an-tip-v { display:block; font-family:var(--an-mono); font-weight:700; font-size:.82rem; }
/* The magnitude word inside the readout — «млрд», «mlrd», «сум». The mono face
   is for DIGITS: a monospaced Cyrillic abbreviation looks odd and a monospaced
   Latin word reads as source code (memory/an-magnitude-word-face). It became
   load-bearing rather than cosmetic when the mono face went Latin-only —
   «млрд сум» in a Latin-only face falls back mid-string to whatever the OS
   calls ui-monospace, which is a visibly different font halfway through one
   line. Same rule as .an-unit, sized for a tooltip. */
.an-tip-w { font-family:var(--an-sans); font-weight:500; letter-spacing:0; }
.an-tip-u, .an-tip-d { display:block; font-size:.68rem; color:#9aa4ac; }
.an-tip-u { margin-top:.05rem; color:var(--an-bar-2); }
.an-tip-d { margin-top:.18rem; font-family:var(--an-mono); }
.an-tip-ring { top:0; left:0; }

/* ── the ring ────────────────────────────────────────────────────────────────
   Donut left, legend right, in one card. Slice N and category row N carry the
   same hue, so the ring and the ranked list read as one object. */
.an-top > .an-card:first-child { display:flex; }
.an-ring { flex:1; display:flex; align-items:center; gap:20px; padding:24px;
           position:relative; }
.an-ring-svg { position:relative; width:150px; height:150px; flex:0 0 auto; }
.an-donut { width:100%; height:100%; display:block; }
.an-donut .track { fill:none; stroke:var(--an-track); }
.an-donut .sl { fill:none; transition:opacity .12s ease; }
.an-ring.dim .sl { opacity:.28; }
.an-ring.dim .sl.on { opacity:1; }
.an-ring-mid { position:absolute; inset:0; display:flex; flex-direction:column;
               align-items:center; justify-content:center; gap:2px;
               pointer-events:none; text-align:center; }
.an-ring-mid .an-num { font:700 23px/1 var(--an-mono); letter-spacing:-.03em; }
.an-ring-mid .an-label { font-size:9px; letter-spacing:.1em; }
/* The legend is titled. With the ring this thick the hole no longer has room
   to say what the figure in it counts, so the card says it once, here. */
.an-ring-head { font:600 15px/1 var(--an-sans); color:var(--an-ink);
                margin-bottom:2px; }
.an-legend { flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; }
.an-legend a, .an-legend > li > span { display:flex; align-items:center; gap:8px;
            min-width:0; border-radius:6px; }
.an-legend a:hover .nm { color:var(--an-ink); }
.an-legend .sw { flex:0 0 auto; width:8px; height:8px; border-radius:2px; }
.an-legend .nm { flex:1 1 auto; min-width:0; font:400 12px/1.2 var(--an-sans);
                 color:var(--an-ink-2); overflow:hidden; text-overflow:ellipsis;
                 white-space:nowrap; }
.an-legend .pc { flex:0 0 auto; font:600 12px/1 var(--an-mono); color:var(--an-ink); }

/* ── the share field ─────────────────────────────────────────────────────────
   Design 1d's "Доли категорий": the leader in a wide column, a pair beside it,
   a stack of four, and the tail. It replaces the ring on a category page,
   where the names are long and few - the worst case for a legend squeezed into
   a 392px column, and the best case for blocks, because the name gets a whole
   tile instead of the space left over beside a percentage.

   Widths come from flex-grow, never from percentage widths: four columns whose
   widths sum to 100% plus three 8px gaps is a row 24px wider than its card,
   and the card would clip it silently. */
.an-blocks { display:flex; gap:8px; padding:0 24px 24px; }
/* The height lives on the COLUMN, not the row: on the row it would include the
   card's bottom padding, and analytics.shares - which sizes each block against
   this figure - would be reasoning about 276px while calling it 300. */
.an-bkcol { flex:1 1 0; min-width:0; height:300px;
            display:flex; flex-direction:column; gap:8px; }
/* min-height:0, not the flexbox default of `auto`. On auto a block cannot
   shrink below its own content, so one squeezed tile pushes the whole column
   past 300px and the card clips the lot. The floor that actually keeps text
   readable is applied to the SHARES, in analytics.shares, where the column's
   height is known. */
.an-bk { flex:1 1 0; min-width:0; min-height:0; overflow:hidden;
         border-radius:var(--an-r-sm); padding:18px; color:inherit;
         display:flex; flex-direction:column; justify-content:space-between; gap:8px;
         transition:filter .12s ease; }
a.an-bk:hover { filter:brightness(.965); }
.an-bk-top { display:flex; flex-direction:column; gap:5px; min-width:0; }
.an-bk-name { font:600 15px/1.2 var(--an-sans); color:currentColor;
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Everything secondary is the block's OWN ink, thinned. One grey cannot serve
   seven backgrounds, and .82 is where the thinnest of the seven still clears
   4.5:1 against its own tile. */
.an-bk-meta { font:500 12px/1.3 var(--an-sans); opacity:.82;
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.an-bk-fig { display:flex; flex-direction:column; gap:2px; min-width:0; }
.an-bk-pct { font:700 27px/1 var(--an-mono); font-variant-numeric:tabular-nums;
             letter-spacing:-.03em; }
.an-bk-rev { font:500 13px/1 var(--an-mono); font-variant-numeric:tabular-nums;
             opacity:.82; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.an-bk-1 { padding:20px; }
.an-bk-1 .an-bk-name { font-size:17px; }
.an-bk-1 .an-bk-pct { font-size:38px; letter-spacing:-.04em; }
.an-bk-1 .an-bk-rev { font-size:15px; }
/* Ranks 4-7 are one line: a name and its share, sitting on the floor of the
   tile. There is no room for money at this height and the share is the fact
   the column exists to give. */
.an-bk-3 { flex-direction:row; align-items:flex-end; justify-content:space-between;
           gap:10px; padding:15px; }
.an-bk-3 .an-bk-name { flex:1 1 auto; font-size:14px; }
.an-bk-3 .an-bk-pct { flex:0 0 auto; font-size:20px; }

.an-bk-tail { padding:20px; }
.an-bk-tail .an-bk-name { font-size:17px; }
.an-bk-tail .an-bk-fig { gap:9px; }
.an-bk-li { display:flex; align-items:center; gap:9px; min-width:0; }
.an-bk-liname { flex:1 1 auto; min-width:0; font:400 13px/1.2 var(--an-sans);
                opacity:.82; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.an-bk-lipct { flex:0 0 auto; font:600 13px/1 var(--an-mono);
               font-variant-numeric:tabular-nums; }
.an-bk-tail .an-bk-pct { margin-top:6px; font-size:30px; letter-spacing:-.04em; }

/* ── ranked rows ──────────────────────────────────────────────────────────── */
.an-row { display:grid; align-items:center; gap:14px;
          grid-template-columns:minmax(0,1fr) 116px 86px 62px;
          padding:10px 24px; border-top:1px solid var(--an-line-soft);
          position:relative; color:inherit; }
.an-row > * { min-width:0; }
a.an-row:hover, .an-prow:hover { background:#fafcfc; }
.an-rank { font:500 12px/1 var(--an-mono); color:var(--an-rank); }
.an-namebox { display:flex; align-items:center; gap:12px; min-width:0; }
.an-name { font:500 14px/1.2 var(--an-sans); color:var(--an-ink); overflow:hidden;
           text-overflow:ellipsis; white-space:nowrap; flex:0 1 auto; }
.an-nameline { display:flex; align-items:center; gap:8px; min-width:0; }
/* Inline with the name, not beneath it: the row is one line in this design. */
.an-bar { flex:1 1 auto; height:6px; border-radius:3px; background:var(--an-track);
          overflow:hidden; min-width:40px; }
.an-bar > span { display:block; height:100%; border-radius:3px;
                 background:var(--an-c1); transform-origin:left center;
                 animation:an-grow .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes an-grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.an-cell { text-align:right; }
.an-row .an-name { font-size:15px; }
.an-row .an-num { font:700 16px/1 var(--an-mono); }
.an-row .an-unit { font:500 12px/1 var(--an-sans); }
/* The quantity column recedes behind the money column beside it: same row,
   but it is the second thing anyone reads. */
.an-cell-q .an-num { font:500 14px/1 var(--an-mono); color:var(--an-muted); }
.an-cell-q .an-unit { font:400 11px/1 var(--an-sans); color:var(--an-sub); }
/* A movement figure fills its column rather than shrink-wrapping, so the
   pills stack into a clean edge down the right of the list. */
.an-row .an-delta { display:block; width:100%; padding:5px 0; text-align:center; }
.an-row-c .an-bar { display:none; }
.an-chip { display:inline-block; font:600 10px/1.4 var(--an-sans); padding:2px 7px;
           border-radius:5px; background:var(--an-line-soft); color:var(--an-muted); }
.an-chip-new { background:#eef7e8; color:var(--an-up); }

/* Products: a thumbnail, a two-line name, and the way out to Uzum. */
.an-prow { grid-template-columns:26px 34px minmax(0,1fr) 104px 24px; gap:12px; }
.an-prow-c { grid-template-columns:26px 34px minmax(0,1fr) 96px 24px; }
.an-prow .an-rank { text-align:right; }
.an-prow .an-name { font-size:14px; }
.an-prow .an-sub { font:400 11px/1.2 var(--an-sans); color:var(--an-sub); }
.an-prow .an-num { font:700 15px/1 var(--an-mono); }
.an-prow .an-unit { font:500 11px/1 var(--an-sans); }
.an-thumb { display:block; width:34px; height:34px; border-radius:10px;
            object-fit:cover; background:var(--an-line-soft); }
.an-prow .an-namebox { flex-direction:column; align-items:flex-start; gap:4px;
                       min-width:0; }
.an-prow .an-nameline { width:100%; min-width:0; }
.an-prow .an-name, .an-prow .an-sub { display:block; width:100%; min-width:0;
                                      overflow:hidden; text-overflow:ellipsis;
                                      white-space:nowrap; }
.an-prow .an-name { white-space:nowrap; width:100%; }
/* The row is a DIV with a stretched link UNDER the two children that need
   their own click. Nested anchors are invalid and browsers unnest them, which
   is exactly how a link out disappears. */
.an-rowlink { position:absolute; inset:0; z-index:1; }
.an-prow > .an-rank, .an-prow > .an-namebox, .an-prow > .an-cell { pointer-events:none; }
.an-thumbwrap, .an-ext { position:relative; z-index:2; }
.an-thumbwrap { display:block; line-height:0; border-radius:10px; }
.an-ext { display:flex; align-items:center; justify-content:center; width:24px;
          height:24px; border-radius:7px; color:var(--an-faintest); justify-self:end; }
.an-ext svg { width:12px; height:12px; }
.an-ext:hover { background:var(--an-line-soft); color:var(--an-link); }
.an-row .an-num.an-up, .an-row .an-num.an-down { background:none; padding:0; }
.an-row .an-num.an-up { color:var(--an-up); }
.an-row .an-num.an-down { color:var(--an-down); }

/* A hundred products is a column three screens tall beside a category list of
   twenty-three rows. The canvas caps it and scrolls it in place, which is what
   keeps the two halves of the row the same object. */
.an-scroll { flex:1 1 0; min-height:470px; overflow-y:auto;
             overscroll-behavior:contain;
             scrollbar-width:thin; scrollbar-color:var(--an-line) transparent; }
.an-scroll::-webkit-scrollbar { width:8px; }
.an-scroll::-webkit-scrollbar-thumb { background:var(--an-line);
                                      border-radius:4px; }

/* ── controls ─────────────────────────────────────────────────────────────
   The active state is INK. Colour on this page belongs to the data. */
.an-ctl { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
.an-ctl > * { min-width:0; }
.an-seg { display:flex; background:var(--an-surface); border:1px solid var(--an-line);
          border-radius:var(--an-r-xs); padding:4px; gap:2px; }
.an-seg a { padding:7px 15px; border-radius:var(--an-r-2xs);
            font:600 13px/1 var(--an-sans); color:var(--an-faint); white-space:nowrap; }
.an-seg a:hover { color:var(--an-ink); }
.an-seg a.on { background:var(--an-accent); color:#fff; }
.an-seg-wide { max-width:100%; min-width:0; overflow-x:auto; scrollbar-width:none;
               overscroll-behavior-x:contain; }
.an-seg-wide::-webkit-scrollbar { display:none; }
.an-seg-wide a { flex:0 0 auto; }
/* A window past the seller's history depth. Same box as a chip so the ladder
   still reads as one ladder, greyed to the hairline and struck through so it
   cannot be mistaken for the selected one at a glance; not focusable-blue,
   because nothing happens when it is pressed. `cursor:not-allowed` is what
   answers the click before the tooltip has had time to appear. */
.an-seg span.off { padding:7px 15px; border-radius:var(--an-r-2xs);
                   font:600 13px/1 var(--an-sans); color:var(--an-hair);
                   white-space:nowrap; cursor:not-allowed;
                   text-decoration:line-through;
                   text-decoration-thickness:1px; }
.an-seg span.off:hover { color:var(--an-faintest); }
.an-seg-wide span.off { flex:0 0 auto; }

.an-date { display:inline-flex; align-items:center; gap:10px; background:var(--an-surface);
           border:1px solid var(--an-line); border-radius:var(--an-r-xs);
           padding:10px 34px 10px 14px; font:500 14px/1 var(--an-mono);
           color:var(--an-ink-2); appearance:none; cursor:pointer;
           background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237d8a90' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
           background-repeat:no-repeat; background-position:right 13px center;
           background-size:10px; }
.an-date:hover { border-color:var(--an-faintest); }

/* ── the calendar ────────────────────────────────────────────────────────
   Drawn over the <select> that submits, never instead of it. The month grid
   shades the window's own two ends and everything between them, which is the
   one thing the list of dates it replaces could not show. */
.an-cal-wrap { position:relative; display:inline-flex; min-width:0; }
.an-cal-btn { font-family:var(--an-mono); }
.an-cal {
  position:absolute; z-index:50; top:calc(100% + 8px); left:0;
  width:min(324px,92vw); padding:14px; background:var(--an-surface);
  border:1px solid var(--an-line); border-radius:var(--an-r);
  box-shadow:0 26px 64px -22px rgba(16,40,56,.38);
}
.an-cal-head { display:flex; align-items:center; justify-content:space-between;
               gap:8px; margin-bottom:6px; }
.an-cal-nav { width:30px; height:30px; flex:0 0 auto; border-radius:var(--an-r-2xs);
              display:flex; align-items:center; justify-content:center;
              font-size:18px; line-height:1; color:var(--an-muted); }
.an-cal-nav:hover:not(:disabled) { background:var(--an-line-soft); color:var(--an-ink); }
.an-cal-nav:disabled { color:var(--an-cal-off); cursor:default; }
.an-cal-title { display:flex; align-items:baseline; gap:8px; min-width:0; }
/* A real select, so the chevron beside the month is not decoration. */
.an-cal-m { -webkit-appearance:none; appearance:none; border:0; background:none;
            padding:2px 16px 2px 2px; border-radius:var(--an-r-2xs);
            font:600 16px/1.2 var(--an-sans); color:var(--an-ink);
            text-transform:capitalize; cursor:pointer;
            background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%239aa4ac' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat:no-repeat; background-position:right 1px center; }
.an-cal-m:hover { background-color:var(--an-line-soft); }
.an-cal-y { font:500 16px/1.2 var(--an-mono); color:var(--an-muted); }
/* minmax(0,…), not 1fr: a bare 1fr track refuses to shrink below its content,
   and a <button>'s own 6px of UA padding around a 34px circle made every one
   of the seven columns 46px wide - 322px of grid inside a 295px panel at
   320px viewport. */
.an-cal-w, .an-cal-g { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.an-cal-w span { padding:8px 0; text-align:center; text-transform:capitalize;
                 font:600 11px/1 var(--an-sans); color:var(--an-faint); }
/* No gap between cells: the band that marks the window has to run unbroken
   across a row, and a gap would cut it into seven pieces. */
.an-cal-g > * { height:40px; padding:0; display:flex; align-items:center;
                justify-content:center; font:500 14px/1 var(--an-mono);
                color:var(--an-ink); }
.an-cal-g .out, .an-cal-g .no { color:var(--an-cal-off); }
.an-cal-g .day { cursor:pointer; }
.an-cal-g .day i { display:flex; width:34px; max-width:100%; height:34px;
                   border-radius:50%; align-items:center; justify-content:center;
                   font-style:normal; }
.an-cal-g .day:hover i { background:var(--an-line-soft); }
.an-cal-g .in { background:var(--an-cal-band); color:var(--an-cal-on); }
.an-cal-g .r1 { border-radius:20px 0 0 20px; }
.an-cal-g .r2 { border-radius:0 20px 20px 0; }
/* A one-day window is both ends at once, and half a pill on each side is a
   whole one. */
.an-cal-g .r1.r2 { border-radius:20px; }
.an-cal-g .end i, .an-cal-g .end:hover i { background:var(--an-cal-on); color:#fff; }

/* ── the range gesture ───────────────────────────────────────────────────────
   The button names both ends, so the control reads as "a window" rather than
   "a day". The arrow between them is the only non-figure in it and is set
   quieter than the dates it joins. */
.an-cal-lbl { display:inline-flex; align-items:baseline; gap:6px; min-width:0; }
.an-cal-lbl b { font:inherit; font-weight:500; }
.an-cal-lbl i { font-style:normal; color:var(--an-faintest); }
/* What the calendar is waiting for. It only ever holds one of two sentences,
   so it is sized for the longer and never reflows the popup as it changes. */
.an-cal-hint { margin-top:4px; padding:9px 4px 2px; min-height:32px;
               border-top:1px solid var(--an-line); text-align:center;
               font:400 11.5px/1.35 var(--an-sans); color:var(--an-faint); }
.an-cal.is-picking .an-cal-hint { color:var(--an-cal-on); font-weight:600; }
.an-cal-hint b { font:600 12px/1.35 var(--an-mono); letter-spacing:-.02em; }
.an-cal-hint span { font-weight:500; color:var(--an-faint); }
/* Mid-gesture the band is a PROPOSAL, not the window on screen. Dashed, so a
   reader glancing away and back can tell the difference between the range they
   are dragging out and the one the page is already showing. */
.an-cal.is-picking .an-cal-g .in { background:transparent;
                                   box-shadow:inset 0 -1px 0 var(--an-cal-on),
                                              inset 0 1px 0 var(--an-cal-on); }
.an-cal.is-picking .an-cal-g .r1 { box-shadow:inset 1px 0 0 var(--an-cal-on),
                                              inset 0 -1px 0 var(--an-cal-on),
                                              inset 0 1px 0 var(--an-cal-on); }
.an-cal.is-picking .an-cal-g .r2 { box-shadow:inset -1px 0 0 var(--an-cal-on),
                                              inset 0 -1px 0 var(--an-cal-on),
                                              inset 0 1px 0 var(--an-cal-on); }

.an-search { position:relative; flex:1 1 11rem; min-width:0; display:flex; }
.an-search input { width:100%; border:1px solid var(--an-line);
                   border-radius:var(--an-r-xs); padding:9px 14px 9px 34px;
                   font:400 13px/1 var(--an-sans); background:var(--an-surface); }
.an-search input::placeholder { color:var(--an-faintest); }
.an-search input:focus { outline:none; border-color:var(--an-bar-line);
                         box-shadow:0 0 0 3px rgba(111,154,228,.16); }
.an-search svg { position:absolute; left:12px; top:50%; margin-top:-6.5px;
                 width:13px; height:13px; color:var(--an-faintest); pointer-events:none; }
.an-search-clear { position:absolute; right:9px; top:50%; margin-top:-9px;
                   width:18px; height:18px; border-radius:50%; line-height:1;
                   font-size:11px; color:var(--an-muted); background:var(--an-line-soft); }
.an-note { margin:0 24px 10px; padding:9px 12px; font-size:12px; color:var(--an-ink-2);
           background:#fdf6e8; border-radius:var(--an-r-xs); }
.an-tabs { display:flex; align-items:center; justify-content:space-between;
           gap:10px; flex-wrap:wrap; min-width:0; }
.an-xl { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
         font:500 12px/1 var(--an-sans); color:var(--an-muted);
         border:1px solid var(--an-line); border-radius:var(--an-r-xs);
         padding:8px 12px; background:var(--an-surface); }
.an-xl svg { width:13px; height:13px; }
.an-xl:hover, .an-xl.busy { color:var(--an-ink); border-color:var(--an-faintest); }
.an-xl.busy { pointer-events:none; }
.an-xl.busy svg { animation:an-spin 1s linear infinite; }
@keyframes an-spin { to { transform:rotate(360deg); } }

.an-crumb { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; }
.an-crumb a { color:var(--an-muted); }
.an-crumb a:hover { color:var(--an-link); }
.an-crumb .sep { color:var(--an-faintest); }
.an-crumb .cur { color:var(--an-ink); font-weight:600; }
.an-ribbon { height:6px; border-radius:3px; background:var(--an-track); overflow:hidden; }
.an-ribbon > span { display:block; height:100%; border-radius:3px; background:var(--an-c1);
                    transform-origin:left center;
                    animation:an-grow .55s cubic-bezier(.22,1,.36,1) both; }

/* The round close button. It outlived the drawer it was written for and is
   now _analytics.html's, on the zoom overlay. */
.an-x { width:2rem; height:2rem; border-radius:50%; display:flex; align-items:center;
        justify-content:center; color:var(--an-muted); background:var(--an-line-soft); }
.an-x:hover { background:var(--an-line); color:var(--an-ink); }

.an-pd-head { display:flex; gap:.9rem; padding:1.15rem 1.25rem .9rem; }
.an-pd-photo { width:76px; height:76px; border-radius:var(--an-r-sm); object-fit:cover;
               flex:0 0 auto; background:var(--an-line-soft); border:1px solid var(--an-line); }
.an-pd-name { font-size:.98rem; font-weight:650; line-height:1.35; }
.an-pd-meta { margin-top:.3rem; font-size:.78rem; color:var(--an-muted); }
.an-pd-out { display:inline-flex; align-items:center; gap:.3rem; margin-top:.5rem;
             font-size:.75rem; font-weight:600; color:var(--an-link); }
.an-pd-out svg { width:11px; height:11px; }

/* Four tiles on a hairline rail. Boxing four facets of one product reads as
   four unrelated facts. */
.an-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
            background:var(--an-line); border:1px solid var(--an-line);
            border-radius:var(--an-r-sm); overflow:hidden;
            margin:0 1.25rem 1.15rem; }
.an-tiles > div { background:var(--an-surface); padding:.75rem .8rem;
                  display:flex; flex-direction:column; justify-content:space-between; }
.an-tiles .an-num { font-size:1rem; display:block; margin-top:.2rem; }
.an-tiles .an-unit { font-size:.62em; }
/* Three across, two rows. The drawer is ~470px at every window size - no media
   query ever reaches it - so a fifth and sixth tile squeezed into ONE row
   would leave each 94px, narrower than «1,50 млрд». At three the tile is
   156px, wider than the four-across layout this replaces. */
.an-tiles-6 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.an-lost .an-num { color:var(--an-lost); }

/* The arithmetic under the tiles. Sits INSIDE the tile block's horizontal
   margin so it reads as a caption on the six figures rather than as the first
   line of the section below it. */
.an-lost-calc { display:flex; align-items:baseline; justify-content:space-between;
                gap:.6rem; flex-wrap:wrap; margin:-.85rem 1.25rem 1.15rem;
                font:400 .72rem/1.35 var(--an-sans); color:var(--an-faint); }
.an-lost-eq { font-family:var(--an-mono); color:var(--an-lost);
              font-variant-numeric:tabular-nums; }
/* The empty-days cell in the variants table. Amber only when the number cost
   something; a dead-stock row prints the em dash the `zero` class already
   greys out. */
.an-out { color:var(--an-lost); }

.an-sec { padding:1.15rem 1.25rem; border-top:1px solid var(--an-line-soft); }
.an-sec-h { display:flex; align-items:baseline; justify-content:space-between;
            gap:.75rem; margin-bottom:.7rem; }
.an-tbl { font-size:.78rem; }
.an-tbl th { font-size:.62rem; font-weight:650; color:var(--an-muted);
             text-transform:uppercase; letter-spacing:.07em; text-align:right;
             padding:.3rem .4rem; border-bottom:1px solid var(--an-line); }
.an-tbl th:first-child { text-align:left; }
.an-tbl td { padding:.34rem .4rem; text-align:right; border-bottom:1px solid var(--an-line-soft);
             font-family:var(--an-mono); font-variant-numeric:tabular-nums; }
.an-tbl td:first-child { text-align:left; color:var(--an-muted); }
.an-tbl tr:last-child td { border-bottom:0; }
.an-tbl .zero { color:var(--an-faint); }

/* One block per category the product ranks in. */
.an-pos { border:1px solid var(--an-line); border-radius:var(--an-r-sm);
          padding:.75rem .85rem; margin-bottom:.6rem; }
.an-pos-h { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.an-pos-n { font-size:.82rem; font-weight:600; min-width:0; overflow:hidden;
            text-overflow:ellipsis; white-space:nowrap; }
.an-pos-now { font-family:var(--an-mono); font-size:1.05rem; font-weight:700;
              color:var(--an-link); flex:0 0 auto; }
.an-rankwrap { position:relative; margin:.5rem 0 .35rem; }
.an-rankline { display:block; width:100%; height:auto; }
.an-rank-dot { position:absolute; width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
               border-radius:50%; background:var(--an-accent);
               border:2px solid var(--an-surface); }
.an-rankline path { fill:none; stroke:var(--an-accent); stroke-width:1.75;
                    stroke-linejoin:round; stroke-linecap:round;
                    vector-effect:non-scaling-stroke; }
.an-rankline circle { fill:var(--an-accent); }
.an-pos-foot { display:flex; justify-content:space-between; font-size:.68rem;
               color:var(--an-muted); font-family:var(--an-mono); }

/* ── the photo zoom ──────────────────────────────────────────────────────────
   Appended to the body, not the row: the rows live in a card with
   overflow:hidden, which clips anything drawn where it stands. */
.an-zoom { position:fixed; z-index:1080; opacity:0; visibility:hidden;
           transform:scale(.96); transform-origin:center;
           transition:opacity .12s ease, transform .12s ease, visibility .12s;
           background:var(--an-surface); border:1px solid var(--an-line);
           border-radius:var(--an-r-sm); box-shadow:var(--an-shadow-lg); padding:6px;
           pointer-events:none; }
.an-zoom.on { opacity:1; visibility:visible; transform:scale(1); }
.an-zoom img { width:100%; height:100%; object-fit:contain; border-radius:var(--an-r-xs); display:block; }

/* ── responsive ──────────────────────────────────────────────────────────────
   The order things are allowed to go: the movement column first (least
   load-bearing), then units, then the revenue moves to a second line. The name
   and the revenue never disappear - they are the page. */
@media (max-width:1180px) {
  .an-top { grid-template-columns:minmax(0,1fr); }
  /* The band unstacks here, so the ring card runs the full width and its
     legend has room to sit in columns. It was already asking for
     grid-template-columns while still display:flex, which did nothing at all
     except collapse the row gap to .8px. */
  .an-legend { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
               gap:9px 20px; }
  .an-ring-head { grid-column:1 / -1; }
  /* Out of their column the tiles are four full-width bars with one number
     each at the far left. Across, they stay a row of four facts. */
  .an-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:940px) {
  .an-mid { grid-template-columns:minmax(0,1fr); }
  /* No leading rank track. A category row carries its rank INSIDE the name box
     - only a product row has one as a child of the grid - so the 1.6rem track
     that belongs to the product row was taking the category name's column and
     handing the name 0px, with the chip and the bar landing on top of the
     money. Three tracks here because .an-hide-md has taken the movement. */
  .an-row  { grid-template-columns:minmax(0,1fr) 6.5rem 4.5rem; gap:.65rem; }
  .an-prow { grid-template-columns:1.6rem 36px minmax(0,1fr) 6.5rem 4.5rem 1.6rem; }
  .an-thumb { width:36px; height:36px; }
  .an-hide-md { display:none; }
  /* Four columns in a card this wide is four slivers with clipped names. They
     wrap in pairs, and a wrapped column needs a height of its own - the row no
     longer has one to hand out. */
  .an-blocks { flex-wrap:wrap; }
  .an-bkcol { flex-basis:calc(50% - 4px); }
}
@media (max-width:640px) {
  /* 46px of the mono face is five characters wider than a phone. */
  .an-money { font-size:36px; }
  /* Same trade as the panel's, one screen down: two 50px rails is a third of
     a phone's plot, and the columns would be thinner than the figures naming
     them. The rail width itself does NOT shrink - "40 млрд" is seven
     characters of mono whatever the window is, and a rail too narrow for its
     own label spills the figure out over the first column. */
  .an-gl b:last-child { display:none; }
  .an-plot { padding-right:0; }
  .an-grid { right:0; }
  /* Side by side, the ring's 150px and the legend's 170px minimum come to
     more than the card holds, and `overflow:hidden` was quietly cutting the
     percentages off at the card's edge - a clip no overflow check can see,
     because the document never grows. */
  .an-ring { flex-direction:column; align-items:center; gap:16px; padding:20px; }
  .an-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .an-legend { width:100%; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
  /* Two tracks: .an-hide-sm has taken the quantity as well. And the bar and
     the "раздел" chip go with it - both have a minimum width, the name has
     none, so at this width they were spending the name's pixels. The bar is
     the same fact as the number beside it; the chip is the only thing on the
     row nobody came for. */
  .an-row  { grid-template-columns:minmax(0,1fr) 6rem; }
  .an-row .an-bar, .an-namebox > .an-chip { display:none; }
  .an-prow { grid-template-columns:1.6rem 36px minmax(0,1fr) 6rem 1.6rem; }
  .an-prow-c { grid-template-columns:1.6rem 36px minmax(0,1fr) 6rem 1.6rem; }
  .an-hide-sm { display:none; }
  /* One column, and the blocks stop sharing a height out: with no definite
     height to divide, flex-grow does nothing, so each tile is sized by its own
     content against a floor. */
  .an-blocks { padding:0 16px 16px; }
  .an-bkcol { flex-basis:100%; height:auto; }
  /* No height to share out, so each tile is its own content against a floor -
     and `flex-basis:auto` is what stops a tile clipping what it holds. */
  .an-bk { flex:0 0 auto; min-height:96px; }
  /* A one-line tile has nothing to sit at the foot of once the column stops
     handing out height, so it stops sitting at the foot. */
  .an-bk-3 { align-items:center; min-height:70px; }
  .an-bk-1 .an-bk-pct { font-size:32px; }
  .an-tiles { grid-template-columns:repeat(2,1fr); }
  .an-figs { gap:1.1rem 1.6rem; }
}
/* Measured at 320px: the single-line product row leaves the NAME 12 of the 235
   available pixels, because rank, photo, revenue and the link out are all fixed
   widths and the name is the only column that can give. It is also the one
   column a seller cannot do without, so the revenue moves to a second line.
   Every cell is placed explicitly - with one item on row 2 the auto-flow cursor
   decides where the rest land, and that is not a decision to leave to chance. */
@media (max-width:520px) {
  .an-money { font-size:30px; }
  .an-prow, .an-prow-c { grid-template-columns:1.4rem 36px minmax(0,1fr) 1.6rem;
                         column-gap:.55rem; row-gap:.1rem; }
  .an-prow > .an-rank,      .an-prow-c > .an-rank      { grid-column:1; grid-row:1; }
  .an-prow > .an-thumbwrap, .an-prow-c > .an-thumbwrap { grid-column:2; grid-row:1 / span 2;
                                                         align-self:start; }
  .an-prow > .an-namebox,   .an-prow-c > .an-namebox   { grid-column:3; grid-row:1; }
  .an-prow > .an-ext,       .an-prow-c > .an-ext       { grid-column:4; grid-row:1; }
  .an-prow > .an-cell-rev,  .an-prow-c > .an-cell-rev  {
    grid-column:3 / -1; grid-row:2; text-align:left;
    display:flex; align-items:baseline; gap:.35rem; flex-wrap:wrap; }
  .an-cell-rev .an-sub { display:inline; flex:0 0 auto; overflow:visible; }
  .an-ring-svg { width:132px; height:132px; }
  .an-blocks { gap:6px; }
  .an-bkcol { gap:6px; }
  .an-bk, .an-bk-1, .an-bk-tail { padding:15px; }
  .an-bk-1 .an-bk-pct { font-size:28px; }
  .an-pd-photo { width:60px; height:60px; }
}

@media (prefers-reduced-motion:reduce) {
  .an-bar > span, .an-ribbon > span { animation:none; }
  a.an-row, .an-zoom, .an-hit,
  .an-donut .sl, .sh-btn { transition:none; }
  .an-xl.busy svg { animation:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   /market — «Доля рынка», design 2c «Панель фильтра».

   A filter rail and a leaderboard. The rail is fixed at 326px because that is
   what a 212px ring plus its padding costs, and because a rail that grows with
   the viewport stops being a rail; everything else on the row goes to the
   sellers, which is what pays for six columns instead of the four this page
   used to have.

   The two are one row only while the leaderboard can still hold its columns.
   Below that they stack rather than squeeze - a 300px rail beside a 600px
   board is two things arguing, not two things reading as one.
   ═══════════════════════════════════════════════════════════════════════════ */
.mk-crumb { margin-bottom:14px; }
.mk-body { display:grid; grid-template-columns:326px minmax(0,1fr); gap:14px;
           align-items:start; }
.mk-main { display:flex; flex-direction:column; gap:12px; min-width:0; }

/* ── the rail ─────────────────────────────────────────────────────────────── */
.mk-rail { display:flex; flex-direction:column; min-width:0; }
.mk-rail-top { display:flex; flex-direction:column; gap:12px;
               padding:20px 20px 14px; }
.mk-rail-head { padding:0; }
.mk-count { font:400 12px/1 var(--an-mono); color:var(--an-sub); flex:0 0 auto; }
.mk-search { flex:0 0 auto; }

.mk-ring { position:relative; align-self:center; width:212px; height:212px;
           margin:4px 0 6px; }
.mk-ring svg { display:block; }
/* The slice thickens INTO the ring's own band rather than growing past it:
   the stroke is centred on the arc, so +6px of width is +3px each side and the
   track behind it is 40px deep. Nothing moves, which is what lets a reader
   travel round the ring without the shape jumping under the pointer. */
.mk-slice { cursor:pointer; transition:stroke-width .12s ease; }
.mk-slice:hover { stroke-width:calc(var(--mk-th) * 1.3); }
.mk-ring-mid { position:absolute; inset:56px; display:flex; flex-direction:column;
               align-items:center; justify-content:center; gap:4px;
               text-align:center; pointer-events:none; }
.mk-ring-top { font:600 9px/1.25 var(--an-sans); letter-spacing:.09em;
               color:var(--an-faintest); text-transform:uppercase; max-width:100px;
               overflow:hidden; display:-webkit-box; -webkit-line-clamp:2;
               -webkit-box-orient:vertical; }
.mk-ring-big { font:700 24px/1 var(--an-mono); letter-spacing:-.035em;
               color:var(--an-ink); }
.mk-ring-sub { font:400 10px/1.35 var(--an-sans); color:var(--an-sub); max-width:110px; }

/* `flex:0 1 auto`, NOT the `flex:1 1 0` .an-scroll carries. On /analytics the
   scroller is the only growing child of a card that is stretched to its row's
   height, so a zero basis is what makes it fill the gap. The rail and the board
   here have no height handed to them - they are as tall as they are - so a zero
   basis plus `min-height:0` resolved to a scroller exactly 0px tall, with all
   twenty-three categories and all hundred sellers still in the DOM. Measured,
   not guessed: the first render showed two empty cards. */
.mk-cats, .mk-rows { flex:0 1 auto; min-height:0; }
.mk-cats { max-height:520px; }
.mk-crow { display:grid; grid-template-columns:18px 8px minmax(0,1fr) auto;
           align-items:center; gap:10px; padding:10px 20px;
           border-top:1px solid var(--an-line-soft); }
a.mk-crow:hover { background:#f8fbfb; }
.mk-crank { font:500 11px/1 var(--an-mono); color:var(--an-rank); text-align:right; }
.mk-dot { width:8px; height:8px; border-radius:2px; }
.mk-dot-flat { background:var(--an-hair); }
.mk-crow-flat { color:var(--an-muted); }
/* ellipsis needs a BLOCK box with min-width:0 - as an inline span a long
   category name runs straight over the money beside it. */
.mk-cname-box { display:flex; flex-direction:column; gap:5px; min-width:0; }
.mk-cname { display:block; min-width:0; font:500 14px/1.2 var(--an-sans);
            color:var(--an-ink); white-space:nowrap; overflow:hidden;
            text-overflow:ellipsis; }
.mk-crow-flat .mk-cname { color:var(--an-muted); font-weight:400; }
.mk-cbar { display:block; height:4px; border-radius:2px; background:var(--an-track);
           overflow:hidden; }
.mk-cbar i { display:block; height:4px; border-radius:2px; min-width:1px; }
.mk-cfig { display:flex; flex-direction:column; align-items:flex-end; gap:3px;
           text-align:right; }
.mk-crev { font:700 13px/1 var(--an-mono); white-space:nowrap; }
.mk-crev .an-unit { font-size:11px; margin-left:.28em; }
.mk-cpct { font:400 11px/1 var(--an-mono); color:var(--an-sub); }

/* ── the four tiles ───────────────────────────────────────────────────────── */
.mk-tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
            gap:12px; flex-direction:row; }
.mk-tiles .an-metric { padding:15px 17px; gap:7px; }
.mk-tiles .an-num { font-size:26px; }
.mk-tiles .an-fig-v { gap:5px; }

/* ── the leaderboard ──────────────────────────────────────────────────────── */
.mk-board { display:flex; flex-direction:column; min-width:0; }
.mk-board-head { padding-bottom:10px; }
.mk-board-line { display:flex; align-items:baseline; justify-content:space-between;
                 gap:12px; min-width:0; }
.mk-board-sub { flex:0 0 auto; }
.mk-tabs { flex-wrap:nowrap; }
.mk-tabs .an-search { flex:1 1 12rem; }

/* One track list, two users. A header whose columns do not line up with the
   rows under it is worse than no header at all, so both read the same
   variable and every breakpoint re-declares it beside the cells it hides. */
.mk-board { --mk-cols:minmax(0,1fr) 150px 92px 116px 78px 82px; }
.mk-th, .mk-row { display:grid; grid-template-columns:var(--mk-cols);
                  align-items:center; gap:14px; }
.mk-th { padding:0 24px 10px; font:600 10px/1 var(--an-sans); letter-spacing:.12em;
         color:var(--an-sub); text-transform:uppercase; }
.mk-r { text-align:right; }
.mk-rows { max-height:600px; }
.mk-row { padding:9px 24px; border-top:1px solid var(--an-line-soft); }
.mk-row:hover { background:#f8fbfb; }
.mk-shop { display:flex; align-items:center; gap:12px; min-width:0; }
.mk-rank { font:500 12px/1 var(--an-mono); color:var(--an-rank); width:24px;
           text-align:right; flex:0 0 auto; }
.mk-logo { width:38px; height:38px; border-radius:11px; flex:0 0 auto;
           object-fit:cover; background:var(--an-line-soft); }
.mk-logo-t { display:flex; align-items:center; justify-content:center;
             font:700 14px/1 var(--an-sans); }
.mk-shopbox { display:flex; flex-direction:column; gap:3px; min-width:0; }
.mk-shopname { display:block; min-width:0; font:500 15px/1.2 var(--an-sans);
               color:var(--an-ink); white-space:nowrap; overflow:hidden;
               text-overflow:ellipsis; }
.mk-shopmeta { display:block; min-width:0; font:400 12px/1.25 var(--an-sans);
               color:var(--an-sub); white-space:nowrap; overflow:hidden;
               text-overflow:ellipsis; }
.mk-cat { min-width:0; font:400 13px/1.25 var(--an-sans); color:var(--an-muted);
          white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-money { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.mk-money .an-num { font-size:15px; }
.mk-money .an-unit { font-size:11px; margin-left:.28em; }
/* No bar on a seller row, which is the design's call and the right one: the
   biggest seller on this marketplace holds 0.6%, so a bar scaled to the total
   is one invisible pixel and a bar scaled to the leader says "half of the
   biggest" about a shop with a third of one percent. The «Доля» column beside
   it is the fact. The RAIL keeps its bars - a category leader holds 15%, which
   a bar can actually draw. */
.mk-share { font:600 13px/1 var(--an-mono); }
.mk-foot { margin-top:14px; font:400 12px/1.6 var(--an-sans); color:var(--an-faint);
           max-width:92ch; text-wrap:pretty; }

@media (max-width:1320px) {
  /* The rail stops being a rail. Stacked it has the whole width, so the ring
     moves beside the list instead of sitting on top of a 520px scroller the
     reader now has to travel past to reach the leaderboard. */
  .mk-body { grid-template-columns:minmax(0,1fr); }
  .mk-rail-top { flex-direction:row; align-items:center; flex-wrap:wrap;
                 gap:14px 20px; }
  .mk-rail-head { flex:1 1 100%; }
  .mk-ring { margin:0; flex:0 0 auto; }
  .mk-search { flex:1 1 12rem; }
  .mk-cats { max-height:360px; }
}

/* ── the two columns end on one line ──────────────────────────────────────────
   Side by side, the rail and the board were two independent heights: each
   scroller carried its own cap - 520 for the categories, 600 for the sellers -
   and each card was that cap plus whatever its own header happened to come to.
   The rail's header is a 212px ring, a search box and a title; the board's is
   four tiles and two rows of controls. Two different headers plus two
   different caps landed the rail 46px below the board, and a reader sees two
   panels of the same thing that stop at different places.

   So the CAP MOVES OFF THE SCROLLERS AND ONTO THE ROW. Both columns are capped
   at one height, both overflow it, so both resolve to exactly that height and
   the grid stretches them to it; each scroller then takes whatever its own
   card has left after its own header. Nothing here knows how tall either
   header is, which is the point - a taller ring now costs category rows
   instead of pushing one column past the other.

   858px is what the rail already came to, so the board grew to meet it rather
   than the rail shrinking to meet the board.

   Only in the two-column layout. Below 1320 they are stacked, each is its own
   row, and a shared height would be a hole under the shorter one. */
@media (min-width:1321px) {
  .mk-body { align-items:stretch; }
  .mk-rail, .mk-main { max-height:var(--mk-h, 858px); }
  .mk-board { flex:1 1 auto; min-height:0; }
  .mk-cats, .mk-rows { flex:1 1 auto; max-height:none; min-height:0; }
}
@media (max-width:900px) {
  .mk-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px) {
  /* One tile per row. The headline figures are printed in FULL here - the
     design sets them that way and "1 842 549" is the fact - and eight
     characters of the 22px mono face do not fit two-up inside a 375px
     phone. Measured at 320: two-up leaves the value 111px and it clips. */
  .mk-tiles { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:820px) {
  /* The seller's top category goes first: it is the only column on the row
     that repeats something the rail already says. */
  .mk-board { --mk-cols:minmax(0,1fr) 92px 116px 78px 82px; }
  .mk-hide-lg { display:none; }
}
@media (max-width:700px) {
  .mk-board { --mk-cols:minmax(0,1fr) 116px 78px; }
  .mk-hide-md { display:none; }
  .mk-th, .mk-row { gap:10px; }
  .mk-th, .mk-row { padding-left:16px; padding-right:16px; }
  .mk-rail-top { padding:16px; }
  .mk-crow { padding-left:16px; padding-right:16px; }
  .mk-tabs { flex-wrap:wrap; }
}
@media (max-width:620px) {
  /* «15 товаров с прода…» is an ellipsis, not a fact. The qualifier stands
     down and the count stays; the row's title attribute keeps the sentence. */
  .mk-longform { display:none; }
}
@media (max-width:560px) {
  .mk-ring { width:170px; height:170px; }
  .mk-ring svg { width:170px; height:170px; }
  .mk-ring-mid { inset:45px; }
  .mk-ring-big { font-size:20px; }
  .mk-ring:hover .mk-slice { opacity:1; }
}
@media (max-width:460px) {
  /* Two tracks. The share is the one figure here that can be read off the two
     beside it; the money cannot. */
  .mk-board { --mk-cols:minmax(0,1fr) 108px; }
  .mk-hide-sm { display:none; }
  .mk-tiles { gap:8px; }
  .mk-tiles .an-num { font-size:22px; }
  .mk-logo { width:32px; height:32px; border-radius:9px; }
  .mk-rank { width:18px; }
  .mk-shop { gap:9px; }
  .mk-shopname { font-size:14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   /shop/<id> — one seller.

   Same instrument, one level down. The rail «Доля рынка» carries is absent by
   design: a category filter belongs to a page ABOUT categories, and this page
   is about a shop. What the rail's 326px used to cost buys the product grid
   its sixth column instead.

   The grid is the page's argument. Six across at desktop width, and every card
   carries five facts a marketplace card does not - rank inside the shop, the
   move against the previous window, units, revenue, and the shelf. It steps
   6 → 5 → 4 → 3 → 2 rather than reflowing with auto-fill, because a card is a
   fixed composition: below ~150px the two figures at its foot collide, and a
   track list is the only way to know exactly where that happens.
   ═══════════════════════════════════════════════════════════════════════════ */
.sp-crumb { margin-bottom:14px; }
.sp-head { align-items:flex-end; }
.sp-id { display:flex; align-items:center; gap:16px; min-width:0; }
.sp-logo { width:66px; height:66px; border-radius:19px; flex:0 0 auto;
           object-fit:cover; background:var(--an-line-soft);
           border:1px solid var(--an-line); }
.sp-logo-t { display:flex; align-items:center; justify-content:center;
             font:700 24px/1 var(--an-sans); border:0; }
.sp-idbox { display:flex; flex-direction:column; gap:5px; min-width:0; }
.sp-name { font-size:30px; }

/* The fact strip. Set in the sans face at label size with the FIGURES in mono,
   so the strip reads as prose and the numbers still line up with every other
   number on the page. */
.sp-facts { display:flex; flex-wrap:wrap; align-items:center; gap:5px 16px;
            margin-top:3px; font:400 13px/1.35 var(--an-sans);
            color:var(--an-muted); }
.sp-fact { display:inline-flex; align-items:baseline; gap:5px; min-width:0; }
.sp-fact b { font:700 14px/1 var(--an-mono); color:var(--an-ink); }
.sp-fact-rank b { font-size:15px; }
.sp-gain { font:600 11px/1 var(--an-mono); font-style:normal;
           color:var(--an-up); background:var(--an-up-soft);
           padding:3px 6px; border-radius:6px; }
.sp-of { font:400 12px/1 var(--an-mono); font-style:normal; color:var(--an-sub); }

/* ── the five tiles ───────────────────────────────────────────────────────── */
/* Six, not five. The ladder below steps 6 → 3 → 2, and every one of those
   divides 6 exactly - so the band always ends on a whole row. Five did not: it
   left a row of two at the 3-across step and a row of one at 2-across, and a
   half-empty second row of tiles reads as a tile that failed to load. */
.sp-tiles { display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
            gap:12px; flex-direction:row; margin-bottom:14px; }
.sp-tiles .an-metric { padding:15px 17px; gap:7px; }
.sp-tiles .an-num { font-size:25px; }
.sp-tiles .an-fig-v { gap:5px 8px; }
.sp-tiles .an-delta { font-size:12px; padding:4px 7px; }

/* ── упущенная выручка ────────────────────────────────────────────────────
   The tile beside «Выручка», built out of the same two parts so the band keeps
   one geometry: the label, and one figure row that wraps. The share sits in
   the slot the delta chip occupies next door - same size, same radius, amber
   instead of green - and the count wraps below it inside that row rather than
   becoming a third child of the tile. See the note in shop.html for what a
   third child costs the other five tiles. */
.sp-lost .an-num { color:var(--an-lost); }
.sp-lost-sh { font:650 12px/1 var(--an-mono); color:var(--an-lost);
              background:var(--an-lost-soft); padding:4px 7px;
              border-radius:var(--an-r-2xs); }
/* flex-basis:100% so it takes its own line inside the wrapping figure row
   however narrow the tile gets - at 3-across the share and this on one line
   would fit and then stop fitting between two breakpoints. */
.sp-lost-on { flex-basis:100%; font:400 11px/1.25 var(--an-sans);
              color:var(--an-faint); }

/* On a card: only ever drawn when there IS a loss, so it needs no zero state.
   `margin-left:auto` would fight .sp-pool for the same right edge - the pool
   chip claims it first and this sits after, so it takes the full row instead
   and wraps under rather than squeezing the two into one line. */
.sp-lost-tag { flex-basis:100%; display:flex; align-items:center; gap:4px;
               color:var(--an-lost); }
.sp-lost-tag b { color:var(--an-lost); }

/* ── the chart beside the mix ─────────────────────────────────────────────── */
.sp-mid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
          gap:14px; align-items:stretch; margin-bottom:14px; }
.sp-mid > .an-card { display:flex; flex-direction:column; min-width:0; }
.sp-chart-body { padding:0 24px 20px; flex:1; display:flex;
                 flex-direction:column; min-height:0; }
/* `stretch`, not `center`. The card is as tall as the chart beside it, and a
   list capped to the ring's own 150px left «Канцтовары 0,0%» sliced in half at
   the bottom edge - which reads as a broken card, not as a scroller. The ring
   still centres itself; the list takes the height that is actually there. */
.sp-mix-body { display:flex; align-items:stretch; gap:18px; padding:4px 20px 18px;
               min-width:0; flex:1; min-height:0; }
.sp-ring { position:relative; flex:0 0 auto; width:150px; height:150px;
           align-self:center; }
.sp-ring svg { display:block; }
.sp-ring-mid { position:absolute; inset:44px; display:flex; flex-direction:column;
               align-items:center; justify-content:center; gap:2px;
               text-align:center; pointer-events:none; }
.sp-ring-big { font:700 19px/1 var(--an-mono); letter-spacing:-.035em; }
.sp-ring-sub { font:400 10px/1.3 var(--an-sans); color:var(--an-sub); }
/* `flex:0 1 auto`, NOT the `flex:1 1 0` + 470px floor .an-scroll carries. This
   card is as tall as the ring beside it, so a zero basis resolves the list to
   0px and the floor would instead push a 150px ring's card to 470. Both were
   measured on /market; the same two lines fix it here. */
.sp-mixlist { flex:1 1 auto; min-height:0; max-height:none; min-width:0;
              display:flex; flex-direction:column; gap:1px; }
.sp-mixrow { display:grid; grid-template-columns:8px minmax(0,1fr) auto;
             align-items:center; gap:9px; padding:5px 4px; border-radius:8px;
             font:400 13px/1.25 var(--an-sans); }
.sp-mixrow:hover { background:#f8fbfb; }
.sp-mixname { min-width:0; white-space:nowrap; overflow:hidden;
              text-overflow:ellipsis; color:var(--an-ink); }
.sp-mixpct { font:600 12px/1 var(--an-mono); color:var(--an-muted); }

/* ── the seller's other shops ─────────────────────────────────────────────── */
/* A horizontal strip, not a table: the question is "who else is this", which
   is answered by scanning marks, and a seller with 121 shops must not push the
   product grid off the screen. */
.sp-sibs { margin-bottom:14px; }
.sp-sibrow { display:flex; gap:10px; padding:2px 24px 20px; overflow-x:auto;
             scrollbar-width:thin; scrollbar-color:var(--an-line) transparent; }
.sp-sibrow::-webkit-scrollbar { height:8px; }
.sp-sibrow::-webkit-scrollbar-thumb { background:var(--an-line); border-radius:4px; }
.sp-sib { display:flex; align-items:center; gap:10px; flex:0 0 auto;
          max-width:250px; padding:9px 14px 9px 9px; border-radius:var(--an-r-xs);
          border:1px solid var(--an-line); background:var(--an-surface); }
.sp-sib:hover { border-color:var(--an-hair); background:#f8fbfb; }
/* The shop you are already on. Ink, like every other active control on the
   site - it is a position indicator, not a value. */
.sp-sib.on { border-color:var(--an-accent); }
.sp-siblogo { width:34px; height:34px; border-radius:10px; flex:0 0 auto;
              object-fit:cover; background:var(--an-line-soft); }
.sp-sibbox { display:flex; flex-direction:column; gap:3px; min-width:0; }
.sp-sibname { font:500 13px/1.2 var(--an-sans); color:var(--an-ink);
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-sibname i { font-style:normal; color:var(--an-faintest); font-weight:400; }
.sp-sibrev { font:400 12px/1 var(--an-sans); color:var(--an-muted); }
.sp-sibrev b { font:700 13px/1 var(--an-mono); color:var(--an-ink); }
.sp-sibrev .an-unit { font-size:10px; margin-left:.25em; }
.sp-sibrev i { font-style:normal; color:var(--an-faintest); }

/* ── the grid ─────────────────────────────────────────────────────────────── */
.sp-grid-card { --sp-cols:6; }
.sp-grid { display:grid; grid-template-columns:repeat(var(--sp-cols),minmax(0,1fr));
           gap:12px; padding:4px 20px 20px; }
.sp-card { display:flex; flex-direction:column; min-width:0;
           border:1px solid var(--an-line); border-radius:var(--an-r-xs);
           background:var(--an-surface); overflow:hidden;
           transition:border-color .12s ease, transform .12s ease; }
.sp-card:hover { border-color:var(--an-hair); transform:translateY(-2px); }

.sp-shot { position:relative; display:block; aspect-ratio:1/1; overflow:hidden;
           background:var(--an-line-soft); }
.sp-shot img { width:100%; height:100%; object-fit:cover; display:block; }
.sp-noshot { position:absolute; inset:0; display:flex; align-items:center;
             justify-content:center; font:400 11px/1 var(--an-sans);
             color:var(--an-faintest); }
/* Rank inside THIS shop, not on the marketplace. On a white photo a bare
   numeral disappears, so it rides its own ink chip rather than taking a
   shadow. */
.sp-badge { position:absolute; top:7px; left:7px; min-width:20px; height:20px;
            padding:0 6px; display:inline-flex; align-items:center;
            justify-content:center; border-radius:7px;
            background:rgba(18,24,28,.82); color:#fff;
            font:700 11px/1 var(--an-mono); }
.sp-tag { position:absolute; top:7px; right:7px; }
.sp-tag .an-delta { font-size:11px; padding:3px 6px; border-radius:6px;
                    box-shadow:0 1px 3px rgba(16,32,48,.12); }
/* A flat move is the common case on a small product and does not deserve a
   chip on the photograph; the movement column on the product page still
   carries it. */
.sp-tag .an-flat { display:none; }

.sp-body { display:flex; flex-direction:column; gap:6px; padding:9px 10px 10px;
           min-width:0; }
/* `overflow-wrap:anywhere`, not the default. The line clamp only cuts
   VERTICALLY; a single unbreakable word wider than the card runs out of it
   sideways instead, and Russian has plenty - «Светоотражающая» is 2px past a
   137px card at 320. Measured, not anticipated. */
.sp-title { font:400 12px/1.32 var(--an-sans); color:var(--an-ink);
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
            overflow:hidden; min-height:2.64em; overflow-wrap:anywhere; }
/* Exact сум, so both figures are longer than a compacted one. `nowrap` on
   each half and `wrap` on the pair: a price is never broken across lines, but
   a struck price may drop below the one it strikes on a narrow card. */
.sp-price { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.sp-price b { font:700 14px/1 var(--an-mono); color:var(--an-ink);
              white-space:nowrap; }
.sp-price s { font:400 11px/1 var(--an-mono); color:var(--an-faintest);
              white-space:nowrap; }
.sp-none { color:var(--an-faintest); }
.sp-rate { display:flex; align-items:baseline; gap:4px;
           font:400 11px/1 var(--an-sans); color:var(--an-faint); }
.sp-rate b { font:600 12px/1 var(--an-mono); color:var(--an-ink-2); }

.sp-meter { display:block; height:4px; border-radius:2px;
            background:var(--an-track); overflow:hidden; }
.sp-meter i { display:block; height:4px; border-radius:2px; min-width:1px;
              background:var(--an-bar); }

.sp-figs { display:flex; align-items:flex-end; justify-content:space-between;
           gap:8px; min-width:0; }
.sp-fig { display:flex; flex-direction:column; gap:3px; min-width:0; }
.sp-fig-r { text-align:right; align-items:flex-end; }
.sp-fig .an-label { font-size:9px; letter-spacing:.08em; }
.sp-fig b { font:700 13px/1 var(--an-mono); color:var(--an-ink);
            white-space:nowrap; }
.sp-fig .an-unit { font-size:10px; margin-left:.25em; }

.sp-foot { display:flex; align-items:center; gap:6px; flex-wrap:wrap;
           padding-top:7px; border-top:1px solid var(--an-line-soft);
           font:400 11px/1.2 var(--an-sans); color:var(--an-faint); }
.sp-foot b { font:600 11px/1 var(--an-mono); color:var(--an-ink-2);
             margin-left:2px; }
/* FBO is Uzum's warehouse and FBS/DBS is the seller's own. The distinction
   decides whether the quantity above is measured or estimated, so it is on the
   card rather than in a footnote. */
.sp-pool { font:600 9px/1 var(--an-sans); font-style:normal; letter-spacing:.06em;
           color:var(--an-ink-2); background:var(--an-line-soft);
           padding:3px 5px; border-radius:5px; margin-left:auto; }

/* Denser above the design width rather than wider cards: the brief asks for
   at least six across, and a 24-inch screen has room for eight without the
   photograph dropping below the ~180px at which a product is still
   recognisable. */
@media (min-width:2100px) { .sp-grid-card { --sp-cols:8; } }
@media (min-width:1660px) and (max-width:2099px) { .sp-grid-card { --sp-cols:7; } }
@media (max-width:1400px) { .sp-grid-card { --sp-cols:5; } }
/* Six across needs the full design width. Measured at 1400px the выручка tile
   holds «1,50 млрд сум» plus its delta chip in 209px and the pair wraps to two
   lines; three across gives it 448px and the band drops to two rows, which is
   the honest trade. Above this the 1180 rule below is simply the same value
   again - kept because the rest of that block is about the chart, not the
   tiles. */
@media (max-width:1400px) {
  .sp-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1180px) {
  .sp-mid { grid-template-columns:minmax(0,1fr); }
  /* Stacked, the card has no height handed to it, so the list needs a stop of
     its own or twenty-three categories push the grid off the screen. */
  .sp-mixlist { max-height:260px; }
  .sp-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1080px) { .sp-grid-card { --sp-cols:4; } }
@media (max-width:860px)  { .sp-grid-card { --sp-cols:3; } }
@media (max-width:700px) {
  .sp-grid { padding-left:14px; padding-right:14px; gap:10px; }
  .sp-sibrow { padding-left:16px; padding-right:16px; }
  .sp-mix-body { padding-left:16px; padding-right:16px; }
  .sp-chart-body { padding-left:16px; padding-right:16px; }
  .sp-logo { width:54px; height:54px; border-radius:16px; }
  .sp-name { font-size:24px; }
}
@media (max-width:620px) {
  .sp-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sp-grid-card { --sp-cols:2; }
  .sp-mix-body { flex-direction:column; align-items:stretch; }
  .sp-ring { align-self:center; }
  .sp-mixlist { width:100%; }
}
@media (max-width:460px) {
  .sp-tiles { gap:8px; }
  .sp-tiles .an-num { font-size:21px; }
  .sp-facts { gap:4px 12px; font-size:12px; }
  /* Two cards still, at 320px: a 137px card keeps its photograph legible and
     its two foot figures apart, and one card per row turns 96 products into a
     scroll nobody finishes. */
  .sp-grid { gap:8px; }
  .sp-body { padding:8px; gap:5px; }
  .sp-fig b { font-size:12px; }
}

/* ── the variants table, on the product panel ─────────────────────────────── */
.an-sku td:first-child { min-width:0; }
.an-sku-n { display:block; min-width:0; white-space:nowrap; overflow:hidden;
            text-overflow:ellipsis; }
.an-sku-bar { display:block; height:3px; margin-top:5px; border-radius:2px;
              background:var(--an-track); overflow:hidden; }
.an-sku-bar i { display:block; height:3px; border-radius:2px; min-width:1px;
                background:var(--an-bar); }
.an-sku-pct { font:400 11px/1 var(--an-mono); color:var(--an-sub);
              margin-left:6px; }
.an-sku-note { margin-top:9px; font:400 11px/1.55 var(--an-sans);
               color:var(--an-faint); text-wrap:pretty; }
/* The drawer is narrow and this cell carries a figure AND a pool chip, so the
   chip sits beside the number rather than pushing to the far edge as it does
   on a product card. */
.an-sku .sp-pool { margin-left:6px; }
.an-sku-was { color:var(--an-faintest); font-size:11px; }

/* ═══════════════════════════════════════════════════════════════════════════
   /product/<id> — one product, full width.

   The page used to be the 470px drawer template centred in a 640px column,
   which on a 1440px screen meant a 76px photograph of the subject and four
   tables stacked end to end. It is now laid out like /shop/<id>: a hero with
   the photograph at the size a photograph is worth, six tiles, then the tables
   in pairs across the row instead of down it.

   The drawer keeps its own rules — everything here is `.pd-`, nothing here
   touches `.an-pd-` — so the overlay on /analytics is unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */
.pd-crumb { margin-bottom:14px; }
.pd-head { align-items:flex-end; margin-bottom:14px; }

/* ── 1. the hero ─────────────────────────────────────────────────────────────
   340px of photograph and the rest for the figures. The photo track is fixed
   rather than fractional: a product shot has ONE size at which it stops being
   a thumbnail, and letting it grow with the window would put a 600px picture
   of a tracksuit next to six tiles at 1920. */
.pd-hero { display:grid; grid-template-columns:340px minmax(0,1fr);
           gap:14px; margin-bottom:14px; align-items:stretch; }
/* align-items:center, for the one case the right-hand column cannot be squeezed
   into the photograph's height — a very long title, or a narrow window still
   wide enough for two tracks. The row grows, and the shot sits in the middle of
   its card rather than being stretched out of its own aspect ratio. */
.pd-shotcard { padding:10px; display:flex; align-items:center; }
/* 3:4, the shape Uzum actually stores — 1080x1440 original, 405x540 at
   t_product_540_high. `cover` on a 3:4 box of a 3:4 source crops nothing; the
   1/1 box the shop grid uses cuts a quarter off the top and bottom of every
   photograph on it, which is fine at 137px and not fine at 320. */
.pd-shot { display:block; width:100%; aspect-ratio:3/4; object-fit:cover;
           border-radius:var(--an-r-sm); background:var(--an-line-soft); }
.pd-noshot { display:flex; align-items:center; justify-content:center;
             color:var(--an-faintest); font-size:12px; }

/* The column fills the photograph's height, and it fills it with the CHART.
   A 3:4 shot at 340px is 453px tall; the name, the facts, six tiles and the
   arithmetic come to about 390. That surplus used to be spread between the
   groups as air — which was honest but idle, and the chart it could have held
   was a card of its own below, leaving the band beside the picture with less
   to say than the picture is tall.

   Only ONE child may take the slack, and it is the chart: flex:1 on the tiles
   made six 130px boxes with a 25px figure adrift in the middle of each, which
   is what a tile looks like when it has been stretched rather than filled. A
   plot has a use for extra height. */
.pd-id { display:flex; flex-direction:column; min-width:0; gap:12px; }
.pd-id > .pd-idbox, .pd-id > .pd-tiles, .pd-id > .pd-calc { flex:0 0 auto; }

/* ── the chart, inside the hero ──────────────────────────────────────────────
   It takes what the column has left over and never less than a plot can be
   read at. Below that floor the row grows instead and the photograph centres
   in its card — a 96px plot is a chart; a 40px one is a decoration. */
.pd-daycard { flex:1 1 auto; display:flex; flex-direction:column;
              min-height:190px; }
.pd-dayhead { padding:14px 20px 6px; }
.pd-dayhead .an-card-title { font-size:15px; }
.pd-day-body { flex:1 1 auto; display:flex; padding:0 20px 14px; min-height:0; }
.pd-day-body .an-chart { flex:1 1 auto; min-width:0; }
.pd-day-body .an-plot { height:100%; min-height:96px; }
.pd-day-none { padding:20px 0; margin:auto; font-size:13px; }
/* Centred over the empty plot rather than under it: the space it is explaining
   is the space it stands in. pointer-events:none so the day columns beneath
   still take a hover - they are real days and their readout still works. */
.pd-day-body { position:relative; }
.pd-day-zero { position:absolute; left:0; right:0; top:38%;
               margin:0; pointer-events:none; text-align:center;
               font:400 13px/1.4 var(--an-sans); color:var(--an-faintest); }
/* text-wrap:balance, because a product title is three lines of shouted
   marketing and the default break leaves one word alone on the last one. */
.pd-name { font-size:26px; line-height:1.2; text-wrap:balance; }
.pd-idbox { min-width:0; }
.pd-facts { margin-top:9px; }
.pd-fact-link { color:var(--an-muted); border-bottom:1px solid transparent; }
.pd-fact-link:hover { color:var(--an-link); border-bottom-color:currentColor; }
.pd-out { margin-top:0; }

/* Six tiles in three columns, and three because the two figures that can be
   long — «1,50 млрд сум» and its share chip — need the width. The ladder below
   steps 3 → 2, and both divide six exactly, so the band always ends on a whole
   row; five tiles left a row of two and read as one that failed to load. */
.pd-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
            gap:12px; flex-direction:row; }
.pd-tiles .an-metric { padding:14px 16px; gap:6px; }
.pd-tiles .an-num { font-size:24px; }
.pd-tiles .an-fig-v { gap:5px 8px; }
.pd-calc { padding:2px 2px 0; }

/* ── 2. the two tables ───────────────────────────────────────────────────────
   Side by side. Read one under the other they were 1 400px of scrolling, and
   neither is reading matter — they are lookups, and a lookup you have to
   scroll past to reach the next one is the wrong shape. */
/* stretch, not start. The day table runs to thirty rows and the variants table
   to four, and a short card beside a tall one leaves the white space OUTSIDE a
   surface, which reads as a hole in the page rather than as a card with room
   to spare. */
.pd-mid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
          gap:14px; margin-bottom:14px; align-items:stretch; }
.pd-mid > .an-card { display:flex; flex-direction:column; min-width:0; }
/* A capped, scrolling body rather than a card as tall as its data. Thirty days
   beside four variants would otherwise leave the right-hand card floating in
   700px of white — and the point of the pair is that both are on one screen. */
.pd-scroll { padding:0 20px 6px; max-height:460px; overflow:auto;
             overscroll-behavior:contain; }
/* The head row stays put while the body scrolls under it: a table you scroll
   with its column names off screen is a grid of unlabelled numbers. */
.pd-tbl thead th { position:sticky; top:0; z-index:1; background:var(--an-surface);
                   box-shadow:0 1px 0 var(--an-line); }
.pd-tbl { font-size:13px; }
.pd-tbl td { padding:.42rem .45rem; }
.pd-tbl th { padding-bottom:.42rem; }
.pd-note { padding:2px 24px 18px; margin-top:0; }
/* A table cut off at a clean row boundary looks like a table that ended. The
   class is set by an.js only when the body really does overflow, so a short
   table is never given a fade over data it is not hiding. */
.pd-scroll.is-clipped { -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
                        mask-image:linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }

/* ── 3. where it ranks ───────────────────────────────────────────────────────
   One grid: rows are the listings the product appears in, columns are the days
   on screen. It replaces four outlined boxes that each redrew the same date
   column, which is three redundant copies of a date and no way at all to
   compare one listing against another — the comparison being the whole reason
   a product is ranked in four places.

   The block is the extension's «Позиция в выдаче» at page size, down to the
   footnote. The two are one reading and must not look like two.
   ═══════════════════════════════════════════════════════════════════════════ */
.pd-rkcard { margin-bottom:14px; }
.pd-rkhead { flex-wrap:wrap; align-items:baseline; }
.pd-rk-sub { flex:1 1 auto; }
.pd-rk-legend { display:inline-flex; align-items:center; gap:5px;
                white-space:nowrap; flex:0 0 auto;
                font:600 11px/1 var(--an-sans); color:var(--an-faint); }
.pd-rk-legend b { font-size:13px; margin-left:9px; }
.pd-rk-legend b:first-child { margin-left:0; }
/* rank 1 is the best rank, so a FALLING number is the good news — every arrow
   in this block is inverted against its raw delta, and the legend is the one
   place that says so out loud */
.pd-rk-legend b.is-up { color:var(--an-up); }
.pd-rk-legend b.is-down { color:var(--an-down); }

/* ── the trend ── */
.pd-rk-pad { padding:2px 24px 6px; }
.pd-rk-trend { position:relative; }
.pd-rk-trend svg { display:block; width:100%; }
/* What a reader with JavaScript off keeps: the height the chart would have
   taken, so the table below it does not jump, and nothing that pretends to be
   data. Every number the chart would draw is in the table. */
.pd-rk-sk { height:168px; border-radius:var(--an-r-xs);
            background:linear-gradient(180deg,var(--an-line-soft),transparent 70%); }
.pd-rk-trend.is-drawn .pd-rk-sk { display:none; }
.pd-rk-l { fill:none; stroke:var(--hue); stroke-width:2;
           stroke-linecap:round; stroke-linejoin:round; }
.pd-rk-p { fill:var(--hue); stroke:var(--an-surface); stroke-width:2; }
.pd-rk-p.is-lone { stroke-width:1.5; }
.pd-rk-gl { stroke:var(--an-line); stroke-width:1; }
.pd-rk-ax { font:500 10px/1 var(--an-mono); fill:var(--an-faintest); }
/* Parked off the left edge when idle, and the svg does not clip — so it has to
   be invisible, not merely out of frame. */
.pd-rk-cross { stroke:var(--an-hair); stroke-width:1; stroke-dasharray:3 3; opacity:0; }
.pd-rk-trend.is-probe .pd-rk-cross { opacity:.55; }
.pd-rk-probe-p { fill:var(--hue); stroke:var(--an-surface); stroke-width:2.25; }
.pd-rk-hit { fill:transparent; }

/* the dark readout, the same one the bar chart above uses */
.pd-rk-tip { position:absolute; z-index:6; pointer-events:none; min-width:172px;
             padding:9px 11px 10px; background:var(--an-ink); color:#fff;
             border-radius:var(--an-r-xs); box-shadow:0 12px 30px -12px rgba(16,32,48,.55);
             opacity:0; transition:opacity .12s ease; }
.pd-rk-tip.is-on { opacity:1; }
.pd-rk-tip-d { font:700 10px/1 var(--an-sans); letter-spacing:.1em;
               text-transform:uppercase; color:#9aa4ac; margin-bottom:7px; }
.pd-rk-tip-r { display:flex; align-items:center; gap:8px; margin-top:4px;
               font:400 12px/1.25 var(--an-sans); }
.pd-rk-tip-r i { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.pd-rk-tip-r span { min-width:0; overflow:hidden; text-overflow:ellipsis;
                    white-space:nowrap; }
.pd-rk-tip-r b { margin-left:auto; padding-left:10px; flex:0 0 auto;
                 font:600 11.5px/1 var(--an-mono); letter-spacing:-.02em; }
.pd-rk-tip-r b.is-gap { color:#9aa4ac; font-weight:500; }

/* ── the grid ── */
.pd-rk-box { border-top:1px solid var(--an-line); }
.pd-rk-wrap { overflow-x:auto; overscroll-behavior-x:contain;
              scrollbar-width:thin; scrollbar-color:var(--an-hair) transparent; }
.pd-rk-wrap::-webkit-scrollbar { height:9px; }
.pd-rk-wrap::-webkit-scrollbar-thumb { background:var(--an-hair); border-radius:99px; }
.pd-rk { border-collapse:separate; border-spacing:0;
         width:max-content; min-width:100%; }
.pd-rk th, .pd-rk td { border-bottom:1px solid var(--an-line); }
.pd-rk tbody tr { --row-bg:var(--an-surface); }
.pd-rk tbody tr:hover { --row-bg:var(--an-line-soft); }
.pd-rk tbody tr:last-child td { border-bottom:0; }

/* The frozen column. A 30-day window is 30 columns, and the one thing that must
   never leave the screen is the label saying whose rank you are reading. */
.pd-rk .pd-rk-h { position:sticky; left:0; z-index:2;
                  background:var(--row-bg,var(--an-surface));
                  width:250px; min-width:250px; max-width:250px;
                  text-align:left; padding:11px 14px 11px 24px;
                  transition:background .14s ease; }
.pd-rk thead .pd-rk-h { z-index:3; background:var(--an-surface);
                        font:600 10px/1.2 var(--an-sans); letter-spacing:.11em;
                        text-transform:uppercase; color:var(--an-faint);
                        padding-top:6px; padding-bottom:9px; }
/* The shadow only appears once there is something behind it: a cue for hidden
   content drawn over a table that is not hiding any is a lie about the scroll. */
.pd-rk .pd-rk-h::after { content:""; position:absolute; top:0; right:0; bottom:-1px;
                         width:20px; transform:translateX(100%); pointer-events:none;
                         background:linear-gradient(90deg,rgba(16,32,48,.13),
                                    rgba(16,32,48,.03) 45%,transparent);
                         opacity:0; transition:opacity .18s ease; }
.pd-rk-wrap.is-scrolled .pd-rk-h::after { opacity:1; }

.pd-rk-name { display:flex; align-items:center; gap:11px; min-width:0; }
.pd-rk-dot { flex:0 0 auto; width:9px; height:9px; border-radius:3px; }
.pd-rk-txt { min-width:0; }
.pd-rk-txt a { display:block; font:600 13px/1.3 var(--an-sans); color:var(--an-ink);
               overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-rk-txt a:hover { color:var(--an-link); }
.pd-rk-txt span { display:block; margin-top:2px;
                  font:500 10.5px/1.2 var(--an-mono); color:var(--an-faint); }

.pd-rk thead th { padding:6px 6px 9px; text-align:center; white-space:nowrap;
                  font:600 10.5px/1 var(--an-mono); letter-spacing:-.01em;
                  color:var(--an-faint); }
.pd-rk-d { display:block; padding:0 4px; }
.pd-rk-c { padding:9px 8px; text-align:center; vertical-align:middle;
           min-width:74px; white-space:nowrap;
           background:var(--row-bg,var(--an-surface)); transition:background .14s ease; }
.pd-rk-v { display:block; font:600 13px/1 var(--an-mono); letter-spacing:-.03em;
           font-variant-numeric:tabular-nums; color:var(--an-ink); }
.pd-rk-m { display:block; margin-top:3px;
           font:600 10px/1 var(--an-mono); letter-spacing:-.02em; }
.pd-rk-c.is-up .pd-rk-m { color:var(--an-up); }
.pd-rk-c.is-down .pd-rk-m { color:var(--an-down); }
.pd-rk-c.is-gap .pd-rk-v { color:var(--an-faintest); font-weight:500; }
.pd-rk-c.is-best .pd-rk-v { color:var(--an-link);
                            text-decoration:underline; text-decoration-color:var(--an-bar);
                            text-underline-offset:4px; text-decoration-thickness:2px; }
.pd-rk-foot { padding:11px 24px 16px; border-top:1px solid var(--an-line);
              font:400 11px/1.45 var(--an-sans); color:var(--an-faint); }

/* ── 4. the calculator ───────────────────────────────────────────────────────
   The extension's «Экономика» tab, on the page: inputs on the left, the verdict
   on the right. The blocks inside are hairline-separated rather than nested
   cards — a card inside a card inside the page's own frame is three borders
   deep, and by the third one the reader has stopped reading them as grouping.
   ═══════════════════════════════════════════════════════════════════════════ */
.pd-clcard { margin-bottom:14px; }
.pd-clhead { flex-wrap:wrap; align-items:baseline; }
.pd-cl-sub { flex:1 1 auto; }
.pd-cl-toggle { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
                padding:8px 14px; border-radius:var(--an-pill);
                border:1px solid var(--an-line); background:var(--an-surface);
                font:600 12.5px/1 var(--an-sans); color:var(--an-ink-2);
                cursor:pointer; transition:border-color .15s ease, color .15s ease; }
.pd-cl-toggle:hover { border-color:var(--an-hair); color:var(--an-ink); }
.pd-cl-toggle svg { width:11px; height:8px; flex:0 0 auto;
                    transition:transform .18s ease; }
.pd-cl-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
/* The link at the top of the page, set like «Открыть на Uzum» beside it. */
.pd-cl-jump { cursor:pointer; }

.pd-cl-body { padding:4px 24px 22px; }
.pd-cl-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
              gap:22px; align-items:start; }
.pd-cl-in { display:flex; flex-direction:column; }
.pd-cl-block { padding:16px 0; border-top:1px solid var(--an-line); }
.pd-cl-in > .pd-cl-block:first-child { border-top:0; padding-top:6px; }
.pd-cl-bh { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.pd-cl-bh h3 { margin:0; font:600 14px/1.2 var(--an-sans); color:var(--an-ink); }
.pd-cl-bh > :last-child:not(h3) { margin-left:auto; }
.pd-cl-mini { padding:5px 11px; border-radius:var(--an-pill);
              border:1px solid var(--an-line); background:var(--an-surface);
              font:600 11px/1 var(--an-sans); color:var(--an-muted); cursor:pointer; }
.pd-cl-mini:hover { border-color:var(--an-hair); color:var(--an-ink); }

.pd-cl-cat { display:flex; align-items:baseline; gap:10px; margin-bottom:12px;
             font:400 13px/1.35 var(--an-sans); }
.pd-cl-cat a { color:var(--an-link); }
.pd-cl-cat a:hover { text-decoration:underline; }
.pd-cl-na { color:var(--an-faintest); }

.pd-cl-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.pd-cl-row.is-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pd-cl-f { display:block; min-width:0; }
.pd-cl-f > .an-label { display:block; margin-bottom:6px; }
.pd-cl-hint { display:block; margin-top:5px;
              font:400 11px/1.35 var(--an-sans); color:var(--an-faint); }
/* The scheme sits in a field of its own above the two percentages it governs,
   and its hint ran straight into the «КОМИССИЯ UZUM» label under it — two
   lines of small type touching, one explaining the control above and one
   naming the control below, with nothing to say which was which. */
.pd-cl-f + .pd-cl-row { margin-top:14px; }
.pd-cl-hint.is-flag { color:var(--an-lost); }

.pd-cl-inp { display:flex; align-items:center; gap:6px; min-width:0;
             padding:0 12px; height:42px; border-radius:var(--an-r-xs);
             border:1px solid var(--an-line); background:var(--an-surface);
             transition:border-color .15s ease, box-shadow .15s ease; }
.pd-cl-inp:focus-within { border-color:var(--an-bar-line);
                          box-shadow:0 0 0 3px rgba(111,154,228,.16); }
.pd-cl-inp input { flex:1 1 auto; min-width:0; width:100%; border:0;
                   background:none; outline:none; padding:0;
                   font:600 15px/1 var(--an-mono); letter-spacing:-.02em;
                   font-variant-numeric:tabular-nums; color:var(--an-ink); }
.pd-cl-inp input::placeholder { font-weight:500; color:var(--an-faintest);
                                letter-spacing:0; font-size:13px; }
.pd-cl-inp i { flex:0 0 auto; font:500 11px/1 var(--an-sans); font-style:normal;
               color:var(--an-faint); }

.pd-cl-seg { display:inline-flex; gap:2px; padding:4px; border-radius:var(--an-r-xs);
             border:1px solid var(--an-line); background:var(--an-surface); }
.pd-cl-seg button { padding:7px 16px; border:0; border-radius:var(--an-r-2xs);
                    background:none; cursor:pointer;
                    font:600 12.5px/1 var(--an-sans); color:var(--an-faint); }
.pd-cl-seg button:hover:not(:disabled) { color:var(--an-ink); }
.pd-cl-seg button.on { background:var(--an-accent); color:#fff; }
.pd-cl-seg button:disabled { color:var(--an-sub); cursor:not-allowed;
                             text-decoration:line-through; }

.pd-cl-switch { display:inline-flex; align-items:center; gap:8px; border:0;
                background:none; padding:0; cursor:pointer;
                font:600 12px/1 var(--an-sans); color:var(--an-muted); }
.pd-cl-track { position:relative; width:34px; height:20px; border-radius:99px;
               background:var(--an-track); transition:background .18s ease; }
.pd-cl-track i { position:absolute; top:2px; left:2px; width:16px; height:16px;
                 border-radius:50%; background:var(--an-surface);
                 box-shadow:0 1px 3px rgba(16,32,48,.24);
                 transition:transform .18s ease; }
.pd-cl-switch[aria-pressed="true"] { color:var(--an-ink); }
.pd-cl-switch[aria-pressed="true"] .pd-cl-track { background:var(--an-accent); }
.pd-cl-switch[aria-pressed="true"] .pd-cl-track i { transform:translateX(14px); }

/* The fee, the volume it was billed at, and the arithmetic between them. A
   seller who cannot see «5 250 за первый литр + 250 × 56 л» has to take one
   number on trust — and this is the number Uzum takes out of the payout, so it
   is the one they will check against their own report. */
.pd-cl-readout { display:flex; flex-wrap:wrap; align-items:flex-end; gap:6px 22px;
                 margin-top:12px; padding:13px 16px; border-radius:var(--an-r-sm);
                 background:var(--an-line-soft); }
.pd-cl-readout.is-warn { background:var(--an-lost-soft); }
.pd-cl-cell { display:flex; flex-direction:column; gap:5px; }
.pd-cl-cell b { font:700 20px/1 var(--an-mono); letter-spacing:-.03em;
                color:var(--an-ink); }
.pd-cl-cell b span { margin-left:.35em; font:500 11px/1 var(--an-sans);
                     color:var(--an-faint); }
.pd-cl-rnote { flex:1 1 100%; font:400 11px/1.4 var(--an-sans); color:var(--an-muted); }
.pd-cl-readout.is-warn .pd-cl-rnote { color:var(--an-lost); }
.pd-cl-why { flex:1 1 100%; margin-top:-2px;
             font:600 11px/1.4 var(--an-sans); color:var(--an-lost); }
.pd-cl-note { margin:10px 0 0; font:400 11px/1.45 var(--an-sans); color:var(--an-faint); }

/* ── the verdict ── */
.pd-cl-out { position:sticky; top:14px; padding:20px; border-radius:var(--an-r);
             border:1px solid var(--an-line); background:var(--an-line-soft); }
.pd-cl-hero { text-align:left; }
.pd-cl-big { margin-top:8px; font:700 38px/1 var(--an-mono); letter-spacing:-.04em;
             color:var(--an-ink); }
.pd-cl-big .an-num { font-size:inherit; letter-spacing:inherit; }
.pd-cl-big .an-unit { font-size:14px; }
.pd-cl-big.is-empty { color:var(--an-faintest); }
.pd-cl-big.is-loss { color:var(--an-down); }
.pd-cl-foot { margin-top:7px; font:400 12px/1.35 var(--an-sans); color:var(--an-faint); }
.pd-cl-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
               gap:10px; margin-top:16px; }
.pd-cl-tile { display:flex; flex-direction:column; gap:6px; padding:12px 14px;
              border-radius:var(--an-r-sm); background:var(--an-surface);
              border:1px solid var(--an-line); }
.pd-cl-tile b { font:700 19px/1 var(--an-mono); letter-spacing:-.03em; }
.pd-cl-splith { display:block; margin:18px 0 8px; }

/* One bar of the full sale price. Only what actually costs something gets a
   slice: a 0-сум tax drawn at a 2px minimum reads as a rendering fault rather
   than as a zero, which is why the segments under 0.4% are dropped and not
   floored. */
.pd-cl-split { display:flex; gap:2px; height:12px; border-radius:99px;
               overflow:hidden; background:var(--an-track); }
.pd-cl-split i { display:block; height:100%; min-width:2px; border-radius:2px; }
.pd-cl-lines { display:flex; flex-direction:column; gap:2px; margin-top:14px; }
.pd-cl-line { display:flex; align-items:center; gap:9px; padding:5px 0;
              font:400 12.5px/1.3 var(--an-sans); color:var(--an-ink-2); }
.pd-cl-line i { width:8px; height:8px; border-radius:3px; flex:0 0 auto; }
.pd-cl-line b { margin-left:auto; padding-left:12px;
                font:600 12.5px/1 var(--an-mono); letter-spacing:-.02em;
                font-variant-numeric:tabular-nums; color:var(--an-ink); }
.pd-cl-line.is-zero { color:var(--an-faintest); }
.pd-cl-line.is-zero b { color:var(--an-faintest); font-weight:500; }
.pd-cl-line.is-total { margin-top:6px; padding-top:11px;
                       border-top:1px solid var(--an-hair); font-weight:600; }
.pd-cl-line.is-total b { font-size:14px; }

/* ── 5. «Похожие товары» ─────────────────────────────────────────────────────
   Uzum's own shelf with our figures under it. The card is the shop grid's card
   plus the block the extension paints on uzum.uz itself — two tiles, the days,
   then the facts — because a seller with both open should not have to re-learn
   the layout to read the same five numbers.

   The track list is explicit rather than auto-fill for the reason the shop
   grid's is: the card is a fixed composition and below ~185px its two tiles
   collide, so the exact width where that happens has to be a decision. */
.pd-simcard { --pd-cols:6; margin-bottom:14px; }
.pd-simbody { min-height:60px; }
.pd-sim-grid { display:grid; grid-template-columns:repeat(var(--pd-cols),minmax(0,1fr));
               gap:12px; padding:4px 24px 4px; }
.pd-sim { display:flex; flex-direction:column; min-width:0;
          background:var(--an-surface); border:1px solid var(--an-line);
          border-radius:var(--an-r-sm); overflow:hidden;
          transition:border-color .14s ease, transform .14s ease; }
.pd-sim:hover { border-color:var(--an-hair); transform:translateY(-2px); }
.pd-sim-shot { position:relative; display:block; aspect-ratio:3/4; overflow:hidden;
               background:var(--an-line-soft); }
.pd-sim-shot img { width:100%; height:100%; object-fit:cover; display:block; }
.pd-sim-noshot { position:absolute; inset:0; display:flex; align-items:center;
                 justify-content:center; color:var(--an-faintest); font-size:11px; }
.pd-sim-body { display:flex; flex-direction:column; gap:7px; padding:9px 10px 10px;
               min-width:0; }
/* Two lines and then an ellipsis. A shelf whose cards are different heights
   because one seller wrote a longer title is a shelf that reads as broken. */
.pd-sim-title { font:400 12px/1.32 var(--an-sans); color:var(--an-ink);
                display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
                overflow:hidden; min-height:calc(2 * 1.32em); }
/* The rule that used to carry «Статистика за N дней» — the hairline still
   separates the seller's title from our figures, which is the half of that
   heading that was doing work. */
.pd-sim-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px;
                padding-top:8px; border-top:1px solid var(--an-line-soft); }
.pd-sim-tile { display:flex; flex-direction:column; gap:3px; min-width:0;
               padding:6px 7px; border:1px solid var(--an-line);
               border-radius:var(--an-r-2xs); }
.pd-sim-tile b { font:700 13px/1 var(--an-mono); color:var(--an-ink);
                 letter-spacing:-.02em; white-space:nowrap; overflow:hidden;
                 text-overflow:ellipsis; }
.pd-sim-tile .an-unit { font:500 9px/1 var(--an-sans); font-style:normal;
                        color:var(--an-faint); margin-left:.3em; }
/* A figure we hold no data for recedes; it is not a zero and must not read as
   one. Same rule as the panel's em dash. */
/* «н/д» / «ma'lumot yo'q» — a word standing in for a number, so it is set like
   a word. It would otherwise inherit the mono face, which is Latin-only.
   `!important` for the same reason the colour beside it needs one: the rule
   that wins here is `.pd-sim-row b` further down the file, and a descendant
   selector outranks this class however it is written short of moving it. */
.pd-sim-na { color:var(--an-faintest) !important;
             font-family:var(--an-sans) !important; }

.pd-sim-chart { display:flex; flex-direction:column; gap:4px; }
.pd-sim-bars { display:flex; align-items:flex-end; gap:2px; height:26px; }
.pd-sim-bar { flex:1 1 0; min-width:0; height:100%; display:flex;
              align-items:flex-end; }
.pd-sim-bar i { display:block; width:100%; min-height:2px; border-radius:2px 2px 0 0;
                background:var(--an-bar); }
/* A day with no sale still draws its slot, as a hairline on the baseline. An
   absent bar and a zero bar look identical, and one of them is a fact. */
.pd-sim-bar i.z { background:var(--an-track); min-height:2px; }
.pd-sim-axis { display:flex; justify-content:space-between;
               font:400 9px/1 var(--an-mono); color:var(--an-hair); }

.pd-sim-rows { display:flex; flex-direction:column; gap:3px; }
.pd-sim-row { display:flex; align-items:baseline; justify-content:space-between;
              gap:8px; font:400 10.5px/1.4 var(--an-sans); color:var(--an-faint);
              min-width:0; }
.pd-sim-row b { font:600 11px/1.4 var(--an-mono); color:var(--an-ink-2);
                min-width:0; overflow:hidden; text-overflow:ellipsis;
                white-space:nowrap; }
.pd-sim-txt { font-family:var(--an-sans) !important; font-weight:550 !important; }
.pd-sim-note { padding:12px 24px 20px; margin:0;
               font:400 11px/1.55 var(--an-sans); color:var(--an-faint);
               text-wrap:pretty; }
/* While Uzum's real shelf is on its way. The category's own leaders are
   already drawn underneath, so this is a state, not a spinner over nothing. */
.pd-simbody[data-loading] { opacity:.45; transition:opacity .2s ease; }

/* ── the ladder ──────────────────────────────────────────────────────────── */
@media (min-width:2100px) { .pd-simcard { --pd-cols:8; } }
@media (min-width:1660px) and (max-width:2099px) { .pd-simcard { --pd-cols:7; } }
@media (max-width:1400px) {
  .pd-simcard { --pd-cols:5; }
  .pd-hero { grid-template-columns:300px minmax(0,1fr); }
}
@media (max-width:1180px) {
  .pd-mid { grid-template-columns:minmax(0,1fr); }
  .pd-scroll { max-height:380px; }
  .pd-simcard { --pd-cols:4; }
  /* The verdict stops being a column and becomes the foot of the form. It
     needs ~300px beside inputs that need ~420px, and below that the two
     starve each other rather than sharing. */
  .pd-cl-grid { grid-template-columns:minmax(0,1fr); gap:18px; }
  .pd-cl-out { position:static; }
}
@media (max-width:900px) {
  /* The photo stops being a column. Below this the tiles get 3 x 160px if it
     stays, and «1,50 млрд сум» does not fit 160px. */
  .pd-hero { grid-template-columns:minmax(0,1fr); }
  .pd-shotcard { max-width:320px; }
  .pd-name { font-size:23px; }
  .pd-simcard { --pd-cols:3; }
  /* Nothing to be level with any more: the photograph is above the column, not
     beside it, so the chart takes a stated height instead of the slack. */
  .pd-daycard { flex:0 0 auto; min-height:0; }
  .pd-day-body .an-plot { height:170px; }
  /* 250px of frozen column out of a 900px screen is more than a quarter of it
     spent on a label. */
  .pd-rk .pd-rk-h { width:186px; min-width:186px; max-width:186px; }
  /* ...and once it is narrowed, the name WRAPS rather than ellipsing. Measured
     at 320px the single line showed «Спортивные…» — ten characters of a name
     that is the row's whole identity, on a table whose left column exists to
     say whose rank you are reading. Two short lines say it; one truncated line
     makes every row starting with the same word look like the same row. */
  .pd-rk-txt a { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
                 white-space:normal; line-height:1.25; }
}
@media (max-width:700px) {
  .pd-scroll { padding-left:14px; padding-right:14px; }
  .pd-sim-grid { padding-left:14px; padding-right:14px; gap:10px; }
  .pd-note, .pd-sim-note { padding-left:16px; padding-right:16px; }
  .pd-day-body { padding-left:16px; padding-right:16px; }
  .pd-day-body .an-plot { height:150px; }
  .pd-rk-pad, .pd-cl-body { padding-left:16px; padding-right:16px; }
  .pd-rk-foot { padding-left:16px; padding-right:16px; }
  .pd-rk .pd-rk-h { padding-left:16px; }
  .pd-rk-sk { height:150px; }
  .pd-cl-big { font-size:32px; }
}
/* Below this the card TURNS. The shop grid keeps two cards per row at 320px
   and is right to - its card carries two figures and a photograph. This one
   carries eight, and measured at 320px the two-across version cut «Средняя
   цена 245 333» to «245…» on every card: a number truncated mid-digit is worse
   than a number absent, because it still looks like a number.

   Sideways, the photograph is 84px and the whole 163px that buys goes to the
   figures, which all fit. Twelve of these is a phone-shaped list rather than a
   grid, which is what a shelf is on a phone anyway. */
@media (max-width:620px) {
  .pd-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pd-simcard { --pd-cols:1; }
  .pd-name { font-size:21px; }
  .pd-shotcard { max-width:none; }
  .pd-sim { flex-direction:row; }
  .pd-sim-shot { flex:0 0 84px; width:84px; align-self:flex-start; }
  .pd-sim-body { flex:1 1 auto; }
  /* Room for a third line here: the row is short and the title is the one
     thing on it a reader identifies the product by. */
  .pd-sim-title { -webkit-line-clamp:3; min-height:0; }
}
@media (max-width:460px) {
  .pd-tiles { gap:8px; }
  .pd-tiles .an-metric { padding:12px 13px; }
  .pd-tiles .an-num { font-size:21px; }
  .pd-sim-grid { gap:8px; }
  .pd-sim-body { padding:8px; gap:6px; }
  .pd-sim-tiles { gap:5px; }
  .pd-sim-tile { padding:5px 6px; }
  .pd-tbl { font-size:12px; }
  /* Two fields per row, not three: at 460px a «Ширина» placeholder in a third
     of the width renders as «Шир…», and a field whose own label is truncated
     is a field nobody fills in correctly. */
  .pd-cl-row, .pd-cl-row.is-3 { grid-template-columns:minmax(0,1fr); }
  .pd-cl-out { padding:16px; }
  .pd-cl-readout { padding:11px 13px; }
  .pd-rk .pd-rk-h { width:150px; min-width:150px; max-width:150px; }
  .pd-rk-c { min-width:62px; padding:8px 6px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   The account menu, and the subscription page behind it.

   Added when ATLLAS gained real accounts. Until then the top bar's only
   authenticated control was a "Выйти" link, which told a seller nothing about
   WHICH account they were in — and with one identity shared across two products
   that is the first question they ask. The menu answers it before it offers a
   single action: the name and the number are the top of the sheet, not a
   footnote under it.
   ═══════════════════════════════════════════════════════════════════════════ */
.sh-acct { position:relative; }
.sh-acct-btn { display:inline-flex; align-items:center; gap:.45rem;
               background:var(--an-surface); border:1px solid var(--an-line);
               border-radius:var(--an-pill); padding:.22rem .6rem .22rem .22rem;
               font:inherit; font-size:.82rem; font-weight:600;
               color:var(--an-ink); cursor:pointer; }
.sh-acct-btn:hover { border-color:var(--an-hair); }
.sh-acct-btn[aria-expanded="true"] { border-color:var(--an-cal-on);
                                     box-shadow:0 0 0 3px var(--an-cal-band); }
/* The initials disc. Not a photo: there is no avatar anywhere in either
   product, and a grey silhouette would be a placeholder for a feature that
   does not exist. */
.sh-av { flex:none; width:26px; height:26px; border-radius:50%;
         background:var(--an-cal-on); color:#fff; font-size:.68rem;
         font-weight:700; letter-spacing:.02em;
         display:flex; align-items:center; justify-content:center; }
.sh-acct-chev { flex:none; width:12px; height:12px; color:var(--an-faint); }

.sh-acct-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:60;
                min-width:240px; background:var(--an-surface);
                border:1px solid var(--an-line); border-radius:14px;
                box-shadow:0 18px 40px -20px rgba(18,24,28,.35),
                           0 2px 6px -2px rgba(18,24,28,.08);
                padding:.5rem; }
.sh-acct-menu[hidden] { display:none; }
.sh-acct-head { display:flex; align-items:center; gap:.6rem;
                padding:.5rem .55rem .7rem; }
.sh-acct-head .sh-av { width:36px; height:36px; font-size:.82rem; }
.sh-acct-name { font-weight:700; font-size:.9rem; line-height:1.25;
                word-break:break-word; }
.sh-acct-phone { font-size:.78rem; color:var(--an-faint);
                 font-family:var(--an-mono); }
.sh-acct-sep { height:1px; background:var(--an-line); margin:.15rem .3rem; }
.sh-acct-menu a { display:flex; align-items:center; gap:.6rem;
                  padding:.5rem .55rem; border-radius:9px; font-size:.85rem;
                  color:var(--an-ink-2); text-decoration:none; }
.sh-acct-menu a:hover { background:var(--an-line-soft); color:var(--an-ink); }
.sh-acct-menu a svg { flex:none; width:16px; height:16px; }
.sh-acct-menu a.is-out { color:var(--an-down); }
.sh-acct-menu a.is-out:hover { background:var(--an-down-soft); }
/* The depth the seller is entitled to, right in the menu. It is the single
   number that decides what every page shows them, so it belongs where they
   look when a chart is shorter than they expected. */
.sh-acct-depth { margin-left:auto; font-size:.72rem; font-weight:700;
                 font-family:var(--an-mono);
                 color:var(--an-muted); background:var(--an-line-soft);
                 border-radius:6px; padding:.1rem .35rem; }

@media (max-width:640px) {
  .sh-acct-btn span.sh-acct-label { display:none; }
  .sh-acct-btn { padding:.22rem; }
  .sh-acct-chev { display:none; }
  .sh-acct-menu { min-width:0; width:min(84vw, 260px); }
  /* The bar wraps at this width and the account disc was landing ALONE on a
     third line, which reads as a layout fault rather than a control. The two
     destinations take a row of their own instead, leaving the brand, the
     language switcher and the account — all three of them chrome about who is
     reading rather than places to go — together on the first. */
  .sh-links { order:2; flex:1 0 100%; margin-right:0; }
  .sh-lang { margin-left:auto; }
  /* The byline is what makes room for the account disc on the first row.
     Losing it is the cheapest thing here: the wordmark still identifies the
     product, and the account control cannot be dropped or moved. */
  .sh-brand span { display:none; }
}

/* ── /subscription ──────────────────────────────────────────────────────── */
.sb-wrap { max-width:1180px; margin:0 auto; }
/* The overview strip. FIXED columns, not auto-fit: these five facts are one
   row that reads left to right, and a wrapping grid reorders them silently
   depending on how long the seller's tier name happens to be. */
.sb-strip { display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
            gap:12px; margin:0 0 2rem; }
@media (max-width:900px) { .sb-strip { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px) { .sb-strip { grid-template-columns:minmax(0,1fr); } }
.sb-tile { background:var(--an-surface); border:1px solid var(--an-line);
           border-radius:14px; padding:14px 16px; }
.sb-tile .k { font-size:.66rem; font-weight:700; letter-spacing:.09em;
              text-transform:uppercase; color:var(--an-faintest);
              margin-bottom:.45rem; }
.sb-tile .v { font-size:1.05rem; font-weight:700; letter-spacing:-.02em;
              line-height:1.2; }
.sb-tile .v em { font-style:normal; font-family:var(--an-mono); }
.sb-tile .s { font-size:.74rem; color:var(--an-faint); margin-top:.3rem;
              line-height:1.35; }

.sb-step { font-size:.66rem; font-weight:700; letter-spacing:.09em;
           text-transform:uppercase; color:var(--an-faintest);
           margin-bottom:.35rem; }
.sb-h2 { font-size:1.35rem; font-weight:700; letter-spacing:-.03em;
         margin:0 0 1.1rem; }

/* `auto-fit`, not a hardcoded 3: the number of plans on offer is a business
   fact that changes (the 90-day card is withheld while the history is too
   short to fill it — identity_routes.PLANS). A fixed three-column track left
   the withdrawn card's column standing as a gap, which reads as a card that
   failed to load. auto-fit collapses the empty track instead, so two plans set
   as two halves and three set as three thirds with nothing to change here. */
.sb-plans { display:grid;
            grid-template-columns:repeat(auto-fit, minmax(min(100%,260px),1fr));
            gap:14px; margin-bottom:2.4rem; }
@media (max-width:860px) { .sb-plans { grid-template-columns:minmax(0,1fr); } }
.sb-plan { background:var(--an-surface); border:1px solid var(--an-line);
           border-radius:18px; padding:20px; position:relative;
           display:flex; flex-direction:column; }
/* The plan the seller already holds. A 2px ring rather than a fill: the card
   still has to be readable, and a tinted plan card reads as "unavailable". */
.sb-plan.is-mine { border-color:var(--an-cal-on); box-shadow:0 0 0 1px var(--an-cal-on); }
.sb-plan-top { display:flex; align-items:flex-start; justify-content:space-between;
               gap:.6rem; margin-bottom:.9rem; }
.sb-plan-name { font-size:1rem; font-weight:700; }
.sb-badge { font-size:.68rem; font-weight:700; color:var(--an-up);
            background:var(--an-up-soft); border-radius:var(--an-pill);
            padding:.2rem .55rem; white-space:nowrap; }
.sb-price { display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap;
            margin-bottom:1rem; }
.sb-price b { font-size:1.7rem; font-weight:700; letter-spacing:-.03em;
              font-family:var(--an-mono); }
.sb-price span { font-size:.78rem; color:var(--an-muted); }
.sb-feats { list-style:none; margin:0; padding:0; display:flex;
            flex-direction:column; gap:.55rem; font-size:.85rem;
            color:var(--an-ink-2); }
.sb-feats li { display:flex; gap:.5rem; align-items:flex-start; line-height:1.4; }
.sb-feats svg { flex:none; width:15px; height:15px; margin-top:.15rem;
                color:var(--an-cal-on); }
.sb-feats b { color:var(--an-ink); font-weight:600; }

.sb-code { background:var(--an-surface); border:1px solid var(--an-line);
           border-radius:18px; padding:20px; max-width:560px; }
.sb-code p { font-size:.84rem; color:var(--an-muted); line-height:1.5;
             margin:0 0 1rem; }
.sb-code-row { display:flex; gap:8px; flex-wrap:wrap; }
.sb-code-row input { flex:1; min-width:180px; border:1px solid var(--an-line);
                     border-radius:11px; padding:.7rem .85rem; font:inherit;
                     font-family:var(--an-mono);
                     text-transform:uppercase; background:var(--an-surface); }
.sb-code-row input:focus { outline:none; border-color:var(--an-cal-on);
                           box-shadow:0 0 0 3px var(--an-cal-band); }
.sb-code-row button { border:0; border-radius:11px; padding:.7rem 1.2rem;
                      font:inherit; font-weight:600; cursor:pointer;
                      background:var(--an-ink); color:#fff; }
.sb-code-row button:hover { background:#000; }
.sb-result { border-radius:11px; padding:.6rem .8rem; font-size:.84rem;
             margin-bottom:1rem; line-height:1.4; }
.sb-result.ok { background:var(--an-up-soft); color:var(--an-up); }
.sb-result.no { background:var(--an-down-soft); color:var(--an-down); }
.sb-foot { font-size:.78rem; color:var(--an-faint); margin-top:1rem; }