/* ================================================================
   Admin Panel — v11
   ================================================================ */

/* ══════════════════════════════════════════════════════════════
   0. LOGIN  ·  Panel izquierdo / formulario derecho
   ══════════════════════════════════════════════════════════════ */

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes cq-panel-in   { from{opacity:0;transform:translateX(-32px)} to{opacity:1;transform:translateX(0)} }
@keyframes cq-form-in    { from{opacity:0;transform:translateY(28px) scale(.985)} to{opacity:1;transform:none} }
@keyframes cq-float      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes cq-halo       { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.24);opacity:1} }
@keyframes cq-dot        { 0%,100%{box-shadow:0 0 0 2px rgba(34,197,94,.24)} 50%{box-shadow:0 0 0 7px rgba(34,197,94,.06)} }
@keyframes cq-ga {
    0%,100%{transform:scale(1) translate(0,0);opacity:1}
    33%{transform:scale(1.08) translate(4%,8%);opacity:.86}
    66%{transform:scale(.95) translate(-4%,-5%);opacity:.96}
}
@keyframes cq-gb {
    0%,100%{transform:scale(1) translate(0,0);opacity:1}
    40%{transform:scale(1.12) translate(-8%,-6%);opacity:.82}
    75%{transform:scale(.94) translate(7%,9%);opacity:1}
}
@keyframes cq-gc {
    0%,100%{transform:scale(1) translate(0,0);opacity:1}
    50%{transform:scale(1.18) translate(-11%,10%);opacity:.76}
}
@keyframes cq-orb1 {
    0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(-55px,75px) scale(1.10)} 70%{transform:translate(32px,40px) scale(.92)}
}
@keyframes cq-orb2 {
    0%,100%{transform:translate(0,0) scale(1)} 35%{transform:translate(62px,-52px) scale(1.08)} 65%{transform:translate(-32px,38px) scale(.94)}
}

/* ── SVG Grain ─────────────────────────────────────────────── */
.cq-noise-svg {
    position:absolute;inset:0;width:100%;height:100%;
    pointer-events:none;z-index:2;mix-blend-mode:overlay;
}

/* ══════════════════════════════════════════════════════════════
   PANEL IZQUIERDO — base
   ══════════════════════════════════════════════════════════════ */
#cq-brand-panel { overflow:hidden; z-index:9999; }

/* Desktop: sidebar fijo — gradiente del hero de la tienda */
@media (min-width:768px) {
    #cq-brand-panel {
        position:fixed;top:0;left:0;bottom:0;
        width:42vw;max-width:560px;
        /* Mismo gradiente que el hero: #083264 → #0d4090 → #1462cc → #0a3878 */
        background:
            radial-gradient(ellipse at 85% 48%, rgba(217,4,41,.30) 0%, transparent 50%),
            radial-gradient(ellipse 60% 70% at 70% 28%, rgba(255,255,255,.06) 0%, transparent 52%),
            linear-gradient(145deg, #083264 0%, #0d4090 38%, #1462cc 68%, #0a3878 100%);
        display:flex;flex-direction:column;justify-content:center;
        animation:cq-panel-in .85s cubic-bezier(.22,1,.36,1) both;
    }
}

/* Mobile: header superior — mismo gradiente del hero de la tienda */
@media (max-width:767px) {
    #cq-brand-panel {
        position:relative;width:100%;max-width:none;
        min-height:220px;
        /* Hero gradient de la tienda: 083264 → 0d4090 → 1462cc → 0a3878 */
        background:
            radial-gradient(ellipse at 88% 50%, rgba(217,4,41,.28) 0%, transparent 52%),
            radial-gradient(ellipse 58% 72% at 70% 28%, rgba(255,255,255,.06) 0%, transparent 54%),
            linear-gradient(145deg, #083264 0%, #0d4090 38%, #1462cc 68%, #0a3878 100%);
        display:flex;flex-direction:column;
        align-items:center;justify-content:center;
        padding:2.5rem 1.5rem 1.75rem;
    }
}

/* ── Capas de color — DESKTOP (complementan el hero azul) ─── */
@media (min-width:768px) {
    /* Destello blanco-azul en la zona alta (igual que .hero-gradient-overlay) */
    .cq-glow-center {
        position:absolute;inset:0;pointer-events:none;
        background:radial-gradient(
            ellipse 65% 75% at 72% 28%,
            rgba(255,255,255,.09) 0%,
            rgba(168,212,255,.06) 38%,
            transparent 60%
        );
        animation:cq-ga 12s ease-in-out infinite;
    }
    /* Brillo azul eléctrico profundo en la parte inferior-izquierda */
    .cq-glow-blue {
        position:absolute;inset:0;pointer-events:none;
        background:radial-gradient(
            ellipse 80% 60% at 10% 95%,
            rgba(8,50,120,.55) 0%,
            rgba(4,25,72,.30) 44%,
            transparent 68%
        );
        animation:cq-gb 14s ease-in-out infinite;
    }
    /* Acento rojo lateral (rgba(217,4,41) — el mismo del hero de la tienda) */
    .cq-glow-violet {
        position:absolute;inset:0;pointer-events:none;
        background:radial-gradient(
            ellipse 55% 65% at 95% 50%,
            rgba(217,4,41,.32) 0%,
            rgba(160,2,28,.15) 44%,
            transparent 65%
        );
        animation:cq-gc 18s ease-in-out infinite;
    }
}

/* ── Capas de color — MOBILE (complementan el hero gradient) ── */
@media (max-width:767px) {
    /* Destello blanco-azul arriba (idéntico al hero-gradient-overlay) */
    .cq-glow-center {
        position:absolute;inset:0;pointer-events:none;
        background:radial-gradient(
            ellipse 58% 72% at 72% 28%,
            rgba(255,255,255,.08) 0%,
            transparent 54%
        );
        animation:cq-ga 12s ease-in-out infinite;
    }
    /* Acento rojo lateral (rgba(217,4,41) — el mismo del hero) */
    .cq-glow-blue {
        position:absolute;inset:0;pointer-events:none;
        background:radial-gradient(
            ellipse 65% 60% at 95% 50%,
            rgba(217,4,41,.26) 0%,
            transparent 58%
        );
        animation:cq-gb 16s ease-in-out infinite;
    }
    /* Profundidad oscura en la base */
    .cq-glow-violet {
        position:absolute;inset:0;pointer-events:none;
        background:radial-gradient(
            ellipse 80% 50% at 10% 100%,
            rgba(4,22,72,.50) 0%,
            transparent 55%
        );
        animation:cq-gc 20s ease-in-out infinite;
    }
}

/* ── Cuadrícula puntos ─────────────────────────────────────── */
.cq-dot-grid {
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,.11) 1.2px,transparent 1.2px);
    background-size:26px 26px;
}
.cq-h-line{display:none}

/* ── Contenido interior ────────────────────────────────────── */
.cq-brand-inner {
    position:relative;z-index:3;
    padding:2.5rem 3rem;
    display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:1.625rem;
}
@media (max-width:767px) {
    .cq-brand-inner{padding:0;gap:.875rem}
}

/* Halo del logo */
.cq-logo-halo {
    position:relative;display:flex;align-items:center;justify-content:center;
    animation:cq-float 5.5s ease-in-out infinite;
}
.cq-logo-halo::before {
    content:'';position:absolute;width:210px;height:210px;border-radius:50%;
    background:radial-gradient(circle,rgba(210,0,28,.32) 0%,transparent 68%);
    filter:blur(24px);animation:cq-halo 3.2s ease-in-out infinite;
}
@media (max-width:767px) {
    .cq-logo-halo::before{width:130px;height:130px;
        background:radial-gradient(circle,rgba(18,62,220,.28) 0%,transparent 68%)}
}
.cq-logo-figure{margin:0;position:relative}

/* Logo */
.cq-logo-img {
    width:128px;height:128px;object-fit:contain;border-radius:2rem;display:block;
}
@media (min-width:768px) {
    .cq-logo-img{
        /* Glow rojo vivo — el logo es rojo y contrasta fuerte sobre el azul */
        filter:
            drop-shadow(0 0 20px rgba(220,10,40,1))
            drop-shadow(0 0 55px rgba(200,4,26,.85))
            drop-shadow(0 0 110px rgba(170,3,20,.52))
            drop-shadow(0 0 200px rgba(140,2,18,.28))
            drop-shadow(0 24px 44px rgba(0,0,0,.90));
    }
}
@media (max-width:767px) {
    .cq-logo-img{
        width:78px;height:78px;border-radius:1.25rem;
        filter:
            drop-shadow(0 0 14px rgba(20,72,228,.95))
            drop-shadow(0 0 38px rgba(10,44,190,.70))
            drop-shadow(0 14px 28px rgba(0,0,0,.80));
    }
}

/* Nombre de empresa */
.cq-company-block{display:flex;flex-direction:column;gap:.5rem}
.cq-company-name {
    font-size:clamp(1.625rem,2.8vw,2.25rem);font-weight:800;
    letter-spacing:-.035em;line-height:1.05;margin:0;
    word-break:break-word;
}
@media (min-width:768px) {
    .cq-company-name{
        background:linear-gradient(138deg,#fff 0%,rgba(255,210,210,.96) 48%,rgba(255,168,168,.84) 100%);
        -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    }
}
@media (max-width:767px) {
    .cq-company-name{
        font-size:1.625rem;
        background:linear-gradient(138deg,#fff 0%,rgba(210,225,255,.95) 50%,rgba(185,210,255,.85) 100%);
        -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    }
}
.cq-company-slogan{
    font-size:.8125rem;color:rgba(255,255,255,.40);font-style:italic;
    margin:0;line-height:1.55;letter-spacing:.01em;
}
@media (max-width:767px) {
    .cq-company-slogan{font-size:.75rem;color:rgba(255,255,255,.55);max-width:280px}
}

/* Badge */
.cq-admin-badge{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.4rem 1.1rem;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.09);
    border-radius:100px;
    color:rgba(255,255,255,.40);
    font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
}
@media (max-width:767px){.cq-admin-badge{font-size:.625rem;padding:.3rem .875rem}}
.cq-badge-dot{
    flex-shrink:0;width:6px;height:6px;border-radius:50%;
    background:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,.24);
    animation:cq-dot 2.4s ease-in-out infinite;
}

/* Anillos (solo desktop) */
.cq-ring-1,.cq-ring-2,.cq-ring-3{position:absolute;border-radius:50%;pointer-events:none;z-index:1}
.cq-ring-1{bottom:-180px;right:-180px;width:500px;height:500px;border:1px solid rgba(255,255,255,.10)}
.cq-ring-2{bottom:-118px;right:-118px;width:348px;height:348px;border:1px solid rgba(255,255,255,.07)}
.cq-ring-3{bottom:-66px;right:-66px;width:218px;height:218px;border:1px solid rgba(255,255,255,.04)}
@media (max-width:767px){.cq-ring-1,.cq-ring-2,.cq-ring-3{display:none}}

/* Copyright (solo desktop) */
.cq-brand-foot{
    position:absolute;bottom:1.25rem;left:0;right:0;
    text-align:center;font-size:.6875rem;
    color:rgba(255,255,255,.12);letter-spacing:.04em;z-index:3;pointer-events:none;
}
@media (max-width:767px){.cq-brand-foot{display:none}}

/* ── Body mobile fondo — azul base del hero de la tienda ─────── */
@media (max-width:767px){
    body:has(#cq-brand-panel){background:#062a52;margin:0;padding:0}
}

/* ══════════════════════════════════════════════════════════════
   FILAMENT LAYOUT — base oscuro
   ══════════════════════════════════════════════════════════════ */
.fi-simple-layout{
    background:#100510;
    background-image:
        radial-gradient(ellipse 88% 58% at 50% -6%, rgba(210,0,28,.42) 0%,transparent 64%),
        radial-gradient(ellipse 58% 48% at 86% 98%, rgba(8,55,220,.30) 0%,transparent 55%),
        radial-gradient(ellipse 44% 40% at 8% 62%,  rgba(120,14,200,.20) 0%,transparent 60%);
    position:relative;overflow:hidden;min-height:100vh;
}
.fi-simple-layout::before{
    content:'';position:fixed;top:-185px;right:-185px;
    width:640px;height:640px;border-radius:50%;
    background:radial-gradient(circle,rgba(210,0,28,.24) 0%,transparent 68%);
    animation:cq-orb1 14s ease-in-out infinite;pointer-events:none;z-index:0;
}
.fi-simple-layout::after{
    content:'';position:fixed;bottom:-165px;left:-165px;
    width:540px;height:540px;border-radius:50%;
    background:radial-gradient(circle,rgba(8,55,220,.28) 0%,transparent 68%);
    animation:cq-orb2 18s ease-in-out infinite;pointer-events:none;z-index:0;
}
.fi-simple-page{position:relative;z-index:2;animation:cq-form-in .65s cubic-bezier(.22,1,.36,1) both}
.fi-simple-layout .fi-logo{animation:cq-float 5s ease-in-out infinite;margin-bottom:.25rem}
.fi-simple-layout .fi-logo img{
    height:80px!important;width:80px!important;object-fit:contain;
    filter:drop-shadow(0 0 14px rgba(220,12,40,.88)) drop-shadow(0 8px 20px rgba(0,0,0,.55));
}
.fi-simple-layout .fi-simple-page-heading{
    color:#fff!important;font-size:1.875rem!important;font-weight:800!important;
    letter-spacing:-.035em!important;text-shadow:0 2px 28px rgba(0,0,0,.55);margin-top:.5rem;
}
.fi-simple-layout .fi-simple-page-subheading{color:rgba(255,255,255,.40)!important;font-size:.8125rem!important}
.fi-simple-layout .fi-card{
    background:rgba(255,255,255,.97)!important;
    border:1px solid rgba(255,255,255,.08)!important;border-radius:1.25rem!important;
    box-shadow:0 0 0 1px rgba(255,255,255,.05),0 36px 80px rgba(0,0,0,.70),0 10px 28px rgba(0,0,0,.28)!important;
}
.fi-simple-layout .fi-btn-color-primary,
.fi-simple-layout button[type="submit"]{
    background:linear-gradient(135deg,#C8001E 0%,#EF233C 100%)!important;
    border-color:transparent!important;
    box-shadow:0 4px 18px rgba(200,0,30,.48)!important;
    transition:transform .18s ease,box-shadow .18s ease!important;
}
.fi-simple-layout .fi-btn-color-primary:hover,
.fi-simple-layout button[type="submit"]:hover{transform:translateY(-2px)!important;box-shadow:0 8px 30px rgba(200,0,30,.64)!important}
.fi-simple-layout .fi-btn-color-primary:active,
.fi-simple-layout button[type="submit"]:active{transform:translateY(0)!important;box-shadow:0 3px 10px rgba(200,0,30,.36)!important}

/* ── Mobile con panel: sección del formulario ────────────── */
@media (max-width:767px){
    body:has(#cq-brand-panel) .fi-simple-layout{
        /* Continuación del hero gradient — transición natural desde el header */
        background:linear-gradient(180deg,#083264 0%,#062a52 55%,#041e3e 100%)!important;
        background-image:
            radial-gradient(ellipse 70% 50% at 85% 25%,rgba(217,4,41,.18) 0%,transparent 55%),
            radial-gradient(ellipse 55% 40% at 15% 80%,rgba(20,98,204,.20) 0%,transparent 52%)!important;
        min-height:auto!important;
        justify-content:flex-start!important;
        padding-top:2rem!important;padding-bottom:3.5rem!important;
    }
    body:has(#cq-brand-panel) .fi-simple-layout::before,
    body:has(#cq-brand-panel) .fi-simple-layout::after{display:none!important}
    body:has(#cq-brand-panel) .fi-simple-layout .fi-logo{display:none!important}
    body:has(#cq-brand-panel) .fi-simple-layout .fi-simple-page-heading{
        color:#fff!important;font-size:1.5rem!important;font-weight:700!important;
        text-shadow:0 2px 16px rgba(0,0,0,.38)!important;letter-spacing:-.03em!important;
    }
    body:has(#cq-brand-panel) .fi-simple-layout .fi-simple-page-subheading{
        color:rgba(255,255,255,.48)!important;font-size:.8125rem!important;
    }
    body:has(#cq-brand-panel) .fi-simple-layout .fi-card{
        background:#fff!important;
        border:none!important;border-top:3px solid #C8001E!important;
        border-radius:.875rem!important;
        box-shadow:0 24px 64px rgba(0,0,0,.58),0 6px 20px rgba(0,0,0,.24)!important;
    }
}

/* ── Desktop con panel: panel derecho ─────────────────────── */
@media (min-width:768px){
    body:has(#cq-brand-panel) .fi-simple-layout{
        margin-left:min(42vw,560px);min-height:100vh;
        /* Gradiente cálido — no blanco plano */
        background:linear-gradient(155deg,#fff 0%,#fff5f7 42%,#f7f4ff 78%,#f0f5ff 100%)!important;
        background-image:none!important;
    }
    body:has(#cq-brand-panel) .fi-simple-layout::before,
    body:has(#cq-brand-panel) .fi-simple-layout::after{display:none!important}
    body:has(#cq-brand-panel) .fi-simple-layout .fi-logo{display:none!important}
    body:has(#cq-brand-panel) .fi-simple-layout .fi-simple-page-heading{
        color:#0A1128!important;font-size:1.75rem!important;font-weight:700!important;
        text-shadow:none!important;letter-spacing:-.03em!important;
    }
    body:has(#cq-brand-panel) .fi-simple-layout .fi-simple-page-subheading{
        color:#6b7280!important;font-size:.875rem!important;
    }
    body:has(#cq-brand-panel) .fi-simple-layout .fi-card{
        background:#fff!important;
        border:1px solid rgba(0,0,0,.07)!important;
        border-top:3px solid #C8001E!important;
        border-radius:.875rem!important;
        box-shadow:0 8px 40px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.05)!important;
    }
    body:has(#cq-brand-panel) .fi-simple-layout .fi-btn-color-primary,
    body:has(#cq-brand-panel) .fi-simple-layout button[type="submit"]{
        box-shadow:0 4px 16px rgba(200,0,30,.34)!important;
    }
    body:has(#cq-brand-panel) .fi-simple-layout .fi-btn-color-primary:hover,
    body:has(#cq-brand-panel) .fi-simple-layout button[type="submit"]:hover{
        box-shadow:0 8px 26px rgba(200,0,30,.52)!important;
    }
    body:has(#cq-brand-panel) .cq-login-footer{display:none!important}
}

/* Footer copyright mobile */
.cq-login-footer{
    position:fixed;bottom:18px;left:0;right:0;text-align:center;
    color:rgba(255,255,255,.17);font-size:.6875rem;letter-spacing:.06em;
    text-transform:uppercase;z-index:1;pointer-events:none;
    animation:cq-form-in 1s .4s cubic-bezier(.22,1,.36,1) both;
}


/* ──────────────────────────────────────────────────────────────
   1. PÁGINA
   ────────────────────────────────────────────────────────────── */
.fi-page>section{padding-top:.875rem!important;padding-bottom:1rem!important;row-gap:1.25rem!important}
@media (min-width:640px){.fi-page>section{padding-top:1rem!important;row-gap:1.5rem!important}}

/* ──────────────────────────────────────────────────────────────
   2. MAIN
   ────────────────────────────────────────────────────────────── */
@media (max-width:767px){.fi-main{padding-inline:.75rem!important}}

/* ──────────────────────────────────────────────────────────────
   3. SIDEBAR
   ────────────────────────────────────────────────────────────── */
.fi-sidebar{border-right:1px solid rgb(229 231 235)!important}
.dark .fi-sidebar{border-right-color:rgb(255 255 255/.10)!important}
.fi-sidebar-header{height:3.5rem!important;padding-inline:1rem!important;border-bottom:none!important;border-right:none!important}
.fi-sidebar-nav{padding:.75rem .75rem!important;border-right:none!important}
.fi-sidebar-nav-groups{row-gap:.5rem!important}

/* ──────────────────────────────────────────────────────────────
   4. FILTROS TABLA
   ────────────────────────────────────────────────────────────── */
.fi-ta-filters-above-content-ctn{padding-inline:1rem!important;padding-block:.625rem!important;gap:.5rem!important}
@media (max-width:639px){.fi-ta-filters-above-content-ctn{padding-inline:.75rem!important}}

/* ──────────────────────────────────────────────────────────────
   5. TOOLBAR TABLA
   ────────────────────────────────────────────────────────────── */
.fi-ta-header-toolbar{padding-inline:1rem!important;padding-block:.5rem!important}

/* ──────────────────────────────────────────────────────────────
   6. CELDA ACCIONES
   ────────────────────────────────────────────────────────────── */
.fi-ta-actions-cell>div{padding-block:.375rem!important;padding-inline:.5rem!important}

/* ──────────────────────────────────────────────────────────────
   7. PAGINACIÓN
   ────────────────────────────────────────────────────────────── */
.fi-ta-pagination{padding-inline:1rem!important;padding-block:.625rem!important;border-top:1px solid rgb(229 231 235)!important}
.dark .fi-ta-pagination{border-top-color:rgb(255 255 255/.10)!important}
.fi-pagination-item a,.fi-pagination-item button{min-width:2rem!important;min-height:2rem!important}
@media (max-width:639px){.fi-ta-pagination{padding-inline:.75rem!important;flex-wrap:wrap!important;gap:.5rem!important}}

/* ──────────────────────────────────────────────────────────────
   8. SECCIONES FORMULARIO
   ────────────────────────────────────────────────────────────── */
.fi-section-content-ctn{padding:.875rem!important}
.fi-section-header{padding:.625rem 1rem!important}

/* ──────────────────────────────────────────────────────────────
   9. LABELS FILTROS
   ────────────────────────────────────────────────────────────── */
.fi-ta-filters-above-content-ctn label{font-size:.75rem!important;line-height:1rem!important;margin-bottom:.2rem!important}

/* ──────────────────────────────────────────────────────────────
   10. TABLA RESPONSIVO
   ────────────────────────────────────────────────────────────── */
@media (max-width:639px){
    .fi-ta-ctn{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
    .fi-ta-header-toolbar{padding-inline:.75rem!important;gap:.5rem!important}
    .fi-ta-pagination{padding-inline:.75rem!important}
}

/* ──────────────────────────────────────────────────────────────
   11. CAMPANITA DE PEDIDOS (tiempo real) + PANEL DE NOTIFICACIONES
   ────────────────────────────────────────────────────────────── */
@keyframes cq-bell-ring{
    0%,100%{transform:rotate(0)}
    10%,30%{transform:rotate(-12deg)}
    20%,40%{transform:rotate(12deg)}
    50%{transform:rotate(0)}
}
@keyframes cq-bell-ring-loop{
    0%,84%,100%{transform:rotate(0)}
    87%{transform:rotate(-10deg)}
    90%{transform:rotate(9deg)}
    93%{transform:rotate(-6deg)}
    96%{transform:rotate(0)}
}
@keyframes cq-dot-pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}
    50%{box-shadow:0 0 0 4px rgba(239,68,68,0)}
}
@keyframes cq-panel-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}

.cq-order-bell{position:relative;display:inline-flex;align-items:center;margin-inline-end:.25rem}
.cq-bell-btn{
    position:relative;display:inline-flex;align-items:center;justify-content:center;
    width:2.5rem;height:2.5rem;border-radius:9999px;border:none;background:transparent;
    color:rgb(107 114 128);cursor:pointer;transition:background-color .15s ease,color .15s ease;
}
.cq-bell-btn:hover{background:rgb(243 244 246);color:rgb(17 24 39)}
.dark .cq-bell-btn{color:rgb(156 163 175)}
.dark .cq-bell-btn:hover{background:rgba(255,255,255,.06);color:#fff}
.cq-bell-icon{width:1.375rem;height:1.375rem}
.cq-bell-btn--ring .cq-bell-icon{animation:cq-bell-ring-loop 2.4s ease-in-out infinite;transform-origin:top center}

.cq-bell-badge{
    position:absolute;top:.3rem;right:.3rem;min-width:1.05rem;height:1.05rem;padding:0 .25rem;
    border-radius:9999px;background:#f59e0b;color:#fff;font-size:.625rem;line-height:1.05rem;
    font-weight:700;text-align:center;box-shadow:0 0 0 2px #fff;
}
.dark .cq-bell-badge{box-shadow:0 0 0 2px rgb(24 26 32)}
.cq-bell-dot{
    position:absolute;top:.45rem;right:.5rem;width:.5rem;height:.5rem;border-radius:9999px;
    background:#ef4444;box-shadow:0 0 0 2px #fff;animation:cq-dot-pulse 1.6s ease-in-out infinite;
}
.dark .cq-bell-dot{box-shadow:0 0 0 2px rgb(24 26 32)}

.cq-bell-panel{
    position:absolute;top:calc(100% + .6rem);right:0;z-index:1000;width:min(360px,calc(100vw - 2rem));
    background:#fff;border-radius:.9rem;overflow:hidden;
    box-shadow:0 20px 40px -12px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.06);
    animation:cq-panel-in .16s ease;
}
.dark .cq-bell-panel{background:#1b202b;box-shadow:0 20px 40px -12px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}

.cq-bell-panel-header{
    display:flex;align-items:center;justify-content:space-between;gap:.5rem;
    padding:.85rem 1rem;font-size:.85rem;font-weight:600;color:rgb(17 24 39);
    border-bottom:1px solid rgb(237 238 240);
}
.dark .cq-bell-panel-header{color:#fff;border-bottom-color:rgba(255,255,255,.08)}
.cq-bell-panel-count{
    font-size:.7rem;font-weight:600;color:#b45309;background:#fef3c7;
    padding:.15rem .5rem;border-radius:9999px;
}
.dark .cq-bell-panel-count{color:#fcd34d;background:rgba(245,158,11,.15)}

.cq-bell-panel-list{max-height:22rem;overflow-y:auto}
.cq-bell-panel-empty{padding:2rem 1rem;text-align:center;font-size:.8rem;color:rgb(156 163 175)}

.cq-bell-item{
    display:block;padding:.7rem 1rem;text-decoration:none;color:inherit;
    border-bottom:1px solid rgb(243 244 246);transition:background-color .12s ease;
}
.dark .cq-bell-item{border-bottom-color:rgba(255,255,255,.06)}
.cq-bell-item:last-child{border-bottom:none}
.cq-bell-item:hover{background:rgb(249 250 251)}
.dark .cq-bell-item:hover{background:rgba(255,255,255,.04)}
.cq-bell-item--new{background:rgba(245,158,11,.07)}
.dark .cq-bell-item--new{background:rgba(245,158,11,.1)}

.cq-bell-item-main{display:flex;align-items:center;gap:.4rem;margin-bottom:.1rem}
.cq-bell-item-number{font-size:.825rem;font-weight:700;color:rgb(17 24 39)}
.dark .cq-bell-item-number{color:#fff}
.cq-bell-item-badge{
    font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
    color:#fff;background:#f59e0b;padding:.1rem .4rem;border-radius:9999px;
}
.cq-bell-item-sub{font-size:.75rem;color:rgb(107 114 128);margin-bottom:.25rem}
.cq-bell-item-meta{display:flex;align-items:center;justify-content:space-between;font-size:.7rem;color:rgb(156 163 175)}
.cq-bell-item-meta span:first-child{font-weight:600;color:rgb(75 85 99)}
.dark .cq-bell-item-meta span:first-child{color:rgb(209 213 219)}

.cq-bell-panel-footer{
    display:block;text-align:center;padding:.65rem 1rem;font-size:.78rem;font-weight:600;
    color:rgb(37 99 235);text-decoration:none;border-top:1px solid rgb(237 238 240);
    transition:background-color .12s ease;
}
.dark .cq-bell-panel-footer{color:#60a5fa;border-top-color:rgba(255,255,255,.08)}
.cq-bell-panel-footer:hover{background:rgb(249 250 251)}
.dark .cq-bell-panel-footer:hover{background:rgba(255,255,255,.04)}

@media (max-width:480px){
    .cq-bell-panel{position:fixed;top:4.25rem;right:.75rem;left:.75rem;width:auto}
}