.twitch-window {
  background: #0e0e10;
  border: 2px solid #3a3a3d;
  overflow: hidden;
}

.twitch-top-nav {
  background: #18181b;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #3a3a3d;
}

.twitch-logo-pill {
  background: #9147ff;
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  font-family: 'Press Start 2P', monospace;
  letter-spacing: 1px;
}

.twitch-nav-links { display: flex; gap: 16px; font-size: 11px; font-family: Arial, sans-serif; }
.twitch-nav-links span { color: #adadb8; cursor: pointer; }
.twitch-nav-links span:hover { color: #fff; }

.twitch-search {
  margin-left: auto;
  background: #3a3a3d;
  border: 1px solid #555;
  padding: 4px 10px;
  color: #adadb8;
  font-size: 11px;
  font-family: Arial, sans-serif;
  width: 160px;
}

.twitch-stream-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  min-height: 360px;
}

.twitch-main { position: relative; background: #000; display: flex; flex-direction: column; }

.twitch-video {
  flex: 1;
  background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #0d0d1d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 260px;
}

.twitch-video-placeholder {
  font-size: 10px;
  color: rgba(145,71,255,0.3);
  text-align: center;
  font-family: 'Press Start 2P', monospace;
}

.twitch-live-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: #eb0400;
  color: #fff;
  font-size: 9px;
  padding: 3px 6px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
}

.twitch-viewers-badge {
  position: absolute;
  top: 10px; left: 52px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 9px;
  padding: 3px 6px;
  font-family: Arial, sans-serif;
}

.fc-extension {
  position: absolute;
  top: 14px; right: 14px;
  width: 200px;
  background: rgba(10,10,10,0.92);
  border: 3px solid var(--fc-accent);
  box-shadow: 4px 4px 0px rgba(212,145,10,0.3), 0 0 20px rgba(212,145,10,0.15);
  font-family: 'Press Start 2P', monospace;
}

.fc-ext-header {
  background: var(--fc-accent);
  color: #000;
  font-size: 7px;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
}

.fc-ext-body { padding: 10px; }

.fc-ext-question {
  font-size: 8px;
  color: var(--fc-accent);
  text-align: center;
  margin-bottom: 10px;
  line-height: 1.8;
}

.fc-ext-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}

.fc-ext-btn {
  border: 2px solid var(--fc-accent);
  background: transparent;
  color: var(--fc-accent);
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 6px 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.1s;
}
.fc-ext-btn .p { display: block; font-size: 12px; margin-bottom: 3px; }
.fc-ext-btn.no { border-color: var(--fc-no); color: var(--fc-no); }
.fc-ext-btn.no .p { color: var(--fc-no); }
.fc-ext-btn:hover     { background: var(--fc-accent); color: #000; }
.fc-ext-btn.no:hover  { background: var(--fc-no);     color: #fff; }

.fc-ext-bar {
  height: 4px;
  background: rgba(212,145,10,0.15);
  margin-bottom: 6px;
  border: 1px solid rgba(212,145,10,0.2);
}
.fc-ext-fill { height: 100%; background: var(--fc-accent); }

.fc-ext-meta {
  display: flex;
  justify-content: space-between;
  font-size: 6px;
  color: var(--fc-text-muted);
}

.twitch-controls {
  background: #18181b;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Arial, sans-serif;
}

.twitch-ctrl-btn { color: #adadb8; font-size: 14px; cursor: pointer; transition: color 0.1s; }
.twitch-ctrl-btn:hover { color: #fff; }

.twitch-progress {
  flex: 1;
  height: 4px;
  background: #3a3a3d;
  position: relative;
  cursor: pointer;
}
.twitch-progress-fill { height: 100%; background: #9147ff; width: 40%; }
.twitch-vol  { color: #adadb8; font-size: 11px; font-family: Arial, sans-serif; }
.twitch-time { color: #adadb8; font-size: 10px; font-family: Arial, sans-serif; }

.twitch-channel-info {
  background: #1f1f23;
  padding: 10px 14px;
  border-top: 1px solid #3a3a3d;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.twitch-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #9147ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: white;
  flex-shrink: 0;
}

.twitch-ch-name  { font-size: 13px; color: #efeff1; font-family: Arial, sans-serif; font-weight: bold; }
.twitch-ch-game  { font-size: 11px; color: #9147ff; font-family: Arial, sans-serif; }
.twitch-ch-title { font-size: 11px; color: #adadb8; font-family: Arial, sans-serif; margin-top: 2px; }

.twitch-follow-btn {
  margin-left: auto;
  background: #9147ff;
  color: #fff;
  border: none;
  padding: 6px 14px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
}

.twitch-chat {
  background: #18181b;
  border-left: 1px solid #3a3a3d;
  display: flex;
  flex-direction: column;
}

.twitch-chat-header {
  background: #1f1f23;
  padding: 8px 12px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #efeff1;
  border-bottom: 1px solid #3a3a3d;
}

.twitch-chat-messages {
  flex: 1;
  padding: 8px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.6;
}

.chat-line { margin-bottom: 4px; }
.chat-user { font-weight: bold; }
.chat-msg  { color: #efeff1; }

.twitch-chat-input { padding: 8px; border-top: 1px solid #3a3a3d; }
.twitch-chat-input input {
  width: 100%;
  background: #3a3a3d;
  border: 1px solid #555;
  color: #efeff1;
  font-family: Arial, sans-serif;
  font-size: 11px;
  padding: 6px 10px;
  outline: none;
}