/* Dark neon trading‑style theme */
:root{
  --bg:#0b0f14;
  --panel:#0f1720;
  --muted:#7c8aa0;
  --text:#e6f0ff;
  --green:#00ff9c;
  --red:#ff2e63;
  --blue:#06b6d4;
  --accent:#00c2ff;
  --outline:#1f2a37;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.hidden{display:none !important}
.small{font-size:.9rem}
.muted{color:var(--muted)}
.link{border-bottom:1px dotted var(--accent)}

.navbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;background:linear-gradient(180deg, #0b0f14 50%, rgba(11,15,20,.6));
  border-bottom:1px solid var(--outline);backdrop-filter:blur(6px)
}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  font-weight:900;letter-spacing:1px;font-size:22px;
  color:var(--green);text-shadow:0 0 8px rgba(0,255,156,.6)
}
.tagline{color:var(--muted);font-size:.95rem}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  margin-right: 20px; /* pushes them slightly left */
}

.nav-actions .btn.ghost {
  margin-right: 80px; /* increases spacing between Add Stream and the user info text */
}

.btn{
  background:linear-gradient(180deg,#122030,#0e1824);
  border:1px solid var(--outline);color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer;
  box-shadow:var(--shadow);transition:.2s transform,.2s box-shadow
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(180deg,#083a4b,#062735);border-color:#0a3b4c}
.btn.ghost{background:transparent}
.btn.danger{border-color:#4b1f2a;background:linear-gradient(180deg,#2a0911,#20070e);color:var(--red)}

.view{max-width:1100px;margin:30px auto;padding:0 16px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{
  background:var(--panel);border:1px solid var(--outline);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)
}
.form label{display:block;margin:10px 0 6px}
.form input, .form select{
  width:100%;padding:12px;border-radius:10px;border:1px solid var(--outline);
  background:#0b1220;color:var(--text);outline:none
}

.filters input,
.filters select {
  flex: 1;
  min-width: 180px;
  padding: 12px 14px;
  font-size: 1rem;
  border-radius: 10px;
  border: 1px solid var(--outline);
  background: linear-gradient(180deg, #0f1b29, #0a121c);
  color: var(--text);
  box-shadow: 0 0 8px rgba(0, 255, 156, 0.1);
  transition: 0.2s ease;
  appearance: none;             /* removes default browser styling */
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* when focused */
.filters input:focus,
.filters select:focus {
  border-color: var(--green);
  box-shadow: 0 0 12px rgba(0, 255, 156, 0.25);
  background: linear-gradient(180deg, #122536, #0e1a28);
}

/* ensure dropdown text/background contrast on all systems */
.filters select option {
  background-color: #0b1220;
  color: var(--text);
}

.filters input:focus,
.filters select:focus {
  border-color: var(--green);
  box-shadow: 0 0 12px rgba(0, 255, 156, 0.25);
}

.form button{margin-top:12px;width:100%}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 20px}

.card.stream{
  display:flex;flex-direction:column;gap:10px
}
.card .meta{display:flex;justify-content:space-between;align-items:center}
.badge{border:1px solid var(--outline);padding:4px 8px;border-radius:999px;color:var(--muted);font-size:.85rem}

.stream-header{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:18px}
.stream-meta h1{margin:0 0 4px}
.stream-stats{display:flex;gap:16px}
.stat{background:linear-gradient(180deg,#0c141f,#0b121a);border:1px solid var(--outline);border-radius:12px;padding:10px 14px;min-width:120px;text-align:center}
.stat-value{font-size:28px;font-weight:800;color:var(--green);text-shadow:0 0 8px rgba(0,255,156,.5)}

.rating .stars{display:flex;gap:6px;flex-wrap:wrap}
.starbtn{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--outline);background:#0c1422;color:#cde3ff;cursor:pointer
}
.starbtn.active{border-color:var(--green);box-shadow:0 0 12px rgba(0,255,156,.35) inset}
.bars{display:grid;gap:8px}
.bar{display:flex;align-items:center;gap:10px}
.bar .label{width:40px;text-align:right;color:var(--muted)}
.bar .track{flex:1;height:14px;background:#0b1220;border-radius:999px;border:1px solid var(--outline);overflow:hidden}
.bar .fill{height:100%;background:linear-gradient(90deg,var(--green),var(--accent)); box-shadow:0 0 10px rgba(0,255,156,.4)}

.footer{max-width:1100px;margin:40px auto;padding:12px 16px;border-top:1px solid var(--outline);display:flex;justify-content:space-between;color:var(--muted)}

/* Thumbnails for cards */
.thumb{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--outline);
  background:#0b1220;
  box-shadow: var(--shadow);
}

/* a bit more breathing room in stream cards when image is present */
.card.stream{ gap:12px; }