:root{
  --bg:#fff;
  --panel:#fff;
  --soft:#f7f7f8;
  --text:#111;
  --muted:#60646c;
  --border:#e6e6e6;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
  --radius: 16px;
}

*{box-sizing:border-box}
img{max-width:100%}
body{
  margin:0;
  font-family: system-ui, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}

/* ===== TOP BAR ===== */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

.brand{
  display:flex; align-items:center; gap:10px;
  font-weight: 900;
  padding:8px 10px;
  border-radius: 999px;
  white-space:nowrap;
}
.brand:hover{background:var(--soft); text-decoration:none}
.logoDot{
  width:12px;height:12px;border-radius:999px;
  background:#ff0033;
  box-shadow:0 0 0 6px rgba(255,0,51,.08);
}

.search{
  flex:1;
  display:flex; gap:8px; align-items:center;
  max-width: 720px;
}
.search input{
  flex:1;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius: 999px;
  outline:none;
  font-size:16px;
  background: var(--panel);
  min-width: 160px;
}
.search button{
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius: 999px;
  cursor:pointer;
  background: var(--soft);
}
.search button:hover{filter:brightness(.98)}

.nav{
  display:flex; gap:6px; align-items:center;
  flex-wrap:wrap;
}
.navLink{
  padding:8px 10px;
  border-radius:999px;
  color: var(--muted);
  font-size:14px;
  white-space:nowrap;
}
.navLink:hover{background:var(--soft); text-decoration:none}

/* ===== MAIN SHELL ===== */
.shell{
  max-width: 1380px;   /* קצת יותר רחב — מרגיש יותר כמו יוטיוב */
  margin: 14px auto;
  padding: 0 14px 20px;
}
.page{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.pad{padding:14px}
.muted{color:var(--muted)}
.h1{margin:0 0 6px; font-size:22px; font-weight:900}
.sub{margin:0; color:var(--muted)}
.hr{height:1px; background:var(--border); margin:12px 0}

/* ===== GRID CARDS ===== */
.grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
@media (max-width: 1180px){ .grid{grid-template-columns: repeat(3,1fr)} }
@media (max-width: 860px){ .grid{grid-template-columns: repeat(2,1fr)} }
@media (max-width: 520px){ .grid{grid-template-columns: 1fr} }

.card{
  border:1px solid var(--border);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
}
.card:hover{filter:brightness(.995)}
.cardBody{padding:10px}

/* כותרת כמו יוטיוב: 2 שורות */
.cardTitle{
  font-weight: 900;
  margin:0 0 6px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.cardMeta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted);
}

.thumb16x9{
  width:100%;
  aspect-ratio: 16/9;
  object-fit:cover;
  display:block;
  background:#eee;
}

.avatarRow{display:flex; gap:10px; align-items:center}
.avatar{
  width:44px;height:44px;
  border-radius: 14px;
  background:#eee;
  object-fit:cover;
  border:1px solid #f0f0f0;
  flex:0 0 auto;
}

/* ===== CHANNEL TABS ===== */
.tabs{
  display:flex;
  gap:8px;
  margin-top:10px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom:2px;
}
.tabs::-webkit-scrollbar{height:0}
.tab{
  border:1px solid var(--border);
  background: var(--soft);
  padding:8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size:14px;
  flex:0 0 auto;
}
.tab.active{background:#111;color:#fff;border-color:#111}
.tab:hover{text-decoration:none; filter:brightness(.98)}

.btnRow{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border);
  background: var(--soft);
  padding:8px 12px;
  border-radius: 999px;
  font-weight:700;
}
.btn:hover{text-decoration:none; filter:brightness(.98)}

/* ===== WATCH PAGE (RTL כמו יוטיוב) ===== */
.watchLayout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 380px; /* main (ימין) + side (שמאל) */
  gap:16px;
  align-items:start;
}
.watchMain{min-width:0}
.watchSide{
  border-inline-start: 1px solid var(--border);
  padding-inline-start: 12px;
}

/* נגן */
.player{
  width:100%;
  aspect-ratio: 16/9;
  border:0;
  border-radius: 14px;
  overflow:hidden;
  background:#000;
}

/* רשימת מוצעים – קומפקט כמו יוטיוב */
.reco{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 0;
  border-bottom:1px solid #f2f2f2;
}
.recoThumb{
  width:168px;
  aspect-ratio: 16/9;
  border-radius: 12px;
  object-fit:cover;
  background:#eee;
  border:1px solid #f0f0f0;
  flex:0 0 auto;
}
.recoTitle{
  font-weight:900;
  margin:0 0 6px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.recoMeta{color:var(--muted); font-size:12px}

/* ===== MOBILE FIXES (כל האתר) ===== */
@media (max-width: 900px){
  .watchLayout{grid-template-columns: 1fr}     /* מוצעים יורדים למטה */
  .watchSide{
    border-inline-start:0;
    padding-inline-start:0;
    border-top:1px solid var(--border);
    margin-top:12px;
    padding-top:12px;
  }
}

/* header במובייל */
@media (max-width: 720px){
  .topbar{
    flex-wrap:wrap;
    gap:8px;
    padding:10px 10px;
  }
  .brand{order:1}
  .nav{
    order:2;
    width:100%;
    flex-wrap:nowrap;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar{height:0}
  .search{
    order:3;
    width:100%;
    max-width:none;
  }

  .shell{
    padding:0;           /* אין רווחים מוזרים במובייל */
    margin: 10px auto;
  }
  .page{
    border-radius:0;     /* יותר "אפליקציה" */
    border-left:0;
    border-right:0;
    box-shadow:none;
  }
  .pad{padding:12px}
}

/* מוצעים במובייל – thumb קטן יותר */
@media (max-width: 520px){
  .recoThumb{width:140px}
}