/* YPH Drop-in styles (scoped via .yph-wrap) */
.yph-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#e9eefc}
.yph-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.35);backdrop-filter: blur(6px);position:sticky;top:0;z-index:9}
.yph-brand{font-weight:700;letter-spacing:.2px}
.yph-lang{display:flex;gap:8px;align-items:center;font-size:12px;opacity:.9}
.yph-lang button{background:transparent;border:1px solid rgba(255,255,255,.18);color:#e9eefc;border-radius:999px;padding:4px 9px;cursor:pointer}
.yph-lang button[data-active="1"]{border-color:rgba(140,170,255,.9)}
.yph-news{display:flex;justify-content:center;gap:8px;align-items:center;padding:10px 12px;background:rgba(15,21,34,.9);border-bottom:1px solid rgba(255,255,255,.08)}
.yph-news a{color:#8caaFF;text-decoration:none}
.yph-news a:hover{text-decoration:underline}
.yph-player{padding:12px;display:grid;grid-template-columns: 1fr 320px;gap:12px}
.yph-iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:14px;background:#0b0e14}
.yph-thumbs{border:1px solid rgba(255,255,255,.10);border-radius:14px;overflow:auto;max-height: calc( (100vw - 24px) * 9 / 16 ); background:rgba(0,0,0,.25)}
.yph-thumb{display:flex;gap:10px;align-items:center;padding:10px;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer}
.yph-thumb:last-child{border-bottom:none}
.yph-thumb img{width:84px;height:48px;object-fit:cover;border-radius:10px;background:#0b0e14}
.yph-thumb .t{font-size:13px;line-height:1.25}
.yph-thumb .m{font-size:11px;opacity:.7}
.yph-sections{padding:12px;display:flex;flex-direction:column;gap:18px}
.yph-section{border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(0,0,0,.20);padding:12px}
.yph-section h2{margin:0 0 10px 0;font-size:15px}
.yph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.yph-card{border:1px solid rgba(255,255,255,.10);border-radius:14px;overflow:hidden;background:rgba(15,21,34,.7);cursor:pointer}
.yph-card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#0b0e14}
.yph-card .c{padding:10px}
.yph-card .c .t{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yph-card .c .m{font-size:11px;opacity:.7}
.yph-muted{opacity:.75;font-size:12px}
@media (max-width: 980px){
  .yph-player{grid-template-columns:1fr}
  .yph-thumbs{max-height:240px}
}

/* Preview-style controls */
.yph-controls{padding:12px;display:flex;flex-direction:column;gap:10px}
.yph-tabs{display:flex;gap:8px;flex-wrap:wrap}
.yph-tab{padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(15,21,34,.55);cursor:pointer;font-size:12px;opacity:.9}
.yph-tab[data-active="1"]{border-color:rgba(140,170,255,.9);background:rgba(22,33,58,.85)}
.yph-chips{display:flex;gap:8px;flex-wrap:wrap}
.yph-chip{padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);cursor:pointer;font-size:12px;opacity:.9}
.yph-chip[data-active="1"]{border-color:rgba(140,170,255,.9);background:rgba(22,33,58,.85)}
.yph-gridwrap{padding:12px}
.yph-gridtitle{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 10px 0}
.yph-gridtitle h2{margin:0;font-size:15px}
.yph-count{font-size:12px;opacity:.75}


/* Gold theme for preview controls (match yphgroup.com/preview vibe) */
:root{
  --yph-gold: #d4af37;
  --yph-gold-2: #b8942b;
  --yph-gold-bg: rgba(212,175,55,.14);
  --yph-gold-bg-2: rgba(212,175,55,.22);
}
.yph-tab, .yph-chip{
  border-color: rgba(212,175,55,.65) !important;
  color: var(--yph-gold) !important;
  background: rgba(0,0,0,.22) !important;
  text-shadow: 0 0 0 transparent;
}
.yph-tab:hover, .yph-chip:hover{
  border-color: rgba(212,175,55,.95) !important;
  background: var(--yph-gold-bg) !important;
}
.yph-tab[data-active="1"], .yph-chip[data-active="1"]{
  border-color: rgba(212,175,55,1) !important;
  background: var(--yph-gold-bg-2) !important;
  color: #fff3c4 !important;
}

