/* Player web — tela do painel (molde Programação) */

.fox-pw-page {
    padding: 0 32px 40px;
    color: var(--fox-text, #1c1a1d);
}

.fox-pw-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 18px;
}

.fox-pw-open.is-off {
    opacity: .45;
    pointer-events: none;
}

.fox-pw-lead {
    margin: 0 0 24px;
    max-width: 560px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--fox-muted, #8b8990);
}

.fox-pw-urlbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--fox-line, #ebe9ea);
    background: var(--fox-surface, #fdfdfd);
    margin-bottom: 12px;
}

.fox-pw-url {
    flex: 1;
    min-width: 0;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    color: var(--fox-text, #575558);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fox-pw-alt {
    margin: 0 0 24px;
    font-size: 12px;
    color: var(--fox-muted, #a3a1a6);
}

.fox-pw-alt span {
    font-family: "JetBrains Mono", ui-monospace, monospace;
}

.fox-pw-ghost,
.fox-pw-textbtn {
    border: 1px solid var(--fox-line, #e2dfe0);
    background: var(--fox-surface, #fff);
    color: var(--fox-muted, #575558);
    font-size: 12px;
    padding: 6px 11px;
    cursor: pointer;
    flex: none;
}

.fox-pw-ghost:hover:not(:disabled),
.fox-pw-textbtn:hover {
    border-color: var(--fox-link, #a9186f);
    color: var(--fox-link, #a9186f);
}

.fox-pw-ghost:disabled { opacity: .45; cursor: not-allowed; }

.fox-pw-textbtn {
    border: 0;
    padding: 0;
    background: none;
    margin-top: 6px;
}

.fox-pw-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    margin: 0 -32px;
    border-top: 1px solid var(--fox-line, #ebe9ea);
}

.fox-pw-editor {
    padding: 26px 32px 40px;
    min-width: 0;
}

.fox-pw-kicker,
.fox-pw-preview-head > span {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fox-muted, #a3a1a6);
    margin: 28px 0 14px;
}

.fox-pw-editor .fox-pw-kicker:first-child { margin-top: 0; }

.fox-pw-identity {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.fox-pw-logo {
    width: 76px;
    height: 76px;
    flex: none;
    border: 1px dashed var(--fox-line, #d9d6d8);
    background: var(--fox-page-bg, #fbfafa);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    color: var(--fox-muted, #a3a1a6);
    font-size: 11px;
    overflow: hidden;
}

.fox-pw-logo:hover {
    border-color: var(--fox-link, #a9186f);
    color: var(--fox-link, #a9186f);
}

.fox-pw-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fox-pw-identity-fields { flex: 1; min-width: 0; }

.fox-pw-identity-fields label span,
.fox-pw-label,
.fox-pw-socials label span {
    display: block;
    font-size: 13px;
    color: var(--fox-muted, #5e5c5f);
    margin-bottom: 6px;
}

.fox-pw-identity-fields input,
.fox-pw-socials input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--fox-line, #e2dfe0);
    background: var(--fox-surface, #fff);
    font-size: 14px;
    color: var(--fox-text, #1c1a1d);
    padding: 9px 11px;
}

.fox-pw-identity-fields input:focus,
.fox-pw-socials input:focus {
    outline: none;
    border-color: var(--fox-link, #a9186f);
}

.fox-pw-help {
    font-size: 12px;
    color: var(--fox-muted, #a3a1a6);
    margin: 8px 0 0;
}

.fox-pw-label { margin-top: 22px; }

.fox-pw-brands {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.fox-pw-brand {
    text-align: left;
    border: 1px solid var(--fox-line, #e2dfe0);
    background: var(--fox-surface, #fff);
    color: var(--fox-text, #1c1a1d);
    padding: 12px;
    cursor: pointer;
}

.fox-pw-brand strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.fox-pw-brand small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--fox-muted, #a3a1a6);
}

.fox-pw-brand.is-on {
    border-color: var(--fox-link, #a9186f);
    background: color-mix(in srgb, var(--fox-primary, #c51f80) 10%, var(--fox-surface, #fff));
}

.fox-pw-font {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--fox-line, #e2dfe0);
    background: var(--fox-surface, #fff);
    color: var(--fox-text, #1c1a1d);
    font-size: 15px;
    padding: 10px 12px;
}

.fox-pw-palettes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.fox-pw-palette {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px 7px 8px;
    border: 1px solid var(--fox-line, #e2dfe0);
    background: var(--fox-surface, #fff);
    cursor: pointer;
    color: var(--fox-muted, #575558);
    font-size: 13px;
}

.fox-pw-palette i {
    width: 26px;
    height: 26px;
    border-radius: 6px;
}

.fox-pw-custom {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin: 12px 0 0;
}

.fox-pw-custom label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--fox-muted, #5e5c5f);
}

.fox-pw-custom input[type="color"] {
    width: 42px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--fox-line, #e2dfe0);
    background: var(--fox-surface, #fff);
    cursor: pointer;
}

.fox-pw-palette.is-on,
.fox-pw-fund.is-on {
    border-color: var(--fox-link, #a9186f);
    background: color-mix(in srgb, var(--fox-primary, #e83d72) 6%, var(--fox-surface, #fff));
    color: var(--fox-text, #1c1a1d);
    font-weight: 600;
}

.fox-pw-funds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.fox-pw-fund {
    border: 1px solid var(--fox-line, #e2dfe0);
    background: var(--fox-surface, #fff);
    padding: 12px;
    cursor: pointer;
    text-align: left;
    color: inherit;
}

.fox-pw-fund i {
    display: block;
    height: 54px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.fox-pw-fund strong {
    display: block;
    font-size: 13px;
    font-weight: 500;
}

.fox-pw-fund small {
    display: block;
    font-size: 12px;
    color: var(--fox-muted, #a3a1a6);
    line-height: 1.45;
    margin-top: 3px;
}

.fox-pw-toggles { display: flex; flex-direction: column; }

.fox-pw-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    border: 0;
    border-bottom: 1px solid var(--fox-line, #f1eff0);
    background: none;
    cursor: pointer;
    text-align: left;
    color: inherit;
}

.fox-pw-toggle span { flex: 1; min-width: 0; }
.fox-pw-toggle strong { display: block; font-size: 14px; font-weight: 500; }
.fox-pw-toggle small { display: block; font-size: 12px; color: var(--fox-muted, #a3a1a6); margin-top: 2px; }

.fox-pw-toggle i {
    width: 38px;
    height: 22px;
    flex: none;
    border-radius: 999px;
    background: #dcd9db;
    padding: 2px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
}

.fox-pw-toggle i::after {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.fox-pw-toggle.is-on i {
    justify-content: flex-end;
    background: var(--fox-grad, linear-gradient(135deg, #E83D72 0%, #991585 100%));
}

.fox-pw-socials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.fox-pw-socials input {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
}

.fox-pw-preview {
    border-left: 1px solid var(--fox-line, #ebe9ea);
    background: var(--fox-page-bg, #fbfafa);
    padding: 22px 24px 30px;
}

.fox-pw-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.fox-pw-preview-head > span { margin: 0; }

.fox-pw-screens {
    display: flex;
    border: 1px solid var(--fox-line, #e2dfe0);
    background: var(--fox-surface, #fff);
}

.fox-pw-screens button {
    font-size: 12px;
    padding: 5px 11px;
    border: 0;
    background: transparent;
    color: var(--fox-muted, #a3a1a6);
    cursor: pointer;
}

.fox-pw-screens button.is-on {
    color: var(--fox-text, #1c1a1d);
    background: color-mix(in srgb, var(--fox-primary, #e83d72) 8%, var(--fox-surface, #fff));
}

.fox-pw-frame {
    border: 1px solid var(--fox-line, #e5e2e3);
    background: #140d13;
    overflow: hidden;
    height: 540px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fox-pw-clip { overflow: hidden; }
.fox-pw-scale { transform-origin: top left; }

.fox-pw-frame[data-screen="desktop"] .fox-pw-clip {
    width: 520px;
    height: 325px;
}
.fox-pw-frame[data-screen="desktop"] .fox-pw-scale {
    width: 1440px;
    height: 900px;
    transform: scale(0.361);
}

.fox-pw-frame[data-screen="mobile"] .fox-pw-clip {
    width: 242px;
    height: 538px;
}
.fox-pw-frame[data-screen="mobile"] .fox-pw-scale {
    width: 390px;
    height: 870px;
    transform: scale(0.62);
}

.fox-pw-scale iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #08070a;
}

.fox-pw-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--fox-line, #ebe9ea);
    background: var(--fox-surface, #fff);
    font-size: 12px;
    line-height: 1.5;
    color: var(--fox-muted, #8b8990);
}

.fox-pw-tip svg { flex: none; margin-top: 1px; color: var(--fox-link, #a9186f); }

.fox-pw-open,
.fox-pw-save {
    font-size: 13px;
    padding: 8px 13px;
    text-decoration: none;
    cursor: pointer;
}

.fox-pw-open {
    border: 1px solid var(--fox-line, #e2dfe0);
    background: var(--fox-surface, #fff);
    color: var(--fox-muted, #575558);
}

.fox-pw-open:hover { border-color: var(--fox-link, #a9186f); color: var(--fox-link, #a9186f); }

.fox-pw-save {
    border: none;
    background: var(--fox-grad, linear-gradient(135deg, #E83D72 0%, #991585 100%));
    color: #fff;
    font-weight: 500;
    padding: 9px 16px;
}

.fox-pw-save:hover:not(:disabled) { filter: brightness(0.94); }

.fox-pw-save:disabled {
    opacity: .72;
    cursor: wait;
    filter: none;
}

@media (max-width: 900px) {
    .fox-pw-page { padding: 0 16px 28px; }
    .fox-pw-grid {
        grid-template-columns: 1fr;
        margin: 0 -16px;
    }
    .fox-pw-editor { padding: 20px 16px 28px; }
    .fox-pw-preview {
        border-left: 0;
        border-top: 1px solid var(--fox-line, #ebe9ea);
        padding: 18px 16px 24px;
    }
    .fox-pw-funds,
    .fox-pw-brands,
    .fox-pw-socials { grid-template-columns: 1fr; }
    .fox-pw-urlbar { flex-wrap: wrap; }
}