/* ==========================================================================
   HEISENIPTV — PORTAL DE ATIVAÇÃO / ASSINATURA
   Mobile-first: o portal é usado no celular enquanto a TV mostra o código.
   ========================================================================== */

:root {
    --primary: #e50914;
    --primary-hi: #ff2b37;
    --primary-dim: rgba(229, 9, 20, 0.12);

    --bg: #0b0b0f;
    --surface: #16161c;
    --surface-2: #1d1d25;
    --input: #23232c;
    --line: rgba(255, 255, 255, 0.09);
    --line-hi: rgba(255, 255, 255, 0.18);

    --text: #ffffff;
    --text-2: #b6b6c2;
    --text-3: #7e7e8c;

    --ok: #2ecc71;
    --warn: #f1c40f;
    --danger: #ff4d4d;

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;

    --shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.5;
    padding: 24px 16px calc(40px + env(safe-area-inset-bottom));
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;   /* o carrossel usa 100vw; evita barra lateral no desktop */
}

.bg-glow {
    position: fixed;
    inset: 0 0 auto 0;
    height: 380px;
    background:
        radial-gradient(60% 100% at 50% 0%, rgba(229, 9, 20, 0.18) 0%, transparent 70%),
        radial-gradient(40% 80% at 80% 10%, rgba(108, 99, 255, 0.10) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

/* ------------------------------- Marca ---------------------------------- */

.brand { text-align: center; margin-bottom: 28px; }

.brand-logo {
    font-size: clamp(30px, 8vw, 40px);
    font-weight: 800;
    letter-spacing: -1px;
}
.brand-logo span { color: var(--primary); }

.brand-tagline {
    margin-top: 6px;
    color: var(--text-3);
    font-size: 15px;
}

/* ------------------------------- Telas ---------------------------------- */

.screen { display: none; }
.screen.is-visible { display: block; animation: rise .28s ease both; }

@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ------------------------------- Passos --------------------------------- */

.steps {
    list-style: none;
    display: grid;
    gap: 12px;
    margin-bottom: 22px;
    padding: 0 4px;
}

.steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-2);
    font-size: 15px;
}

.steps b { color: var(--text); font-weight: 600; }

.step-num {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--primary-dim);
    border: 1px solid rgba(229, 9, 20, 0.35);
    color: var(--primary-hi);
    font-size: 13px;
    font-weight: 700;
}

/* ------------------------------- Cartões -------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px;
    box-shadow: var(--shadow);
    margin-bottom: 18px;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.card-title {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 18px;
}
.card-head .card-title { margin-bottom: 18px; }

.counter {
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.section-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--text-3);
    font-weight: 700;
    margin: 26px 0 14px;
}

/* ------------------------------- Campos --------------------------------- */

.field { margin-bottom: 18px; }
.field-tight { margin: 20px 0 14px; }

.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; min-width: 0; }

label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-2);
    margin-bottom: 7px;
}

input[type="text"],
input[type="url"],
input[type="email"],
input[type="password"] {
    width: 100%;
    background: var(--input);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 14px 15px;
    border-radius: var(--r-sm);
    font-size: 16px; /* 16px evita o zoom automático no iOS */
    font-family: inherit;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

input::placeholder { color: var(--text-3); }

input:focus {
    outline: none;
    border-color: var(--primary);
    background: #2a2a34;
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.16);
}

input.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.14);
}

#mac-address, #device-key {
    letter-spacing: 2px;
    font-weight: 600;
}

.hint {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-3);
}

/* ------------------------------- Botões --------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    padding: 14px 20px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    background: var(--surface-2);
    cursor: pointer;
    transition: filter .2s, background .2s, border-color .2s, opacity .2s;
    -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--primary-hi); outline-offset: 2px; }

.btn-primary {
    background: linear-gradient(135deg, var(--primary-hi), var(--primary));
    box-shadow: 0 8px 20px rgba(229, 9, 20, 0.28);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }

.btn-outline {
    background: transparent;
    border: 1px dashed var(--line-hi);
    color: var(--text-2);
}
.btn-outline:hover { border-color: var(--primary); color: var(--text); }

.btn-ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-2);
}
.btn-ghost:hover { border-color: var(--line-hi); color: var(--text); }

.btn-danger-ghost {
    background: transparent;
    border: 1px solid rgba(255, 77, 77, 0.3);
    color: var(--danger);
}
.btn-danger-ghost:hover { background: rgba(255, 77, 77, 0.1); }

.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 14px; }

.btn.is-loading .btn-label { visibility: hidden; }
.btn.is-loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.btn.is-loading { position: relative; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------ Mensagens -------------------------------- */

.msg {
    padding: 13px 15px;
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
}
.msg[hidden] { display: none; }

.msg.is-error {
    background: rgba(255, 77, 77, 0.12);
    border: 1px solid rgba(255, 77, 77, 0.3);
    color: #ff8f8f;
}
.msg.is-success {
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #6fe0a0;
}

.foot-note {
    text-align: center;
    color: var(--text-3);
    font-size: 13px;
    padding: 0 10px;
    margin-bottom: 8px;
}

.site-foot {
    text-align: center;
    color: #55555f;
    font-size: 13px;
    margin-top: 30px;
}

/* ---------------------------- Barra do device ---------------------------- */

.device-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin-bottom: 18px;
}

.device-id { display: flex; flex-direction: column; min-width: 0; }

.device-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-3);
    font-weight: 700;
}

.device-mac {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------- Status ---------------------------------- */

.status {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--text-3);
    border-radius: var(--r-md);
    padding: 16px;
}

.status.is-active   { border-left-color: var(--ok); }
.status.is-trial    { border-left-color: var(--warn); }
.status.is-expired  { border-left-color: var(--primary); }
.status.is-unknown  { border-left-color: var(--text-3); }

.status-head { display: flex; gap: 12px; align-items: flex-start; }

.status-dot {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--text-3);
}
.status.is-active  .status-dot { background: var(--ok);   box-shadow: 0 0 0 4px rgba(46, 204, 113, .15); }
.status.is-trial   .status-dot { background: var(--warn); box-shadow: 0 0 0 4px rgba(241, 196, 15, .15); }
.status.is-expired .status-dot { background: var(--primary); box-shadow: 0 0 0 4px rgba(229, 9, 20, .18); animation: pulse 1.8s ease-in-out infinite; }

@keyframes pulse {
    50% { box-shadow: 0 0 0 9px rgba(229, 9, 20, 0); }
}

.status-texts { min-width: 0; }

.status-title { font-size: 17px; font-weight: 700; }
.status.is-active  .status-title { color: var(--ok); }
.status.is-trial   .status-title { color: var(--warn); }
.status.is-expired .status-title { color: var(--primary-hi); }

.status-desc {
    margin-top: 3px;
    font-size: 14px;
    color: var(--text-2);
}

.status-meter { margin-top: 16px; }
.status-meter[hidden] { display: none; }

.meter-track {
    height: 7px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--warn), #ffa726);
    transition: width .5s ease;
}
.status.is-expired .meter-fill { background: linear-gradient(90deg, var(--primary), var(--primary-hi)); }

.meter-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    font-size: 12px;
    color: var(--text-3);
    font-weight: 600;
}

/* -------------------------------- Planos --------------------------------- */

#plans-area[hidden] { display: none; }

.plans { display: grid; gap: 12px; }

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    background: var(--surface-2);
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    padding: 18px 46px 18px 18px;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .15s;
}

.plan:hover { border-color: var(--line-hi); }
.plan:focus-visible { outline: 2px solid var(--primary-hi); outline-offset: 2px; }

.plan.is-selected {
    border-color: var(--primary);
    background: linear-gradient(180deg, rgba(229, 9, 20, 0.10), rgba(229, 9, 20, 0.02));
}

.plan-featured { border-color: rgba(46, 204, 113, 0.35); }
.plan-featured.is-selected { border-color: var(--primary); }

.plan-badge {
    position: absolute;
    top: -9px;
    left: 16px;
    background: var(--ok);
    color: #08150d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
}

.plan-name {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-3);
}

.plan-price {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
}
.plan-price i {
    font-style: normal;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-2);
    margin-right: 3px;
    vertical-align: 6px;
}
.plan-price sup {
    font-size: 17px;
    font-weight: 700;
    top: -.55em;
}

.plan-cycle { font-size: 13px; color: var(--text-3); }

.plan-perks {
    list-style: none;
    margin-top: 12px;
    display: grid;
    gap: 6px;
}
.plan-perks li {
    font-size: 13.5px;
    color: var(--text-2);
    padding-left: 20px;
    position: relative;
}
.plan-perks li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--ok);
    font-weight: 700;
}

.plan-check {
    position: absolute;
    top: 18px;
    right: 16px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--line-hi);
    transition: border-color .2s, background .2s;
}
.plan.is-selected .plan-check {
    border-color: var(--primary);
    background: var(--primary);
}
.plan.is-selected .plan-check::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pay-note {
    margin-top: 12px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-3);
}

/* -------------------------------- Listas --------------------------------- */

.pl-list { display: grid; gap: 12px; }
.pl-list:not(:empty) { margin-bottom: 16px; }

.pl-item {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 15px;
    transition: border-color .2s;
}

.pl-item.is-active {
    border-color: rgba(46, 204, 113, 0.45);
    background: linear-gradient(180deg, rgba(46, 204, 113, 0.07), transparent);
}

.pl-top {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.pl-name {
    font-size: 16px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.tag {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--line-hi);
    color: var(--text-2);
}
.tag-type { background: rgba(108, 99, 255, 0.14); border-color: rgba(108, 99, 255, 0.35); color: #a9a3ff; }
.tag-live { background: rgba(46, 204, 113, 0.14); border-color: rgba(46, 204, 113, 0.4); color: #6fe0a0; }

.pl-meta {
    margin-top: 5px;
    font-size: 13px;
    color: var(--text-3);
    word-break: break-all;
}

.pl-actions {
    display: flex;
    gap: 8px;
    margin-top: 13px;
    flex-wrap: wrap;
}
.pl-actions .btn { flex: 1 1 auto; }

.empty {
    text-align: center;
    padding: 26px 10px 22px;
}
.empty[hidden] { display: none; }
.empty-icon { font-size: 34px; display: block; margin-bottom: 10px; }
.empty-title { font-weight: 700; font-size: 16px; }
.empty-desc { color: var(--text-3); font-size: 14px; margin-top: 4px; }

/* -------------------------------- Modal ---------------------------------- */

.modal { position: fixed; inset: 0; z-index: 50; display: flex; }
.modal[hidden] { display: none; }

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
    animation: fade .2s ease both;
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal-sheet {
    position: relative;
    margin: auto auto 0;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
    animation: sheet-up .28s cubic-bezier(.2, .9, .3, 1) both;
}

@keyframes sheet-up {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.modal-x {
    background: transparent;
    border: none;
    color: var(--text-3);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.modal-x:hover { color: var(--text); }

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}
.modal-actions .btn { flex: 1; }

/* ----------------------------- Segmentado -------------------------------- */

.segmented {
    display: flex;
    gap: 4px;
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 4px;
    margin-bottom: 20px;
}

.seg-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-3);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.seg-btn:hover { color: var(--text-2); }
.seg-btn.is-on { background: var(--primary); color: #fff; }

.type-fields { display: none; }
.type-fields.is-on { display: block; }

/* ------------------------------- Switch ---------------------------------- */

.switch {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
    cursor: pointer;
    color: var(--text-2);
    font-size: 14.5px;
    font-weight: 500;
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }

.switch-box {
    flex: 0 0 44px;
    height: 26px;
    border-radius: 999px;
    background: var(--input);
    border: 1px solid var(--line-hi);
    position: relative;
    transition: background .2s, border-color .2s;
}
.switch-box::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-3);
    transition: transform .2s, background .2s;
}
.switch input:checked + .switch-box { background: var(--primary); border-color: var(--primary); }
.switch input:checked + .switch-box::after { transform: translateX(18px); background: #fff; }
.switch input:focus-visible + .switch-box { outline: 2px solid var(--primary-hi); outline-offset: 2px; }

/* -------------------------------- Toast ---------------------------------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 80;
    background: #24242e;
    border: 1px solid var(--line-hi);
    color: var(--text);
    padding: 13px 20px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 600;
    box-shadow: var(--shadow);
    max-width: calc(100vw - 32px);
    text-align: center;
    animation: toast-in .25s ease both;
}
.toast[hidden] { display: none; }

@keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, 14px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ============================ PRÉVIAS DA TV ==============================
   Recriações da interface do app. Tudo dentro de .tv-screen é medido em "em",
   e o em da tela é calculado a partir da largura do quadro — assim o mockup
   inteiro escala junto, proporcional, em qualquer celular.
   ========================================================================= */

.showcase { margin: 34px 0 10px; }

.showcase-title {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.showcase-sub {
    text-align: center;
    color: var(--text-3);
    font-size: 14px;
    margin: 6px 0 20px;
    padding: 0 6px;
}

.shots {
    --shot-w: min(100vw - 20px, 1200px);
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* O trilho tem a largura de UM quadro e fica centrado na página, mesmo
       sendo mais largo que a coluna de 560px: o 50% é o centro da coluna,
       que já é o centro da tela. Um quadro por vez, sem sobra nas laterais. */
    width: var(--shot-w);
    margin: 0 0 0 calc(50% - var(--shot-w) / 2);
    padding: 4px 0 16px;
}
.shots::-webkit-scrollbar { display: none; }

.shot {
    flex: 0 0 100%;
    scroll-snap-align: center;
    margin: 0;
    /* Base do "em" do mockup: tudo lá dentro escala junto com o quadro. */
    font-size: calc(var(--shot-w) / 46);
}

.tv {
    background: #08080c;
    border: 1px solid var(--line-hi);
    border-radius: clamp(10px, .85em, 20px);
    padding: clamp(4px, .38em, 10px);
    box-shadow: var(--shadow);
}

.tv-screen {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: clamp(6px, .55em, 13px);
    overflow: hidden;
    background: #0D0D12;
    line-height: 1.25;
}

/* Basta soltar um <img> aqui dentro para usar um print real no lugar. */
.tv-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }

.shot figcaption {
    margin-top: 10px;
    text-align: center;
    font-size: 13.5px;
    color: var(--text-2);
}

.dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
}

.dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    cursor: pointer;
    transition: width .25s ease, background .25s ease, border-radius .25s ease;
    -webkit-tap-highlight-color: transparent;
}
.dot:hover { background: rgba(255, 255, 255, .4); }
.dot.is-on { width: 22px; border-radius: 4px; background: var(--primary); }
.dot:focus-visible { outline: 2px solid var(--primary-hi); outline-offset: 3px; }

/* ------------------------------ base do mockup ---------------------------- */

.mk {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    color: #fff;
    background: radial-gradient(70% 60% at 50% 0%, #1A1A2E 0%, #0D0D12 70%);
}

/* 1. Tela inicial ---------------------------------------------------------- */

.mk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9em 1.6em;
}

.mk-brand { display: flex; align-items: center; gap: .45em; font-size: 1.45em; font-weight: 800; }

.mk-head-right { display: flex; align-items: center; gap: .8em; }
.mk-clock { font-size: 1em; color: rgba(255, 255, 255, .6); }
.mk-avatar {
    width: 2em; height: 2em;
    border-radius: 50%;
    background: #242432;
    display: grid; place-items: center;
    font-size: .9em;
}

.mk-body { flex: 1; display: flex; flex-direction: column; gap: .9em; padding: .3em 1.6em .9em; }
.mk-row { display: flex; gap: .9em; }
.mk-row-top { flex: 1; }
.mk-row-bottom { flex: 0 0 4.8em; }

.mk-tile {
    flex: 1;
    border-radius: .9em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35em;
    overflow: hidden;
}

.mk-live     { flex: 2; background: linear-gradient(135deg, #00C6FF, #0072FF); box-shadow: inset 0 0 0 .16em rgba(255, 255, 255, .92); }
.mk-movies   { background: linear-gradient(135deg, #FF512F, #DD2476); }
.mk-series   { background: linear-gradient(135deg, #8E2DE2, #4A00E0); }
.mk-settings { background: linear-gradient(135deg, #434343, #141414); box-shadow: inset 0 0 0 .08em rgba(255, 255, 255, .1); }

.mk-tile-ic { font-size: 2.2em; }
.mk-tile-tt { font-size: 1.1em; font-weight: 800; letter-spacing: .05em; }

.mk-foot {
    display: flex;
    justify-content: space-between;
    padding: 0 1.6em .9em;
    font-size: .92em;
    color: rgba(255, 255, 255, .42);
}

/* 2. Filmes e séries ------------------------------------------------------- */

.mk-hero {
    position: relative;
    flex: 1.35;
    display: flex;
    align-items: flex-end;
    padding: 1.5em;
    overflow: hidden;
}

.mk-hero-art {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, #2b1b4d 0%, #7a1d33 58%, #12121a 100%);
}
.mk-hero-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0D0D12 16%, rgba(13, 13, 18, .5) 58%, transparent 100%);
}

.mk-hero-info {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .3em;
    max-width: 62%;
}

.mk-hero-badge { font-size: .78em; font-weight: 800; letter-spacing: .18em; color: #E50914; }
.mk-hero-title { font-size: 2.3em; font-weight: 800; line-height: 1.02; letter-spacing: -.02em; }

.mk-hero-meta {
    display: flex;
    align-items: center;
    gap: .6em;
    font-size: .9em;
    color: rgba(255, 255, 255, .62);
}
.mk-hero-meta b { color: #46D369; font-weight: 700; }
.mk-hero-meta i {
    font-style: normal;
    font-size: .85em;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: .25em;
    padding: 0 .35em;
}

.mk-hero-plot { font-size: .92em; color: rgba(255, 255, 255, .68); line-height: 1.35; }

.mk-hero-btn {
    align-self: flex-start;
    margin-top: .45em;
    background: #fff;
    color: #111;
    font-size: 1em;
    font-weight: 700;
    padding: .45em 1.1em;
    border-radius: .35em;
}

.mk-rail { flex: 1; display: flex; flex-direction: column; gap: .55em; padding: .1em 1.5em 1.2em; }
.mk-rail-tt { font-size: 1.05em; font-weight: 700; }
.mk-posters { display: flex; gap: .65em; flex: 1; }

.mk-poster { flex: 1; border-radius: .4em; }
.mk-poster.is-on { box-shadow: 0 0 0 .16em #fff; }

.p1 { background: linear-gradient(160deg, #3f2a6e, #171726); }
.p2 { background: linear-gradient(160deg, #a8323f, #2a1016); }
.p3 { background: linear-gradient(160deg, #1d5b7a, #0d1c26); }
.p4 { background: linear-gradient(160deg, #7a5a1d, #241a0d); }
.p5 { background: linear-gradient(160deg, #2f7a4a, #0f2419); }
.p6 { background: linear-gradient(160deg, #5a2f7a, #1c0f24); }
.p7 { background: linear-gradient(160deg, #7a2f2f, #240f0f); }

/* 3. Player ao vivo -------------------------------------------------------- */

.mk-scene {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(38% 46% at 63% 40%, rgba(255, 196, 130, .30), transparent 72%),
        radial-gradient(30% 40% at 22% 62%, rgba(90, 150, 255, .20), transparent 70%),
        linear-gradient(160deg, #10263a 0%, #2a1f3d 42%, #0a0a10 100%);
}
/* Faixa escura embaixo + vinheta: dá profundidade de cena de vídeo. */
.mk-scene::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, transparent 38%),
        radial-gradient(75% 75% at 50% 45%, transparent 45%, rgba(0, 0, 0, .5) 100%);
}

.mk-osd-top {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6em;
    padding: 1em 1.5em;
    background: linear-gradient(180deg, rgba(0, 0, 0, .78), transparent);
}

.mk-osd-back {
    width: 1.9em; height: 1.9em;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    display: grid; place-items: center;
}
.mk-osd-name { font-size: 1.35em; font-weight: 700; }
.mk-osd-live {
    background: #E50914;
    font-size: .7em;
    font-weight: 800;
    letter-spacing: .1em;
    padding: .25em .6em;
    border-radius: .3em;
}
.mk-osd-clock { margin-left: auto; font-size: 1em; color: rgba(255, 255, 255, .75); }

.mk-osd-bottom {
    position: relative;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: .6em;
    padding: 1.6em 1.5em 1.2em;
    background: linear-gradient(0deg, rgba(0, 0, 0, .88), transparent);
}

.mk-epg { font-size: 1.1em; }
.mk-epg-tag { color: #E50914; font-weight: 800; font-size: .78em; letter-spacing: .1em; margin-right: .4em; }

.mk-keys { display: flex; gap: 1.1em; font-size: .82em; color: rgba(255, 255, 255, .6); }
.mk-keys i {
    font-style: normal;
    background: rgba(255, 255, 255, .15);
    border-radius: .25em;
    padding: .1em .45em;
    margin-right: .35em;
    color: #fff;
    font-weight: 700;
}
.mk-keys i.red { background: #E50914; }

/* 4. Lista de canais ------------------------------------------------------- */

.mk-sub { display: flex; align-items: center; gap: 1em; padding: 1em 1.5em .7em; }
.mk-sub-back { background: rgba(255, 255, 255, .1); border-radius: .4em; padding: .3em .8em; font-size: .92em; }
.mk-sub-tt { font-size: 1.45em; font-weight: 700; }
.mk-sub-count {
    margin-left: auto;
    font-size: .82em;
    background: rgba(255, 255, 255, .08);
    border-radius: 1em;
    padding: .2em .7em;
    color: rgba(255, 255, 255, .7);
}

.mk-chan-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 3.4em;      /* linhas com altura fixa, como na lista real */
    align-content: start;
    gap: .65em;
    padding: 0 1.5em 1.2em;
}

.mk-chan {
    display: flex;
    align-items: center;
    gap: .6em;
    background: #242432;
    border-radius: .55em;
    padding: .5em .65em;
    min-width: 0;
}
.mk-chan.is-on { background: #31314a; box-shadow: 0 0 0 .13em #6C63FF; }

.mk-logo {
    flex: 0 0 2.1em;
    height: 2.1em;
    border-radius: .4em;
    display: grid; place-items: center;
    font-size: .95em;
    font-weight: 800;
}
.l1 { background: #0a4ea8; }
.l2 { background: #b8232b; }
.l3 { background: #c8531c; }
.l4 { background: #1f6f3e; }
.l5 { background: #6b3fa0; }
.l6 { background: #2b5f8a; }
.l7 { background: #8a2b5f; }
.l8 { background: #1d6f6f; }
.l9 { background: #7a5a1d; }
.l10 { background: #3f4a8a; }

.mk-chan-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mk-chan-txt b { font-size: .92em; font-weight: 700; }
.mk-chan-txt i { font-style: normal; font-size: .78em; color: rgba(255, 255, 255, .5); }
.mk-chan-txt b, .mk-chan-txt i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mk-heart { margin-left: auto; font-size: 1em; color: rgba(255, 255, 255, .35); }
.mk-heart.on { color: #E50914; }

/* ------------------------------ Diferenciais ------------------------------ */

/* Um pouco mais larga que a coluna, para o subtítulo não quebrar feio. */
.feats-head {
    --head-w: min(100vw - 32px, 760px);
    width: var(--head-w);
    margin: 38px 0 0 calc(50% - var(--head-w) / 2);
}

/* Mesma sangria do carrossel: a grade ocupa a página toda, não a coluna. */
.feats {
    --feats-w: min(100vw - 20px, 1200px);   /* mesma calha do carrossel */
    width: var(--feats-w);
    margin: 20px 0 0 calc(50% - var(--feats-w) / 2);
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.feat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 22px 20px;
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.feat:hover {
    border-color: var(--line-hi);
    background: var(--surface-2);
    transform: translateY(-2px);
}

.feat-ic {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 22px;
    background: var(--primary-dim);
    border: 1px solid rgba(229, 9, 20, .28);
}

.feat-title {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.32;
}

.feat-desc {
    font-size: 14px;
    line-height: 1.58;
    color: var(--text-3);
}

/* ------------------------------ Telas maiores ----------------------------- */

@media (min-width: 620px) {
    body { padding-top: 48px; }
    .card { padding: 28px; }
    .plans { grid-template-columns: 1fr 1fr; }
    .plan { padding-bottom: 20px; }
    .modal { align-items: center; padding: 20px; }
    .modal-sheet {
        margin: auto;
        max-width: 520px;
        border-radius: var(--r-lg);
        border-bottom: 1px solid var(--line);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Situação da lista no provedor, publicada pela TV em listInfo. */
.pl-provider {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 11px;
    border-radius: 8px;
    line-height: 1.4;
}
.pl-provider.is-ok {
    background: rgba(46, 204, 113, .1);
    border: 1px solid rgba(46, 204, 113, .25);
    color: #6fe0a0;
}
.pl-provider.is-bad {
    background: rgba(229, 9, 20, .1);
    border: 1px solid rgba(229, 9, 20, .3);
    color: #ff8f8f;
}
.pl-checked {
    font-weight: 500;
    opacity: .7;
}