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

:root{
  --bg:#06132b;
  --bg2:#0a1737;
  --card1:#0c1f45;
  --card2:#0a1634;
  --line:#1e2f58;
  --text:#eaf1ff;
  --muted:#9fb3dc;
  --brand1:#6ec6ff;
  --brand2:#3e6eea;
  --accent:#79ff99;
  --ok:#22c55e;
  --bad:#ef4444;
  --zero:#9aa3b2;
  --r:16px;
  --shadow:0 20px 36px rgba(0,0,0,.38);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:15px/1.5 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 70% -10%, #153a7a33, transparent 60%),
    radial-gradient(900px 480px at -10% 15%, #00ffd533, transparent 55%),
    linear-gradient(180deg, #0e2354, #0a183a 45%, #06132b);
  background-attachment:fixed;
}

/* ====== LAYOUT / HEADER ====== */
.top{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px;
  border-bottom:1px solid #193062;
  background:linear-gradient(180deg, rgba(19,42,96,.9), rgba(10,27,70,.82));
  backdrop-filter: blur(12px) saturate(130%);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#d7e6ff;letter-spacing:.2px}
.brand:before{content:"";width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px #79ff99}
.link{color:#cfe2ff;text-decoration:none;padding:8px 12px;border-radius:12px;border:1px solid transparent}
.link:hover{background:#16326b;border-color:#274689}

.container{max-width:1120px;margin:22px auto;padding:0 14px;display:grid;gap:16px}
.container.small{max-width:520px}

/* ====== CARDS ====== */
.card{
  background:
    linear-gradient(180deg, rgba(20,46,110,.75), rgba(10,28,74,.88)),
    linear-gradient(180deg, var(--card1), var(--card2));
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:16px;
  position:relative; overflow:hidden;
}
.card::after{
  content:"";
  position:absolute; inset:-1px; border-radius:var(--r); pointer-events:none;
  background:
    radial-gradient(600px 240px at 110% -20%, #6ec6ff26, transparent 60%),
    radial-gradient(500px 200px at -20% -10%, #79ff991a, transparent 65%);
}
.card h1,.card h2,.card h3{margin:0 0 10px}

/* ====== FORMS / CONTROLS ====== */
input,button{font:inherit}
input{
  width:100%; padding:12px 14px; border-radius:12px; outline:none;
  border:1px solid #2a3f79; color:var(--text);
  background:linear-gradient(180deg,#0f2557,#0b1b3d);
  box-shadow:inset 0 0 0 1px #183165;
}
input::placeholder{color:#7d95c7}
button,.button{
  appearance:none; border:0; border-radius:12px; padding:12px 16px; font-weight:800; cursor:pointer;
  color:#06142d; background:linear-gradient(180deg,var(--brand1),var(--brand2));
  box-shadow:0 12px 30px rgba(62,110,234,.35), 0 0 0 1px #274aaa inset; transition:.15s;
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
}
button:hover,.button:hover{transform:translateY(-1px)}
button[disabled]{opacity:.6;cursor:not-allowed;box-shadow:none}
.muted{color:var(--muted)}

/* ====== ACTIVE SIGNALS ====== */
.active-list{display:grid;gap:12px}
@media(min-width:720px){ .active-list.grid-2{grid-template-columns:1fr 1fr} }
.sig{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:14px;border:1px solid #24427a;
  background:linear-gradient(180deg, rgba(32,64,140,.52), rgba(14,36,96,.62));
  box-shadow:0 8px 26px rgba(30,74,170,.28), inset 0 0 0 1px #244a9a33; position:relative;
}
.sig::before{
  content:"";position:absolute;inset:-1px;border-radius:14px;pointer-events:none;
  background:radial-gradient(260px 120px at 110% -20%, #79ff991c, transparent 70%);
}
.sig .pair{font-weight:800;letter-spacing:.2px}
.sig .dir{font-weight:900;text-shadow:0 6px 24px rgba(0,0,0,.35)}
.sig .dir.buy{color:#a6ffc4;filter:drop-shadow(0 0 6px rgba(121,255,153,.35))}
.sig .dir.sell{color:#ff9b9b;filter:drop-shadow(0 0 6px rgba(255,107,107,.3))}
.sig .dir.zero{color:#c9d1de}
.sig .meta{color:var(--muted);font-size:12px}
@keyframes glowPulse{0%{box-shadow:0 0 0 0 rgba(110,198,255,.32)}100%{box-shadow:0 0 0 22px rgba(110,198,255,0)}}
#liveCard.live{animation:glowPulse 1.8s ease-out infinite}

/* круговой таймер */
.cwrap{display:flex;align-items:center;gap:12px}
.timer{position:relative;width:56px;height:56px}
.ring{width:56px;height:56px;transform:rotate(-90deg)}
.ring .trail{fill:none;stroke:#24406f;stroke-width:6;stroke-linecap:round}
.ring .bar{fill:none;stroke:url(#gradBar);stroke-width:6;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(86,182,255,.6))}
.timer__num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 12px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:#eaf3ff;text-shadow:0 2px 10px rgba(0,0,0,.4)}

/* ====== HISTORY ====== */
.hist{display:flex;flex-direction:column;gap:10px}
.rowi{
  display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:12px 14px;border-radius:14px;position:relative;overflow:hidden;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(20,46,110,.55), rgba(10,28,74,.72)),
    linear-gradient(180deg, #0f244f, #0b1c3e);
  box-shadow:0 8px 24px rgba(25,60,140,.24);
  transition:transform .15s, box-shadow .15s;
}
.rowi:hover{transform:translateY(-1px);box-shadow:0 16px 38px rgba(30,74,170,.32)}
.rowi .left{display:flex;flex-direction:column;gap:4px}
.rowi .pair{font-weight:800;letter-spacing:.2px}
.rowi .sub{color:var(--muted);font-size:12px}

.badge{padding:6px 10px;border-radius:999px;font-size:11px;background:#1f3566;border:1px solid #3552a3;color:#dbe7ff}
.tag{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.3px;border:1px solid transparent;text-transform:uppercase}
.tag.win{color:#0e331f;background:linear-gradient(180deg,#46f29b,#19d07a);border-color:#1fbf73;box-shadow:0 8px 22px rgba(34,197,94,.28)}
.tag.loss{color:#3b0b0b;background:linear-gradient(180deg,#ff8b8b,#ef4444);border-color:#d23b3b;box-shadow:0 8px 22px rgba(239,68,68,.28)}
.tag.zero{color:#0f1a2b;background:linear-gradient(180deg,#cfd7e3,#98a4b7);border-color:#7f8a9a;box-shadow:0 8px 22px rgba(152,164,183,.22)}

/* ====== MISC ====== */
.alert{padding:10px 12px;border:1px solid #3a2744;background:linear-gradient(180deg,#291137,#1b0e2a);border-radius:12px;color:#ffd3ff}
.hide{display:none}

/* SVG gradient for timer */
svg defs linearGradient#gradBar stop:first-child{stop-color:#6ec6ff}
svg defs linearGradient#gradBar stop:last-child{stop-color:#3e6eea}

.panel.orange { background: linear-gradient(180deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.1)); border-color: #f59e0b; color: #fed7aa; }
.panel.light-green { background: linear-gradient(180deg, rgba(134, 239, 172, 0.15), rgba(134, 239, 172, 0.1)); border-color: #86efac; color: #d1fae5; }