:root{
  --gold:#f1c40f;
  --dark:#0b0b0b;
  --muted:#1a1a1a;
  --card:#111;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: 'Montserrat', Arial, sans-serif;
  color:#eaeaea;
  background: radial-gradient(1200px 600px at 50% -10%, #1a1a1a, #0b0b0b);
}
a{color:var(--gold);text-decoration:none}

/* HEADER */
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid #222;background:#0b0b0bcc;
  position:sticky;top:0;z-index:10;
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:38px;height:38px}
.brand span{color:var(--gold);font-weight:700;letter-spacing:1px;font-size:18px}

/* контейнер з кнопками справа в header */
.header > div:last-child{display:flex;gap:10px;flex-wrap:wrap}
.header > div:last-child .btn{white-space:nowrap}

.btn{
  background: linear-gradient(135deg, #c49b0b, #f1c40f);
  border:none;color:#111;padding:10px 16px;border-radius:8px;font-weight:700;cursor:pointer;
  box-shadow:0 0 12px rgba(241,196,15,.25);
}
.btn.outline{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.container{max-width:980px;margin:0 auto;padding:22px}
.section{padding:42px 0;border-bottom:1px solid #111}
.h1{font-size:42px;color:#fff;margin:4px 0 10px}
.lead{color:#cfcfcf;max-width:780px;line-height:1.65}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:18px}
.card{background:var(--card);border:1px solid #1f1f1f;padding:18px;border-radius:14px}
.table{width:100%;border-collapse:collapse;margin-top:10px}
.table th,.table td{border-bottom:1px solid #222;padding:10px 8px;text-align:left}
.footer{padding:40px 0;text-align:center;color:#888}
.form{max-width:420px;margin:24px auto;background:#0f0f0f;border:1px solid #1f1f1f;padding:22px;border-radius:14px}
.form input{width:100%;padding:12px;border-radius:10px;border:1px solid #333;background:#111;color:#eee;margin-bottom:12px}
.notice{padding:10px 12px;border:1px solid #333;background:#131313;border-radius:10px;color:#bdbdbd}
.stats{display:flex;gap:12px;flex-wrap:wrap}
.stat{flex:1 1 160px;background:#0f0f0f;border:1px solid #222;padding:14px;border-radius:12px}
.chat{
  max-width:780px;margin:16px auto;background:#0f0f0f;border:1px solid #1f1f1f;border-radius:12px;overflow:hidden
}
.chat-messages{height:380px;overflow:auto;padding:14px}
.msg{margin-bottom:12px;padding:10px 12px;border-radius:10px;background:#121212;border:1px solid #1f1f1f}
.msg .meta{font-size:12px;color:#aaa;margin-bottom:6px}
.chat-input{display:flex;padding:10px;border-top:1px solid #1f1f1f;gap:10px}
.chat-input input{flex:1;padding:12px;border-radius:8px;border:1px solid #333;background:#111;color:#eee}
.badge{display:inline-block;background:#1b1b1b;border:1px solid #2a2a2a;color:#c7c7c7;padding:6px 10px;border-radius:999px;font-size:12px}

/* ====== Терминал / график ====== */
.terminal-wrap{background:#0f0f0f;border:1px solid #1f1f1f;border-radius:14px;padding:14px}
.terminal-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px
}
.terminal-title{font-weight:600}
.terminal-pill{
  background:#141414;border:1px solid #272727;color:#e7e7e7;
  padding:8px 12px;border-radius:999px;font-size:14px
}
.terminal{height:260px;overflow:auto;background:#0b0b0b;border:1px solid #1a1a1a;border-radius:10px;padding:8px}
.trow{
  display:grid;grid-template-columns:96px 1fr 80px 130px;gap:10px;
  padding:10px 8px;margin-bottom:6px;border:1px solid #1a1a1a;border-radius:10px;background:#101010;
  transition:background .25s, transform .2s, box-shadow .2s
}
.trow.green .cpnl{color:#52d273}
.trow.red .cpnl{color:#ff6b6b}
.trow.flash{box-shadow:0 0 0 2px #2a2a2a; transform: scale(1.01)}
.ctime{color:#9a9a9a}
.cside{font-weight:700}
.chart-card{margin-top:12px;background:#0b0b0b;border:1px solid #1a1a1a;border-radius:10px;padding:10px}
.terminal-footer{display:flex;align-items:center;gap:10px;margin-top:10px}
.terminal-footer .hint{color:#9a9a9a;font-size:12px;margin-left:auto}

@media (max-width: 768px){
  .trow{grid-template-columns:70px 1fr 64px 110px}
  .terminal{height:300px}
  .terminal-head{flex-direction:column;align-items:stretch}
  .terminal-pill{text-align:center}
  .terminal-footer{flex-wrap:wrap}
}


/*  правки */
@media (max-width: 768px) {
  .header{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }
  .brand{width:100%; justify-content:flex-start}
  .brand img{width:34px;height:34px}
  .brand span{font-size:16px}
  .header > div:last-child{width:100%}
  .header > div:last-child .btn{flex:1; text-align:center}
  .h1{font-size:32px}
}