:root{
  --bg:#0e0f12; --bg-rgb:14,15,18; --ink:#f2f3f5; --ink-dim:#9aa0a8; --ink-dimmer:#7d848c; --ink-faint:#6e757d;
  --card:#16181c; --card-2:#1b1d22; --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.07);
  --grip:rgba(255,255,255,.18);
  --shadow-1:none; --shadow-2:none; --shadow-tabbar:none;
  --accent:#2f7bf6; --accent-ink:#ffffff;
  --red:#f2635a; --amber:#f0b429; --green:#22e63b; --purple:#a855f7;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:ui-monospace,'SFMono-Regular','Roboto Mono',Menlo,Consolas,monospace;
  --radius-lg:6px; --radius-md:6px; --radius-sm:6px;
}
/* Tema claro — Ajustes ⚙️ lo activa con un booleano (toggleTheme en
   app.js), agrega/quita la clase .light en <html> y la guarda en
   localStorage (preferencia del dispositivo, no del tenant). Atenuado a
   propósito (gris suave, no blanco puro) y con sombras reales en vez de
   solo bordes — en oscuro el contraste de fondo ya alcanza para separar
   tarjetas, en claro hace falta la sombra para que no se vea plano. */
html.light{
  --bg:#eceef1; --bg-rgb:236,238,241; --ink:#1b1d22; --ink-dim:#4b515a; --ink-dimmer:#6b727b; --ink-faint:#8a9099;
  --card:#f6f7f9; --card-2:#e2e4e8; --line:rgba(20,22,26,.08); --line-soft:rgba(20,22,26,.05);
  --grip:rgba(20,22,26,.18);
  --shadow-1:0 1px 2px rgba(20,22,26,.05), 0 1px 1px rgba(20,22,26,.04);
  --shadow-2:0 8px 24px rgba(20,22,26,.12), 0 2px 6px rgba(20,22,26,.07);
  --shadow-tabbar:0 -2px 10px rgba(20,22,26,.06);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-tap-highlight-color:transparent; overscroll-behavior-y:none;
}
#app{min-height:100dvh; display:flex; flex-direction:column}

/* Safari/Chrome en el celular hacen zoom automático al enfocar un campo
   con letra menor a 16px (piensan que si no, no se va a poder leer) — y a
   veces se queda pegado el zoom al desenfocar, descuadrando toda la
   página. app.js pone tamaños de letra más chicos (12-14px) por estilo
   inline en la mayoría de sus <input>/<select>/<textarea> — el !important
   es a propósito, es la única forma de ganarle a esos inline styles sin
   reescribir cada uno de ellos uno por uno. No afecta la letra que se VE
   normalmente (esos 16px son el tamaño real del campo mientras se
   escribe, el resto del texto de la app sigue con sus tamaños de siempre). */
input,select,textarea{font-size:16px!important}

/* Layout shell -------------------------------------------------------- */
.screen{
  max-width:520px; margin:0 auto; width:100%;
  min-height:100dvh; display:flex; flex-direction:column; position:relative;
  background:var(--bg);
}

.topbar{
  display:flex; align-items:center; gap:10px; padding:16px 18px 6px;
}
.topbar .back{
  font:500 20px var(--sans); color:var(--ink-dim); cursor:pointer; line-height:1;
  padding:4px 8px 4px 0; margin-left:-8px;
}
.topbar .title{font:700 20px/1.2 var(--sans); letter-spacing:-.01em; flex:1; min-width:0}
.topbar .crumb{font:500 12.5px var(--sans); color:var(--ink-dim)}

.content{flex:1; padding:8px 18px 16px; overflow-y:auto}
.screen:has(>.tabbar){height:100dvh;min-height:0;overflow:hidden}
.screen:has(>.tabbar)>.content{min-height:0}
.screen>.topbar,.screen>.tabbar{flex-shrink:0}
.content.no-tabbar{padding-bottom:28px}

/* Section headers ------------------------------------------------------ */
.eyebrow{font:600 10.5px var(--mono); color:var(--ink-dimmer); letter-spacing:.11em; margin:0 0 10px; text-transform:uppercase}

/* Bottom tab bar -------------------------------------------------------- */
.tabbar{
  position:relative; margin-top:auto; display:flex; justify-content:space-around;
  padding:10px 12px calc(14px + env(safe-area-inset-bottom));
  background:rgba(var(--bg-rgb),.95); backdrop-filter:blur(6px); border-top:1px solid var(--line);
  box-shadow:var(--shadow-tabbar);
}
.tab{display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; background:none; border:none; color:inherit; font-family:var(--sans)}
.tab .ico{width:22px; height:22px; color:var(--ink-faint)}
.tab .ico svg{width:100%; height:100%; display:block}
.tab.active .ico{color:var(--accent)}
.tab span{font:600 9.5px var(--sans); color:var(--ink-faint)}
.tab.active span{color:var(--accent)}

/* Cards ------------------------------------------------------------------ */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-1)}
.card-flat{background:var(--card-2); border-radius:var(--radius-sm)}
.row{display:flex; align-items:center; gap:11px}
.row-tap{cursor:pointer}
.dot{width:7px; height:7px; border-radius:50%; flex:none}
.dot-sm{width:6px; height:6px}

/* Buttons & pills ---------------------------------------------------------- */
.btn{
  display:block; text-align:center; padding:15px 0; border-radius:var(--radius-md);
  font:600 14px var(--sans); cursor:pointer; border:none;
}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:disabled,.btn-primary.disabled{background:#25282e; color:var(--ink-faint); cursor:default}
.btn-danger{background:#c33a2c; color:#fff}
.btn-ghost{background:var(--card); border:1px solid var(--line); color:var(--ink)}
.pill{padding:7px 13px; border-radius:999px; font:600 11.5px var(--sans); cursor:pointer; white-space:nowrap; border:1px solid transparent}
.tag{padding:4px 8px; border-radius:5px; font:600 9px var(--mono); flex:none}

.sticky-cta{
  position:sticky; bottom:0; left:0; right:0; padding:14px 18px calc(20px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--bg) 66%,transparent);
}

/* Thumbnails --------------------------------------------------------------- */
.thumb{
  position:relative; aspect-ratio:16/9; border-radius:var(--radius-sm); overflow:hidden;
  background:repeating-linear-gradient(135deg,#242830 0 7px,#1c1f25 7px 14px);
  display:flex; align-items:center; justify-content:center;
}
.thumb span{font:500 10px/1.4 var(--mono); color:var(--ink-faint); text-align:center; padding:0 8px}
.badge-live{
  position:absolute; top:10px; left:10px; display:flex; align-items:center; gap:6px;
  padding:5px 9px; border-radius:999px; background:rgba(14,15,18,.84); border:1px solid rgba(242,99,90,.42);
}
.badge-live span{font:600 9.5px var(--mono); color:var(--red); letter-spacing:.07em}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
.pulse{animation:pulseDot 1.4s ease-in-out infinite}

/* Sheets / modals ------------------------------------------------------------ */
.backdrop{position:fixed; inset:0; background:rgba(8,9,11,.62); animation:fadeIn .16s ease; z-index:20}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* El sheet se centra con left:50%+transform:translateX(-50%) — la
   animación tiene que incluir ESE mismo translateX en cada cuadro,
   porque animar "transform" reemplaza el valor entero (no lo combina
   con el de la regla base), si no se pierde el centrado mientras anima
   y se ve salir "de lado" en vez de derecho desde abajo. */
@keyframes sheetUp{from{transform:translateX(-50%) translateY(100%)}to{transform:translateX(-50%) translateY(0)}}
/* Para elementos que NO se centran con translateX (ej. el lightbox,
   centrado por flexbox del contenedor padre) — solo sube, sin ese ajuste. */
@keyframes popUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
.sheet{
  position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:520px;
  background:var(--card); border-top:1px solid var(--line); border-radius:6px 6px 0 0;
  padding:12px 18px calc(28px + env(safe-area-inset-bottom)); z-index:21;
  max-height:82vh; overflow-y:auto;
  box-shadow:var(--shadow-2);
}
/* La animación de entrada solo debe verse UNA vez, al abrir la ficha —
   como toda la app se vuelve a dibujar entera en cada cambio (innerHTML=),
   sin esto el <div class="sheet"> se recrea de cero y "renace" repitiendo
   la animación cada vez que algo adentro cambia (prender un canal,
   guardar, etc.) — se ve como un parpadeo molesto. app.js solo agrega
   esta clase en el render() que ABRE la ficha, nunca en los siguientes. */
.sheet.entering{animation:sheetUp .24s cubic-bezier(.22,.9,.3,1)}
.sheet-grip{width:38px; height:4px; border-radius:2px; background:var(--grip); margin:0 auto 14px}

/* Misc --------------------------------------------------------------------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
/* Grilla compacta de TVs (asignar fuente): 4 por fila en vez de 2, mismas
   miniaturas de previewThumb() pero más chicas — para ver de un vistazo
   dónde está activa cada fuente sin scrollear tanto. */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.stack{display:flex; flex-direction:column; gap:9px}
.progress-track{height:5px; border-radius:3px; background:rgba(255,255,255,.09); overflow:hidden}
.progress-fill{height:100%; border-radius:3px}
.toggle{width:42px; height:24px; border-radius:999px; position:relative; cursor:pointer; flex:none}
.toggle .knob{position:absolute; top:3px; width:18px; height:18px; border-radius:50%; background:#f2f3f5; transition:left .16s ease}

a{color:var(--accent)}
::-webkit-scrollbar{width:0;height:0}

.location-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:var(--ink-dimmer);font:400 12px var(--sans)}.location-add,.location-more{position:relative}.location-add summary,.location-more summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--card-2);font:500 24px var(--sans);color:var(--ink)}.location-add summary::-webkit-details-marker,.location-more summary::-webkit-details-marker{display:none}.location-add>div,.location-more>button{position:absolute;right:0;top:44px;z-index:8;background:var(--card-2);border:1px solid var(--line);border-radius:8px;min-width:160px;padding:6px}.location-add button,.location-more button{color:var(--ink);font:500 12px var(--sans);padding:12px;border:0;text-align:left;cursor:pointer}.location-add button{display:block;width:100%;background:none}.location-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.location-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:10px;min-width:0}.location-open{display:block;background:none;border:0;width:100%;padding:12px;text-align:left;color:var(--ink);cursor:pointer}.location-open strong{display:block;font:600 14px var(--sans);margin:12px 25px 5px 0;overflow-wrap:anywhere}.location-open small{font:400 11px var(--sans);color:var(--ink-dimmer)}.location-previews{display:flex;gap:3px;height:62px;border-radius:6px;overflow:hidden;background:var(--card-2)}.location-previews>span{flex:1;min-width:0;display:grid;place-items:center;background:var(--card-2);color:var(--ink-faint)}.location-previews img{width:100%;height:100%;object-fit:cover}.location-tv-symbol{font-size:24px}.location-empty{font:400 11px var(--sans)}.location-more{position:absolute;right:7px;bottom:25px}.location-more summary{background:none;font-size:20px;width:32px;height:32px}.location-more>button{top:34px}@media(min-width:900px){.location-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:350px){.location-grid{gap:8px}.location-open{padding:10px}.location-open strong{font-size:12px}}

.location-company{display:flex;align-items:center;gap:12px;margin:8px 0 24px}.location-company>span{width:44px;height:44px;background:var(--accent);color:#fff;border-radius:12px;display:grid;place-items:center;font-weight:700}.location-company>div{flex:1;min-width:0}.location-company strong{display:block;font:700 19px var(--sans);overflow-wrap:anywhere}.location-company small{display:block;margin-top:4px;color:var(--ink-dimmer);font:400 11px var(--mono)}.location-list{display:grid;gap:9px}.location-list .location-card{border-radius:15px}.location-list .location-open{display:flex;align-items:center;justify-content:space-between;padding:14px 34px 14px 14px;gap:12px}.location-list .location-open strong{margin:0 0 5px;font-size:13px}.location-signals{display:flex;gap:3px;max-width:110px;flex-wrap:wrap;justify-content:flex-end}.location-signals i{display:block;width:5px;height:17px;border-radius:2px;background:var(--ink-faint)}.location-signals .signal-online{background:#3bd5a0}.location-signals .signal-offline,.location-signals .signal-error{background:#ec6962}.location-signals .signal-paused{background:#dab46c}.location-warning{font:400 11px var(--mono);color:#ec6962;margin:0 14px 13px}.location-list .location-more{right:3px;top:14px;bottom:auto}.location-new{width:100%;padding:14px;margin-top:12px;background:none;border:1px dashed var(--line);border-radius:12px;color:var(--ink-dimmer);font:500 12px var(--sans);cursor:pointer}.studio-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}.studio-tools button,.studio-tools label,.studio-tools select{border:1px solid var(--line);border-radius:6px;background:var(--card-2);color:var(--ink);padding:10px;font:500 12px var(--sans);cursor:pointer}.studio-tools input[type=range]{flex:1;min-width:80px;width:90px}.studio-mobile details{padding:10px 0;font:400 12px var(--sans);color:var(--ink-dim)}.studio-mobile summary{cursor:pointer;min-height:28px}


.tv-wifi{display:flex;align-items:center;gap:5px;padding:4px 6px 0;color:var(--wifi-color)}.tv-wifi small{font-size:9px}.wifi-bars{display:flex;align-items:flex-end;gap:2px;height:15px}.wifi-bars i{width:3px;border-radius:1px;background:var(--wifi-color)}
[data-refresh-tv]{touch-action:manipulation}
.tv-remote-panel{margin:14px 0 20px;padding:12px;background:var(--card-2);border:1px solid var(--line);border-radius:12px}
.tv-remote-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tv-remote-launch{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 17px;border:1px solid transparent;border-radius:9px;background:var(--accent);color:#fff;font:600 13px var(--sans);cursor:pointer}
.tv-remote-launch:hover{filter:brightness(1.1)}
.tv-remote-launch:focus-visible,.tv-remote-settings summary:focus-visible,.tv-remote-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tv-remote-status{display:inline-flex;align-items:center;gap:6px;color:var(--ink-dimmer);font:500 11px var(--sans)}
.tv-remote-status i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);flex:none}
.tv-remote-status.is-online i{background:#3bd5a0}
.tv-remote-settings{margin-top:12px;border-top:1px solid var(--line)}
.tv-remote-settings summary{display:flex;align-items:center;justify-content:space-between;min-height:40px;list-style:none;color:var(--ink-dimmer);font:500 12px var(--sans);cursor:pointer}
.tv-remote-settings summary::-webkit-details-marker{display:none}
.tv-remote-settings[open] summary>span{transform:rotate(180deg)}
.tv-remote-settings p{margin:0 0 12px;color:var(--ink-dimmer);font:400 12px/1.5 var(--sans)}
.tv-remote-actions{display:flex;gap:8px;flex-wrap:wrap}
.tv-remote-actions button{min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:500 12px var(--sans);cursor:pointer}
.tv-remote-settings label{display:block;margin:10px 0;color:var(--ink-dimmer);font:500 12px var(--sans)}
.tv-remote-settings input,.tv-remote-settings select{display:block;box-sizing:border-box;width:100%;min-height:44px;margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:400 14px var(--sans)}
.tv-remote-settings input:focus,.tv-remote-settings select:focus{outline:2px solid var(--accent);outline-offset:1px}
.tv-remote-settings button:disabled{opacity:.5;cursor:wait}
.tv-remote-enroll{margin-top:14px;padding-top:4px;border-top:1px solid var(--line)}
.motv-app-tabs,.motv-app-filters{display:flex;gap:7px;overflow:auto;padding:4px 0 12px}
.motv-app-tabs button,.motv-app-filters button,.motv-app-back{border:1px solid var(--line);background:var(--card-2);color:var(--ink-dimmer);border-radius:20px;padding:10px 15px;font:500 12px var(--sans);white-space:nowrap;cursor:pointer}
.motv-app-tabs .active,.motv-app-filters .active{color:var(--ink);border-color:var(--accent);background:#2f7bf622}
.motv-app-intro{padding:15px 0 24px}.motv-app-intro small{font:600 10px var(--mono);letter-spacing:.15em;color:#73cddb}.motv-app-intro h2{font:700 27px/1.15 var(--sans);margin:10px 0}.motv-app-intro p{color:var(--ink-dimmer);font:400 13px var(--sans)}
.motv-app-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.motv-app-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:12px;padding:20px 15px;min-height:170px;background:linear-gradient(145deg,var(--card-2),var(--card));border:1px solid var(--line);border-radius:16px;color:var(--ink);cursor:pointer}.motv-app-card>span{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#62c5dd1a;color:#73cddb;font-size:28px}.motv-app-card strong{font:600 15px var(--sans)}.motv-app-card small{font:400 12px/1.45 var(--sans);color:var(--ink-dimmer)}
.motv-template{padding:0;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--card);color:var(--ink);text-align:left;cursor:pointer}.motv-template-art{aspect-ratio:4/3;display:flex;flex-direction:column;justify-content:center;padding:15px;background:var(--template-bg);color:var(--template-ink);border-left:6px solid var(--template-accent);gap:10px}.motv-template-art small{color:var(--template-accent);text-transform:uppercase;font:600 8px var(--sans);letter-spacing:.12em}.motv-template-art strong{font:800 20px/1.1 Georgia,serif}.motv-template-art span{color:var(--template-accent);font:700 13px var(--mono)}.motv-template-name{display:flex;justify-content:space-between;padding:12px;font:500 12px var(--sans)}
.motv-saved-app{display:flex;align-items:center;padding:15px;gap:10px}.motv-saved-app>div{flex:1;min-width:0}.motv-saved-app strong{display:block;overflow-wrap:anywhere}.motv-saved-app small{display:block;color:var(--ink-dimmer);margin-top:6px}.motv-saved-app button{border:1px solid var(--line);background:var(--card-2);color:var(--ink);border-radius:7px;padding:10px;cursor:pointer}
.motv-app-editor{max-width:900px}.motv-app-preview{margin:16px auto;background:#15242f;border:1px solid var(--line);border-radius:14px;overflow:hidden;max-height:480px}.motv-app-preview iframe{display:block;width:100%;height:100%;border:0}.motv-app-preview>div{height:100%;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;padding:20px;text-align:center}.motv-app-preview span{font-size:38px;color:#73cddb}.motv-app-preview small,.motv-app-hint{font:400 12px/1.5 var(--sans);color:var(--ink-dimmer)}
.motv-app-editor label{display:block;margin:14px 0;font:500 12px var(--sans);color:var(--ink-dimmer)}.motv-app-editor input,.motv-app-editor textarea,.motv-app-editor select{display:block;width:100%;box-sizing:border-box;margin-top:7px;padding:12px;min-height:44px;border:1px solid var(--line);border-radius:9px;background:var(--card-2);color:var(--ink);font:400 14px var(--sans)}.motv-app-editor input[type=color]{padding:5px}.motv-app-editor>.btn,.motv-app-editor form>.btn{width:100%;margin-top:14px;border:0}.motv-app-editor>small,.motv-app-editor form>small{display:block;margin-top:10px;color:var(--ink-dimmer);font:400 11px/1.5 var(--sans)}.motv-app-editor form{margin-top:25px;padding-top:12px;border-top:1px solid var(--line)}
@media(min-width:850px){.motv-app-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.motv-template-art strong{font-size:28px}}
.location-add-tv{display:grid;place-items:center;box-sizing:border-box;width:48px;height:48px;min-width:48px;flex:0 0 48px;align-self:center;padding:0;border:1px solid var(--line);border-radius:13px;background:var(--card-2);color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s}
.location-add-tv:hover{background:var(--card);border-color:var(--accent)}
.location-add-tv:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.location-add-tv:active{transform:scale(.96)}
.motv-template-art{position:relative;overflow:hidden}.template-illustration{display:block;width:76px;height:62px;margin:0 auto 6px}.template-illustration svg{width:100%;height:100%}.motv-template-art.layout-split,.motv-template-art.layout-hero{padding-left:38%;text-align:left}.layout-split .template-illustration,.layout-hero .template-illustration{position:absolute;left:2%;top:25%;width:34%;height:55%}.motv-template-art.layout-editorial strong{font-family:Georgia,serif}.motv-template-art.layout-editorial .template-illustration{position:absolute;right:0;opacity:.25}.motv-template-art.layout-hero strong{text-transform:uppercase}.motv-template-art.layout-cards{border-radius:12px;background:linear-gradient(130deg,transparent,#8882)}
.motv-template-art{height:168px!important;min-height:168px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:12px!important;background:var(--template-bg)!important;color:var(--template-ink)}.motv-template-art strong{font-size:17px!important;line-height:1.12;overflow-wrap:anywhere;max-width:100%;position:relative}.motv-template-art .template-illustration{position:static!important;width:52px!important;height:42px!important;flex:0 0 42px;margin:0 0 8px;opacity:1!important}.motv-template-art small{font-size:8px}.motv-template-art>span{font-size:10px}.motv-template-art.layout-editorial .template-illustration{position:absolute!important;right:8px;top:12px;opacity:.18!important}.motv-template-art.layout-hero{background:linear-gradient(130deg,#8882,transparent),var(--template-bg)!important}
.app-background{padding:16px 0}.app-background summary{cursor:pointer;font-weight:600}.app-background-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;max-height:260px;overflow:auto}.app-background-grid button{padding:0;border:2px solid transparent;border-radius:9px;background:var(--card);overflow:hidden;aspect-ratio:1.3;cursor:pointer}.app-background-grid button.selected{border-color:var(--accent)}.app-background-grid img{width:100%;height:100%;object-fit:cover}
.studio-screen .topbar{gap:12px;padding-top:max(16px,env(safe-area-inset-top))}.studio-screen .topbar .back{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:26px;padding:0}.studio-screen .topbar>.btn{width:auto;flex:none;padding:10px 16px;border-radius:12px;min-height:42px}.studio-mobile .studio-tools{gap:8px;margin:14px 0}.studio-mobile button,.studio-mobile .studio-tools label,.studio-mobile select{min-height:42px;border-radius:10px;font:500 12px var(--sans)}.studio-mobile input[type=color]{width:40px;height:40px;flex:none;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--card)}.studio-mobile input[type=range]{accent-color:var(--accent)}.studio-alignment{display:flex}.studio-alignment button{flex:1}.studio-alignment button[aria-pressed=true]{background:var(--accent);color:white;border-color:var(--accent)}.studio-field-label{display:block;margin:12px 0 7px;color:var(--ink-dimmer);font:500 12px var(--sans)}.studio-mobile details{padding:14px 0;border-bottom:1px solid var(--line)}.studio-mobile summary{padding:7px 0;font-weight:600}.studio-panel-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:12px}.studio-panel-fields label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--ink-dimmer)}.studio-panel-fields select{width:100%;background:var(--card);color:var(--ink);border:1px solid var(--line);padding:8px}.studio-template-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0;max-height:45vh;overflow:auto}.studio-template-gallery button{background:var(--card);color:var(--ink);border:1px solid var(--line);border-left-width:4px;padding:16px;text-align:left;min-height:74px;border-radius:12px;cursor:pointer}.studio-template-gallery small{display:block;margin-top:7px;color:var(--ink-dimmer)}.tabbar .tab{min-width:0;padding-left:2px;padding-right:2px}.tabbar .tab span{font-size:10px}
.content-search{width:100%;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--ink);font:400 13px var(--sans);margin:0 0 22px}.content-section-heading{display:flex;align-items:center;justify-content:space-between;margin:20px 0 10px}.content-section-heading h2{font-size:12px;text-transform:uppercase;margin:0;color:var(--ink-dimmer)}.content-section-heading button{border:0;background:none;color:var(--accent);font:600 13px var(--sans);cursor:pointer}.content-section-heading>span{font-size:12px;color:var(--ink-faint)}.content-channels{display:grid;gap:8px}.content-channel{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:9px;background:var(--card)}.content-channel>div{flex:1}.content-channel strong,.content-folder strong{font-size:13px}.content-channel small,.content-folder small,.content-widget small{display:block;font-size:11px;margin-top:4px;color:var(--ink-dimmer)}.content-channel.warning{border-color:#9f393955}.content-channel small.warning{color:var(--red)}.content-channel-icon{display:grid;place-items:center;background:var(--card-2);width:42px;height:38px;border-radius:8px;color:var(--ink-dimmer);font-size:22px}.content-channel button,.content-folder>button:last-child{border:0;background:none;color:var(--ink-dimmer);padding:10px;cursor:pointer}.content-upload{display:flex;gap:8px}.content-upload label,.content-upload button{display:grid;place-items:center;padding:12px;border:1px solid var(--line);background:var(--card);border-radius:10px;color:var(--ink);cursor:pointer;font-size:13px}.content-upload label{flex:1}.content-upload button{width:44px;flex:none}.content-folders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}.content-folder{display:flex;background:var(--card);border:1px solid var(--line);border-radius:10px;min-width:0}.content-folder>button:first-child{display:flex;align-items:center;gap:9px;min-width:0;flex:1;text-align:left;padding:12px;border:0;background:none;color:var(--ink);cursor:pointer}.content-folder strong{display:block;overflow-wrap:anywhere}.content-folder>button:first-child>span{color:#edbd4d}.content-widget{padding:14px;text-align:left;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;cursor:pointer}.content-empty{font-size:12px;color:var(--ink-dimmer)}
.playlist-publish{display:grid;gap:12px;margin:0 0 22px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}.playlist-publish label{font-size:12px;color:var(--ink-dimmer)}.playlist-publish select{display:block;width:100%;padding:12px;margin-top:6px;border:1px solid var(--line);border-radius:9px;background:var(--card-2);color:var(--ink)}.playlist-publish button{width:100%;border:0}

/* TV gestures must not trigger native text/image selection. */
[data-longpress],[data-longpress] *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}

.motv-app-back{position:sticky;top:8px;z-index:10;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 14px;margin-bottom:12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:600 14px var(--sans);cursor:pointer}

.content-channel .channel-status{display:flex;align-items:center;gap:6px}.channel-status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}.content-channel .channel-status.connected{color:var(--green)}.content-channel .channel-status.warning{color:var(--red)}.content-channel .channel-status.unknown{color:var(--ink-faint)}

.location-open .location-traffic{display:flex;align-items:center;gap:7px;margin-top:6px;line-height:1.4}.location-traffic>span:first-child{flex:none;font-size:14px;color:var(--ink-dimmer)}

.mix-editor input[type=range]{min-width:0;width:100%}.mix-editor .row> .row{min-width:0}.mix-advanced{margin:0 0 18px;color:var(--ink-dimmer);font-size:12px}.mix-advanced>summary{min-height:44px;display:flex;align-items:center;cursor:pointer}.mix-advanced .eyebrow{margin-top:8px}


.motv-app-grid.motv-app-four{grid-template-columns:repeat(2,minmax(0,1fr))}.motv-app-four .motv-app-card{background:var(--card);border-radius:12px}.motv-app-four .motv-app-card>span{background:rgba(47,123,246,.12);color:var(--accent)}

.business-logo{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:var(--accent);color:white;font:700 14px var(--sans);overflow:hidden}.business-logo:has(img){background:transparent}.business-logo img{display:block;width:100%;height:100%;object-fit:contain}.location-business-copy{flex:1;min-width:0}.location-company>.business-logo{flex:none}

.location-meta{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap}.location-meta>small{flex:none}.location-meta .location-warning{margin:0;font:500 11px/1.4 var(--sans);text-align:left}.location-list .location-open{min-height:72px;padding-top:12px;padding-bottom:12px}.location-signals{flex-shrink:0}.location-list .location-more{top:50%;transform:translateY(-50%)}

.location-edit-direct{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:transparent;color:var(--ink);font:600 18px var(--sans);cursor:pointer}.location-list .location-open{padding-right:48px}

.client-gauges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 20px}.client-metric{text-align:center;min-width:0}.client-ring{width:100%;max-width:68px;aspect-ratio:1;display:grid;place-items:center;margin:0 auto 7px;position:relative;border-radius:50%;background:conic-gradient(var(--gauge-color) var(--level),var(--line) 0)}.client-ring:before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--bg,#0e0f12)}.client-ring strong{position:relative;font:700 18px var(--sans);font-variant-numeric:tabular-nums}.client-ring small{display:block;font:500 11px var(--sans);color:var(--ink-dimmer);margin-top:3px}.client-metric>b{display:block;font:600 11px var(--sans)}.client-metric>span{display:block;color:var(--ink-dimmer);font:400 10px/1.4 var(--sans);margin-top:4px}@media(max-width:420px){.client-gauges{gap:6px}.client-metric>b{font-size:9px}.client-metric>span{font-size:9px}.client-ring strong{font-size:17px}.client-ring small{font-size:10px}}

.location-operator{display:block;width:calc(100% - 24px);margin:0 12px 10px;padding:10px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink-dim);font:500 12px var(--sans)}.operator-permission{display:flex;align-items:center;justify-content:space-between;padding:12px 0;font:500 13px var(--sans)}.operator-permission input{width:22px;height:22px}.operator-qr{display:block;width:220px;max-width:100%;margin:16px auto}.operator-access .btn{margin-top:10px}

/* Keep press-and-hold controls free of browser text/image selection. */
:is(button,[role="button"],[data-action],[data-longpress]),:is(button,[role="button"],[data-action],[data-longpress]) *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}

.location-company>.location-header-actions{display:flex;align-items:center;gap:4px;flex:none}
.location-header-actions .location-icon-button{appearance:none;display:grid;place-items:center;width:42px;height:42px;padding:9px;border:0;border-radius:50%;background:transparent;color:var(--ink-dim);cursor:pointer;touch-action:manipulation;transition:color .15s,background .15s}
.location-icon-button svg{display:block;width:23px;height:23px;pointer-events:none}
.location-header-actions .location-icon-button:hover{background:var(--card-2);color:var(--ink)}
.location-header-actions .location-icon-button:active{background:var(--card-2);transform:scale(.94)}
.location-header-actions .location-icon-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Compact marketplace cards; actions retain a comfortable touch target. */
.market-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.market-card{padding:11px!important;min-width:0;display:flex;flex-direction:column;gap:6px;border-radius:12px}
.market-card>.row{gap:5px;align-items:flex-start;flex-wrap:wrap}
.market-card strong{font-size:12px;line-height:1.3}
.market-card p{margin:0;font-size:11px!important;line-height:1.4;color:var(--ink-dimmer)}
.market-status{font-size:9px;line-height:1.4;color:var(--ink-dimmer);white-space:nowrap}
.market-status.active{color:#36c990}
.market-card .btn{margin-top:auto;min-height:36px;padding:6px 8px;font-size:11px;width:100%;border-radius:7px}
@media(min-width:760px){.market-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.content-channel .channel-status.unknown .channel-status-dot{background:transparent;border:1px solid currentColor;box-sizing:border-box}

.content-channels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
button.content-channel{min-width:0;width:100%;text-align:left;color:var(--ink);cursor:pointer;font:inherit;gap:8px}
.content-channel-copy{min-width:0;flex:1}.content-channel-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content-channel-icon{flex:none;width:34px;height:36px}.content-channel-copy .channel-status{font-size:10px}.content-channels>.content-empty{grid-column:1/-1}
.sheet.channel-monitor-modal{position:fixed;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:calc(100% - 28px);max-width:760px;max-height:90dvh;padding:14px;border-radius:16px;overflow:auto;animation:none}
.channel-monitor-modal header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.channel-monitor-modal h2{margin:0;font-size:15px;overflow-wrap:anywhere}.channel-monitor-close{width:44px;height:44px;flex:none;background:var(--card-2);border:1px solid var(--line);border-radius:10px;color:var(--ink);cursor:pointer}.channel-monitor-video{position:relative;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}

.tv-placeholder{border:1px solid rgba(140,155,175,.065);border-radius:10px;background:rgba(140,155,175,.016);pointer-events:none;box-shadow:none;min-height:62px}

.access-form{display:grid;gap:14px;margin-bottom:16px;padding:16px}.access-form label{display:grid;gap:6px}.access-form input:not([type=checkbox]),.access-form select{width:100%;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--card-2);color:var(--ink)}.access-form .access-check{display:flex;align-items:center;gap:10px;padding:6px 0}.access-form fieldset{border:1px solid var(--line);border-radius:8px}.access-form fieldset[hidden]{display:none}