/* FIX 6: Tailwind CDN removed — it conflicts with Bootstrap already loaded
   in header.php and causes CSS specificity battles.
   Replaced with plain CSS equivalents. */

.live-stream-tester-page {
    --primary:      var(--accent);
    --primary-dark: var(--accent-strong);
    --surface:      var(--panel);
    --bg:           var(--page-bg);
    --border:       var(--header-border);
    --text:         var(--text-strong);
    --text-muted:   var(--text-soft);
    --success-bg:   color-mix(in srgb, #00b87a 12%, var(--panel));
    --success-text: #047857;
    --error-bg:     color-mix(in srgb, #e05260 12%, var(--panel));
    --error-text:   #b42335;
    --info-bg:      color-mix(in srgb, var(--accent) 12%, var(--panel));
    --info-text:    var(--accent-strong);
    --warn-bg:      color-mix(in srgb, #d99a00 16%, var(--panel));
    --warn-text:    #9a6700;
}

.stream-wrap    { background: var(--bg); min-height: 60vh; padding: 2.5rem 0; }
.stream-inner   { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }

.tool-heading   { text-align: center; margin-bottom: 2.5rem; }
.tool-heading h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: var(--primary); margin-bottom: 0.5rem; }
.tool-heading p  { font-size: 1.1rem; color: var(--text-muted); }

.panel          { background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.05)); }

.url-row        { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.url-input      { flex: 1; min-width: 200px; padding: 0.75rem 1rem; border: 2px solid var(--border); border-radius: 0.5rem; font-size: 1rem; transition: border-color 0.2s; box-sizing: border-box; }
.url-input:focus { outline: none; border-color: var(--primary); }

.btn            { padding: 0.75rem 1.5rem; background: var(--primary); color: #fff; border: none; border-radius: 0.5rem; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.2s; display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--primary-dark); }
.btn:disabled   { opacity: 0.6; cursor: not-allowed; }
.btn-sm         { padding: 0.4rem 0.9rem; font-size: 0.875rem; }
.btn-ghost      { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover:not(:disabled) { background: var(--border); }

.quick-links    { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.quick-link     { padding: 0.3rem 0.75rem; background: var(--bg); border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.8125rem; cursor: pointer; transition: background 0.2s; }
.quick-link:hover { background: var(--border); }

/* Two-column grid */
.stream-grid    { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
@media (min-width: 900px) { .stream-grid { grid-template-columns: 2fr 1fr; } }

/* Video */
.video-panel    { background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden; box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.05)); }
.video-toolbar  { background: #1e293b; padding: 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center; }
.video-toolbar-title { color: #fff; font-weight: 600; font-size: 0.9rem; }
.video-toolbar-actions { display: flex; gap: 0.5rem; }
.video-wrap     { position: relative; background: #000; }
video           { width: 100%; aspect-ratio: 16/9; display: block; }
.overlay        { position: absolute; inset: 0; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; }
.quality-bar    { padding: 0.75rem 1rem; background: var(--bg); border-top: 1px solid var(--border); display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; font-size: 0.875rem; }

/* Status / info panels */
.side-panels    { display: flex; flex-direction: column; gap: 1rem; }

.status-item    { padding: 8px 12px; margin: 3px 0; border-radius: 6px; font-size: 0.875rem; display: flex; align-items: center; gap: 8px; }
.status-success { background: var(--success-bg); color: var(--success-text); }
.status-error   { background: var(--error-bg);   color: var(--error-text); }
.status-info    { background: var(--info-bg);     color: var(--info-text); }
.status-warning { background: var(--warn-bg);     color: var(--warn-text); }

.kv-row         { display: flex; justify-content: space-between; padding: 0.375rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.kv-row:last-child { border-bottom: none; }
.kv-label       { color: var(--text-muted); }
.kv-value       { font-weight: 600; }

.quality-badge  { padding: 4px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; }
.quality-badge.active { background: var(--primary); color: #fff; }
.quality-badge:not(.active) { background: var(--bg); border: 1px solid var(--border); color: var(--text); }
.quality-badge:not(.active):hover { background: var(--border); }

/* Event log */
.log-header     { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.log-body       { max-height: 320px; overflow-y: auto; font-family: 'Courier New', monospace; font-size: 0.8125rem; }

/* Spinner */
.spinner        { border: 3px solid rgba(255,255,255,0.3); border-top: 3px solid #fff; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; }
.spinner-dark   { border-color: var(--border); border-top-color: var(--primary); }
@keyframes spin { to { transform: rotate(360deg); } }

/* How-to */
.how-to         { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 0.75rem; padding: 1.5rem; margin-top: 1rem; }
.how-to h3      { font-size: 1.15rem; font-weight: 700; margin-bottom: 1rem; }
.how-to ol      { padding-left: 1.25rem; line-height: 2; color: var(--text-muted); }
.quick-title{font-size:.875rem;font-weight:600;color:var(--text-muted);margin:1rem 0 .5rem;}
.is-hidden{display:none !important;}
.overlay-content{text-align:center;}
.spinner-large{width:48px;height:48px;border-width:4px;margin:0 auto 1rem;}
.overlay-text{color:#fff;margin:0;}
.quality-label{font-weight:600;font-size:.875rem;}
.quality-badges{display:flex;gap:.5rem;flex-wrap:wrap;}
.panel-flush{margin-bottom:0;}
.panel-heading{font-size:1rem;font-weight:700;margin-bottom:.75rem;}
.panel-heading-inline{margin-bottom:0;}
.log-empty{color:var(--text-muted);}