:root {
  --playlist-width: 400px;
  --primary: #1a73e8;
  --highlight: #25c1ff;
  --player-bg-dark: #15191f;
  --player-bg-light: #f7f7f9;
  --sidebar-bg-dark: #232735;
  --sidebar-bg-light: #f1f2f8;
  --bar-trans-dark: rgba(33,41,60,0.94);
  --bar-trans-light: #e7edf7;
  --text-dark: #e7edf7;
  --text-light: #151a22;
  --panel-bg-dark: #212638;
  --panel-bg-light: #f9fafc;
  --playlist-bar-h: 54px;
  --success: #2ec866;
  --warn: #eab626;
  --error: #ee3a40;
  --snackbar: #15191fEA;
}
html, body { margin:0;padding:0;width:100vw;height:100vh;overflow:hidden; background: var(--player-bg-dark);}
body {font-family:'Noto Sans SC',sans-serif; color:var(--text-dark); background: var(--player-bg-dark); transition: background .23s;}
body.theme-light {background: var(--player-bg-light); color:var(--text-light);}
body.theme-purple { background:#29224b; }
body.theme-green { background:#112a22; }
.iptv-root {height:100vh;display:flex;position:relative;}
.iptv-player-area {flex:1;position:relative;min-width:0;}
.player-container {width:100vw;height:100vh;position:relative;overflow:hidden;}
#video-player {
  position:absolute;left:0;top:0;width:100vw;height:100vh;object-fit:contain;background:#000;background-color:#000;
}
.player-controls {
  position:absolute;left:0;right:0;bottom:0;z-index:20;
  display:flex;align-items:center;padding:16px;background:rgba(255,255,255,0.1);}
.control-btn, .fullscreen-btn {background:rgba(255,255,255,0.1);border:none;color:var(--text-dark);
  width:44px;height:44px;border-radius:50%;font-size:21px;margin-right:7px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
body.theme-light .control-btn {background:rgba(32,47,80,0.08);color:var(--text-light);}
.channel-info-flex {flex:1;padding:0 14px;min-width:0;}
#current-channel {font-weight:600;font-size:1.1rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
#player-status {color:var(--highlight);font-size:0.9rem;}
.fullscreen-btn {margin-left:auto;}
.default-playlist-bar {
  position:absolute;top:0;left:0;right:0;z-index:33;height:var(--playlist-bar-h);display:flex;align-items:center;gap:0;
  background:var(--bar-trans-dark);border-bottom:1.5px solid #234f76; padding:0 9px 0 5px;transition:top 0.34s cubic-bezier(0.5,0,0.3,1.1);
}
body.theme-light .default-playlist-bar {background:var(--bar-trans-light);border-bottom:1.5px solid #0b468c0c;}
.default-playlist-bar.hide {top:-80px;}
.bar-group-left {display:flex;align-items:center;gap:12px;}
.bar-group-main {min-width:120px;margin-right:6px;}
.bar-group-right {flex:1;display:flex;align-items:center;justify-content:flex-end;}
.theme-btn, .favorite-mode-btn, #history-btn, #show-upload-panel-btn {
  background:none;color:#ffb100; font-size:1.19rem; padding:12px 12px; cursor:pointer; border:none; opacity:0.97;
  border-radius:12px; transition:opacity 0.13s,background 0.13s;margin-right:2px;display:inline-flex;align-items:center;}
.theme-btn:hover, .favorite-mode-btn:hover, #history-btn:hover, #show-upload-panel-btn:hover {opacity:1;background:rgba(230,185,15,0.13);}
.playlist-dropdown-wrap {position:relative;display:inline-block;}
.playlist-dropdown-icon {
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:100%;background:linear-gradient(42deg,var(--primary),var(--highlight));cursor:pointer;
  box-shadow:0 2px 13px #1a73e818;transition:box-shadow .17s;}
.playlist-dropdown-list {position:absolute;top:110%;left:0;min-width:52px;padding:7px 2px 7px 2px;background:var(--panel-bg-dark);border-radius:9px;display:none;flex-direction:column;gap:9px;border:1.3px solid #1a73e83d;margin-top:2px;}
body.theme-light .playlist-dropdown-list {background:var(--panel-bg-light);border:1.3px solid #d2e3fc;}
.playlist-dropdown-list.open {display:flex;}
.playlist-dd-item {background:none;border:none;width:44px;height:44px;padding:0;margin:0 auto;border-radius:99px;box-shadow:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.36em;transition:background .13s;}
.playlist-dd-item.selected {background:var(--highlight);}
.playlist-dd-item:hover:not(.selected) {background:rgba(31,177,236,0.13);}
.bar-group-right .default-playlist-btn {background:#2c63ff;min-width:36px;padding-left:7px;padding-right:7px;margin:5px;display:inline-flex;align-items:center;}
.default-playlist-btn {border:none;border-radius:8px;color:var(--text-dark);font-size:1rem;font-weight:600;display:flex;align-items:center;gap:7px;cursor:pointer;}
.playlist-slider {
  position:fixed;top:0;right:0;height:100vh;width:var(--playlist-width);max-width:99vw;
  background:var(--sidebar-bg-dark);box-shadow:-8px 0px 30px #0005;transform:translateX(100%);
  transition:transform 0.38s cubic-bezier(.53,.02,.33,1.2);z-index:50;display:flex;flex-direction:column;
  border-top-left-radius:18px;border-bottom-left-radius:18px;}
body.theme-light .playlist-slider {background:var(--sidebar-bg-light);}
.playlist-slider.open {transform:translateX(0);}
.playlist-header {display:flex;align-items:center;justify-content:space-between;height:56px;
  padding:0 12px;border-bottom:1.2px solid #284088;color:var(--text-dark);background:rgba(40,40,65,0.92);}
body.theme-light .playlist-header {background: #eff3fc;color:var(--text-light);border-bottom:1.2px solid #c3d5f0;}
.playlist-header-main {display:flex;align-items:center;gap:12px;width:100%;min-width:0;}
.playlist-header h3 {font-size:1.09rem;font-weight:600;letter-spacing:.18px;margin:0;color:var(--highlight);}
.playlist-counts {font-size:1rem;color:#25baff;opacity:.95;font-weight:600;margin-left:2px;}
.close-slider-btn {font-size:1.15rem;background:none;color:inherit;border:none;cursor:pointer;line-height:1;opacity:0.97;}
.channels-list {flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 8px 24px;display:grid;grid-gap:11px;}
.channel-item {
  background:rgba(80,193,247,0.07);border-radius:8px;display:flex;align-items:center;gap:12px;min-width:0;
  padding:16px 18px;cursor:pointer;transition:background .17s,border .15s;}
.channel-item.active {background:rgba(80,193,247,0.23);border-left:5px solid var(--highlight);}
body.theme-light .channel-item {background:rgba(32,47,80,0.05);}
body.theme-light .channel-item.active {background:rgba(36,153,244,0.18);border-left:5px solid var(--highlight);}
.channel-logo {
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(79,195,247,0.10);border-radius:50%;overflow:hidden;}
.channel-logo img {
  width:100%;height:100%;object-fit:cover;border-radius:50%;
}
.channel-details {flex:1;min-width:0;}
.channel-name {font-weight:500;font-size:1.13rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.channel-category {font-size:1em;color:#25a0ec;opacity:.81;}
.favorite-icon-channel {
  color:#ffd000;font-size:1.23em;cursor:pointer;margin-left:13px;opacity:0.94;vertical-align:middle;transition:.21s;}
.favorite-icon-channel.fav-no {color:#bbb;opacity:.55;}
.empty-list {color:#79a1ff;text-align:center;padding:30px 12px 10px;}
.empty-list i {font-size:2.4rem;opacity:0.23;margin-bottom:13px;}
.loading-overlay {
  position:absolute;left:0;top:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.74);z-index:888;color:var(--text-dark); animation:fadein .5s;}
body.theme-light .loading-overlay { background:rgba(180,200,235,0.72);color:#232b3e;}
.spinner {width:44px;height:44px;border-radius:50%;border:5px solid #eee3;border-top:5px solid var(--highlight);animation:spin 1s linear infinite;}
@keyframes spin {0%{transform:rotate(0);}100%{transform:rotate(360deg);}
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.snackbar {
  display:none;position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--snackbar);color:#fff;min-width:160px;max-width:93vw;padding:17px 32px;font-size:1.07em;
  border-radius:12px;box-shadow:0 6px 40px #1238;z-index:2000;text-align:center;animation:fadein .38s;}
.snackbar.show {display:block;}
.upload-panel-bg {pointer-events:none;opacity:0;transition:opacity .23s;position:fixed;z-index:99;left:0;top:0;width:100vw;height:100vh;background:rgba(10,18,28,0.79);}
.upload-panel-bg.open {opacity:1;pointer-events:auto;}
.upload-panel {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    background:var(--panel-bg-dark);padding:44px 26px 32px;border-radius:18px;box-shadow:0 3px 80px #000c;
    display:flex;flex-direction:column;align-items:center;min-width:320px;max-width:96vw;}
body.theme-light .upload-panel {background:var(--panel-bg-light);}
.upload-panel h2 {margin:0 0 12px;color:var(--highlight);}
.file-upload-label {
  border:2px dashed #2da9e6;border-radius:10px;padding:13px 28px;color:var(--highlight);
  background:rgba(30,35,54,0.12);cursor:pointer;font-size:1.17rem;display:flex;flex-direction:column;align-items:center;margin-bottom:17px;}
.file-upload-label i {margin-bottom:6px;font-size:1.9em;}
.upload-drop-info {margin-bottom:13px;}
.or-upload {margin:13px 0 8px;}
.upload-panel input[type="file"]{display:none;}
.url-upload-group {display:flex;gap:10px;margin-bottom:14px;}
.url-upload-input {border:1px solid #2196f3;border-radius:7px;padding:12px 18px;font-size:1.18rem;width:232px;}
body.theme-light .url-upload-input {border:1px solid #7fbbee;background:#f8faff;}
.url-upload-btn {background:var(--highlight);color:#fff;border:none;padding:10px 22px;border-radius:7px;font-weight:500;font-size:1.08rem;cursor:pointer;}
.upload-panel .panel-close {position:absolute;right:12px;top:10px;font-size:1.23rem;background:none;border:none;cursor:pointer;}
.upload-panel .big-upload-progress {margin:6px 0 0; width:98%; background:#b7c3db; border-radius:7px; height:14px; }
.upload-panel .bar {height:100%;background:linear-gradient(90deg,#56bfff 70%,#378fff);width:0%;transition:width .25s;}
[role="button"] {outline: 0;}
.focus-visible:focus { outline: 2px solid var(--highlight);}
[aria-live] {outline: none;}
#history-modal-bg {pointer-events:none;opacity:0;position:fixed;z-index:120;top:0;left:0;width:100vw;height:100vh;background:rgba(5,10,21,0.72);transition:opacity .18s;}
#history-modal-bg.open {pointer-events:auto;opacity:1;}
#history-modal {
  background:var(--panel-bg-dark);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border-radius:17px;padding:32px 18px 22px;max-width:94vw;min-width:245px;color:#ace7ff;box-shadow:0 2px 50px #000b;display:flex;flex-direction:column;align-items:center;
  border:1.5px solid rgba(76,175,247,0.12);}
body.theme-light #history-modal {background:var(--panel-bg-light);color:#2c4671;}
#history-modal h2 {margin:0 0 12px;font-size:1.08em;color:var(--highlight);}
.history-list{margin:0 0 8px;width:100%;max-height:340px;overflow:auto;overflow-x:hidden;text-align:left;}
.history-item {background:rgba(60,66,98,0.14);padding:8px 7px 8px 9px;margin-bottom:8px;font-size:.96em;
  border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:5px;}
.history-item span {flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.history-del-btn {background:none;color:#fea3a6;font-size:1.08em;border:none;cursor:pointer;padding:3px;margin-left:6px;}
.history-del-btn:hover{color:#ff3656;}
.history-dt {color:#76b2ff;font-size:.88em;margin-left:11px;}
.bulkbtn {background:linear-gradient(45deg,#dc2430,#ffb100);border:none;color:#fff;border-radius:7px;padding:7px 13px 7px 12px;margin-top:6px;cursor:pointer;}
.bulkbtn:hover{opacity:.91;}

/* --- Mobile/touch enhancements --- */
@media (max-width: 600px) {
  .default-playlist-bar {
    touch-action: pan-x pan-y;
    min-height: 58px;
    font-size: 1.15rem;
  }
  .bar-group-left, .bar-group-main, .bar-group-right {
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .playlist-dropdown-icon, .playlist-dd-item, .control-btn, .favorite-mode-btn, #history-btn, #show-upload-panel-btn {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.2em;
  }
  .playlist-header-main {flex-wrap: wrap;}
  .channel-item {padding: 13px 10px;}
}
.default-playlist-bar.slide-down {
  top:0 !important;
  transition: top 0.2s ease-in;
  box-shadow: 0 7px 32px #0005;
}
@media (max-width:600px) {
  .bar-group-left, .bar-group-right, .bar-group-main {
    flex-wrap: wrap;
    gap:6px;
  }
}