:root { --primary-color: #007bff; --favorite-color: #f41252; }
.input-floating { max-width: 1200px; margin: 0 auto; padding: 0; position: -webkit-sticky; position: sticky; top: 0; z-index: 99; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); padding-top: 20px; padding-bottom: 20px; transition: box-shadow 0.3s ease; }    
.input-box { 
    background: #ffffff; 
    border: 1px solid #e1e8ed; 
    border-radius: 20px; 
    padding: 20px; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); 
    transition: all 0.3s ease; 
    position: relative;
}

.input-box::after {
    content: '\f07d';
    font-family: 'icomoon';
    font-weight: 900;
    
    position: absolute;
    right: 22px; 
    bottom: 67px;
    color: #b0b0b0; 
    font-size: 1rem;
    opacity: 0.8;
    z-index: 2;
    pointer-events: none;
}
.input-box:before {
   z-index: -1;
   content: "";
   position: absolute;
   background: linear-gradient(45deg, red, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, red);
   top: -5px;
   left: -5px;
   background-size: 400%;
   filter: blur(10px);
   width: calc(100% + 10px);
   height: calc(100% + 10px);
   animation: 20s linear infinite glowing;
   opacity: 0.4;
   transition: opacity .3s ease-in-out;
}

.input-field {
   border: 1px solid #ddd;
   border-radius: 4px;
   padding: 15px;
}

.input-box:focus-within { border-color: var(--primary-color); box-shadow: 0 4px 20px rgba(29, 161, 242, 0.15); }
.input-field { width: 100%; resize: vertical; min-height: 60px; max-height: 300px; overflow-y: auto; background: transparent; }
.input-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f1f3f4; gap: 16px; flex-wrap: wrap; }
.font-size-control { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #657786; flex-grow: 1; }
#fontSizeSlider { width: 100%; cursor: pointer; }
#fontSizeValue { min-width: 35px; }
#favoritesContainer { max-width: 1200px; margin: 0 auto; padding: 0; }
.results-container { max-width: 1200px; margin: 0 auto; padding: 0; }
.font-group-header { column-span: all; break-before: column; padding: 10px 0; margin-top: 20px; margin-bottom: 16px; border-left: 4px solid; padding-left: 15px; }
.font-group-header:first-child { margin-top: 0; }
.font-group-header h2 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.style-card { break-inside: avoid; margin-bottom: 16px; background: #ffffff; border: 1px solid #e1e8ed; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: all 0.2s ease-in-out; }
.style-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); border-color: var(--primary-color); }
.card-header {display: flex ; justify-content: space-between; align-items: center; border: unset; padding: unset; background: unset; margin: unset;}
.style-name { font-size: 0.8rem; font-weight: 600; color: #657786; text-transform: uppercase; }
.result-preview {line-height: 1.5; color: #1a1a1a; word-break: break-word; cursor: default; min-height: 40px; background: #f7f9fa; border-radius: 8px; padding: 12px; user-select: all; white-space: pre-wrap; }
.card-actions { display: flex; align-items: center; gap: 8px; }
.copy-btn, .fav-btn { border: none; padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.copy-btn { background: #eaf5fd; color: var(--primary-color); }
.copy-btn:hover { background: #d2e9f9; }
.copy-btn.copied { background: #17bf63; color: white; pointer-events: none; }
.fav-btn { background: #f1f3f4; color: #657786; }
.fav-btn:hover { background: #e1e8ed; }
.fav-btn.active { background: var(--favorite-color); color: white; }
.copy-btn i, .fav-btn i { margin-right: 4px; }
.fav-btn i { margin-right: 0; }
.clipboard-fab { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; background: var(--primary-color); color: white; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 4px 15px rgba(29, 161, 242, 0.4); cursor: pointer; z-index: 999; transform: scale(0.5); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; pointer-events: none; }
.clipboard-fab.visible { transform: scale(1); opacity: 1; pointer-events: auto; }
.clipboard-count { position: absolute; top: -2px; right: -2px; background: #e0245e; color: white; font-size: 0.75rem; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 2px solid white; }
.clipboard-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.clipboard-modal-overlay.visible { opacity: 1; pointer-events: auto; }
.clipboard-modal { background: white; border-radius: 16px; width: 90%; max-width: 500px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,0.2); transform: scale(0.95); transition: transform 0.3s ease; }
.clipboard-modal-overlay.visible .clipboard-modal { transform: scale(1); }
.clipboard-modal-header { padding: 16px 20px; border-bottom: 1px solid #e1e8ed; display: flex; justify-content: space-between; align-items: center; }
.clipboard-modal-header h2 { font-size: 1.2rem; display: flex; align-items: center; }
.clipboard-modal-header h2 i { margin-right: 8px; }
.close-modal-btn, .clear-clipboard-btn { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #657786; }
.clipboard-modal-body { padding: 8px 20px; overflow-y: auto; flex-grow: 1; }
.clipboard-modal-body.empty { text-align: center; color: #657786; padding: 40px; }
.clipboard-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f1f3f4; }
.clipboard-item:last-child { border-bottom: none; }
.clipboard-text { flex-grow: 1; font-size: 1.1rem; background: #f7f9fa; padding: 8px; border-radius: 6px; white-space: pre-wrap; }
.clipboard-item-actions button { background: none; border: none; font-size: 1rem; color: #657786; cursor: pointer; padding: 8px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px); background: #1a1a1a; color: white; padding: 12px 20px; border-radius: 24px; font-size: 0.9rem; z-index: 1001; transition: transform 0.3s ease; }
.toast.show { transform: translateX(-50%) translateY(0); }
.masonry-grid {column-width: 250px;column-gap: 16px;columns: 1;}
@media (min-width: 1200px) {.masonry-grid {columns: 2;}}
button#clearClipboardBtn {margin-right: 20px;}