html,body,#root{width:100%;min-width:100%;min-height:100%;margin:0;padding:0}body{overflow:hidden}*{box-sizing:border-box}body{color:#111827;background:#f3f4f6;margin:0;font-family:Arial,sans-serif;font-size:14px}button,input,select{font:inherit}button{cursor:pointer}button:disabled,select:disabled{cursor:not-allowed;opacity:.48}.app{background:#f3f4f6;width:100vw;min-width:100vw;height:100vh;min-height:100vh;overflow:hidden}.topBar{color:#fff;background:#3f50b5;justify-content:space-between;align-items:center;height:56px;padding:0 18px;display:flex;box-shadow:0 2px 8px #00000026}.brand{align-items:center;gap:0;min-width:0;display:flex}.logoMark{display:none}.brand h1{white-space:nowrap;margin:0;font-size:20px;line-height:1}.brand p{opacity:.8;white-space:nowrap;margin:4px 0 0;font-size:12px}.topActions{flex:none;align-items:center;gap:10px;display:flex}.importButton,.primaryButton,.bigImportButton,.stripTools button,.actionBar button{color:#fff;white-space:nowrap;background:#3f50b5;border:0;border-radius:8px;min-height:34px;padding:8px 12px}.importButton{background:#ffffff29;position:relative;overflow:visible}.importButton input,.bigImportButton input{display:none}.primaryButton{background:#22c55e}.tooltipButton{position:relative}.tooltipButton:hover:after{content:attr(data-tooltip);color:#fff;white-space:nowrap;z-index:500;pointer-events:none;background:#111827;border-radius:5px;padding:6px 9px;font-size:12px;font-weight:500;line-height:1;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%)}.tooltipButton:hover:before{content:"";z-index:500;pointer-events:none;border:5px solid #0000;border-bottom-color:#111827;position:absolute;top:calc(100% + 3px);left:50%;transform:translate(-50%)}.tooltipButton.tooltipLeft:hover:after{left:auto;right:0;transform:none}.tooltipButton.tooltipLeft:hover:before{left:auto;right:11px;transform:none}.emptyImport{text-align:center;background:#fff;border:1px solid #d1d5db;border-radius:14px;max-width:720px;margin:90px auto;padding:36px;box-shadow:0 8px 30px #00000014}.emptyImport h2{margin:0 0 8px;font-size:26px}.emptyImport p{color:#6b7280;margin-bottom:22px}.bigImportButton{background:#3f50b5;padding:12px 18px;display:inline-block}.playlistStrip{background:#fff;border-bottom:1px solid #d1d5db;grid-template-columns:clamp(280px,27vw,420px) minmax(0,1fr);align-items:center;gap:14px;height:58px;padding:8px 16px;display:grid}.playlistStrip strong,.playlistStrip span{display:block}.playlistStrip strong{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.playlistStrip span{color:#6b7280;margin-top:3px;font-size:12px}.stripTools{align-items:center;gap:8px;min-width:0;display:flex}.globalSearch{border:1px solid #d1d5db;border-radius:8px;flex:1;min-width:240px;padding:8px 10px}.stripTools button{color:#3730a3;background:#eef2ff;flex:none}.editorLayout{grid-template-columns:clamp(280px,27vw,420px) minmax(0,1fr);width:100%;min-width:0;height:calc(100vh - 114px);display:grid}.groupsPanel,.channelsPanel{background:#fff;border-right:1px solid #d1d5db;flex-direction:column;min-width:0;min-height:0;display:flex}.channelsPanel{border-right:0}.panelHeader{border-bottom:1px solid #d1d5db;flex:none;justify-content:space-between;align-items:center;gap:12px;height:56px;padding:0 14px;display:flex}.panelHeader label{align-items:center;gap:9px;min-width:0;display:flex}.panelHeader strong{white-space:nowrap;font-size:16px}.panelHeader span{color:#6b7280;white-space:nowrap;font-size:12px}.channelHeader{background:#fafafa}.miniButtons{flex:none;align-items:center;gap:6px;display:flex}.iconButton,.textActionButton{color:#3f50b5;background:0 0;border:0;border-radius:999px;min-height:34px;font-weight:700}.iconButton{min-width:34px;padding:0 8px;font-size:22px;line-height:1}.textActionButton{padding:8px 10px;font-size:14px}.channelHeader .textActionButton,.channelHeader .iconButton{-webkit-font-smoothing:antialiased;text-rendering:geometricprecision;letter-spacing:normal!important;text-transform:none!important;font-family:Arial,sans-serif!important;font-size:14px!important;font-weight:700!important;line-height:1!important}.channelHeader .textActionButton{justify-content:center!important;align-items:center!important;height:34px!important;padding:0 10px!important;display:inline-flex!important}.channelHeader .iconButton{justify-content:center!important;align-items:center!important;min-width:34px!important;height:34px!important;padding:0 8px!important;display:inline-flex!important}.channelHeader .iconButton[data-tooltip=EPG\ details]{width:38px!important;min-width:38px!important;height:34px!important;padding:0!important;font-size:14px!important;font-weight:700!important}.iconButton:hover,.textActionButton:hover{background:#eef2ff}.activeDotButton{color:#3730a3;background:#eef2ff}.menuWrap{position:relative}.popupMenu{z-index:100;background:#f4f4f7;border:1px solid #d4d4dd;border-radius:5px;width:238px;min-width:238px;max-width:238px;padding:0;position:absolute;top:42px;right:0;overflow:hidden;box-shadow:0 4px 12px #0f172a3d}.rightMenu{right:0}.m3uMenu button{color:#202124;text-align:left;letter-spacing:-.15px;background:#f4f4f7;border:0;border-radius:0;grid-template-columns:42px 1fr;align-items:center;gap:0;width:100%;height:52px;min-height:52px;padding:0 14px;font-size:16px;font-weight:600;display:grid}.m3uMenu button:hover{background:#e7e7ed}.m3uMenu button:active{background:#dedee7}.m3uMenu button:disabled{opacity:.42}.m3uMenu hr{border:0;border-top:1px solid #dddde5;margin:0}.menuIcon{color:#3f50b5;place-items:center;width:32px;min-width:32px;font-size:24px;font-weight:800;line-height:1;display:grid;transform:none}.m3uMenu button span:last-child{color:#202124;white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:600;overflow:hidden}.groupList{flex:1;min-height:0;overflow:auto}.groupRow{color:#111827;text-align:left;background:#fff;border:0;border-bottom:1px solid #e5e7eb;grid-template-columns:28px 24px 1fr auto;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px 12px;display:grid;position:relative}.groupRow input{width:18px;height:18px}.groupRow:hover{background:#f8fafc}.groupRow.active{color:#4338ca;background:#e0f2fe}.groupRow.groupSelected{background:#eef2ff}.groupRow.dragOver{outline-offset:-2px;background:#dcfce7;outline:2px solid #22c55e}.groupRow.groupDragging{opacity:.5}.groupRow.groupDropAbove:before,.groupRow.groupDropBelow:after{content:"";z-index:5;background:#3f50b5;border-radius:999px;height:3px;position:absolute;left:8px;right:8px;box-shadow:0 0 0 3px #3f50b51f}.groupRow.groupDropAbove:before{top:-2px}.groupRow.groupDropBelow:after{bottom:-2px}.groupRow small{color:#16a34a;grid-column:3/-1;font-size:11px}.allChannelsRow{grid-template-columns:28px 24px 1fr auto}.groupName{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.groupRow em{color:#6b7280;background:#e5e7eb;border-radius:999px;padding:2px 7px;font-size:12px;font-style:normal}.dragDots{color:#9ca3af;font-weight:700}.dragHandle{cursor:grab;-webkit-user-select:none;user-select:none;border-radius:6px;place-items:center;width:24px;height:26px;display:grid}.dragHandle:hover{color:#4338ca;background:#eef2ff}.dragHandle:active{cursor:grabbing}.actionBar{background:#fff;border-bottom:1px solid #d1d5db;flex-wrap:wrap;flex:none;align-items:center;gap:8px;min-height:48px;padding:8px 14px;display:flex}.actionBar select,.actionBar input{background:#fff;border:1px solid #d1d5db;border-radius:8px;min-width:0;min-height:34px;padding:7px 9px}.actionBar select{flex:210px}.actionBar input{flex:180px}.actionBar button{background:#3f50b5;flex:none}.tableHeader{color:#6b7280;background:#f9fafb;border-bottom:1px solid #d1d5db;flex:none;grid-template-columns:38px 34px minmax(280px,2fr) minmax(130px,.65fr) minmax(120px,.45fr);align-items:center;gap:8px;height:34px;padding:0 12px;font-size:12px;font-weight:700;display:grid}.channelList{flex:1;min-height:0;position:relative;overflow:auto}.channelRow{-webkit-user-select:none;user-select:none;background:#fff;border-bottom:1px solid #e5e7eb;grid-template-columns:38px 34px minmax(280px,2fr) minmax(130px,.65fr) minmax(120px,.45fr);align-items:center;gap:8px;min-height:42px;padding:5px 12px;display:grid}.tableHeader.withPlayColumn,.channelRow.withPlayColumn{grid-template-columns:38px 34px minmax(280px,2.1fr) minmax(120px,.55fr) 40px minmax(110px,.4fr)}.playButton{color:#3f50b5;cursor:pointer;background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;place-self:center;place-items:center;width:30px;height:30px;padding:0;display:inline-grid}.playButton:hover{color:#3730a3;background:#dbe4ff}.playButton:active{transform:scale(.96)}.channelRow:hover{background:#f8fafc}.channelRow.selected{background:#eaf2ff}.channelRow.isDragging{opacity:.55}.dropIndicator{z-index:20;pointer-events:none;will-change:transform;background:#3f50b5;border-radius:999px;height:3px;display:none;position:absolute;top:0;left:12px;right:12px;box-shadow:0 0 0 3px #3f50b51f}.channelRow input{width:18px;height:18px}.channelNameCell{color:#4338ca;align-items:center;gap:9px;min-width:0;font-style:italic;display:flex}.channelIcon{color:#3f50b5;background:#e5e7eb;border-radius:4px;flex:none;place-items:center;width:22px;height:22px;font-size:11px;display:grid}.channelNameCell span,.groupCell,.urlCell{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.groupCell{color:#374151}.urlCell{color:#6b7280;font-size:12px}.dragPreview{z-index:9999;pointer-events:none;color:#111827;white-space:nowrap;text-overflow:ellipsis;background:#fff;border:1px solid #c7d2fe;border-radius:8px;max-width:260px;padding:8px 12px;font-size:14px;position:fixed;top:-1000px;left:-1000px;overflow:hidden;box-shadow:0 8px 22px #0f172a2e}.modalBackdrop{z-index:100;background:#0f172a61;place-items:center;display:grid;position:fixed;inset:0}.groupPickerModal,.smallModal,.channelEditModal{color:#111827;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px #0f172a52}.groupPickerModal{flex-direction:column;width:480px;max-width:calc(100vw - 32px);height:78vh;display:flex}.smallModal{width:420px;max-width:calc(100vw - 32px);padding:20px}.channelEditModal{flex-direction:column;width:620px;max-width:calc(100vw - 32px);display:flex}.smallModal h2{margin:0 0 14px}.smallModal input{border:1px solid #d1d5db;border-radius:10px;width:100%;padding:10px 12px}.modalTitle{align-items:center;gap:10px;padding:18px 20px;display:flex}.modalTitle h2{margin:0;font-size:26px;font-weight:500}.modalTitle span{color:#7c3aed;font-size:24px}.modalTitle em{color:#9ca3af;margin-left:auto;font-style:normal}.modalSearch{border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;grid-template-columns:28px 1fr;align-items:center;padding:10px 16px;display:grid}.modalSearch span{color:#3f50b5;font-size:22px}.modalSearch input{border:0;outline:0;font-size:16px}.modalGroupList{flex:1;overflow:auto}.modalGroupList button{color:#111827;text-align:left;background:#fff;border:0;border-bottom:1px solid #e5e7eb;grid-template-columns:36px 28px 1fr auto;align-items:center;gap:8px;width:100%;padding:12px 18px;display:grid}.modalGroupList button:hover{background:#f8fafc}.radioCircle{border:2px solid #4b5563;border-radius:999px;width:24px;height:24px}.folderIcon{color:#3f50b5}.modalGroupList em{color:#9ca3af;font-size:12px;font-style:normal}.editForm{gap:14px;padding:0 20px 18px;display:grid}.editForm label{color:#374151;gap:6px;font-weight:700;display:grid}.editForm input{color:#111827;border:1px solid #d1d5db;border-radius:10px;width:100%;padding:10px 12px;font-weight:400}.modalFooter{border-top:1px solid #e5e7eb;justify-content:flex-end;gap:10px;padding:14px 18px;display:flex}.modalFooter button{color:#3730a3;background:#eef2ff;border:0;border-radius:10px;padding:10px 16px}.modalFooter .confirmButton{color:#fff;background:#3f50b5}.limitNotice,.emptyState{color:#6b7280;text-align:center;border:1px dashed #cbd5e1;border-radius:10px;margin:14px;padding:18px}.popupMenu,.popupMenu.rightMenu,.menuWrap .popupMenu,.menuWrap .rightMenu{background:#f4f4f7!important;border:1px solid #d4d4dd!important;border-radius:5px!important;width:238px!important;min-width:238px!important;max-width:238px!important;overflow:hidden!important;box-shadow:0 4px 12px #0f172a3d!important}.m3uMenu button,.popupMenu.m3uMenu button,.rightMenu.m3uMenu button{color:#202124!important;letter-spacing:-.15px!important;background:#f4f4f7!important;border-radius:0!important;grid-template-columns:42px 1fr!important;align-items:center!important;width:100%!important;height:52px!important;min-height:52px!important;padding:0 14px!important;font-size:16px!important;font-weight:600!important;display:grid!important}.m3uMenu button:hover,.popupMenu.m3uMenu button:hover,.rightMenu.m3uMenu button:hover{background:#e7e7ed!important}.m3uMenu button:disabled,.popupMenu.m3uMenu button:disabled,.rightMenu.m3uMenu button:disabled{opacity:.42!important}.m3uMenu hr,.popupMenu.m3uMenu hr,.rightMenu.m3uMenu hr{border:0!important;border-top:1px solid #dddde5!important;margin:0!important}.menuIcon,.m3uMenu .menuIcon,.popupMenu .menuIcon,.rightMenu .menuIcon{color:#3f50b5!important;place-items:center!important;width:32px!important;min-width:32px!important;font-size:24px!important;font-weight:800!important;line-height:1!important;display:grid!important;transform:none!important}.m3uMenu button span:last-child,.popupMenu.m3uMenu button span:last-child,.rightMenu.m3uMenu button span:last-child{color:#202124!important;white-space:nowrap!important;text-overflow:ellipsis!important;font-size:16px!important;font-weight:600!important;overflow:hidden!important}@media (width<=1000px){body{overflow:auto}.app{width:100%;height:auto;min-height:100vh;overflow:visible}.topBar{background:#3f50b5;flex-direction:column;align-items:stretch;gap:10px;height:auto;min-height:56px;padding:12px}.topActions{justify-content:stretch}.topActions label,.topActions button{text-align:center;flex:1}.playlistStrip{grid-template-columns:1fr;height:auto}.stripTools{flex-wrap:wrap}.editorLayout{grid-template-columns:1fr;height:auto}.groupsPanel{border-bottom:1px solid #d1d5db;border-right:0;max-height:360px}.channelsPanel{min-height:600px}.tableHeader,.channelRow{grid-template-columns:34px 28px minmax(260px,1fr) 130px minmax(90px,.35fr)}.tableHeader.withPlayColumn,.channelRow.withPlayColumn{grid-template-columns:34px 28px minmax(260px,1fr) 118px 38px minmax(90px,.35fr)}.urlCell{font-size:11px}}
