:root{
        --bg: #0E1512;
        --surface: #141C18;
        --surface-2: #1B241F;
        --border: #263029;
        --text: #F3F1EA;
        --text-muted: #93A398;
        --gold: #E8B85C;
        --gold-dim: #8A6A38;
        --teal: #4FD1AE;
        --teal-dim: #2E7D64;
        --radius: 14px;
    }

    * { box-sizing: border-box; }
    ::selection{ background: var(--teal-dim); color: var(--text); }

    body {
        margin: 0;
        min-height: 100vh;
        display: flex;
        font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        background:
            radial-gradient(ellipse 900px 500px at 85% -10%, rgba(79,209,174,0.14), transparent 60%),
            radial-gradient(ellipse 700px 500px at 5% 15%, rgba(232,184,92,0.08), transparent 60%),
            var(--bg);
        color: var(--text);
        line-height: 1.5;
    }

    h1, h2, h3 {
        font-family: 'Fraunces', serif;
        font-weight: 600;
        letter-spacing: -0.01em;
    }

    a:focus-visible, button:focus-visible{
        outline: 2px solid var(--teal);
        outline-offset: 3px;
    }

    main {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 32px;
    }
    .tela-qr {
        width: 100%;
        max-width: 360px;
        margin: auto;
    }
    .card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 24px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(79,209,174,0.04);
        text-align: center;
    }
    .tela-qr h1 { margin: 0 0 16px; font-size: 22px; }
    .status { padding: 10px; border-radius: 8px; font-weight: 600; margin-bottom: 20px; text-align: center; }
    .conectado { background: rgba(79,209,174,0.14); color: var(--teal); border: 1px solid rgba(79,209,174,0.3); }
    .desconectado { background: rgba(248,113,113,0.14); color: #F87171; border: 1px solid rgba(248,113,113,0.3); }
    .verificando { background: rgba(232,184,92,0.14); color: var(--gold); border: 1px solid rgba(232,184,92,0.3); }
    .qr-area {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 220px;
        background: #ffffff;
        border-radius: 12px;
        padding: 12px;
    }
    .qr-placeholder { color: #334155; font-size: 14px; }
    #qr-img { width: 100%; height: auto; display: block; }
    .dica { margin-top: 16px; font-size: 12px; color: var(--text-muted); }
    .sidebar {
        width: 220px;
        background: #0A0F0D;
        padding: 16px 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        border-right: 1px solid var(--border);
    }
    .sidebar[hidden] { display: none; }
    .sidebar-footer {
        margin-top: auto;
        padding: 12px;
        border-top: 1px solid var(--border);
        text-align: center;
    }
    .sidebar-footer .btn-contato {
        display: block;
        width: 100%;
        padding: 10px;
        border-radius: 999px;
        background: transparent;
        border: 1px solid var(--border);
        color: var(--text-muted);
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        margin-bottom: 10px;
        transition: border-color .15s ease, color .15s ease;
    }
    .sidebar-footer .btn-contato:hover { border-color: var(--teal-dim); color: var(--text); }
    .sidebar-footer .info-versao { color: var(--text-muted); font-size: 12px; margin-bottom: 8px; font-family: 'JetBrains Mono', monospace; }
    .sidebar-footer .info-nome { font-weight: 700; color: var(--text); font-size: 13px; }
    .sidebar-footer .info-email { color: var(--text-muted); font-size: 12px; }
    .sidebar .brand { padding: 8px 12px 16px; }
    .sidebar .brand img { width: 100%; max-width: 170px; border-radius: 8px; display: block; }
    .menu-item {
        text-align: left;
        padding: 12px;
        border: none;
        border-radius: 10px;
        background: transparent;
        color: var(--text-muted);
        font-family: 'Manrope', sans-serif;
        font-size: 15px;
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
    }
    .menu-item:hover { background: var(--surface-2); color: var(--text); }
    .menu-item:disabled { opacity: 0.4; cursor: not-allowed; background: transparent; color: var(--text-muted); }
    .menu-item.active { background: var(--teal); color: #05130E; font-weight: 700; }
    .view { width: 100%; max-width: 720px; }
    .view .card { width: 100%; }
    #view-status > .card:first-child { text-align: center; }
    h2 { margin: 0 0 20px; }
    .btn {
        display: inline-block;
        padding: 12px 18px;
        border: none;
        border-radius: 999px;
        background: var(--teal);
        color: #05130E;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        text-decoration: none;
        transition: transform .15s ease, background .15s ease;
    }
    .btn:hover { background: #65E4C1; }
    .btn:disabled { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; transform: none; }
    .btn.secundario { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
    .btn.secundario:hover { border-color: var(--teal-dim); color: var(--text); background: transparent; }
    .btn.sucesso { background: var(--teal); color: #05130E; }
    .btn.sucesso:hover { background: #65E4C1; }
    .btn.perigo { background: #C23B34; color: #FFE9E7; }
    .btn.perigo:hover { background: #D24740; }
    .campanha-ativo { background: rgba(232,184,92,0.14); color: var(--gold); border: 1px solid rgba(232,184,92,0.3); }
    .grupos {
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid var(--border);
        border-radius: 10px;
        margin: 16px 0;
    }
    .grupo-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-bottom: 1px solid var(--border);
        cursor: pointer;
        text-align: left;
    }
    .grupo-item:last-child { border-bottom: none; }
    .grupo-item:hover { background: var(--surface-2); }
    .grupo-item input { width: 18px; height: 18px; accent-color: var(--teal); }
    .grupo-nome { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .grupo-participantes { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
    .grupos-resumo { color: var(--text-muted); font-size: 13px; font-weight: 600; margin-top: 12px; }
    .acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
    .msg { margin-top: 12px; font-weight: 600; text-align: left; }
    .msg.ok { color: var(--teal); }
    .msg.erro { color: #F87171; }
    .aviso { color: var(--gold); font-size: 14px; margin-top: 12px; text-align: left; }
    .popup-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;
    }
    .popup-overlay[hidden] { display: none; }
    .popup {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 32px;
        text-align: center;
        max-width: 320px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    }
    .popup-icon { font-size: 48px; margin-bottom: 12px; }
    .popup-texto { font-size: 16px; font-weight: 600; margin-bottom: 20px; white-space: pre-line; }
    .config-card { text-align: left; }
    .opcao {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 0;
        border-bottom: 1px solid var(--border);
    }
    .opcao:last-child { border-bottom: none; }
    .opcao-titulo { font-weight: 600; margin-bottom: 4px; }
    .opcao-desc { font-size: 13px; color: var(--text-muted); }
    .toggle { position: relative; width: 52px; height: 28px; flex-shrink: 0; }
    .toggle input { opacity: 0; width: 0; height: 0; }
    .slider {
        position: absolute;
        cursor: pointer;
        inset: 0;
        background: var(--border);
        border-radius: 28px;
        transition: background 0.2s;
    }
    .slider:before {
        content: "";
        position: absolute;
        width: 22px;
        height: 22px;
        left: 3px;
        top: 3px;
        background: #ffffff;
        border-radius: 50%;
        transition: transform 0.2s;
    }
    .toggle input:checked + .slider { background: var(--teal); }
    .toggle input:checked + .slider:before { transform: translateX(24px); }
    .toggle input:disabled + .slider { opacity: 0.4; cursor: not-allowed; }
    .destino-box { padding: 14px 0; border-bottom: 1px solid var(--border); }
    .destino-inputs { display: flex; gap: 8px; margin-top: 10px; }
    .campo {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg);
        color: var(--text);
        font-size: 14px;
        font-family: 'Manrope', sans-serif;
        transition: border-color .15s ease;
    }
    .campo:focus { outline: none; border-color: var(--teal-dim); }
    .destino-inputs .campo { flex: 1; }
    .config-acoes { margin-top: 16px; }
    .detectacoes-lista { display: flex; flex-direction: column; gap: 12px; }
    .detectacao-item {
        padding: 14px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg);
        text-align: left;
    }
    .detectacao-produto { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
    .detectacao-foto { width: 100%; max-width: 360px; max-height: 320px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; display: block; }
    .detectacao-meta { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
    .detectacao-previa { font-size: 13px; color: var(--text); margin-top: 8px; padding: 8px; background: var(--surface); border-radius: 6px; }
    .detectacao-link { display: inline-block; margin-top: 10px; color: var(--teal); text-decoration: none; font-size: 13px; }
    .detectacao-link:hover { text-decoration: underline; }

    /* ================= RESPONSIVO (mobile) ================= */
    .btn-menu {
        display: none;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 60;
        width: 44px;
        height: 44px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        color: var(--text);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        -webkit-tap-highlight-color: transparent;
    }
    .btn-menu[hidden] { display: none; }
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 40;
    }
    .sidebar-backdrop[hidden] { display: none; }

    @media (max-width: 768px) {
        body { font-size: 16px; }
        main { padding: 60px 12px 16px; }
        .card { padding: 16px; }
        .view { max-width: 100%; }
        .tela-qr { max-width: 100%; }
        .qr-area { min-height: 180px; }
        #qr-img { max-width: 240px; margin: 0 auto; }
        h2 { font-size: 20px; }

        .btn-menu { display: flex; align-items: center; justify-content: center; }

        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: 250px;
            max-width: 80vw;
            z-index: 50;
            transform: translateX(-105%);
            transition: transform 0.25s ease;
            overflow-y: auto;
        }
        .sidebar.aberto { transform: translateX(0); }
        .sidebar[hidden] { display: none; }
        .menu-item { font-size: 16px; padding: 14px 12px; }

        .popup { width: calc(100vw - 32px); max-width: 320px; padding: 24px 16px; }
        .campo { font-size: 16px; }

        .acoes { gap: 8px; }
        .acoes .btn { flex: 1 1 auto; min-height: 44px; }
        .opcao-texto { flex: 1; min-width: 0; }
        .destino-inputs { flex-direction: column; }
        .grupo-item { flex-wrap: wrap; align-items: flex-start; row-gap: 4px; }
        .grupo-nome { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; }
        .grupo-participantes { white-space: normal; overflow-wrap: anywhere; word-break: break-word; flex-basis: 100%; margin-left: 28px; }
        .config-acoes { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
        .config-acoes .btn { width: 100%; }
        .detectacao-foto { max-width: 100%; }
    }

    @media (max-width: 480px) {
        .acoes { flex-direction: column; align-items: stretch; }
        .acoes .btn { width: 100%; }
        .popup { padding: 20px 14px; }
    }