/* =========================================
   Watch Page – Visual Refresh (override-only)
   Load this AFTER the existing styleedit.css
   Safe: no HTML changes required
   ========================================= */

/* 1) Design tokens */
:root{
  --bg:#1b1d21;
  --panel:#20242a;
  --panel-2:#0f1416;
  --text:#d7dde4;
  --muted:#9aa4b2;
  --brand:#ffc107;
  --brand-2:#b9910f;
  --ok:#34c759;
  --danger:#ef4444;
  --chip:#2a2d34;
  --chip-active:#2c3138;
  --ring:rgba(255,193,7,.35);
  --shadow:0 8px 24px rgba(0,0,0,.25);
}

/* 2) Base */
html,body{background:var(--bg);color:var(--text);}
body{font: 14px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}

/* 3) Header polish (fix bad shadow & improve contrast) */
header{
  background:#1e2024;
  box-shadow:0 1px 5px rgba(0,0,0,.4); /* fix typo '5 pxrgba' */
  border-bottom:1px solid rgba(255,255,255,.04);
}

/* 4) Main canvas spacing */
.body.player.has-sidebar{padding:10px 10px 16px; background:#1e2024; border-radius:10px;}
@media(min-width:1050px){
  .body.player.has-sidebar{margin-top:64px;}
}

/* 5) Sidebar: clean, sticky */
.sidebar{
  background:var(--panel);
  border-left:1px solid rgba(255,255,255,.06);
}
@media(min-width:877px){
  .sidebar{position:sticky; top:65px; height:calc(100vh - 75px); overflow:auto;}
}

/* 6) Cards */
.card{
  background:linear-gradient(180deg, var(--panel-2), #0a0d0f);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow);
  border-radius:12px;
}
.card-header{font-size:20px; letter-spacing:.2px}

/* 7) Server list chips */
.user-action{padding:6px 0 10px}
.server-list,
.user-action .server-list{display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0;}
.video-server{
  background:var(--chip);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  padding:6px 10px 5px;
  line-height:1.2;
  transition:all .18s ease-in-out;
  box-shadow:0 1px 0 rgba(0,0,0,.35) inset;
}
.video-server:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.16)}
.video-server.active,
.video-server.bt_active{
  background:linear-gradient(180deg, var(--chip-active), #252a31);
  color: var(--brand);
  border-color: rgba(255,193,7,.45);
  box-shadow:0 0 0 2px var(--ring);
  pointer-events:none;
}

/* 8) Player stage */
#video,
.video-stage{
  background: radial-gradient(1200px 600px at 50% -10%, #2c2f35 0%, #111 60%);
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
/* Prefer modern aspect-ratio where supported */
#video{position:relative; height:auto; padding-bottom:0; aspect-ratio:16/9;}
#video iframe{position:absolute; inset:0; width:100%; height:100%;}

/* 9) Action buttons */
.btn-likes,.btn-dislikes,.btn-rating,.download,.icon-view,.button.zoom{
  border:1px solid rgba(255,255,255,.1);
  background:#252a31;
  transition:transform .12s ease, box-shadow .12s ease, color .12s ease, background .12s ease;
}
.btn-likes:hover{color:var(--ok); box-shadow:0 0 0 2px rgba(52,199,89,.25); transform:translateY(-1px);}
.btn-dislikes:hover{color:var(--danger); box-shadow:0 0 0 2px rgba(239,68,68,.25); transform:translateY(-1px);}
.download:hover{color:var(--brand); background:#1d2228;}

/* 10) Breadcrumb – tighter & softer */
.breadcrumb li a{
  background:#242a31;
  border-radius:6px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.06);
}
.breadcrumb li a:before,
.breadcrumb li a:after{display:none}

/* 11) Titles & text */
.tab-movies1 h2.title-movies1,
.tab-movies1 h1.title-movies1,
.tab-movies h2.title-movies,
.tab-movies h1.title-movies{
  color:#e3e7ed; font-weight:600; border-left-color:var(--brand);
}
.title-movie{color:#cad2dc; font-weight:600;}
.popular-post h3.title{color:#cfd6de;}
.popular-post .item:hover h3,
li.item-movie:hover .title-movie{color:var(--brand)}

/* 12) Grid spacing for posters */
.list-movies{gap:10px;}
.list-movies>li{padding-left:0; padding-right:0}
.list-movies>li .image .movie-thumbnail{border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.25)}

/* 13) “Show more” content area */
.item-content-toggle{box-shadow:none; border-top:1px solid rgba(255,255,255,.08);}
.item-content-toggle .show-more{
  background:#1f242a; border-color:rgba(255,255,255,.1); border-radius:6px;
}
article{max-height:110px;}

/* 14) Footer */
footer .tab-footer{background:#15191d; border-top:1px solid rgba(255,255,255,.06);}
footer a:hover{color:#ffa000}

/* 15) Utilities */
.rounded{border-radius:8px}
.shadow-soft{box-shadow:var(--shadow)}
.m-0{margin:0}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}
.p-0{padding:0}.p-1{padding:4px}.p-2{padding:8px}.p-3{padding:12px}

/* 16) Small fixes */
.img-responsive,img{image-rendering:auto;}
img.thumb-bv{border-radius:8px}
.header-title{color:#cbd5e1}

/* 17) Accessibility: focus rings */
a:focus, button:focus, .video-server:focus{
  outline:none; box-shadow:0 0 0 3px var(--ring);
  border-color:rgba(255,193,7,.6);
}

/* 18) Mobile tweaks */
@media(max-width:876px){
  .user-action .server-list{gap:8px}
  .title-movie{font-size:.95rem}
  .popular-post h3.title{font-size:15px; -webkit-line-clamp:2}
  article{max-height:140px}
}