/* Popup */
.crz-yt-modal {
  position: fixed; bottom:20px; right:20px;
  width:520px; max-height:320px;
  background:#0b0014;
  border:1px solid #3a0066;
  border-radius:12px;
  box-shadow:0 0 25px #8a2bff55;
  display:none; flex-direction:column; overflow:hidden;
  font-family:system-ui;
}
.crz-yt-modal.open { display:flex; }

/* Header */
.crz-yt-header {
  background:#120020;
  padding:8px 12px;
  display:flex; justify-content:space-between; align-items:center;
  color:#d9b3ff; font-size:14px;
  border-bottom:1px solid #3a0066;
  text-shadow:0 0 6px #b44bff;
}
.crz-yt-close {
  cursor:pointer; font-size:18px; color:#b77dff;
  transition:.15s;
}
.crz-yt-close:hover { color:#fff; text-shadow:0 0 8px #c44bff; }

/* Body */
.crz-yt-body { padding:8px 10px; display:flex; flex-direction:column; gap:8px; }

/* Searchbar */
.crz-yt-searchbar {
  position: relative;
  display: flex;
  gap: 6px;
  align-items: center;
  background: #140022;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #3a0066;
  box-shadow: 0 0 10px #7a1aff33 inset;
  z-index: 10;
}
.crz-yt-searchbar:focus-within {
  border-color:#b44bff;
  box-shadow:0 0 10px #b44bffaa;
}
#crz-yt-search-input {
  flex:1; padding:6px 8px; border:none;
  background:transparent; color:#e8ccff; font-size:13px;
}
#crz-yt-search-btn {
  padding:6px 10px; border:none; border-radius:6px;
  background:#9a00ff; color:#fff; cursor:pointer; font-size:13px;
  box-shadow:0 0 8px #9a00ff88;
  transition:.15s;
}
#crz-yt-search-btn:hover {
  background:#c400ff;
  box-shadow:0 0 12px #c400ffcc;
}

/* Autocomplete */
.crz-yt-autocomplete {
  position: absolute;
  top: 38px;
  left: 0;
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
  background: #1a0030;
  border: 1px solid #3a0066;
  border-radius: 6px;
  box-shadow: 0 0 12px #7a1aff55;
  z-index: 9999;
}
.crz-yt-autocomplete div {
  padding: 6px 8px;
  cursor: pointer;
  font-size: 13px;
  color: #e8ccff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: .15s;
}
.crz-yt-autocomplete div:hover {
  background: #2a0050;
  box-shadow: 0 0 8px #b44bff55 inset;
}

/* Layout */
.crz-yt-main {
  display:grid; grid-template-columns:1.2fr 1.1fr;
  gap:8px; height:220px;
}

/* Results */
#crz-yt-results {
  background:#120020; border-radius:8px; padding:6px;
  overflow-y:auto; display:flex; flex-direction:column; gap:6px;
  box-shadow:0 0 10px #7a1aff22 inset;
}
.crz-yt-result {
  display:flex; gap:6px; background:#1a0030;
  padding:5px; border-radius:6px; cursor:pointer; align-items:center;
  transition:.15s;
  border:1px solid #2a0050;
}
.crz-yt-result:hover {
  background:#2a0050;
  box-shadow:0 0 10px #b44bff55;
}
.crz-yt-result img {
  width:60px; height:34px; border-radius:4px; object-fit:cover;
  box-shadow:0 0 6px #7a1aff55;
}
.crz-yt-result-title {
  font-size:12px; color:#e8ccff;
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
  text-shadow:0 0 4px #7a1aff;
}

/* Player */
.crz-yt-player-wrap {
  background:#120020; border-radius:8px; padding:6px;
  display:flex; flex-direction:column; gap:4px;
  box-shadow:0 0 10px #7a1aff22 inset;
}
.crz-yt-player-label {
  font-size:12px; color:#cfaaff;
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
  text-shadow:0 0 4px #9a00ff;
}
#crz-yt-player {
  width:100%; height:180px; border-radius:6px; overflow:hidden;
  background:#000;
  box-shadow:0 0 12px #9a00ff55;
}

/* Misc */
.crz-yt-sentinel { height:1px; }
.crz-yt-empty { font-size:12px; color:#b77dff; }

/* Open button */
#crz-yt-open {
  padding:8px 14px; cursor:pointer; border-radius:8px; border:none;
  background:#9a00ff; color:#fff; font-size:14px;
  box-shadow:0 0 12px #9a00ff88;
  transition:.15s;
}
#crz-yt-open:hover {
  background:#c400ff;
  box-shadow:0 0 16px #c400ffcc;
}