/* ============================================================
   SC Trade — тёмная SaaS-панель (редизайн)
   ============================================================ */

:root{
  /* поверхности */
  --void:#0a0c12;
  --panel:#12151f;
  --panel-alt:#171b28;
  --panel-raised:#1c2130;

  /* линии/границы */
  --line:rgba(255,255,255,.07);
  --line-bright:rgba(255,255,255,.14);

  /* акценты */
  --phosphor:#7c8bff;       /* основной акцент — индиго */
  --phosphor-dim:#4a4fb8;
  --phosphor-soft:rgba(124,139,255,.12);

  --amber:#f5a524;          /* тёплый вторичный акцент */
  --amber-dim:#8a641c;
  --amber-soft:rgba(245,165,36,.12);

  --positive:#34d399;       /* прибыль/успех */
  --positive-soft:rgba(52,211,153,.12);

  --danger:#fb7185;
  --danger-soft:rgba(251,113,133,.12);

  /* текст */
  --ink:#e7e9f3;
  --ink-dim:#828aa3;

  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-panel:0 1px 1px rgba(0,0,0,.2), 0 12px 28px -16px rgba(0,0,0,.6);
  --shadow-pop:0 20px 60px -20px rgba(0,0,0,.7);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{
  margin:0;padding:0;
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(124,139,255,.08), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(245,165,36,.05), transparent 55%),
    var(--void);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
.disp{font-family:'Inter',ui-sans-serif,system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}

:focus-visible{outline:2px solid var(--phosphor-dim);outline-offset:2px;border-radius:4px;}

/* убраны CRT-эффекты (сканлайны/виньетка/мигание) — оставлены пустыми на случай ссылок из HTML */
.scanlines,.vignette{display:none;}
.blinker{animation:pulse-dot 2s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;box-shadow:0 0 0 0 currentColor;}50%{opacity:.55;}}

@keyframes spin{to{transform:rotate(360deg);}}
.spinner{width:14px;height:14px;border:2px solid var(--line-bright);border-top-color:var(--phosphor);border-radius:50%;display:inline-block;vertical-align:-2.5px;margin-right:8px;animation:spin .7s linear infinite;}

@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee-track{display:inline-flex;animation:marquee 32s linear infinite;white-space:nowrap;}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}

::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--line-bright);border-radius:99px;border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:var(--phosphor-dim);background-clip:padding-box;}

.scroll-thin{scrollbar-width:thin;scrollbar-color:var(--line-bright) transparent;}
.scroll-thin::-webkit-scrollbar{width:6px;height:6px;}
.scroll-thin::-webkit-scrollbar-track{background:transparent;}
.scroll-thin::-webkit-scrollbar-thumb{background:var(--line-bright);border-radius:99px;}
.scroll-thin::-webkit-scrollbar-thumb:hover{background:var(--phosphor-dim);}

.scroll-fade{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
}

/* поверхности-карточки */
.panel{
  background:linear-gradient(180deg, var(--panel-raised), var(--panel));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-panel);
}
.panel-alt{
  background:var(--panel-alt);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
}
.ad-slot > iframe,.ad-slot > img,.ad-slot > a{max-width:100%;max-height:100%;}
.ad-frame{padding:7px;background:rgba(245,165,36,.045);border:1px dashed var(--amber-dim);border-radius:var(--radius-md);}
.ad-label{margin-bottom:5px;color:var(--amber);font-size:9px;font-weight:700;letter-spacing:.14em;text-align:center;text-transform:uppercase;}
.ad-rail{grid-column:2;grid-row:1 / span 30;position:sticky;top:88px;pointer-events:none;}
.site-content{display:grid;grid-template-columns:minmax(0,min(1500px,calc(100% - 353px))) 333px;gap:20px;align-items:start;width:min(100%,1885px);margin:0 auto;padding:0 16px;}
.site-content > :not(.ad-rail){grid-column:1;min-width:0;max-width:none!important;margin-left:0!important;margin-right:0!important;}
.site-content > .ad-rail > .ad-slot{pointer-events:auto;}
/* Уменьшаем рабочую область до 90%, сохраняя рекламный формат 300x250. */
#app{zoom:.9;}
@media (max-width:1279px){
  .ad-rail{display:none!important;}
  .site-content{display:block;width:100%;padding:0;}
}

.eyebrow{font-family:'Inter',sans-serif;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);}

/* элементы форм — единые скругления по умолчанию */
button{cursor:pointer;}
button, select, input[type=text], input[type=number], input[type=search]{
  border-radius:var(--radius-sm);
  font-family:'Inter',sans-serif;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
input[type=text], input[type=number], select{
  background:var(--void);
}
input[type=text]:focus, input[type=number]:focus, select:focus{
  box-shadow:0 0 0 3px var(--phosphor-soft);
}

input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;background:var(--line-bright);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:var(--phosphor);border-radius:50%;cursor:pointer;box-shadow:0 0 0 4px var(--phosphor-soft);}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border:none;background:var(--phosphor);border-radius:50%;cursor:pointer;}

select{cursor:pointer;}

/* бейджи/пилюли */
.pill{font-family:'Inter',sans-serif;font-weight:600;font-size:10px;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:99px;border:1px solid;}
.badge-stable{color:var(--positive);border-color:transparent;background:var(--positive-soft);}
.badge-moderate{color:var(--amber);border-color:transparent;background:var(--amber-soft);}
.badge-speculative{color:var(--danger);border-color:transparent;background:var(--danger-soft);}

/* таблицы */
table thead tr{border-bottom:1px solid var(--line);}
table tbody tr{transition:background-color .12s ease;}

/* модалки */
.modal-backdrop{backdrop-filter:blur(6px);}

/* живая лента артефактов: индикатор LIVE + подсветка новых лотов */
.live-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--phosphor); box-shadow:0 0 0 0 var(--phosphor-soft);
  animation:live-pulse 1.6s ease-out infinite;
}
.live-dot--busy{ background:var(--amber); }
/* индикатор P2P-роя (см. app/static/js/p2p_swarm.js): пусто, пока
   SCTRADE_P2P_WS_URL не настроен, иначе показывает solo/active */
#p2p-swarm-badge:empty{ display:none; }
#p2p-swarm-badge.p2p-badge--active{ color:var(--phosphor); border-color:var(--phosphor-dim); }
@keyframes live-pulse{
  0%{ box-shadow:0 0 0 0 var(--phosphor-soft); }
  70%{ box-shadow:0 0 0 6px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}
.art-deal--new{ animation:art-deal-flash 2.4s ease-out 2; }
@keyframes art-deal-flash{
  0%{ background-color:var(--phosphor-soft); }
  100%{ background-color:transparent; }
}

/* Лента артефактов в карточном формате: ограничена по высоте и скроллится
   независимо от страницы — иначе при накоплении карточек лента растягивала
   всю страницу в бесконечную простыню. */
.art-card-scroll{
  max-height:min(78vh, 900px);
  overflow-y:auto;
  padding-right:4px;
}
.art-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:12px;
}
.art-card{
  background:var(--panel-alt);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:14px;
  cursor:pointer;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.art-card:hover{
  border-color:var(--line-bright);
  transform:translateY(-1px);
  box-shadow:var(--shadow-panel);
}
.art-card--deal{
  border-color:var(--phosphor-dim);
}
.art-card--deal:hover{
  border-color:var(--phosphor);
}
.art-card.art-deal--new{ animation:art-deal-flash 2.4s ease-out 2; }