/* =========================
   QUICK CHARACTER BUTTON
========================= */


.quick-character-bar {

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:20px;

}



.quick-character-btn {

    width:55px;
    height:55px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:5px;

    background:var(--card-color);

    border:1px solid var(--border-color);

    border-radius:12px;

    cursor:pointer;

    transition:.2s;

}


.quick-character-btn:hover {


    transform:translateY(-2px);


    box-shadow:
    0 5px 15px rgba(0,0,0,.2);


}

.quick-character-btn:hover {

    transform:translateY(-2px);

    box-shadow:
    0 4px 12px rgba(0,0,0,.15);

}








.quick-character-btn.active {

    transform:translateY(-2px);

    border:2px solid #2563eb;

}



.quick-clear-btn {


    background:#ef4444;

    color:white;


    border:none;

    border-radius:12px;


    padding:6px 15px;

    font-weight:700;


}

.quick-character-btn{

    position:relative;

}


.quick-count{

    position:absolute;

    top:-6px;

    right:-6px;


    background:#ef4444;

    color:white;


    width:22px;

    height:22px;


    border-radius:50%;


    font-size:12px;

    font-weight:bold;


    display:none;

    align-items:center;

    justify-content:center;

}


/* =========================
   QUICK BUTTON INVERT THEME
========================= */


/* Light Mode */
body:not(.dark-mode) .quick-character-btn {

    background:#ffffff;

    border:1px solid #d1d5db;

}

/* Dark Mode */
body.dark-mode .quick-character-btn {

    background:#ffffff;

    border:1px solid #d1d5db;

}

.quick-character-btn img {

    width:45px;

    height:45px;

    object-fit:contain;

}