:root{
  --bg: #071f13;
  --card: #0c2b20;
  --muted: #9ccbb7;
  --accent: #34d399;
  --glass: rgba(8,38,29,0.6);
  --gap: 12px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Layout */
html,body,#app{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),#062216);
  color:#e6fff7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{
  box-sizing:border-box;
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  padding:14px;
}

/* Header */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{
  font-weight:700;
  color:var(--accent);
  font-size:18px;
}
.search-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}
.search-wrap input{
  width:220px;
  max-width:60vw;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(100,160,140,0.12);
  background:var(--card);
  color:var(--muted);
}

/* small modifier to keep the header ad snug to the search bar (top-right placement) */
.ad-top-right{
  margin-left:6px;
}

/* slightly larger ad square container (keeps 1:1 ratio; non-intrusive) */
.ad-square{
  width:88px;
  height:88px;
  min-width:88px;
  min-height:88px;
  aspect-ratio:1 / 1;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(12,42,34,0.6), rgba(8,30,24,0.6));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 8px 26px rgba(4,10,8,0.5);
  border:1px solid rgba(100,160,140,0.08);
}



/* Grid list */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;
  align-items:start;
  flex:1 1 auto;
  overflow:auto;
  padding-right:6px;
}
.card{
  background:linear-gradient(180deg, rgba(20,60,48,0.9), rgba(12,42,34,0.9));
  border-radius:10px;
  padding:8px;
  box-shadow:0 6px 18px rgba(4,10,8,0.6);
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:120px;
}
.thumb{
  height:80px;
  border-radius:6px;
  background:linear-gradient(180deg, rgba(12,42,34,0.6), rgba(8,30,24,0.6));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:12px;
  overflow:hidden;
}
.meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.title{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Player */
.player{
  position:fixed;
  inset:12px;
  background:var(--glass);
  border-radius:12px;
  box-shadow:0 12px 40px rgba(2,8,6,0.7);
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px;
  z-index:40;
  backdrop-filter: blur(6px) saturate(1.1);
}
.player.hidden{display:none}
.player-top{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:space-between;
}
.btn{
  background:var(--card);
  border:1px solid rgba(100,160,140,0.08);
  padding:8px 10px;
  border-radius:8px;
  font-size:13px;
  color:var(--muted);
}

/* Fancy compact open-in-new-tab icon button */
.open-btn{
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(52,211,153,0.06), rgba(52,211,153,0.02));
  color:var(--accent);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.open-btn svg{display:block}
.open-btn:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 8px 24px rgba(52,211,153,0.08);
  background:linear-gradient(180deg, rgba(52,211,153,0.12), rgba(52,211,153,0.03));
}
.open-btn:active{transform:translateY(-1px) scale(0.995)}
.iframe-wrap{
  flex:1 1 auto;
  background:#031510;
  border-radius:8px;
  overflow:hidden;
}
iframe{
  width:100%;
  height:100%;
  border:0;
}

/* Footer */
.footer{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  padding-top:4px;
}

/* Responsive tweaks for mobile viewport (no scrolling main) */
@media (max-width:520px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .player{left:8px;right:8px;top:8px;bottom:8px}
  .search-wrap input{width:140px}
  .ad-square{width:48px;height:48px;min-width:48px;min-height:48px}
  .ad-list-end{width:80px;height:80px}
}