/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/app/mpv.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   MP VISION — design system
   Dark (default) + light theme via [data-theme="light"]
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* Belarusian ruble sign (new official sign, NB RB 2026-01-27). No Unicode codepoint
   yet, so a single-glyph webfont maps U+E900 → the sign. Added last in every font
   stack: only U+E900 falls through to it, all other chars use Manrope. money()
   emits U+E900 for BYN cabinets. */
@font-face {
  font-family: 'BYNSign';
  font-style: normal;
  font-weight: 400 900;
  font-display: block;
  src: url('data:font/woff2;base64,d09GMgABAAAAAAFgAAoAAAAAArwAAAEZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAPApYZwE2AiQDDAsIAAQgBWAHLBsUAgCeBe7ejmgnAvsT4UsYbQTVWvbM/geAZcojGBX3IEwkCI9SnDMBcqzP2nmU2bDYJu2fmBiUQZ/SD8r2k2kGG3CCKzxI8kB6fsUoQthO90QDgfEkwWzWpV0gOMwGGmCCgdww81AOUR6/vKjkdjxwGkxjDI6Fce1TWat31K6BRMGUIjClYR09GkJa+1TX1On6USkAUEAPzLEIGgvQ02AfHGwOGI6hlOgMloGuDm+tCo042vRTGdh3dQcgEFxs/LLlD/77onzAW75uyH73uoLsZgWKBGH546wkL/cEAKDkOcTD1D0GxZwekAAAaNgSIPQiQOrVq4hGvzBipCf70hl0E+Yfp36BqCLFwkQ2sWsbDiu14lNk6V4LAA==') format('woff2');
}

.mpv,
.mpv * {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mpv {
  /* ---- DARK (default) ---- */
  --bg: #0b0a1b;
  --bg-grad: radial-gradient(125% 75% at 50% -12%, #1c1538 0%, #100d24 42%, #0b0a1b 100%);
  --surface: #171533;
  --surface-2: #201d40;
  --surface-3: #2a2650;
  --chip: rgba(255,255,255,0.05);
  --border: rgba(255,255,255,0.075);
  --border-strong: rgba(255,255,255,0.14);

  --text: #f3f1ff;
  --text-dim: #a8a3cc;
  --text-faint: #6e6a96;

  --primary: #7c5cff;
  --primary-2: #a07bff;
  --primary-ink: #ffffff;
  --primary-soft: rgba(124,92,255,0.16);
  --primary-line: rgba(124,92,255,0.4);

  --wb-a: #b14bff;
  --wb-b: #e0479f;
  --ozon-a: #1f6dff;
  --ozon-b: #3f8cff;

  --pos: #3fd98b;
  --pos-soft: rgba(63,217,139,0.14);
  --neg: #ff6b6b;
  --neg-soft: rgba(255,107,107,0.14);
  --warn: #ffb23e;
  --warn-soft: rgba(255,178,62,0.14);

  --chart: #8b6cff;
  --chart-2: #45c7ff;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 30px rgba(0,0,0,0.35);
  --shadow-pop: 0 18px 50px rgba(0,0,0,0.5);

  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 13px;

  font-family: 'Manrope', -apple-system, system-ui, sans-serif, 'BYNSign';
  color: var(--text);
  background: var(--bg);
}

.mpv[data-theme="light"] {
  --bg: #f3f1fb;
  --bg-grad: radial-gradient(125% 75% at 50% -12%, #efeaff 0%, #f4f2fc 46%, #f0eef9 100%);
  --surface: #ffffff;
  --surface-2: #f7f5fe;
  --surface-3: #efeafc;
  --chip: rgba(20,16,45,0.04);
  --border: rgba(20,16,45,0.08);
  --border-strong: rgba(20,16,45,0.13);

  --text: #161329;
  --text-dim: #6b6788;
  --text-faint: #9d99b8;

  --primary: #6d4bff;
  --primary-2: #8b6bff;
  --primary-ink: #ffffff;
  --primary-soft: rgba(109,75,255,0.10);
  --primary-line: rgba(109,75,255,0.32);

  --wb-a: #9a2bff;
  --wb-b: #e0479f;
  --ozon-a: #005bff;
  --ozon-b: #2f7bff;

  --pos: #16a35f;
  --pos-soft: rgba(22,163,95,0.12);
  --neg: #e24848;
  --neg-soft: rgba(226,72,72,0.10);
  --warn: #e08a0e;
  --warn-soft: rgba(224,138,14,0.12);

  --chart: #7c5cff;
  --chart-2: #1f8dff;
  --shadow-card: 0 1px 2px rgba(20,16,45,0.04), 0 10px 26px rgba(60,40,120,0.07);
  --shadow-pop: 0 22px 60px rgba(50,30,110,0.18);
}

/* ---------- screen shell ---------- */
.mpv-screen {
  position: absolute;
  inset: 0;
  padding-top: 50px;
  display: flex;
  flex-direction: column;
  background: var(--bg-grad);
  color: var(--text);
  overflow: hidden;
}
.mpv-scroll {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 112px;
}
.mpv-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- header ---------- */
.mpv-head {
  padding: 6px 16px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.mpv-head h1 {
  margin: 0;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.05;
}
.mpv-head .sub {
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mpv-head-actions { display: flex; gap: 8px; align-items: center; }

.mpv-iconbtn {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s, transform .1s;
}
.mpv-iconbtn:active { transform: scale(0.94); }
.mpv-iconbtn.solid { background: var(--primary); color: var(--primary-ink); border-color: transparent; }

.mpv-back {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; flex-shrink: 0;
}
.mpv-back:active { transform: scale(0.94); }

/* ---------- cards ---------- */
.mpv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.mpv-card.pad { padding: 16px; }
.mpv-card.tap { cursor: pointer; transition: transform .12s, border-color .15s; }
.mpv-card.tap:active { transform: scale(0.985); border-color: var(--border-strong); }

/* ---------- segmented marketplace toggle ---------- */
.mpv-seg {
  display: flex; gap: 6px; align-items: center;
  overflow-x: auto; padding-bottom: 2px;
}
.mpv-seg::-webkit-scrollbar { display: none; }
.mpv-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13.5px; font-weight: 700;
  white-space: nowrap; cursor: pointer; flex-shrink: 0;
  transition: all .15s;
}
.mpv-chip.active { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.mpv-chip .dot { width: 7px; height: 7px; border-radius: 50%; }

/* marketplace badge squares */
.mpv-mp {
  width: 19px; height: 19px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
}
.mpv-mp.wb { background: linear-gradient(135deg, var(--wb-a), var(--wb-b)); }
.mpv-mp.ozon { background: linear-gradient(135deg, var(--ozon-a), var(--ozon-b)); }
.mpv-mp.lg { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }

/* ---------- sub tabs (text underline) ---------- */
.mpv-subtabs {
  display: flex; gap: 22px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.mpv-subtab {
  padding: 10px 0 11px;
  font-size: 15px; font-weight: 700;
  color: var(--text-faint);
  position: relative; cursor: pointer;
  white-space: nowrap;
  transition: color .15s;
}
.mpv-subtab.active { color: var(--text); }
.mpv-subtab.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2.5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
}

/* pill tabs (filled) */
.mpv-pilltabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 13px; border: 1px solid var(--border); }
.mpv-pilltab {
  padding: 7px 16px; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; color: var(--text-dim);
  cursor: pointer; white-space: nowrap; transition: all .15s;
}
.mpv-pilltab.active { color: var(--primary-ink); background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 4px 14px rgba(124,92,255,0.35); }

/* ---------- deltas ---------- */
.mpv-delta { font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 2px; }
.mpv-delta.pos { color: var(--pos); }
.mpv-delta.neg { color: var(--neg); }
.mpv-delta.pill { padding: 3px 8px; border-radius: 8px; font-size: 12.5px; }
.mpv-delta.pill.pos { background: var(--pos-soft); }
.mpv-delta.pill.neg { background: var(--neg-soft); }

/* ---------- numbers ---------- */
.mpv-num { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; letter-spacing: -0.4px; }
.mpv-big { font-size: 33px; font-weight: 800; letter-spacing: -1.2px; }
.mpv-lbl { font-size: 12.5px; font-weight: 700; color: var(--text-dim); letter-spacing: 0.1px; }
.mpv-lbl-up { text-transform: uppercase; letter-spacing: 0.6px; font-size: 11px; color: var(--text-faint); font-weight: 700; }

/* ---------- buttons ---------- */
.mpv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 18px; border-radius: 12px;
  font-size: 14px; font-weight: 700; cursor: pointer; border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: var(--primary-ink);
  box-shadow: 0 6px 18px rgba(124,92,255,0.3);
  transition: transform .1s, filter .15s;
}
.mpv-btn:active { transform: scale(0.97); }
.mpv-btn.ghost {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  box-shadow: none;
}
.mpv-btn.sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.mpv-btn.block { display: flex; width: 100%; }

/* ---------- list rows ---------- */
.mpv-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; }
.mpv-row + .mpv-row { border-top: 1px solid var(--border); }
.mpv-row .thumb {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  overflow: hidden; position: relative;
}
.mpv-chev { color: var(--text-faint); flex-shrink: 0; }

/* score badge ring */
.mpv-score {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800;
}

/* ---------- icon tile ---------- */
.mpv-tile {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.mpv-tile.primary { background: var(--primary-soft); color: var(--primary-2); }
.mpv-tile.pos { background: var(--pos-soft); color: var(--pos); }
.mpv-tile.neg { background: var(--neg-soft); color: var(--neg); }
.mpv-tile.warn { background: var(--warn-soft); color: var(--warn); }

/* ---------- placeholder image (striped) ---------- */
.mpv-ph {
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(45deg, var(--surface-3) 0 7px, transparent 7px 14px);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- bottom tab bar ---------- */
.mpv-tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 40;
  height: 84px;
  padding: 9px 10px 26px;
  display: flex; align-items: flex-start; justify-content: space-around;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-top: 1px solid var(--border);
}
.mpv-tab {
  flex: 1 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--text-faint); cursor: pointer;
  font-size: 10.5px; font-weight: 700;
  transition: color .15s;
}
.mpv-tab.active { color: var(--primary-2); }

/* ---------- AI banner ---------- */
.mpv-ai {
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(160,123,255,0.28), transparent 55%),
    linear-gradient(135deg, rgba(124,92,255,0.16), rgba(69,199,255,0.08));
  border: 1px solid var(--primary-line);
  padding: 15px;
}

/* generic divider list */
.mpv-divider { height: 1px; background: var(--border); }

/* small helper */
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.stack { display: flex; flex-direction: column; }

/* ===== desktop layout ===== */
/* MP VISION — desktop web cabinet layout */

.dt-body { background: #07060f; }
.mpv[data-theme="light"] .dt-body { background: #eef0f6; }

.dt-app {
  display: grid;
  grid-template-columns: 256px 1fr;
  min-height: 100vh;
  background: var(--bg-grad);
  color: var(--text);
}

/* ───── sidebar ───── */
.dt-side {
  position: -webkit-sticky;
  position: sticky; top: 0; align-self: start;
  height: 100vh;
  display: flex; flex-direction: column;
  padding: 22px 16px;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 35%, transparent);
}
.dt-logo { display: flex; align-items: center; gap: 11px; padding: 4px 8px 22px; }
.dt-logo .mark { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; }
.dt-logo b { font-size: 16px; font-weight: 800; letter-spacing: 1.2px; }

.dt-navgrp { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-faint); padding: 14px 10px 7px; }
.dt-nav {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 11px;
  color: var(--text-dim); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .14s; position: relative;
}
.dt-nav:hover { background: var(--chip); color: var(--text); }
.dt-nav.active { background: var(--primary-soft); color: var(--primary-2); font-weight: 700; }
.dt-nav.active::before { content: ''; position: absolute; left: -16px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: linear-gradient(var(--primary), var(--primary-2)); }
.dt-nav .badge { margin-left: auto; font-size: 10.5px; font-weight: 800; background: var(--neg); color: #fff; border-radius: 8px; padding: 1px 7px; }

.dt-side-foot { margin-top: auto; }
.dt-acct { display: flex; align-items: center; gap: 11px; padding: 11px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface); }
.dt-acct .av { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 13px; }

/* ───── topbar ───── */
.dt-main { display: flex; flex-direction: column; min-width: 0; }
.dt-topbar {
  position: -webkit-sticky;
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
          backdrop-filter: blur(18px) saturate(150%);
}
.dt-topbar h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.dt-topbar .crumb { font-size: 12.5px; color: var(--text-faint); font-weight: 600; margin-top: 2px; }
.dt-spacer { flex: 1 1; }

.dt-search { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); width: 260px; color: var(--text-faint); }
.dt-search input { flex: 1 1; background: none; border: none; outline: none; color: var(--text); font-size: 13.5px; font-weight: 600; font-family: inherit; }

.dt-cab { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 13px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; font-weight: 700; cursor: pointer; }

/* ───── content ───── */
.dt-content { padding: 24px 28px 44px; }
.dt-grid { display: grid; grid-gap: 16px; gap: 16px; }
.dt-kpis { grid-template-columns: repeat(4, 1fr); }
.dt-2col { grid-template-columns: 1.62fr 1fr; }
.dt-3col { grid-template-columns: repeat(3, 1fr); }

.dt-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-card); }
.dt-card.pad { padding: 20px; }

.dt-kpi { padding: 18px; display: flex; flex-direction: column; gap: 0; }
.dt-kpi .top { display: flex; align-items: center; justify-content: space-between; }
.dt-kpi .ico { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.dt-kpi .val { font-size: 27px; font-weight: 800; letter-spacing: -1px; margin-top: 14px; }
.dt-kpi .lbl { font-size: 13px; font-weight: 700; color: var(--text-dim); margin-top: 2px; }

.dt-secthead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dt-secthead .ttl { font-size: 16.5px; font-weight: 800; letter-spacing: -0.3px; }

/* table */
.dt-table { width: 100%; border-collapse: collapse; }
.dt-table th { text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); padding: 0 12px 12px; }
.dt-table th.r, .dt-table td.r { text-align: right; }
.dt-table td { padding: 12px; border-top: 1px solid var(--border); font-size: 13.5px; font-weight: 600; }
.dt-table tr.row:hover td { background: var(--chip); }
.dt-table tr.row { cursor: pointer; }

.dt-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--text-dim); cursor: pointer; }
.dt-pill.active { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }

.dt-rec { display: flex; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
.dt-rec + .dt-rec { margin-top: 10px; }

.dt-iconbtn { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; position: relative; }
.dt-iconbtn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--neg); border: 2px solid var(--surface); }

@media (max-width: 1180px) {
  .dt-kpis { grid-template-columns: repeat(2, 1fr); }
  .dt-2col, .dt-3col { grid-template-columns: 1fr; }
  .dt-search { width: 180px; }
}
@media (max-width: 920px) {
  .dt-app { grid-template-columns: 1fr; }
  .dt-side { display: none; }
}

/* ===== global resets for Next.js integration ===== */
html, body { margin: 0; padding: 0; min-height: 100vh; }
body { font-family: 'Manrope', -apple-system, system-ui, sans-serif, 'BYNSign'; background: #07060f; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
input, button { font-family: inherit; }

/* full-page shell wrapper carries the .mpv tokens */
.mpv.dt-app { min-height: 100vh; }

/* auth pages (login/register) centered on the gradient */
.mpv-auth {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-grad); padding: 24px;
}
.mpv-auth-card {
  width: 100%; max-width: 380px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: 28px;
}
.mpv-input {
  width: 100%; height: 44px; padding: 0 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-size: 14px; font-weight: 600; outline: none;
}
.mpv-input:focus { border-color: var(--primary-line); }
.mpv-input::placeholder { color: var(--text-faint); }

/* empty / loading states */
.dt-empty { padding: 48px 24px; text-align: center; color: var(--text-faint); font-weight: 600; }
.dt-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 8px; }

/* spinner for in-progress sync */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }