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

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* surface */
  --canvas:       #0a0a0a;
  --canvas-soft:  #1a1c20;
  --canvas-card:  #191919;
  --canvas-mid:   #363a3f;
  --hairline:     #212327;

  /* text */
  --ink:          #ffffff;
  --body:         #dadbdf;
  --mute:         #7d8187;

  /* accent */
  --sunset:       #ff7a17;
  --dusk:         #7c3aed;
  --twilight:     #c4b5fd;
  --breeze:       #a0c3ec;

  /* rarity */
  --r-common:     #7d8187;
  --r-uncommon:   #4ade80;
  --r-rare:       #a0c3ec;
  --r-epic:       #c4b5fd;
  --r-legendary:  #ff7a17;

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
}

html, body {
  height: 100%;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ── Eyebrow mono — section labels ─────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mute);
  line-height: 16px;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}

.logo {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink);
}

.ws-dot {
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--mute);
  flex-shrink: 0;
  transition: background 0.3s;
}
.ws-dot.connected { background: #4ade80; }

.ws-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mute);
}

.match-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mute);
}

/* ── Main grid ───────────────────────────────────────────────────────────── */
main {
  display: grid;
  grid-template-columns: 300px 1fr;
  flex: 1;
  min-height: 0;
  transition: grid-template-columns 0.3s ease;
}
main.collapsed {
  grid-template-columns: 0px 1fr;
}
main.collapsed .panel-matches {
  overflow: hidden;
  border: none;
}

/* ── Panels ──────────────────────────────────────────────────────────────── */
.panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panel + .panel { border-left: 1px solid var(--hairline); }

.panel-head {
  padding: 16px 20px 12px;
  flex-shrink: 0;
}

/* ── Match list ──────────────────────────────────────────────────────────── */
.matches-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 12px;
}
.matches-list::-webkit-scrollbar { width: 4px; }
.matches-list::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 2px; }

.match-card {
  background: var(--canvas-card);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.match-card:hover  { border-color: var(--canvas-mid); }
.match-card.active { border-color: rgba(255,255,255,0.4); }

.match-teams {
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 5px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.match-score {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--mute);
  letter-spacing: 0.5px;
}
.vs { color: var(--mute); font-size: 11px; }
.match-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: 10px;
}
.tier-pill {
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  padding: 1px 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--mute);
}

.placeholder {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mute);
  padding: 20px 8px;
}

/* ── Config panel ────────────────────────────────────────────────────────── */
.panel-config {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.panel-config::-webkit-scrollbar { width: 4px; }
.panel-config::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 2px; }

/* Pin the header + selected block, scroll only config sections below */
.panel-config-sticky {
  flex-shrink: 0;
  border-bottom: 1px solid var(--hairline);
}
.panel-config-scroll {
  flex: 1;
  overflow-y: auto;
}
.panel-config-scroll::-webkit-scrollbar { width: 4px; }
.panel-config-scroll::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 2px; }

.selected-block {
  margin: 0 20px 0;
  padding: 12px 14px;
  background: var(--canvas-card);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
}
.selected-block.hidden { display: none; }
.selected-match-name {
  font-size: 15px;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin-bottom: 3px;
}
.selected-match-live {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.8px;
  color: var(--body);
  margin-bottom: 4px;
}

.selected-match-id {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--mute);
}

.no-selection {
  margin: 0 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mute);
}

.config-block {
  padding: 16px 20px;
  border-top: 1px solid var(--hairline);
}
.config-block:first-child { border-top: none; }

/* ── Event toggles ───────────────────────────────────────────────────────── */
.event-toggles { display: flex; flex-direction: column; gap: 1px; }

.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.toggle-row:hover { background: var(--canvas-soft); }

.toggle-row input[type=checkbox] {
  appearance: none;
  width: 14px; height: 14px;
  border: 1px solid var(--canvas-mid);
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.toggle-row input[type=checkbox]:checked {
  background: var(--ink);
  border-color: var(--ink);
}
.toggle-row input[type=checkbox]:checked::after {
  content: '';
  position: absolute;
  top: 1px; left: 4px;
  width: 4px; height: 7px;
  border: 1.5px solid var(--canvas);
  border-top: none; border-left: none;
  transform: rotate(45deg);
}

.toggle-name  { flex: 1; font-size: 13px; color: var(--body); }
.toggle-rarity {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.toggle-cd {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--mute);
  min-width: 30px;
  text-align: right;
}

/* rarity colors */
.rarity-common    { color: var(--r-common); }
.rarity-uncommon  { color: var(--r-uncommon); }
.rarity-rare      { color: var(--r-rare); }
.rarity-epic      { color: var(--r-epic); }
.rarity-legendary { color: var(--r-legendary); }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.input-row { display: flex; gap: 8px; align-items: center; }

.input-text {
  flex: 1;
  background: var(--canvas-soft);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  outline: none;
  transition: border-color 0.15s;
}
.input-text::placeholder { color: var(--mute); }
.input-text:focus { border-color: rgba(255,255,255,0.25); }

.input-number {
  width: 72px;
  background: var(--canvas-soft);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.input-number:focus { border-color: rgba(255,255,255,0.25); }

.unit {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--mute);
}

/* ── Buttons — pill shape, outline ───────────────────────────────────────── */
.btn {
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  padding: 5px 14px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn:hover { border-color: rgba(255,255,255,0.3); }

.btn-sm { padding: 3px 11px; font-size: 12px; }

.btn-danger {
  border-color: rgba(248,113,113,0.25);
  color: rgba(248,113,113,0.8);
}
.btn-danger:hover { border-color: rgba(248,113,113,0.5); color: #f87171; }

.btn.hidden { display: none; }

/* ── Webhook result ──────────────────────────────────────────────────────── */
.webhook-result {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.8px;
  color: var(--mute);
}
.webhook-result.hidden { display: none; }
.webhook-result.ok   { color: #4ade80; }
.webhook-result.fail { color: #f87171; }

/* ── Overlay preview toast ───────────────────────────────────────────────── */
.preview-card {
  position: fixed;
  bottom: 210px;   /* sit above the event feed */
  left: 24px;
  width: 320px;
  z-index: 999;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.preview-hidden {
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}
.preview-visible {
  transform: translateX(0);
  opacity: 1;
}

.preview-card-inner {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(10,10,15,0.92);
  border-left: 4px solid var(--rarity-color, #888);
  box-shadow: 0 0 20px 4px var(--rarity-glow, rgba(136,136,136,0.25)),
              0 4px 16px rgba(0,0,0,0.7);
}
.preview-top-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
}
.preview-rarity-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 3px;
  background: var(--rarity-color, #888); color: #000;
}
.preview-event-label {
  font-size: 15px; font-weight: 800; color: #fff;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.preview-player-row {
  font-size: 11px; font-weight: 600; color: #e0e0e0; margin-bottom: 2px;
}
.preview-match-row  { font-size: 10px; color: #777; margin-bottom: 7px; }
.preview-drop-row   {
  display: flex; align-items: center; gap: 5px;
  padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.08);
}
.preview-drop-icon  { font-size: 12px; }
.preview-drop-text  {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--rarity-color, #888); text-transform: uppercase;
}
.preview-price-range { margin-left: auto; font-size: 10px; font-weight: 700; color: #fff; }
.preview-skin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.preview-skin-img {
  width: 90px;
  height: 58px;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
}
.preview-skin-name {
  font-size: 10px;
  font-weight: 700;
  color: #e0e0e0;
  letter-spacing: 0.03em;
  line-height: 14px;
}

/* rarity CSS vars */
.preview-card.rarity-common    { --rarity-color:#b0b0b0; --rarity-glow:rgba(176,176,176,0.20); }
.preview-card.rarity-uncommon  { --rarity-color:#4ade80; --rarity-glow:rgba(74,222,128,0.25);  }
.preview-card.rarity-rare      { --rarity-color:#60a5fa; --rarity-glow:rgba(96,165,250,0.30);  }
.preview-card.rarity-epic      { --rarity-color:#c084fc; --rarity-glow:rgba(192,132,252,0.35); }
.preview-card.rarity-legendary { --rarity-color:#fbbf24; --rarity-glow:rgba(251,191,36,0.40);  }
.preview-card.rarity-legendary .preview-card-inner {
  animation: previewShimmer 2.5s ease-in-out infinite alternate;
}
@keyframes previewShimmer {
  0%   { box-shadow: 0 0 20px 4px rgba(251,191,36,0.40), 0 4px 16px rgba(0,0,0,0.7); }
  100% { box-shadow: 0 0 36px 10px rgba(251,191,36,0.65), 0 4px 16px rgba(0,0,0,0.7); }
}

/* ── Stream iframe ───────────────────────────────────────────────────────── */
.stream-frame-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid var(--hairline);
}
.stream-frame-wrap.hidden { display: none; }
.stream-frame {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

/* ── Event feed ──────────────────────────────────────────────────────────── */
.panel-feed {
  flex-shrink: 0;
  height: 190px;
  border-top: 1px solid var(--hairline);
  background: var(--canvas);
  display: flex;
  flex-direction: column;
}

.feed-header {
  display: flex;
  align-items: center;
  padding: 10px 20px 6px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--hairline);
}
.feed-header .eyebrow { margin-right: auto; }

.event-feed {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
}
.event-feed::-webkit-scrollbar { width: 4px; }
.event-feed::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 2px; }

.feed-empty {
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mute);
}

.feed-row {
  display: grid;
  grid-template-columns: 58px 120px 200px 1fr 72px;
  align-items: center;
  gap: 0;
  padding: 5px 20px;
  border-bottom: 1px solid transparent;
  transition: background 0.1s;
  animation: rowIn 0.2s ease;
}
.feed-row:hover { background: var(--canvas-card); }

@keyframes rowIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.feed-log {
  grid-template-columns: 58px 1fr;
  opacity: 0.45;
}
.feed-log:hover { opacity: 0.7; }
.feed-log-text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-time {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--mute);
}
.feed-event {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.feed-player { font-size: 12px; color: var(--body); padding-left: 8px; }
.feed-match  {
  font-size: 11px;
  color: var(--mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 8px;
}
.feed-price {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--ink);
  text-align: right;
}