.font-preview-layout { display: flex; align-items: stretch; gap: 1rem; }
.font-preview-left { flex: 0 0 20%; min-width: 220px; }
.font-preview-right { flex: 1 1 80%; min-width: 0; }
.font-preview-left .list-group { max-height: 65vh; overflow-y: auto; }
.font-preview-right-card { height: calc(100vh - 15rem); min-height: 420px; }
.font-preview-right-card .card-body { overflow-y: auto; }
.font-preview-right-card .card-header #fontSearchWrap { position: relative; width: 100%; max-width: 300px; margin-left: auto; }
.font-preview-right-card .card-header #fontSearch { padding-right: 2rem; }
.font-item.active { border-color: #d9e2ef; }
.font-preview-right-card .card-header .btn#fontSearchClear { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); z-index: 10; opacity: 0; pointer-events: none; transition: opacity 0.15s; text-decoration: none; }
.font-preview-right-card .card-header .btn#fontSearchClear.visible { opacity: 1; pointer-events: auto; }
.font-preview-right-card .card-header .btn#fontSearchClear:hover { background-color: #e9ecef; color: #dc3545; text-decoration: none; }
.font-preview-right-card .card-header .btn#fontSearchClear:focus { box-shadow: none; }
.font-icon-grid { display: flex; flex-wrap: wrap; }
.icon-box {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
    padding: 0.75rem 0.5rem;
    text-align: center;
    box-shadow: inset 0 0 0 1px #d9e2ef;
}
.icon-box:hover { background-color: #f6f8fb; }
.icon-box .icon-box-icon { font-size: 1.75rem; line-height: 1; }
.icon-box .icon-box-name {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #6c757d;
    word-break: break-all;
}
@media (max-width: 991.98px) {
    .font-preview-layout { flex-direction: column; }
    .font-preview-left { flex: 0 0 auto; }
    .font-preview-left .list-group { max-height: 220px; }
    .font-preview-right-card { height: auto; min-height: 0; }
    .font-preview-right-card .card-body { overflow-y: visible; }
}
@media (max-width: 575.98px) {
    .icon-box { flex: 0 0 33.3333%; max-width: 33.3333%; }
}