* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #121212; color: #e0e0e0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

.top-bar { height: 50px; background: #1e1e1e; border-bottom: 1px solid #2a2a2a; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; flex-shrink: 0; }
.top-bar h1 { font-size: 18px; color: #fff; }
.logout-link { color: #ff5252; text-decoration: none; font-size: 14px; }

.app-layout { display: flex; flex: 1; height: calc(100vh - 50px); overflow: hidden; }

.col-left { width: 280px; background: #181818; border-right: 1px solid #2a2a2a; display: flex; flex-direction: column; flex-shrink: 0; }
.col-center { flex: 1; display: flex; flex-direction: column; background: #121212; overflow: hidden; }
.col-right { width: 340px; background: #181818; border-left: 1px solid #2a2a2a; display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; padding: 15px; }

.col-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; flex-shrink: 0; }
.col-header h2 { font-size: 18px; color: #fff; }

#screen-editor, #screen-parser { display: flex; flex-direction: column; height: 100%; padding: 20px; box-sizing: border-box; overflow: hidden; }

/* ФИКС СКРОЛЛА КАНАЛОВ И РЕЗУЛЬТАТОВ */
#channels-container, #parse-results-container, #sources-list-container { flex: 1; overflow-y: auto; margin-top: 10px; padding-right: 5px; }

.nav-list { list-style: none; overflow-y: auto; flex: 1; }
.nav-list li { padding: 10px 15px; border-bottom: 1px solid #222; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.nav-list li:hover { background: #222; }
.nav-list li.active { background: #2a2a2a; color: #64b5f6; font-weight: bold; }

.ch-table { width: 100%; border-collapse: collapse; text-align: left; }
.ch-table th { background: #1e1e1e; padding: 10px; font-size: 12px; color: #888; position: sticky; top: 0; z-index: 2; }
.ch-table td { padding: 10px; border-bottom: 1px solid #222; font-size: 14px; vertical-align: middle; }
.ch-table tr:hover { background: #1a1a1a; }

.ch-logo { width: 32px; height: 32px; object-fit: contain; background: #000; border-radius: 4px; }
.ch-title { font-weight: bold; color: #fff; }
.ch-group { font-size: 12px; color: #777; }

.badge-status { display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; text-transform: uppercase; cursor: pointer; border: none; }
.badge-unknown { background: #333; color: #aaa; }
.badge-online { background: #1b5e20; color: #81c784; }
.badge-offline { background: #b71c1c; color: #e57373; }
.badge-checking { background: #f57f17; color: #fff; }

.btn { padding: 8px 14px; border-radius: 4px; border: none; font-weight: bold; cursor: pointer; }
.btn-primary { background: #1976d2; color: #fff; }
.btn-primary:hover { background: #1565c0; }
.btn-secondary { background: #333; color: #ccc; }
.btn-secondary:hover { background: #444; }
.btn-icon { background: none; border: none; color: #888; font-size: 16px; cursor: pointer; }
.btn-icon:hover { color: #fff; }

.direct-link { background: #1e1e1e; padding: 10px; border-radius: 4px; margin-bottom: 15px; font-size: 13px; color: #aaa; flex-shrink: 0; }
.direct-link a { color: #64b5f6; text-decoration: none; word-break: break-all; }

.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 12px; color: #888; margin-bottom: 4px; }
.form-group input, .form-group select { width: 100%; padding: 8px; background: #222; border: 1px solid #333; color: #fff; border-radius: 4px; }
.form-actions { display: flex; gap: 10px; margin-top: 15px; }

.placeholder-text { color: #555; text-align: center; margin-top: 50px; font-size: 14px; }
.hidden { display: none !important; }