:root {
  --main-bg: #1b2027;
  --main-clr: #fff;
  --accent: #ff00dd;
  --heading-bg: #181b20;
  --footer-bg: #181b20;
  --footer-clr: #fff;
  --ch-name: #ff9c00;
  --cat-bg: #261e35;
  --cat-clr: #80ffe5;
  --cat1: #d7c2ff;
  --cat2: #e1ff80;
  --cat3: #ffa8a8;
  --cat4: #80e7ff;
  --cat5: #ffe480;
  font-family: Arial, sans-serif;
}
html,body { margin:0; padding:0; background:var(--main-bg); color:var(--main-clr); }
body { min-height:100vh; display:flex; flex-direction:column; }

/* loading */
.loading { position:fixed; z-index:99999; background:linear-gradient(135deg,#1b2027 60%,#ff00dd 100%); left:0;top:0;right:0;bottom:0; display:flex; align-items:center; justify-content:center; flex-direction:column; transition: opacity .4s; }
.loading.hide { opacity:0; pointer-events:none; }
.lds-roller { display: inline-block; position: relative; width: 80px; height: 80px; }
.lds-roller div { animation: lds-roller 1.2s cubic-bezier(.5,0,.5,1) infinite; transform-origin: 40px 40px; }
.lds-roller div:after { content: " "; display: block; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #ff00dd; margin: -4px 0 0 -4px; }

/* header */
.header, header { padding:20px 0 8px 0; text-align:center; background:var(--heading-bg); font-size:2em; font-weight:bold; color:var(--main-clr); letter-spacing:2px; border-bottom:2px solid var(--accent); position:relative; z-index:2; box-shadow:0 2px 10px #0003; }

/* category heading */
.cat-heading { background:var(--cat-bg); color:var(--cat-clr); padding:13px 8px 8px 14px; font-size:1.2em; font-weight:bold; letter-spacing:1.5px; border-radius:10px 10px 0 0; margin-top:28px; }

/* channel grid */
.channel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 10px; background: #232733; padding: 16px 8px 12px 8px; border-radius: 0 0 18px 18px; margin-bottom: 18px; margin-top:0; }
@media (max-width: 1024px) { .channel-grid { grid-template-columns: repeat(3,1fr);} }
@media (max-width: 750px) { .channel-grid { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 450px) { .channel-grid { grid-template-columns: 1fr 1fr; gap:10px 4px; } }

.channel-card { background: #2b2e3a; border-radius: 12px; box-shadow: 0 4px 14px #0002; padding: 10px 4px 10px 4px; text-align:center; display:flex; flex-direction:column; align-items:center; transition:.18s; border:2.5px solid transparent; position:relative; }
.channel-card:hover { border-color: var(--accent); z-index:3; }
.channel-logo { width: 65px; height: 65px; object-fit: contain; margin-bottom:7px; background:#fff2; border-radius:9px; box-shadow:0 0 8px #ff00dd30; border:2px solid #fff3; transition:.2s; }
.ch-name { font-weight:bold; font-size:1em; letter-spacing:1px; color:var(--ch-name); text-shadow:0 2px 4px #0004; margin-bottom:4px; margin-top:2px; font-family: Arial Black,Arial,sans-serif; text-transform:uppercase; }
.play-btn { background:#ff00dd; color:#fff; font-weight:bold; border:none; border-radius:6px; padding:7px 18px; font-size:1em; cursor:pointer; margin-top:11px; box-shadow:0 2px 8px #ff00dd50; letter-spacing:1.4px; transition:.15s; text-transform:uppercase; }
.play-btn:hover { background:#fff;color:#ff00dd; }

/* search */
.search-bar-container { width:100%; display:flex; justify-content:center;align-items:center; margin:22px 0 0 0; }
.search-bar { width:210px; max-width:80vw; border-radius:18px; border:2px solid #ff00dd; padding:8px 17px; font-size:1em; font-weight:bold; outline:none; background:#fff; color:#181b20; letter-spacing:1.3px; text-transform:uppercase; box-shadow:0 2px 8px #ff00dd33; transition:.2s; }
.search-bar:focus { border-color:#ff9c00; box-shadow:0 3px 14px #ff9c0022; }

/* player modal */
#playerModal { display:none; position:fixed; z-index:10000; left:0;top:0;right:0;bottom:0; background:rgba(24,24,32,0.98); align-items:center; justify-content:center; animation:fadein .2s; padding:18px; }
#playerModal.active { display:flex; }
#playerWrapper { width:100%; max-width:1100px; position:relative; }
#playerWrapper #dplayer { width:100%; }

/* settings popup */
.settings-gear { position: fixed; left:7px; top:7px; z-index:10002; width:34px; height:34px; background:#111a; border-radius:7px; box-shadow: 0 2px 8px #222a; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.settings-gear img { width:28px; height:28px; }

/* footer */
footer { background:var(--footer-bg); color:var(--footer-clr); text-align:center; font-size:1em; font-weight:bold; letter-spacing:1.5px; padding:12px 0 8px 0; border-top:2px solid var(--accent); margin-top:auto; box-shadow:0 -2px 14px #0003; }

/* particles canvas layering if used */
#particles-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* small util */
.hidden { display:none!important; }