/* ============================================================
   Futures Pulse — Glass + Lava theme (override layer)
   Подключается ПОСЛЕ radar.css. Меняет только оформление:
   матовое стекло + анимированный «лавовый» фон. Логику,
   разметку и id не трогает. Уважает prefers-reduced-motion.
   ============================================================ */
:root{
  --bg:#06080f;
  --line:rgba(255,255,255,.09);
  --panel:rgba(255,255,255,.05);
  --panel2:rgba(255,255,255,.04);
  --glass-fill:rgba(255,255,255,.055);
  --glass-stroke:rgba(255,255,255,.12);
  --glass-blur:blur(26px) saturate(135%);
  --glass-shadow:0 22px 60px -14px rgba(0,0,0,.55);
  --field:rgba(10,15,22,.5);
}
html{background:#06080f}
/* body ДОЛЖЕН быть прозрачным, иначе его фон перекрывает .lava (z-index:-1) */
body{background:transparent!important}

/* ---- Lava lamp background ---- */
.lava{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px),
    #06080f;
  background-size:44px 44px,44px 44px,auto}
.lava .blob{position:absolute;border-radius:50%;filter:blur(70px)}
.lava .b1{width:42vmax;height:42vmax;left:-8vmax;top:-8vmax;background:radial-gradient(circle,#39f0a0 0,rgba(57,240,160,0) 66%);opacity:.75;animation:lava1 27s ease-in-out infinite alternate}
.lava .b2{width:46vmax;height:46vmax;right:-8vmax;top:-10vmax;background:radial-gradient(circle,#7c5cff 0,rgba(124,92,255,0) 66%);opacity:.7;animation:lava2 31s ease-in-out infinite alternate}
.lava .b3{width:40vmax;height:40vmax;left:0;top:32%;background:radial-gradient(circle,#22d3c6 0,rgba(34,211,198,0) 66%);opacity:.6;animation:lava4 29s ease-in-out infinite alternate}
.lava .b4{width:40vmax;height:40vmax;right:-4vmax;top:26%;background:radial-gradient(circle,#ff5c8a 0,rgba(255,92,138,0) 66%);opacity:.55;animation:lava3 34s ease-in-out infinite alternate}
.lava .b5{width:44vmax;height:44vmax;left:24%;top:56%;background:radial-gradient(circle,#5c6bff 0,rgba(92,107,255,0) 68%);opacity:.6;animation:lava5 37s ease-in-out infinite alternate}
.lava .b6{width:28vmax;height:28vmax;left:40%;top:6%;background:radial-gradient(circle,#ffb03a 0,rgba(255,176,58,0) 68%);opacity:.35;animation:lava6 33s ease-in-out infinite alternate}
@keyframes lava1{from{transform:translate(0,0) scale(1)}to{transform:translate(6vw,7vh) scale(1.15)}}
@keyframes lava2{from{transform:translate(0,0) scale(1)}to{transform:translate(-7vw,6vh) scale(1.1)}}
@keyframes lava3{from{transform:translate(0,0) scale(1)}to{transform:translate(-5vw,-8vh) scale(1.18)}}
@keyframes lava4{from{transform:translate(0,0) scale(1.05)}to{transform:translate(6vw,-6vh) scale(1)}}
@keyframes lava5{from{transform:translate(0,0) scale(1)}to{transform:translate(4vw,-7vh) scale(1.2)}}
@keyframes lava6{from{transform:translate(0,0) scale(1)}to{transform:translate(-4vw,5vh) scale(1.15)}}
@media(prefers-reduced-motion:reduce){.lava .blob{animation:none!important}}

/* ---- Frosted glass panels (desktop) ---- */
.top,.stat,.controls,.tablebox{-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.top{border:1px solid var(--glass-stroke);border-radius:22px;background:var(--glass-fill);box-shadow:var(--glass-shadow);margin-bottom:16px}
h1{letter-spacing:-.045em}
.statusline{border:1px solid var(--glass-stroke);border-radius:999px;background:rgba(57,241,154,.1);color:#7cf7be}
.statusline .dot{box-shadow:0 0 12px currentColor}
.refresh,.pwa-btn{border:1px solid var(--glass-stroke);border-radius:12px;background:rgba(255,255,255,.05)}
.refresh:hover,.pwa-btn:hover{background:rgba(57,241,154,.1)}

/* KPI stats -> отдельные плавающие стеклянные карточки */
.stats{border:0;background:transparent;gap:14px;margin:0 0 16px;border-radius:0}
.stat{border:1px solid var(--glass-stroke)!important;border-radius:20px;background:var(--glass-fill);box-shadow:var(--glass-shadow);padding:16px 20px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.stat-v{font-weight:800;font-size:22px}

/* Панель фильтров */
.controls{border:1px solid var(--glass-stroke);border-radius:18px;background:var(--glass-fill);box-shadow:var(--glass-shadow);margin-bottom:16px}
.seg{border:1px solid var(--glass-stroke);border-radius:13px;background:rgba(10,15,22,.45);padding:4px;gap:4px}
.seg button{border:0;border-radius:10px;padding:8px 14px;font-weight:600}
.seg button.on{background:rgba(57,241,154,.15);color:var(--green);font-weight:800;box-shadow:inset 0 0 0 1px rgba(57,241,154,.28)}
input,select{border:1px solid var(--glass-stroke);border-radius:12px;background:var(--field);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
input:focus,select:focus{border-color:var(--green)}

/* Панель таблицы */
.tablebox{border:1px solid var(--glass-stroke);border-radius:22px;background:rgba(255,255,255,.04);box-shadow:var(--glass-shadow)}
/* Переключатель РЫНОК / PULSE RADAR — единый стиль сегмент-контрола (веб + моб) */
.view-switch{border:1px solid var(--glass-stroke)!important;border-radius:13px;background:rgba(10,15,22,.45)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.view-switch button{border-radius:10px;font-weight:600}
.view-switch button.on{background:rgba(57,241,154,.15)!important;color:var(--green)!important;box-shadow:inset 0 0 0 1px rgba(57,241,154,.28)}
thead{background:rgba(14,20,26,.72);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%)}
th{border-bottom:1px solid var(--glass-stroke)}
td{border-bottom:1px solid rgba(255,255,255,.05)}
tbody tr:hover{background:rgba(57,241,154,.06)}
.coin{border-radius:10px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(145deg,rgba(57,241,154,.9),rgba(34,211,198,.45));color:#08130c}
/* 24ч как тинтованная пилюля */
td.up .change,td.down .change{padding:5px 10px;border-radius:9px;font-weight:800}
td.up .change{background:rgba(74,222,128,.14)}
td.down .change{background:rgba(255,107,113,.14)}
footer{padding:2px 4px}

/* ===== Mobile (glass) ===== */
@media(max-width:700px){
  body{background:transparent!important}
  /* Шапка — такая же скруглённая стеклянная карточка, как на вебе (а не плоская полоса) */
  .top{position:static!important;margin:8px 0 14px!important;border:1px solid var(--glass-stroke)!important;border-radius:22px!important;background:var(--glass-fill)!important;-webkit-backdrop-filter:var(--glass-blur)!important;backdrop-filter:var(--glass-blur)!important;box-shadow:var(--glass-shadow)!important}
  /* Единый капс-заголовок и компактный переключатель, как на вебе */
  h1{text-transform:uppercase!important;letter-spacing:-.045em}
  .view-switch{width:max-content!important;max-width:100%}
  .view-switch button{flex:0 1 auto!important}
  .mobile-search-box input,.mobile-filter-btn{border:1px solid var(--glass-stroke);background:rgba(255,255,255,.05);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
  .mobile-modes button{border:1px solid var(--glass-stroke);background:rgba(255,255,255,.045)}
  .mobile-modes button.on{border-color:rgba(57,241,154,.5);background:rgba(57,241,154,.14);color:var(--green)}
  .mobile-stats{border:1px solid var(--glass-stroke);border-radius:16px;background:rgba(255,255,255,.06)}
  .mobile-stat{background:transparent}
  .market-card{border:1px solid var(--glass-stroke);border-radius:16px;background:rgba(255,255,255,.05);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}
  .card-coin{border:1px solid rgba(255,255,255,.16);background:linear-gradient(145deg,rgba(57,241,154,.9),rgba(34,211,198,.45));color:#08130c}
  .card-tag{background:rgba(57,241,154,.12);border-color:rgba(57,241,154,.32)}
  .mobile-bottom-nav{background:rgba(8,13,11,.62);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);border-top:1px solid var(--glass-stroke)}
  .mobile-panel{border:1px solid var(--glass-stroke);background:rgba(255,255,255,.05);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
}