:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#0a0b0f; color:#f4f6fb; }
* { box-sizing:border-box; }
body { margin:0; background:#0a0b0f; }
.shell { min-height:100vh; display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(340px, .8fr); }
.video-wrap { position:relative; background:#000; min-height:55vh; display:grid; place-items:center; }
video { width:100%; height:100vh; max-height:100vh; background:#000; }
.overlay { position:absolute; inset:auto 24px 24px; padding:10px 14px; border-radius:12px; background:rgba(15,18,25,.82); backdrop-filter:blur(8px); }
.overlay[hidden] { display:none; }
.panel { padding:24px; overflow:auto; max-height:100vh; border-left:1px solid #20232c; background:#11131a; }
h1 { font-size:20px; margin:0 0 6px; }
h2 { font-size:15px; margin:24px 0 10px; }
p { margin:0; color:#a9b0bf; }
.headline { display:flex; gap:16px; justify-content:space-between; align-items:start; }
button, select { background:#1d2230; color:#fff; border:1px solid #303747; border-radius:10px; padding:10px 12px; }
button { cursor:pointer; }
.metrics { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0; }
.metrics div { padding:12px; background:#171a23; border:1px solid #242936; border-radius:12px; }
.metrics span, .source-row small { display:block; color:#8f98aa; font-size:12px; margin-bottom:4px; }
.metrics strong { font-size:14px; }
details { background:#171a23; border:1px solid #242936; border-radius:12px; padding:12px; }
summary { cursor:pointer; }
.settings { display:grid; gap:12px; margin-top:12px; }
.settings label { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#c8ceda; font-size:13px; }
.sources { display:grid; gap:8px; }
.source-row { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; }
.source-row > span:last-child { text-align:right; }
.source-row.active { border-color:#7c8cff; box-shadow:0 0 0 1px #7c8cff inset; }
.note { margin-top:14px; font-size:12px; line-height:1.5; }
@media (max-width: 900px) {
  .shell { grid-template-columns:1fr; }
  video { height:auto; aspect-ratio:16/9; }
  .panel { max-height:none; border-left:0; border-top:1px solid #20232c; }
}

/* Configure page */
.config-body { min-height:100vh; padding:32px; }
.config-shell { max-width:1050px; margin:0 auto; display:grid; gap:18px; }
.config-card { background:#11131a; border:1px solid #242936; border-radius:16px; padding:24px; }
.config-card h1 { font-size:26px; }
.config-card h2 { margin:0 0 5px; font-size:18px; }
.config-lead { margin-top:8px; max-width:760px; line-height:1.55; }
.privacy-box { margin:20px 0; padding:14px; border-radius:12px; background:#171a23; border:1px solid #303747; }
.privacy-box p { margin-top:6px; line-height:1.45; }
.config-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.config-grid label, .auth-settings label { color:#c8ceda; font-size:13px; display:grid; gap:7px; }
input { width:100%; background:#0f1117; color:#fff; border:1px solid #303747; border-radius:10px; padding:11px 12px; }
.primary { margin-top:14px; width:100%; font-weight:700; }
.divider { display:flex; align-items:center; gap:12px; margin:18px 0; color:#6f788a; }
.divider::before, .divider::after { content:''; height:1px; background:#242936; flex:1; }
.auth-settings { align-items:stretch; }
.config-status { margin-top:18px; padding:11px 13px; border-radius:10px; background:#171a23; color:#b9c2d2; }
.config-status.bad { border:1px solid #6b2b33; }
.config-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:14px; }
.config-actions a { color:#c7cffc; }
.danger { border-color:#5c3038; }
.addon-list { display:grid; gap:8px; margin-top:16px; }
.addon-row { display:grid; grid-template-columns:minmax(140px, 220px) auto 1fr; align-items:center; gap:12px; padding:10px 12px; background:#171a23; border:1px solid #242936; border-radius:10px; }
.addon-row code { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#8f98aa; }
.addon-tag { font-size:10px; border:1px solid #3a4050; border-radius:999px; padding:3px 7px; color:#8f98aa; }
.addon-row.stream-capable .addon-tag { color:#d8ddff; border-color:#5966a8; }
@media (max-width:700px) {
  .config-body { padding:14px; }
  .config-grid { grid-template-columns:1fr; }
  .addon-row { grid-template-columns:1fr auto; }
  .addon-row code { grid-column:1 / -1; }
}

.network-buttons { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.network-buttons button { min-width:110px; }

/* v28.21 addon priority controls */
.compact-actions { margin-top:0; justify-content:flex-end; }
.primary-inline { font-weight:700; border-color:#5966a8; }
.priority-note { margin-top:12px; }
.sortable-addon-list { user-select:none; }
.sortable-addon-row {
  grid-template-columns:42px 32px minmax(180px, 1fr) auto 76px;
  cursor:grab;
  transition:border-color .12s ease, transform .12s ease, opacity .12s ease;
}
.sortable-addon-row:active { cursor:grabbing; }
.sortable-addon-row.dragging { opacity:.45; }
.sortable-addon-row.drag-over { border-color:#7c8cff; transform:translateY(1px); }
.drag-handle { padding:6px 8px; font-size:18px; line-height:1; color:#aeb7ca; cursor:grab; }
.addon-order-number { color:#7f899c; font-variant-numeric:tabular-nums; text-align:center; }
.addon-name-wrap { min-width:0; display:grid; gap:4px; }
.addon-name-wrap code { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#8f98aa; }
.order-buttons { display:flex; gap:5px; }
.order-buttons button { padding:6px 9px; min-width:32px; }
@media (max-width:700px) {
  .headline { align-items:stretch; flex-direction:column; }
  .compact-actions { justify-content:flex-start; }
  .sortable-addon-row { grid-template-columns:38px 26px 1fr auto; }
  .sortable-addon-row .order-buttons { grid-column:3 / -1; }
  .addon-name-wrap code { white-space:normal; word-break:break-all; }
}

/* v28.36: Stremio visibility toggle */
.visibility-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; opacity: .9; white-space: nowrap; margin-right: 8px; }
.visibility-toggle input { width: 16px; height: 16px; cursor: pointer; }
.visibility-toggle input:disabled { cursor: not-allowed; opacity: .4; }
.addon-row.hidden-in-stremio { border-left: 3px solid #5931ff; }
.addon-row.hidden-in-stremio .addon-tag { background: rgba(89,49,255,.25); }
.addon-row.self-addon { border-left: 3px solid #23c46f; }
.addon-row.self-addon .addon-tag { background: rgba(35,196,111,.25); }

/* v1.5 cloud probe controls */
.probe-toggle { display:inline-flex; align-items:center; gap:6px; font-size:12px; white-space:nowrap; }
.probe-toggle input { width:16px; height:16px; }
.addon-row.probe-disabled { opacity:.58; }
.addon-row.probe-disabled .addon-tag { border-color:#6b7280; color:#9ca3af; }
.config-help { line-height:1.55; margin-top:10px; }
.manual-box { display:grid; gap:8px; margin-top:12px; }
.manual-box textarea { min-height:120px; width:100%; background:#0f1117; color:#fff; border:1px solid #303747; border-radius:10px; padding:11px 12px; }
.sortable-addon-row { grid-template-columns:42px 32px minmax(220px,1fr) auto auto auto 76px; }
@media (max-width:900px){ .sortable-addon-row{grid-template-columns:38px 26px 1fr auto}.sortable-addon-row .probe-toggle,.sortable-addon-row .visibility-toggle,.sortable-addon-row .order-buttons{grid-column:3 / -1;} }