/* _content/Client/Pages/Crawler/CrawlerService.razor.rz.scp.css */
/* ============ Base y reset ligeros ============ */
*[b-cy7p0dxmft], *[b-cy7p0dxmft]::before, *[b-cy7p0dxmft]::after {
    box-sizing: border-box;
}

body[b-cy7p0dxmft] {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h3[b-cy7p0dxmft], h4[b-cy7p0dxmft] {
    margin: 0 0 10px;
}

/* ============ Tablas ============ */
table[b-cy7p0dxmft] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 0.95rem;
    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
}

th[b-cy7p0dxmft], td[b-cy7p0dxmft] {
    padding: 8px;
    border-bottom: 1px solid #e6e9ef;
    text-align: left;
}

th[b-cy7p0dxmft] {
    background: #ffffff;
    color: #374151;
    font-weight: 600;
}

tbody tr:nth-child(odd)[b-cy7p0dxmft] {
    background: #f9f9f9;
}

/* ============ Botones ============ */
button[b-cy7p0dxmft] {
    margin-right: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
    cursor: pointer;
    transition: filter .15s, transform .02s;
}

    button:hover[b-cy7p0dxmft] {
        filter: brightness(1.03);
    }

    button:active[b-cy7p0dxmft] {
        transform: translateY(1px);
    }

    button:disabled[b-cy7p0dxmft] {
        background: #cccccc;
        border-color: #cccccc;
        color: #666666;
        cursor: not-allowed;
    }

.btn[b-cy7p0dxmft] {
    padding: 7px 12px;
    font-size: .9rem;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: filter .15s, transform .02s;
    user-select: none;
}

    .btn:hover[b-cy7p0dxmft] {
        filter: brightness(1.03);
    }

    .btn:active[b-cy7p0dxmft] {
        transform: translateY(1px);
    }

.primary[b-cy7p0dxmft] {
    background: #2563eb;
    color: #ffffff;
}

.secondary[b-cy7p0dxmft] {
    background: #e9ecef;
    color: #000000;
}

.link[b-cy7p0dxmft] {
    background: transparent;
    color: #2563eb;
}

.btn-cancel[b-cy7p0dxmft] {
    background: #ef4444;
    color: #ffffff;
    border: none;
}

    .btn-cancel:hover[b-cy7p0dxmft] {
        background: #dc2626;
    }

.btn-resume[b-cy7p0dxmft] {
    background: #10b981;
    color: #ffffff;
    border: none;
}

    .btn-resume:hover[b-cy7p0dxmft] {
        background: #059669;
    }

.btn-pause[b-cy7p0dxmft] {
    background: #3b82f6;
    color: #ffffff;
    border: none;
}

    .btn-pause:hover[b-cy7p0dxmft] {
        background: #2563eb;
    }

/* ============ Chips de estado ============ */
.chip[b-cy7p0dxmft] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
    color: #374151;
    background: #eef2ff;
}

    .chip.live[b-cy7p0dxmft] {
        background: #ecfdf5;
        color: #065f46;
    }

    .chip.warn[b-cy7p0dxmft] {
        background: #fff7ed;
        color: #92400e;
    }

    .chip.danger[b-cy7p0dxmft] {
        background: #fef2f2;
        color: #991b1b;
    }

/* ============ Tarjetas y grillas ============ */
.grid[b-cy7p0dxmft] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.card[b-cy7p0dxmft] {
    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 2px 16px rgba(16,24,40,.06);
}

.card-hd[b-cy7p0dxmft] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.muted[b-cy7p0dxmft] {
    color: #6b7280;
    font-size: .85rem;
}

/* ============ Progreso ============ */
.progress[b-cy7p0dxmft] {
    height: 10px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
}

.bar[b-cy7p0dxmft] {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #3b82f6);
}

.progress-row[b-cy7p0dxmft] {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 8px 0;
}

.progress-meta[b-cy7p0dxmft] {
    font-size: .85rem;
    color: #374151;
}

/* ============ Key-Value y listas de palabras ============ */
.kv[b-cy7p0dxmft] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    font-size: .95rem;
    margin: 8px 0;
}

.actions[b-cy7p0dxmft] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.kwlist[b-cy7p0dxmft] {
    max-height: 220px;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px;
    margin-top: 8px;
}

.kw[b-cy7p0dxmft] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    border-radius: 8px;
}

    .kw.current[b-cy7p0dxmft] {
        background: #eef2ff;
    }

/* ============ Popup (programar) ============ */
.popup-overlay[b-cy7p0dxmft] {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    z-index: 1000;
}

.popup-window[b-cy7p0dxmft] {
    width: 420px;
    max-width: 92vw;
    padding: 24px 20px 16px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 12px 36px rgba(16,24,40,.18);
    border: 1px solid #e6e9ef;
}

    .popup-window .title[b-cy7p0dxmft] {
        margin: 0 0 14px;
        font-weight: 700;
        text-align: center;
    }

.form-grid[b-cy7p0dxmft] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.form-control[b-cy7p0dxmft] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

/* ============ Terminal / log (si lo usas) ============ */
.terminal[b-cy7p0dxmft] {
    max-height: 300px;
    overflow-y: auto;
    padding: 12px;
    background: #f8f9fa;
    border: 1px solid #e6e9ef;
    border-radius: 12px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.06);
    font-family: Consolas, Monaco, "Courier New", Courier, monospace;
    font-size: .9rem;
}

    .terminal[b-cy7p0dxmft]::-webkit-scrollbar {
        width: 8px;
    }

    .terminal[b-cy7p0dxmft]::-webkit-scrollbar-track {
        background: #e9ecef;
        border-radius: 4px;
    }

    .terminal[b-cy7p0dxmft]::-webkit-scrollbar-thumb {
        background: #adb5bd;
        border-radius: 4px;
    }

        .terminal[b-cy7p0dxmft]::-webkit-scrollbar-thumb:hover {
            background: #6c757d;
        }

/* ============ Toast / notificaciones ============ */
.toast[b-cy7p0dxmft] {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 2000;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    min-width: 300px;
    max-width: 440px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e6e9ef;
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
    animation: slideUp-b-cy7p0dxmft .28s ease-out, fadeout-b-cy7p0dxmft .2s ease-in 3.8s forwards;
}

    .toast .icon[b-cy7p0dxmft] {
        flex: 0 0 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        font-weight: 700;
    }

    .toast.success .icon[b-cy7p0dxmft] {
        background: #e6fffa;
        color: #047857;
    }

    .toast.error .icon[b-cy7p0dxmft] {
        background: #fef2f2;
        color: #991b1b;
    }

    .toast .content[b-cy7p0dxmft] {
        flex: 1 1 auto;
    }

    .toast .title[b-cy7p0dxmft] {
        font-weight: 700;
        margin-bottom: 2px;
    }

    .toast .message[b-cy7p0dxmft] {
        color: #374151;
        font-size: .95rem;
    }

    .toast .bar[b-cy7p0dxmft] {
        height: 3px;
        background: #e5e7eb;
        border-radius: 999px;
        overflow: hidden;
        margin-top: 8px;
        position: relative;
    }

        .toast .bar[b-cy7p0dxmft]::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            background: linear-gradient(90deg, #22c55e, #3b82f6);
            animation: shrink-b-cy7p0dxmft 3.6s linear forwards;
        }

    .toast.error .bar[b-cy7p0dxmft]::after {
        background: linear-gradient(90deg, #ef4444, #f59e0b);
    }

    .toast .close[b-cy7p0dxmft] {
        border: none;
        background: transparent;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        color: #6b7280;
        margin-left: 4px;
    }

@keyframes slideUp-b-cy7p0dxmft {
    from {
        transform: translateY(14px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeout-b-cy7p0dxmft {
    to {
        opacity: 0;
        transform: translateY(6px);
    }
}

@keyframes shrink-b-cy7p0dxmft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

/* ============ Spinner botón ============ */
.btn-busy[b-cy7p0dxmft] {
    position: relative;
    pointer-events: none;
    opacity: .85;
}

.spinner[b-cy7p0dxmft] {
    width: 14px;
    height: 14px;
    border: 2px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 6px;
    animation: spin-b-cy7p0dxmft .7s linear infinite;
}

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

/* Split 2 columnas */
.split[b-cy7p0dxmft] {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 16px;
    align-items: start;
}

.col-left[b-cy7p0dxmft], .col-right[b-cy7p0dxmft] {
    min-width: 0;
}

/* Lista de robots */
.robot-list[b-cy7p0dxmft] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.robot-row[b-cy7p0dxmft] {
    border: 1px solid #e6e9ef;
    border-radius: 12px;
    background: #fff;
}

.row-head[b-cy7p0dxmft] {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    background: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
}

.rh-main[b-cy7p0dxmft] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.rh-asin[b-cy7p0dxmft] {
    font-size: .95rem;
}

.rh-info[b-cy7p0dxmft] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.sep[b-cy7p0dxmft] {
    color: #9ca3af;
}

.chev[b-cy7p0dxmft] {
    color: #6b7280;
}

.mini-progress[b-cy7p0dxmft] {
    width: 120px;
    height: 8px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
}

.mini-bar[b-cy7p0dxmft] {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #3b82f6);
}

.row-body[b-cy7p0dxmft] {
    padding: 10px 12px 12px;
    border-top: 1px solid #e6e9ef;
}

.warn-icon[b-cy7p0dxmft] {
    color: #f59e0b;
    font-size: 16px;
    margin-left: 6px;
    vertical-align: middle;
}

.row-head[title][b-cy7p0dxmft] {
    cursor: help;
}

.badge[b-cy7p0dxmft] {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    background: #f3f4f6;
    color: #111827;
}

    .badge.good[b-cy7p0dxmft] {
        background: #e6fce9;
        color: #065f46;
    }

    .badge.bad[b-cy7p0dxmft] {
        background: #fef2f2;
        color: #991b1b;
    }
.tbl td.asin-name[b-cy7p0dxmft] {
    color: #222 !important;
    font-weight: 600;
}
/* _content/Client/Pages/PPC/ImportPPC.razor.rz.scp.css */
/* Terminal */
.terminal[b-oy36rn2p43] {
    max-height: 260px;
    overflow-y: auto;
    font-family: ui-monospace, "Courier New", monospace;
    font-size: 0.88rem;
    background-color: #f8f9fa;
}

    /* Scrollbar WebKit */
    .terminal[b-oy36rn2p43]::-webkit-scrollbar {
        width: 6px;
    }

    .terminal[b-oy36rn2p43]::-webkit-scrollbar-track {
        background: #e9ecef;
    }

    .terminal[b-oy36rn2p43]::-webkit-scrollbar-thumb {
        background: #adb5bd;
        border-radius: 4px;
    }

        .terminal[b-oy36rn2p43]::-webkit-scrollbar-thumb:hover {
            background: #6c757d;
        }
/* _content/Client/Pages/Products/ProductDetails.razor.rz.scp.css */
/* =========================================================
   ProductDetails — detalle + A+ responsivo
   =======================================================*/
.product-title[b-tlsekz16xk] {
    line-height: 1.25;
}

/* Tipografía de texto largo */
.prose[b-tlsekz16xk] {
    font-size: 1rem;
    line-height: 1.65;
}

.formatted-text[b-tlsekz16xk] {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Tabs limpias tipo Looper */
.nav-tabs .nav-link[b-tlsekz16xk] {
    border: none;
    border-bottom: 2px solid transparent;
    color: #374151;
}

    .nav-tabs .nav-link.active[b-tlsekz16xk] {
        border-bottom-color: var(--lp-primary);
        color: var(--lp-primary);
        font-weight: 600;
    }

/* Cards suaves */
.card[b-tlsekz16xk] {
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow);
    border: 1px solid var(--lp-border);
}

.card-header[b-tlsekz16xk] {
    border-top-left-radius: var(--lp-radius);
    border-top-right-radius: var(--lp-radius);
    background: #fff;
}

/* A+ Content: responsive, seguro y contenido */
.aplus[b-tlsekz16xk] {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    isolation: isolate;
    contain: content;
}

    .aplus *[b-tlsekz16xk], .aplus *[b-tlsekz16xk]::before, .aplus *[b-tlsekz16xk]::after {
        box-sizing: border-box;
    }

    .aplus img[b-tlsekz16xk], .aplus svg[b-tlsekz16xk], .aplus video[b-tlsekz16xk], .aplus iframe[b-tlsekz16xk], .aplus embed[b-tlsekz16xk] {
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }

    .aplus table[b-tlsekz16xk] {
        width: 100% !important;
        border-collapse: collapse;
        display: block;
        overflow-x: auto;
    }

    .aplus th[b-tlsekz16xk], .aplus td[b-tlsekz16xk] {
        word-break: break-word;
        white-space: normal;
    }

    .aplus [style*="min-width"][b-tlsekz16xk] {
        min-width: 0 !important;
    }

    .aplus pre[b-tlsekz16xk], .aplus code[b-tlsekz16xk] {
        white-space: pre-wrap !important;
        word-wrap: break-word;
    }

    .aplus h1[b-tlsekz16xk], .aplus h2[b-tlsekz16xk], .aplus h3[b-tlsekz16xk], .aplus h4[b-tlsekz16xk], .aplus h5[b-tlsekz16xk], .aplus h6[b-tlsekz16xk],
    .aplus p[b-tlsekz16xk], .aplus ul[b-tlsekz16xk], .aplus ol[b-tlsekz16xk] {
        margin: .5rem 0;
    }

    .aplus a[b-tlsekz16xk] {
        text-decoration: underline;
    }

    .aplus [style*="position:fixed"][b-tlsekz16xk] {
        position: static !important;
    }

    .aplus [style*="position:absolute"][style*="left"][b-tlsekz16xk],
    .aplus [style*="position:absolute"][style*="right"][b-tlsekz16xk] {
        left: auto !important;
        right: auto !important;
        position: static !important;
    }

/* Pequeño cursor/caret animado usado en descripciones */
.caret[b-tlsekz16xk] {
    display: inline-block;
    width: 8px;
    height: 1em;
    background: currentColor;
    margin-left: 2px;
    animation: blink-b-tlsekz16xk 1s step-end infinite;
}

@keyframes blink-b-tlsekz16xk {
    50% {
        opacity: 0;
    }
}

.kw-hit[b-tlsekz16xk] {
    background: transparent;
    color: var(--bs-success);
    font-weight: 700;
    padding: 0;
}


/* Resaltado de coincidencias del buscador */
.kw-hit[b-tlsekz16xk] {
    color: var(--bs-success);
    font-weight: 700;
    background: transparent;
    padding: 0;
}

/* ===== Tabla compacta para que quepa todo ===== */
.kw-table[b-tlsekz16xk] {
    font-size: 0.82rem;
}

    .kw-table th[b-tlsekz16xk], .kw-table td[b-tlsekz16xk] {
        padding: .35rem .5rem;
        vertical-align: middle;
    }

    .kw-table thead th[b-tlsekz16xk] {
        position: sticky;
        top: 0;
        z-index: 2;
    }



.kw-tokens[b-tlsekz16xk] {
    font-size: 0.78rem;
    line-height: 1.25;
}

    .kw-tokens span[b-tlsekz16xk] {
        display: inline;
    }

.kw-num[b-tlsekz16xk] {
    width: 100px;
    white-space: nowrap;
}

/* Badges del resumen */
.kw-summary .badge[b-tlsekz16xk] {
    font-weight: 600;
}



/* ===== Tabla compacta para que quepa todo (sin recortes de letras) ===== */
.kw-table[b-tlsekz16xk] {
    font-size: 0.84rem;
}
    /* un pelín mayor para legibilidad */
    .kw-table th[b-tlsekz16xk], .kw-table td[b-tlsekz16xk] {
        padding: .38rem .5rem;
        vertical-align: middle;
        line-height: 1.35; /* evita que se corten acentos/descendentes */
    }

    .kw-table thead th[b-tlsekz16xk] {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #fff; /* evita transparencias al hacer scroll */
    }

.kw-key-col[b-tlsekz16xk] {
    min-width: 180px;
}

.kw-tokens-col[b-tlsekz16xk] {
    min-width: 180px;
}

.kw-tokens[b-tlsekz16xk] {
    font-size: 0.8rem;
    line-height: 1.35; /* más alto para no cortar caracteres */
    overflow-wrap: anywhere; /* permite partir palabras largas */
    word-break: break-word;
    white-space: normal;
}

    .kw-tokens span[b-tlsekz16xk] {
        display: inline;
    }

.kw-num[b-tlsekz16xk] {
    width: 100px;
    white-space: nowrap;
}

/* Badges del resumen */
.kw-summary .badge[b-tlsekz16xk] {
    font-weight: 600;
    line-height: 1.1;
}

/* Resaltado de coincidencias del buscador (una única definición coherente) */
mark.kw-hit[b-tlsekz16xk] {
    color: var(--bs-success);
    font-weight: 700;
    background: transparent;
    padding: 0 .15em;
    border-radius: .15rem;
}

/* Evita que nada dentro de celdas de la tabla se oculte por overflow */
.kw-table td[b-tlsekz16xk], .kw-table th[b-tlsekz16xk] {
    overflow: visible;
}

/* En pantallas pequeñas, compactar un poco más */
@media (max-width: 576px) {
    .kw-table[b-tlsekz16xk] {
        font-size: 0.8rem;
    }

    .kw-tokens[b-tlsekz16xk] {
        font-size: 0.78rem;
    }

    .kw-key-col[b-tlsekz16xk], .kw-tokens-col[b-tlsekz16xk] {
        min-width: 150px;
    }
}

/* Badges semáforo (independientes de Bootstrap text-bg-*) */
.badge-good[b-tlsekz16xk] {
    background: var(--bs-success, #198754);
    color: #fff;
}

.badge-warn[b-tlsekz16xk] {
    background: var(--bs-warning, #ffc107);
    color: #111;
}

.badge-bad[b-tlsekz16xk] {
    background: var(--bs-danger, #dc3545);
    color: #fff;
}

/* opcional: que se vean compactas y consistentes */
.badge[b-tlsekz16xk] {
    border-radius: .5rem;
    padding: .25rem .5rem;
    font-weight: 600;
    line-height: 1.1;
}

/* Resaltado azul al activar el "ojo" */
mark.eye-hit[b-tlsekz16xk] {
    color: var(--bs-primary);
    font-weight: 700;
    background: transparent;
    text-decoration: underline;
    padding: 0 .15em;
    border-radius: .15rem;
}

/* Botón de ojo compacto */
.btn-eye[b-tlsekz16xk] {
    line-height: 1;
    padding: .15rem .35rem;
}
/* _content/Client/Pages/Products/ProductsCrawler.razor.rz.scp.css */
/* =========================================================
   ProductsCrawler — estilo claro alineado con tokens del tema
   =======================================================*/

table[b-b9qjtsm452] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}

th[b-b9qjtsm452], td[b-b9qjtsm452] {
    padding: .65rem .75rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: .95rem;
    color: var(--text);
}

th[b-b9qjtsm452] {
    background-color: var(--surface);
    color: color-mix(in srgb, var(--text) 85%, #000 0%);
    font-weight: 600;
}

tbody tr:nth-child(odd)[b-b9qjtsm452] {
    background-color: color-mix(in srgb, var(--surface) 85%, var(--border) 15%);
}

tbody tr:hover[b-b9qjtsm452] {
    background: color-mix(in srgb, var(--surface) 80%, var(--border) 20%);
}

/* Acciones: si los botones no usan Bootstrap en este componente,
   dales aspecto primario armonizado */
button[b-b9qjtsm452] {
    margin-right: 0.5rem;
    padding: 0.45rem .8rem;
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: filter .15s ease, transform .02s ease;
}

    button:hover[b-b9qjtsm452] {
        filter: brightness(1.03);
    }

    button:active[b-b9qjtsm452] {
        transform: translateY(1px);
    }

/* Popup */
.popup[b-b9qjtsm452] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--surface);
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-2);
    z-index: 1000;
    width: min(560px, 92vw);
}

.popup-content h3[b-b9qjtsm452] {
    margin: 0 0 .75rem;
    font-weight: 700;
}

.popup-content input[type="text"][b-b9qjtsm452],
.popup-content textarea[b-b9qjtsm452],
.popup-content select[b-b9qjtsm452] {
    width: 100%;
    padding: .6rem .75rem;
    margin: .5rem 0;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}

.popup-content button[b-b9qjtsm452] {
    margin-top: .75rem;
}
/* _content/Client/Pages/ProductsAnalyzer/ProductAnalyzerDetails.razor.rz.scp.css */
.diff-positive[b-yskusajipk] {
    color: green; /* O el color que prefieras */
    font-weight: bold;
}

.diff-negative[b-yskusajipk] {
    color: red; /* O el color que prefieras */
    font-weight: bold;
}

/* IncidencesSummary.razor.css */
table[b-yskusajipk] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

th[b-yskusajipk], td[b-yskusajipk] {
    padding: 0.5rem;
    border: 1px solid #ddd;
    text-align: left;
}

th[b-yskusajipk] {
    background-color: #f2f2f2;
}

tr:nth-child(odd)[b-yskusajipk] {
    background-color: #f9f9f9;
}

button[b-yskusajipk] {
    margin-right: 0.5rem;
    padding: 0.25rem 0.5rem;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 0.25rem;
    cursor: pointer;
}

    button:hover[b-yskusajipk] {
        background-color: #0056b3;
    }

.popup[b-yskusajipk] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.popup-content h3[b-yskusajipk] {
    margin-top: 0;
}

.popup-content input[type="text"][b-yskusajipk],
.popup-content textarea[b-yskusajipk],
.popup-content select[b-yskusajipk] {
    width: 100%;
    padding: 0.5rem;
    margin: 0.5rem 0;
    border-radius: 0.25rem;
    border: 1px solid #ddd;
}

.popup-content button[b-yskusajipk] {
    margin-top: 1rem;
}
/* _content/Client/Pages/ProductsAnalyzer/ProductsRanking.razor.rz.scp.css */
/* Cabecera pegada como en la otra tabla (sin color forzado) */
.kw-table.ranking-table thead th[b-jszs6rxiqi] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bs-table-bg); /* igual que el cuerpo */
    box-shadow: 0 1px 0 rgba(0,0,0,.05); /* línea sutil inferior */
}

/* Sticky de primeras columnas usando variables de ancho */
.kw-table.ranking-table .sticky-col[b-jszs6rxiqi] {
    position: sticky;
    left: 0;
    z-index: 6;
    background: var(--bs-table-bg); /* respeta tema */
    box-shadow: inset -1px 0 0 rgba(0,0,0,.05);
}

/* Anchos y offsets controlados por variables */
.kw-table.ranking-table .col-keyword[b-jszs6rxiqi] {
    min-width: var(--kw-col1);
    text-align: left;
}

.kw-table.ranking-table .col-avg[b-jszs6rxiqi] {
    width: var(--kw-col2);
    text-align: center;
}

    .kw-table.ranking-table .col-avg.sticky-col[b-jszs6rxiqi] {
        left: var(--kw-col1);
    }

/* Celdas de fecha compactas como en kw-table */
.kw-table.ranking-table .date-cell[b-jszs6rxiqi] {
    width: 84px;
    white-space: nowrap;
}

/* Quita el borde del viejo contenedor si lo tuvieras */
.table-container[b-jszs6rxiqi] {
    border: 0 !important;
}

/* Asegura la compacidad de filas (coincide con .kw-table que ya tienes) */
.kw-table.ranking-table th[b-jszs6rxiqi],
.kw-table.ranking-table td[b-jszs6rxiqi] {
    font-size: .80rem;
    padding: .15rem .35rem;
    line-height: 1.1;
}

/* Hover como en tu otra tabla */
.kw-table.ranking-table tbody tr:hover[b-jszs6rxiqi] {
    --bs-table-bg: var(--bs-table-hover-bg);
}

/* Barra de filtros compacta en una sola línea */
.filters-bar[b-jszs6rxiqi] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    padding: .25rem 0;
}

    /* Controles pequeños y de ancho ajustado */
    .filters-bar .form-control[b-jszs6rxiqi],
    .filters-bar .form-select[b-jszs6rxiqi] {
        width: auto;
    }


/* Búsqueda con ancho flexible pero contenido */
.search-input[b-jszs6rxiqi] {
    width: clamp(160px, 24vw, 260px);
}

/* Fecha compacta */
.custom-inline[b-jszs6rxiqi] {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.date-input[b-jszs6rxiqi] {
    width: 130px;
}

/* Botón extra-compacto para “OK” */
.btn-xxs[b-jszs6rxiqi] {
    --bs-btn-padding-y: .15rem;
    --bs-btn-padding-x: .4rem;
    --bs-btn-font-size: .75rem;
    line-height: 1;
}

/* Botones de icono */
.icon-btn i[b-jszs6rxiqi] {
    font-size: 1rem;
}

/* ASIN con tope para no romper la línea */
.asin-select[b-jszs6rxiqi] {
    max-width: 280px;
}

/* Acciones: botón "Detalles" con badge en una sola línea */
.kw-table.ranking-table .col-actions[b-jszs6rxiqi] {
    white-space: nowrap; /* evita saltos dentro de la celda */
}

    .kw-table.ranking-table .col-actions .btn[b-jszs6rxiqi] {
        display: inline-flex; /* alinea texto + badge en fila */
        align-items: center;
        gap: .25rem; /* separación texto–badge */
        white-space: nowrap; /* evita salto dentro del botón */
        line-height: 1; /* botón compacto */
        padding-top: .15rem; /* igual que el resto de celdas */
        padding-bottom: .15rem;
    }

        .kw-table.ranking-table .col-actions .btn .badge[b-jszs6rxiqi] {
            font-size: .70rem; /* badge más pequeño */
            line-height: 1;
            padding: .1rem .35rem; /* compacto para no subir la altura */
        }

/* Nueva columna Ventas (sticky) */
.kw-table.ranking-table .col-sales[b-jszs6rxiqi] {
    width: var(--kw-col3);
    text-align: center;
}

    /* offsets: keyword (0) + avg (col2) + sales (col3) */
    .kw-table.ranking-table .col-sales.sticky-col[b-jszs6rxiqi] {
        left: calc(var(--kw-col1) + var(--kw-col2));
        z-index: 6;
    }

/* Centramos la carga global */
.loading-wrap[b-jszs6rxiqi] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

/* Asegura que los spinners no cambien el alto del botón/celda */
.kw-table.ranking-table .col-actions .spinner-border[b-jszs6rxiqi],
.kw-table.ranking-table .col-sales .spinner-border[b-jszs6rxiqi] {
    width: 1rem;
    height: 1rem;
    border-width: .15rem;
    vertical-align: middle;
}


/* Alturas y offsets de las 3 filas de cabecera */
.kw-table.ranking-table[b-jszs6rxiqi] {
    --hdr1-h: 28px; /* Años */
    --hdr2-h: 28px; /* Meses */
    /* La tercera fila (días) usa la altura normal de th (ya la tienes compacta) */
}

    /* Todas las celdas de cabecera siguen siendo sticky */
    .kw-table.ranking-table thead th[b-jszs6rxiqi] {
        position: sticky;
        background: var(--bs-table-bg);
        box-shadow: 0 1px 0 rgba(0,0,0,.05);
        z-index: 5;
    }

    /* Offset por fila para que no se solapen */
    .kw-table.ranking-table thead tr.hdr-years th[b-jszs6rxiqi] {
        top: 0;
        z-index: 7;
    }

    .kw-table.ranking-table thead tr.hdr-months th[b-jszs6rxiqi] {
        top: var(--hdr1-h);
        z-index: 6;
    }

    .kw-table.ranking-table thead tr.hdr-days th[b-jszs6rxiqi] {
        top: calc(var(--hdr1-h) + var(--hdr2-h));
        z-index: 5;
    }

    /* Alturas visuales de las barras superiores */
    .kw-table.ranking-table thead tr.hdr-years th[b-jszs6rxiqi],
    .kw-table.ranking-table thead tr.hdr-months th[b-jszs6rxiqi] {
        height: var(--hdr1-h); /* mismas alturas para un look limpio */
        line-height: calc(var(--hdr1-h) - 6px);
        padding-top: .15rem;
        padding-bottom: .15rem;
        text-transform: uppercase; /* meses en mayúsculas compactas (opcional) */
        letter-spacing: .02em;
        white-space: nowrap;
    }

    /* Cabecera de días: ya es compacta por tus reglas globales */
    .kw-table.ranking-table thead tr.hdr-days th[b-jszs6rxiqi] {
        white-space: nowrap;
    }

    /* Opcional: bordes sutiles entre grupos */
    .kw-table.ranking-table thead .group-month[b-jszs6rxiqi],
    .kw-table.ranking-table thead .group-year[b-jszs6rxiqi] {
        border-left: 1px solid var(--bs-border-color);
    }

        .kw-table.ranking-table thead .group-month:first-child[b-jszs6rxiqi],
        .kw-table.ranking-table thead .group-year:first-child[b-jszs6rxiqi] {
            border-left: none;
        }

    /* Las columnas sticky de la izquierda están en la primera fila con rowspan=3 */
    .kw-table.ranking-table thead .sticky-col[b-jszs6rxiqi] {
        top: 0; /* se quedan ancladas arriba del todo */
        z-index: 8;
    }

    .kw-table.ranking-table .col-inversion[b-jszs6rxiqi] {
        width: var(--kw-col4);
        text-align: center;
    }

        .kw-table.ranking-table .col-inversion.sticky-col[b-jszs6rxiqi] {
            left: calc(var(--kw-col1) + var(--kw-col2) + var(--kw-col3));
            z-index: 6;
        }

        .kw-table.ranking-table .col-inversion .spinner-border[b-jszs6rxiqi] {
            width: 1rem;
            height: 1rem;
            border-width: .15rem;
            vertical-align: middle;
        }
    /* Nueva columna Impresiones (sticky) */
    .kw-table.ranking-table .col-impressions[b-jszs6rxiqi] {
        width: var(--kw-col5);
        text-align: center;
    }

        .kw-table.ranking-table .col-impressions.sticky-col[b-jszs6rxiqi] {
            left: calc(var(--kw-col1) + var(--kw-col2) + var(--kw-col3) + var(--kw-col4));
            z-index: 6;
        }

        .kw-table.ranking-table .col-impressions .spinner-border[b-jszs6rxiqi] {
            width: 1rem;
            height: 1rem;
            border-width: .15rem;
            vertical-align: middle;
        }
/* _content/Client/Pages/ProductsKeywords/ProductsKeywords.razor.rz.scp.css */
/* =========================================================
   ProductsKeywords — compacto + badges + controles
   =======================================================*/

/* Botón ámbar (respetando tu variante original) */
.btn.btn-amber[b-1ylon3i6ma] {
    --bs-btn-color: #3b2c00;
    --bs-btn-bg: #ffc107;
    --bs-btn-border-color: #e0a800;
    --bs-btn-hover-color: #3b2c00;
    --bs-btn-hover-bg: #ffca2c;
    --bs-btn-hover-border-color: #d39e00;
    --bs-btn-active-color: #3b2c00;
    --bs-btn-active-bg: #ffcd39;
    --bs-btn-active-border-color: #c69500;
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: #ffe08a;
    --bs-btn-disabled-border-color: #e0a800;
    --bs-btn-focus-shadow-rgb: 255,193,7;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.08);
    background-image: none;
}

/* Indicadores y badges */
.recently-added-indicator[b-1ylon3i6ma] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #28a745;
    display: inline-block;
}

.badge-new[b-1ylon3i6ma] {
    background: #fff3cd;
    color: #664d03;
    border: 1px solid #ffeeba;
    border-radius: 4px;
    padding: 0 .35rem;
    font-size: .75rem;
    font-weight: 600;
}

option.new-parent[b-1ylon3i6ma]::before {
    content: "🟨 NEW ";
}

option.new-parent[b-1ylon3i6ma] {
    background-color: #fff9c4;
}

/* Tabla compacta de keywords */
.kw-table[b-1ylon3i6ma] {
    width: 100%;
    border-collapse: collapse;
    margin: .5rem 0 0;
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    overflow: hidden;
    box-shadow: var(--lp-shadow);
}

    .kw-table th[b-1ylon3i6ma], .kw-table td[b-1ylon3i6ma] {
        font-size: .80rem;
        padding: .35rem .5rem;
        line-height: 1.2;
        border-bottom: 1px solid var(--lp-border);
    }

    .kw-table tr.open[b-1ylon3i6ma] {
        --bs-table-bg: var(--bs-primary-bg-subtle);
    }

    /* Botones y controles diminutos dentro de la tabla */
    .kw-table .btn[b-1ylon3i6ma] {
        --bs-btn-padding-y: .2rem;
        --bs-btn-padding-x: .5rem;
        --bs-btn-font-size: .70rem;
        line-height: 1;
        border-radius: 8px;
    }

    .kw-table .form-check-input[b-1ylon3i6ma] {
        transform: scale(.85);
        margin-top: .15rem;
    }

/* Barra de filtros en una línea */
.filters-bar[b-1ylon3i6ma] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    padding: .25rem 0;
}

    .filters-bar .form-control[b-1ylon3i6ma],
    .filters-bar .form-select[b-1ylon3i6ma] {
        width: auto;
    }

.search-input[b-1ylon3i6ma] {
    width: clamp(160px, 24vw, 260px);
}

.custom-inline[b-1ylon3i6ma] {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.date-input[b-1ylon3i6ma] {
    width: 130px;
}

/* Iconos y giros */
.icon-btn i[b-1ylon3i6ma] {
    font-size: 1rem;
}

.rotate[b-1ylon3i6ma] {
    transition: transform .2s;
}

button[aria-expanded="true"] .rotate[b-1ylon3i6ma] {
    transform: rotate(90deg);
}

/* Utilidades */
.btn-xxs[b-1ylon3i6ma] {
    --bs-btn-padding-y: .15rem;
    --bs-btn-padding-x: .4rem;
    --bs-btn-font-size: .75rem;
    line-height: 1;
}

.asin-select[b-1ylon3i6ma] {
    max-width: 280px;
}

/* Enlaces de orden en <th> heredando color */
th .btn.btn-link.text-decoration-none[b-1ylon3i6ma] {
    color: inherit;
}

th .btn.btn-link:hover[b-1ylon3i6ma] {
    text-decoration: underline;
}

/* Panel modal de categorización */
.uncat-modal .panel[b-1ylon3i6ma] {
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.06);
}

.uncat-modal .list-group-item[b-1ylon3i6ma] {
    transition: background-color .15s ease, transform .05s ease;
}

    .uncat-modal .list-group-item:hover[b-1ylon3i6ma] {
        background: var(--bs-tertiary-bg);
    }

.uncat-modal .btn-group .btn[b-1ylon3i6ma] {
    --bs-btn-font-size: .75rem;
    --bs-btn-padding-y: .15rem;
    --bs-btn-padding-x: .4rem;
}
/* _content/Client/Shared/MainLayout.razor.rz.scp.css */
/* ============================================================
   MainLayout.razor.css � Light theme top bar + content spacing
   ============================================================ */
.page[b-ue12j0c5j8] {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

.sidebar[b-ue12j0c5j8] {
    background: transparent;
}

/* Light top bar to match the sidebar header */
.top-row[b-ue12j0c5j8] {
    background: #ffffff;
    color: #0f172a;
    border-bottom: 1px solid #e6e9ef;
    box-shadow: none;
    align-items: center;
    min-height: 56px;
}

.content[b-ue12j0c5j8] {
    padding: 1.5rem;
    background: #f6f8fb;
}
/* _content/Client/Shared/NavMenu.razor.rz.scp.css */
/* ============================================================
   NavMenu.razor.css — Light theme, icons readable, unified header
   ============================================================ */

/* Keep the menu always expanded in desktop templates */
.collapse[b-dwvujiiut8] {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
}

/* Hide legacy burger button if still present */
.navbar-toggler[b-dwvujiiut8] {
    display: none !important;
}

/* ---- Header inside the NavMenu (default template uses a .top-row navbar) ---- */
.top-row[b-dwvujiiut8] {
    background: #ffffff !important; /* match MainLayout top row */
    color: #0f172a !important;
    border-bottom: 1px solid #e6e9ef;
    min-height: 56px;
}

/* brand text */
.navbar .navbar-brand[b-dwvujiiut8], .navbar-brand[b-dwvujiiut8] {
    color: #0f172a !important;
    font-weight: 600;
}

/* ---- Scrollable menu panel (light) ---- */
.nav-scrollable[b-dwvujiiut8] {
    height: 100%;
    padding: .75rem;
}

    .nav-scrollable > nav[b-dwvujiiut8] {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        border: 1px solid #e6e9ef;
        border-radius: 14px;
        padding: .5rem;
        background: #ffffff;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
    }

/* ---- Items ---- */
.nav-item[b-dwvujiiut8] {
    padding-inline: .15rem;
}

.nav-link[b-dwvujiiut8] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    border-radius: 12px;
    color: #344054; /* darker for contrast on light bg */
    text-decoration: none;
    position: relative;
    transition: background-color .12s ease, transform .04s ease, color .12s ease;
}

    .nav-link:hover[b-dwvujiiut8] {
        background: #f1f5ff; /* subtle primary-tinted hover */
        transform: translateY(-1px);
        color: #1f2937;
    }

    .nav-link.active[b-dwvujiiut8] {
        background: #eef5ff; /* active state */
        color: #1d4ed8; /* primary text */
        box-shadow: inset 0 0 0 1px rgba(29,78,216,.08);
    }

        .nav-link.active[b-dwvujiiut8]::before {
            content: "";
            position: absolute;
            left: 6px;
            top: 8px;
            bottom: 8px;
            width: 3px;
            background: linear-gradient(180deg, #60a5fa, #1d4ed8);
            border-radius: 2px;
            filter: drop-shadow(0 0 4px rgba(29,78,216,.45));
        }

/* ---- Icons (Open Iconic) - better readability on light theme ---- */
.oi[b-dwvujiiut8] {
    color: #667085; /* mid-gray so it shows on white */
    font-size: 1.05rem;
    width: 1.1rem;
    text-align: center;
}

.nav-link:hover .oi[b-dwvujiiut8] {
    color: #475467; /* a bit darker on hover */
}

.nav-link.active .oi[b-dwvujiiut8] {
    color: #1d4ed8; /* primary on active */
}
/* _content/Client/Shared/ProductAssistant.razor.rz.scp.css */
.ara-avatar[b-2qmigrcni2] {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #0ea5e9, #22c55e);
    border-radius: 999px;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    cursor: pointer;
    z-index: 10000;
}

    .ara-avatar img[b-2qmigrcni2] {
        width: 28px;
        height: 28px;
    }


.ara-panel[b-2qmigrcni2] {
    position: fixed;
    right: 18px;
    bottom: 86px;
    width: min(420px, calc(100vw - 32px));
    max-height: min(70vh, 680px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
    overflow: hidden;
    z-index: 10001;
    display: flex;
    flex-direction: column;
}


.ara-header[b-2qmigrcni2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    background: #f8fafc;
}

.ara-sub[b-2qmigrcni2] {
    font-size: 12px;
    color: #64748b;
}

.ara-icon[b-2qmigrcni2] {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
}


.ara-body[b-2qmigrcni2] {
    padding: 12px;
    overflow-y: auto;
    flex: 1 1 auto;
    background: #fbfbfb;
}

.msg[b-2qmigrcni2] {
    display: flex;
    margin: 8px 0;
}

    .msg.me[b-2qmigrcni2] {
        justify-content: flex-end;
    }

    .msg .bubble[b-2qmigrcni2] {
        max-width: 80%;
        padding: 10px 12px;
        border-radius: 14px;
        line-height: 1.35;
        white-space: pre-wrap;
    }

    .msg.me .bubble[b-2qmigrcni2] {
        background: #0ea5e9;
        color: white;
        border-bottom-right-radius: 6px;
    }

    .msg.bot .bubble[b-2qmigrcni2] {
        background: #eef2f7;
        color: #0f172a;
        border-bottom-left-radius: 6px;
    }


.ara-draft[b-2qmigrcni2] {
    border-top: 1px dashed #e5e7eb;
    background: #fff;
    padding: 10px 12px;
}

.ara-draft-title[b-2qmigrcni2] {
    font-weight: 600;
    margin-bottom: 6px;
}

.ara-draft-grid[b-2qmigrcni2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    font-size: 13px;
}

    .ara-draft-grid span[b-2qmigrcni2] {
        color: #6b7280;
    }

.ara-draft-actions[b-2qmigrcni2] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}


.ara-quick[b-2qmigrcni2] {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    flex-wrap: wrap;
    background: #fff;
    border-top: 1px solid #eee;
}

.chip[b-2qmigrcni2] {
    border: none;
    background: #f1f5f9;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
}


.ara-input[b-2qmigrcni2] {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #eee;
    background: #fff;
}

    .ara-input input[b-2qmigrcni2] {
        flex: 1 1 auto;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 14px;
    }


.ara-btn[b-2qmigrcni2] {
    border: none;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
}

    .ara-btn.primary[b-2qmigrcni2] {
        background: #0ea5e9;
        color: #fff;
    }

    .ara-btn.secondary[b-2qmigrcni2] {
        background: #eef2f7;
        color: #0f172a;
    }


.ara-footer[b-2qmigrcni2] {
    padding: 8px 12px;
    font-size: 12px;
    color: #64748b;
    border-top: 1px solid #eee;
    background: #fafafa;
}