/* AURUM HUB — фирменный стиль «☉» (Босс, 14.10.2026: «выкатывай, шрифты оставь, графики
   переработай, на фон — узоры-линии»). Слой поверх style.css: цвета, знак, узоры, столбики.
   Разметка и шрифты прежние. Откат — убрать <link> на этот файл в base.html и me_base.html.
   Холст: https://claude.ai/artifact/HK1Tm5AmxwKKzH5Bw9Pio3 */

/* ---------------------------------------------------------------- цвета */
:root {
  --bg: #F1F0F7; --soft: #F3F2F8; --ink: #15141C; --ink2: #55546A; --ink3: #8C8B9C;
  --line: #ECEBF3; --edge: #E2E1EC; --track: #E7E6F0; --hover: #ECEBF4; --hair: #C9C8D8;
  --key-line: #C9C8D8;
  --mark-ring: #4F46E5; --mark-core: #2A2380;
  --bar-t-top: #4F46E5; --bar-t-bottom: #A9A3FF;
  --bar-p-top: #0E8A5F; --bar-p-bottom: #8EDDB9;
  --bar-s-top: #D6453F; --bar-s-bottom: #F3AAA6;
  --bar-line: rgba(255, 255, 255, .2);
  --bar-t-cap: #2A2380; --bar-p-cap: #07573C; --bar-s-cap: #9E2620;
  --bar-pale-t: rgba(79, 70, 229, .3); --bar-pale-p: rgba(14, 138, 95, .3);
  --page-lines: url("../brand/bg-rings-light.svg"); --page-waves: url("../brand/bg-waves-light.svg");
}
:root[data-theme="dark"] {
  --bg: #0E0D14; --card: #17161F; --soft: #211F2C;
  --ink: #F2F1F8; --ink2: #ABA9BE; --ink3: #7E7C93; --on-ink: #0E0D14;
  --line: #24222F; --edge: #2C2A3C; --track: #2C2A3C; --hover: #23212E; --hair: #3A3850;
  --card-edge: #24222F; --lim-hover: #1E1C28; --tabbar: rgba(14, 13, 20, .92); --key-line: #3A3850;
  --mark-ring: #8F88FF; --mark-core: #D9D6FF;
  --bar-t-top: #8F88FF; --bar-t-bottom: rgba(143, 136, 255, .28);
  --bar-p-top: #1FB57A; --bar-p-bottom: rgba(31, 181, 122, .24);
  --bar-s-top: #F2685E; --bar-s-bottom: rgba(242, 104, 94, .24);
  --bar-line: rgba(14, 13, 20, .34);
  --bar-t-cap: #C9C5FF; --bar-p-cap: #8EE8C0; --bar-s-cap: #FFB3AD;
  --bar-pale-t: rgba(143, 136, 255, .34); --bar-pale-p: rgba(31, 181, 122, .34);
  --page-lines: url("../brand/bg-rings-dark.svg"); --page-waves: url("../brand/bg-waves-dark.svg");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0E0D14; --card: #17161F; --soft: #211F2C;
    --ink: #F2F1F8; --ink2: #ABA9BE; --ink3: #7E7C93; --on-ink: #0E0D14;
    --line: #24222F; --edge: #2C2A3C; --track: #2C2A3C; --hover: #23212E; --hair: #3A3850;
    --card-edge: #24222F; --lim-hover: #1E1C28; --tabbar: rgba(14, 13, 20, .92); --key-line: #3A3850;
    --mark-ring: #8F88FF; --mark-core: #D9D6FF;
    --bar-t-top: #8F88FF; --bar-t-bottom: rgba(143, 136, 255, .28);
    --bar-p-top: #1FB57A; --bar-p-bottom: rgba(31, 181, 122, .24);
    --bar-s-top: #F2685E; --bar-s-bottom: rgba(242, 104, 94, .24);
    --bar-line: rgba(14, 13, 20, .34);
    --bar-t-cap: #C9C5FF; --bar-p-cap: #8EE8C0; --bar-s-cap: #FFB3AD;
    --bar-pale-t: rgba(143, 136, 255, .34); --bar-pale-p: rgba(31, 181, 122, .34);
    --page-lines: url("../brand/bg-rings-dark.svg"); --page-waves: url("../brand/bg-waves-dark.svg");
  }
}

/* ---------------------------------------------------------------- фон: ровный, без узоров (Босс, 21.10.2026: «убери узоры на фоне») */
body { background-color: var(--bg); background-image: none; }
.sk-k { background: transparent; }

/* ---------------------------------------------------------------- знак вместо надписи */
.s-mark { display: block; flex: none; width: 36px; height: 36px; }
.s-mark .r { fill: var(--mark-ring); }
.s-mark .c { fill: var(--mark-core); }
.ex .s-mark.me-mark { width: 52px; height: 52px; }
.ex .s-logo .s-mark { transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.ex .s-logo:hover .s-mark { transform: rotate(-40deg); }
@media (max-width: 900px) { .ex .s-logo .s-mark { width: 34px; height: 34px; } }

/* ---------------------------------------------------------------- «Сводка»: оборот — главная карточка */
.ex .s-kpis.k5 { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ex .s-kpis.k5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ex .s-kpis.k5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex .s-kpis.k5 > .s-kpi.hero { grid-column: 1 / -1; }
  .ex .s-kpis.k5 > .s-kpi:last-child { grid-column: auto; }
}
.ex .s-kpi.hero { position: relative; isolation: isolate; overflow: hidden; color: #FFFFFF;
  background: linear-gradient(135deg, #211A6E 0%, #3A31C8 58%, #5B52F1 100%);
  box-shadow: 0 16px 36px rgba(42, 35, 128, .26); }
.ex .s-kpi.hero::before { content: none; }
.ex .s-kpi.hero:hover { box-shadow: 0 22px 46px rgba(42, 35, 128, .38); }
.ex .s-kpi.hero .s-label, .ex .s-kpi.hero .s-sub { color: #CFCBFF; }
.ex .s-kpi.hero .s-chip.flat { background: rgba(255, 255, 255, .15); color: #FFFFFF; }

/* ---------------------------------------------------------------- карточки магазинов: глубже и с гильоше */
.ex .s-shop::before { content: none; }
.ex .s-shop.mezzo { background: linear-gradient(135deg, #131D8C 0%, #2433D2 58%, #4858F4 100%); }
.ex .s-shop.ggwpay { background: linear-gradient(135deg, #093F31 0%, #0D7253 58%, #15A072 100%); }
.ex .s-shop.tetra { background: linear-gradient(135deg, #2F1A7E 0%, #5B37CF 58%, #8E62F6 100%); }
.ex .s-shop.lootdrop { background: linear-gradient(135deg, #6E2905 0%, #B0500B 58%, #DC881C 100%); }
.ex .s-shop .s-chip, .ex .s-go a { background: rgba(255, 255, 255, .16); }

/* площадка GGWPAY — тёмная карточка, чтобы не спорить с оборотом */
.ex .s-plat { position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(135deg, #14121E 0%, #1F1B33 100%); box-shadow: inset 0 0 0 1px rgba(143, 136, 255, .14); }
.ex .s-plat::before { content: none; }
.ex .s-plat:hover, .ex .s-plat:has(a:focus-visible) { box-shadow: inset 0 0 0 1px rgba(143, 136, 255, .22), 0 20px 42px rgba(20, 18, 30, .34); }
.ex .s-plat-m { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.ex .s-plat .s-chip { background: rgba(143, 136, 255, .16); color: #D9D6FF; }

/* ---------------------------------------------------------------- столбики: гравюра
   тонкие линии поперёк столбика, как штрих на банкноте; сверху — тёмная кромка */
.ex .w-bar, .ex .g-bar { border-radius: 9px 9px 3px 3px; }
.ex .w-bar.t, .ex .g-bar.t { background:
  repeating-linear-gradient(0deg, var(--bar-line) 0 1px, transparent 1px 3px),
  linear-gradient(180deg, var(--bar-t-top) 0%, var(--bar-t-bottom) 100%);
  box-shadow: inset 0 3px 0 var(--bar-t-cap); }
.ex .w-bar.p, .ex .g-bar.p { background:
  repeating-linear-gradient(0deg, var(--bar-line) 0 1px, transparent 1px 3px),
  linear-gradient(180deg, var(--bar-p-top) 0%, var(--bar-p-bottom) 100%);
  box-shadow: inset 0 3px 0 var(--bar-p-cap); }
.ex .w-bar.s, .ex .g-bar.s { background:
  repeating-linear-gradient(0deg, var(--bar-line) 0 1px, transparent 1px 3px),
  linear-gradient(180deg, var(--bar-s-top) 0%, var(--bar-s-bottom) 100%);
  box-shadow: inset 0 3px 0 var(--bar-s-cap); }
.ex .w-bar.t.pale { background: repeating-linear-gradient(0deg, var(--bar-pale-t) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 2px 0 var(--bar-pale-t); }
.ex .w-bar.p.pale { background: repeating-linear-gradient(0deg, var(--bar-pale-p) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 2px 0 var(--bar-pale-p); }
.ex .w-bar.zero, .ex .g-bar.zero { background: var(--track); box-shadow: none; }
.ex .w-legend i.t, .ex .w-legend i.p, .ex .w-legend i.s { border-radius: 3px; }

/* ---------------------------------------------------------------- лимиты: заполнение фирменным цветом */
.ex .s-meter > i { background: linear-gradient(90deg, #3A31C8, #6C64F5); }
:root[data-theme="dark"] .ex .s-meter > i { background: linear-gradient(90deg, #6C64F5, #A9A3FF); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ex .s-meter > i { background: linear-gradient(90deg, #6C64F5, #A9A3FF); } }

/* ---------------------------------------------------------------- вход: знак вместо надписи */
.ex .k-enter.k-mark { display: grid; place-items: center; width: 68px; height: 68px; padding: 0; }
.ex .k-mark .s-mark { width: 32px; height: 32px; }
.ex .k-mark .s-mark .r { fill: #4F46E5; }   /* кнопка белая и в тёмной теме — знак остаётся тёмным */
.ex .k-mark .s-mark .c { fill: #2A2380; }
@media (prefers-reduced-motion: reduce) {
  .ex .s-logo .s-mark { transition: none; }
  .ex .s-logo:hover .s-mark { transform: none; }
}

/* ---------------------------------------------------------------- 21.10.2026 (холст BujSEwNeVTZWTuTa9Lormq)
   карточки магазинов — белые с цветной точкой: залитые градиентом спорили с цифрами */
.ex .s-shop, .ex .s-shop.mezzo, .ex .s-shop.ggwpay, .ex .s-shop.tetra, .ex .s-shop.lootdrop, .ex .s-shop.altyn {
  background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--card-edge); }
.ex .s-shop::before { display: none; }
.ex .s-shop:hover { filter: none; }
.ex .s-shop:hover, .ex .s-shop.mezzo:hover, .ex .s-shop.ggwpay:hover, .ex .s-shop.tetra:hover, .ex .s-shop.lootdrop:hover {
  box-shadow: 0 16px 34px rgba(var(--shade), .12); }
.ex .s-shop .s-shop-name i { opacity: 1; }
.ex .s-shop.mezzo .s-shop-name i { background: var(--c-mezzo); }
.ex .s-shop.ggwpay .s-shop-name i { background: var(--c-ggwpay); }
.ex .s-shop.tetra .s-shop-name i { background: var(--c-tetra); }
.ex .s-shop.lootdrop .s-shop-name i { background: var(--c-lootdrop); }
.ex .s-shop.altyn .s-shop-name i { background: var(--c-altyn); }
.ex .s-shop .s-chip, .ex .s-shop:hover .s-chip { background: var(--soft); color: var(--ink2); }
.ex .s-shop .s-go a { background: var(--soft); color: var(--ink); }
.ex .s-shop .s-go a:hover { background: var(--ink); color: var(--on-ink); }
.ex .s-shop .s-go a:focus-visible { outline-color: var(--acc); }
.ex .s-shop .s-dt, .ex .s-shop small { opacity: 1; color: var(--ink2); }
.ex .s-shop .s-row b small { color: var(--ink3); }
.ex .s-shop .s-shop-more { color: var(--ink3); }
.ex .s-shop .s-daywarn { background: var(--wait-bg); color: var(--wait-fg); }
.ex .s-shop .s-stale { color: var(--ink3); }
.ex .s-shop[data-shop]:focus-visible { outline-color: var(--acc); }

/* площадка GGWPAY — в её цветах: фиолетовый знак, лаванда, белые плитки (Босс: «цвета самой площадки, а не чёрный») */
.ex .s-plat { background: #EEEDFD; color: #15141F; box-shadow: inset 0 0 0 1px #E2E0FC; }
.ex .s-plat::before { display: none; }
.ex .s-plat:hover, .ex .s-plat:has(a:focus-visible) { box-shadow: inset 0 0 0 1px #DDDBF7, 0 16px 34px rgba(79, 70, 229, .14); }
.ex .s-plat .s-plat-m { background: #FFFFFF; box-shadow: none; color: #15141F; }
.ex .s-plat .s-dt { color: #4F46E5; opacity: 1; font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.ex .s-plat .s-chip { background: #E2E0FC; color: #2A2380; }
.ex .s-plat .s-chip.s-plat-tag { background: #4F46E5; color: #FFFFFF; }
.ex .s-plat .s-plat-off, .ex .s-plat .s-plat-whoh, .ex .s-plat small { color: #56556A; opacity: 1; }
.ex .s-plat .s-plat-who a { color: #15141F; }
.ex .s-plat .s-plat-who a:hover { color: #4F46E5; }
.ex .s-plat .s-marg { color: #4F46E5; }
.ex .s-plat .s-stale { color: #6F6E7E; }
.ex .s-plat .s-go a { background: #4F46E5; color: #FFFFFF; }
.ex .s-plat .s-go a:hover { background: #4338CA; }
.ex .s-ggw-mark { width: 24px; height: 24px; flex: none; fill: #4F46E5; stroke: #4F46E5; }
:root[data-theme="dark"] .ex .s-plat { background: #1E1B3A; color: #F2F1F8; box-shadow: inset 0 0 0 1px #2C2A4C; }
:root[data-theme="dark"] .ex .s-plat .s-plat-m { background: #17161F; color: #F2F1F8; }
:root[data-theme="dark"] .ex .s-plat .s-dt, :root[data-theme="dark"] .ex .s-ggw-mark { color: #A9A4FF; fill: #A9A4FF; stroke: #A9A4FF; }
:root[data-theme="dark"] .ex .s-plat .s-chip { background: #2B2A55; color: #D9D6FF; }
:root[data-theme="dark"] .ex .s-plat .s-plat-off, :root[data-theme="dark"] .ex .s-plat .s-plat-whoh, :root[data-theme="dark"] .ex .s-plat small { color: #ABA9BE; }
:root[data-theme="dark"] .ex .s-plat .s-plat-who a { color: #F2F1F8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .ex .s-plat { background: #1E1B3A; color: #F2F1F8; box-shadow: inset 0 0 0 1px #2C2A4C; }
  :root:not([data-theme]) .ex .s-plat .s-plat-m { background: #17161F; color: #F2F1F8; }
  :root:not([data-theme]) .ex .s-plat .s-dt, :root:not([data-theme]) .ex .s-ggw-mark { color: #A9A4FF; fill: #A9A4FF; stroke: #A9A4FF; }
  :root:not([data-theme]) .ex .s-plat .s-chip { background: #2B2A55; color: #D9D6FF; }
  :root:not([data-theme]) .ex .s-plat .s-plat-off, :root:not([data-theme]) .ex .s-plat .s-plat-whoh, :root:not([data-theme]) .ex .s-plat small { color: #ABA9BE; }
  :root:not([data-theme]) .ex .s-plat .s-plat-who a { color: #F2F1F8; }
}
