/* SHAAFT PLAY — final visual polish */
:root {
  --sp-gold: #f3c84b;
  --sp-gold-soft: #f7df82;
  --sp-gold-deep: #b98718;
  --sp-surface: rgba(9, 17, 31, .76);
  --sp-surface-strong: rgba(8, 15, 28, .94);
  --sp-line: rgba(148, 163, 184, .12);
  --sp-muted: #8fa0b7;
}

/* Brand and navigation hierarchy */
.sidebar-brand-premium {
  min-height: 102px !important;
  padding: 14px 8px 18px !important;
}
.sidebar-brand-logo-img {
  width: 118% !important;
  max-width: 268px !important;
  filter: drop-shadow(0 8px 24px rgba(243, 200, 75, .13));
  transition: transform .22s ease, filter .22s ease;
}
.sidebar-brand-premium:hover .sidebar-brand-logo-img {
  transform: scale(1.025);
  filter: drop-shadow(0 10px 30px rgba(243, 200, 75, .22));
}
.sidebar-section {
  margin-top: 15px !important;
  color: #68788f !important;
  letter-spacing: .16em !important;
}
.sidebar-link {
  min-height: 38px !important;
  border: 1px solid transparent !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
}
.sidebar-link:hover {
  transform: translateX(2px);
  background: rgba(255,255,255,.025) !important;
}
.sidebar-link.active {
  background: linear-gradient(90deg, rgba(243,200,75,.13), rgba(243,200,75,.035)) !important;
  border-color: rgba(243,200,75,.34) !important;
  box-shadow: inset 3px 0 0 var(--sp-gold), 0 8px 26px rgba(0,0,0,.16) !important;
}
.sidebar-divider + .sidebar-section {
  color: var(--sp-gold) !important;
}
.sidebar-profile-card {
  border-color: rgba(243,200,75,.13) !important;
  background: linear-gradient(180deg, rgba(14,28,48,.88), rgba(7,14,27,.94)) !important;
}

/* Media page: spacing and hierarchy */
.medier-wrap {
  padding: 0 clamp(18px, 2vw, 34px) 64px !important;
  max-width: 2200px;
  margin: 0 auto;
}
.medier-topbar {
  gap: 10px !important;
  padding: 20px 0 18px !important;
  margin-bottom: 27px !important;
  border-color: rgba(243,200,75,.13) !important;
}
.medier-search-box:first-child { min-width: min(420px, 100%) !important; }
.medier-search-box input {
  height: 40px;
  background: rgba(7,14,27,.74) !important;
  border-color: rgba(148,163,184,.15) !important;
  border-radius: 12px !important;
  padding: 9px 16px 9px 42px !important;
  color: #edf2f7 !important;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.medier-search-box::before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 15px;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  border: 1.8px solid #718198;
  border-radius: 50%;
  pointer-events: none;
  box-sizing: border-box;
}
.medier-search-box::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 27px;
  top: calc(50% + 7px);
  width: 6px;
  height: 1.8px;
  background: #718198;
  transform: rotate(45deg);
  transform-origin: left center;
  border-radius: 2px;
  pointer-events: none;
}
.medier-search-box:focus-within input {
  background: rgba(8,17,31,.96) !important;
  border-color: rgba(243,200,75,.48) !important;
  box-shadow: 0 0 0 3px rgba(243,200,75,.08), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.medier-search-box:focus-within::before { border-color: var(--sp-gold); }
.medier-search-box:focus-within::after { background: var(--sp-gold); }
.medier-wish-search { flex-basis: 300px !important; }
.medier-wish-badge {
  height: 34px;
  box-sizing: border-box;
  gap: 5px !important;
  padding: 0 11px !important;
  background: rgba(243,200,75,.065) !important;
  border-color: rgba(243,200,75,.18) !important;
  color: #9eabc0 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}
.medier-wish-badge strong { color: var(--sp-gold-soft); font-size: 12px; }
.medier-badge-icon { opacity: .82; filter: saturate(.75); }
.medier-panel-btn {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  padding: 0 15px !important;
  border-radius: 11px !important;
  box-shadow: 0 7px 22px rgba(185,135,24,.18);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.medier-panel-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 28px rgba(185,135,24,.26); }

.medier-section-title {
  margin: 34px 0 13px !important;
  color: #7f8da3 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
}
.medier-section-title:first-of-type { margin-top: 0 !important; }
.medier-section-title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.medier-section-action {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#c6a844;
  border:1px solid rgba(243,200,75,.16);
  background:rgba(243,200,75,.055);
  text-decoration:none;
  padding:6px 11px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:0;
  text-transform:none;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.medier-section-action:hover { color:var(--sp-gold-soft); background:rgba(243,200,75,.1); border-color:rgba(243,200,75,.3); }

/* Library cards */
.medier-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 14px !important;
}
.medier-lib-card {
  border-radius: 13px !important;
  border-color: rgba(148,163,184,.13) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.28) !important;
  isolation: isolate;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.medier-lib-card::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.09) 50%, transparent 65%);
  transform:translateX(-130%);
  transition:transform .55s ease;
  pointer-events:none;
}
.medier-lib-card:hover {
  transform: translateY(-4px) scale(1.008);
  border-color: rgba(243,200,75,.38) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.38), 0 0 0 1px rgba(243,200,75,.06) !important;
}
.medier-lib-card:hover::before { transform:translateX(130%); }
.medier-lib-card::after { background: linear-gradient(180deg, rgba(5,9,20,.02) 34%, rgba(5,9,20,.94) 100%) !important; }
.medier-lib-card .medier-lib-name {
  left: 14px !important;
  bottom: 12px !important;
  font-size: 14px !important;
  letter-spacing: -.01em;
}
.medier-lib-card .emoji {
  right: 10px !important;
  top: 10px !important;
  font-size: 14px !important;
  padding: 5px 7px !important;
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
}

/* Horizontal content rails */
.medier-resume-row, .medier-channel-row, .medier-recent-row {
  gap: 13px !important;
  padding: 3px 2px 10px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(243,200,75,.42) rgba(255,255,255,.035);
  scroll-snap-type: x proximity;
}
.medier-resume-row::-webkit-scrollbar, .medier-channel-row::-webkit-scrollbar, .medier-recent-row::-webkit-scrollbar { height: 5px; }
.medier-resume-row::-webkit-scrollbar-track, .medier-channel-row::-webkit-scrollbar-track, .medier-recent-row::-webkit-scrollbar-track { background: rgba(255,255,255,.03); border-radius:999px; }
.medier-resume-row::-webkit-scrollbar-thumb, .medier-channel-row::-webkit-scrollbar-thumb, .medier-recent-row::-webkit-scrollbar-thumb { background: rgba(243,200,75,.38); border-radius:999px; }
.medier-resume-card { flex-basis: 248px !important; scroll-snap-align:start; }
.medier-resume-card img, .medier-recent-card img {
  border-radius: 10px !important;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.medier-resume-card:hover img, .medier-recent-card:hover img { transform: scale(1.018); filter: brightness(.84); box-shadow: 0 14px 34px rgba(0,0,0,.42); }
.medier-resume-progress { height:4px !important; margin-top:0 !important; border-radius:0 0 8px 8px !important; position:relative; top:-4px; background:rgba(0,0,0,.5) !important; }
.medier-resume-title { margin-top:3px !important; font-size:12px !important; color:#dbe3ee; }
.medier-play-overlay { border-radius:10px; background:rgba(3,7,17,.22); }
.medier-play-overlay span { width:40px !important; height:40px !important; box-shadow:0 7px 28px rgba(212,175,55,.36) !important; }

/* Live TV */
.medier-channel-card { flex-basis: 148px !important; width:148px !important; text-align:left !important; scroll-snap-align:start; }
.medier-channel-card .medier-channel-logo {
  border-radius:13px !important;
  border-color:rgba(148,163,184,.13) !important;
  background-color:#0a1020 !important;
  box-shadow:0 10px 28px rgba(0,0,0,.24);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  overflow:hidden;
}
.medier-channel-card:hover .medier-channel-logo { transform:translateY(-3px); border-color:rgba(243,200,75,.34) !important; box-shadow:0 15px 36px rgba(0,0,0,.36); }
.medier-live-badge {
  position:absolute;
  top:8px;
  left:8px;
  z-index:4;
  padding:3px 6px;
  border-radius:5px;
  background:#d92d3d;
  color:white;
  font-size:8px;
  font-weight:900;
  letter-spacing:.09em;
  box-shadow:0 4px 14px rgba(217,45,61,.26);
}
.medier-channel-number { margin-top:8px !important; color:#67758a !important; font-size:9px !important; text-transform:uppercase; letter-spacing:.08em; }
.medier-channel-name { color:#e5eaf1; font-size:12px !important; margin-top:3px !important; }
.medier-channel-now-title { color:#8f9db1 !important; font-size:10px !important; }
.medier-channel-now-bar { height:2px !important; }

.medier-recent-card { flex-basis:142px !important; width:142px !important; scroll-snap-align:start; }
.medier-recent-title { color:#dbe3ee; }
.medier-empty {
  min-height:54px;
  display:flex;
  align-items:center;
  color:#758399 !important;
  border:1px dashed rgba(148,163,184,.12);
  border-radius:12px;
  padding:0 16px !important;
  background:rgba(255,255,255,.015);
}

@media (max-width: 1350px) {
  .medier-search-box:first-child { flex-basis: 100%; }
  .medier-wish-search { flex:1 1 300px !important; }
}
@media (max-width: 720px) {
  .medier-wrap { padding: 0 14px 90px !important; }
  .medier-topbar { align-items:stretch !important; }
  .medier-search-box, .medier-wish-search { flex:1 1 100% !important; min-width:0 !important; }
  .medier-wish-badge { flex:1 1 calc(50% - 5px); justify-content:center; }
  .medier-panel-btn { width:100%; justify-content:center; }
  .medier-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px !important; }
  .medier-lib-card .medier-lib-name { font-size:12px !important; left:10px !important; bottom:9px !important; }
  .medier-lib-card .emoji { display:none; }
  .medier-section-title { margin-top:28px !important; }
}