#headerimg > h1 > a {
    text-decoration: none;
}

.font-tools .ft-tools-menu {
    display: flex;
    flex-flow: column wrap;
    width: 100%;
    padding: 0.5rem;
    font-size: 0.875rem;
    list-style: none;
    margin: 0;
}

.font-tools .ft-tools-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.font-tools .ft-tools-menu li a {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 1rem;
    color: inherit;
    text-decoration: none;
    border-radius: 0.375rem;
}

.font-tools .ft-tools-menu li a:hover {
    background: rgba(0, 0, 0, 0.06);
}

.font-tools .ft-tools-menu li a.menu-active {
    background: #4b5563;
    color: #ffffff;
}

.font-tools .ft-footer-menu {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Always show Font Tools sidebar below theme header */
.font-tools .drawer-toggle,
.font-tools .drawer-overlay {
    display: none !important;
}

.font-tools .drawer {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    width: 100%;
}

.font-tools .drawer-content {
    grid-column: 2;
    width: 100%;
}

.font-tools .drawer-side {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    inset: auto !important;

    grid-column: 1;
    grid-row: 1;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    width: 240px !important;
    height: auto !important;
    min-height: calc(100vh - 120px);
    overflow: visible !important;

    z-index: 1 !important;
}

.font-tools .drawer-side > aside {
    position: sticky;
    top: 120px;

    width: 240px !important;
    height: calc(100vh - 120px) !important;
    overflow-y: auto;

    background: var(--color-base-200);
}

.font-tools .drawer-side > :not(.drawer-overlay) {
    translate: 0 !important;
    transform: none !important;
}
/* =========================================================
   Font Tools Sidebar UI
========================================================= */

.font-tools .drawer-side {
    background: #f7f8fb !important;
    border-right: 1px solid #e5e7eb;
}

.font-tools .drawer-side > aside {
    padding: 18px 14px;
	background: #f7f8fb !important;
    border-right: 1px solid #e5e7eb;
}

/* Sidebar menu */
.font-tools .drawer-side .menu,
.font-tools .drawer-side .ft-tools-menu {
    width: 100% !important;
    padding: 0 !important;
    gap: 6px;
}

/* Menu item wrapper */
.font-tools .drawer-side .menu li,
.font-tools .drawer-side .ft-tools-menu li {
    margin: 0 0 6px;
}

/* Menu links */
.font-tools .drawer-side .menu li a,
.font-tools .drawer-side .ft-tools-menu li a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    color: #1f2937 !important;
    background: transparent !important;
    line-height: 1.3;
    text-decoration: none !important;

    border-radius: 10px;
    transition: all 0.18s ease;
}

/* Icon color */
.font-tools .drawer-side .menu li a svg,
.font-tools .drawer-side .ft-tools-menu li a svg {
    color: #64748b !important;
    stroke: currentColor;
}

/* Hover */
.font-tools .drawer-side .menu li a:hover,
.font-tools .drawer-side .ft-tools-menu li a:hover {
    color: #111827 !important;
    background: #eef2ff !important;
    transform: translateX(2px);
}

/* Active item */
.font-tools .drawer-side .menu li a.menu-active,
.font-tools .drawer-side .ft-tools-menu li a.menu-active,
.font-tools .drawer-side .menu li.current-menu-item > a,
.font-tools .drawer-side .ft-tools-menu li.current-menu-item > a {
    color: #ffffff !important;
    background: linear-gradient(135deg, #adceff, #1e293b) !important;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(30, 41, 59, 0.22);
}

/* Active icon */
.font-tools .drawer-side .menu li a.menu-active svg,
.font-tools .drawer-side .ft-tools-menu li a.menu-active svg,
.font-tools .drawer-side .menu li.current-menu-item > a svg,
.font-tools .drawer-side .ft-tools-menu li.current-menu-item > a svg {
    color: #ffffff !important;
}

/* Hide empty / duplicate invisible text issue */
.font-tools .drawer-side .menu li a:empty,
.font-tools .drawer-side .ft-tools-menu li a:empty {
    display: none !important;
}

/* Divider if menu has empty li */
.font-tools .drawer-side .menu li:empty,
.font-tools .drawer-side .ft-tools-menu li:empty {
    height: 1px;
    margin: 10px 0;
    background: #e5e7eb;
    opacity: 1;
}

/* Make sidebar width nicer */
.font-tools .drawer {
    grid-template-columns: 260px minmax(0, 1fr) !important;
}

.font-tools .drawer-content {
    grid-column: 2 !important;
}

/* =========================================================
   Mobile Tool Select Box
========================================================= */

/* Mặc định ẩn trên desktop */
.font-tools-mobile-select-wrap {
    display: none;
}

@media (max-width: 991px) {
    .font-tools-mobile-select-wrap {
        display: block;
        width: 100%;
        padding: 12px 16px 10px;
        background: #f8fafc;
        border-bottom: 1px solid #e5e7eb;
    }

    .font-tools-mobile-select-inner {
        width: 100%;
        max-width: 100%;
    }

    .font-tools-mobile-select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;

        width: 100%;
        height: 56px;
        padding: 0 52px 0 18px;

        font-size: 16px;
        font-weight: 600;
        color: #111827;
        background-color: #ffffff;

        border: 2px solid #d1d5db;
        border-radius: 18px;
        outline: none;

        box-shadow:
            0 2px 10px rgba(15, 23, 42, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 20px 20px;
    }

    .font-tools-mobile-select:focus {
        border-color: #94a3b8;
        box-shadow:
            0 0 0 4px rgba(148, 163, 184, 0.18),
            0 2px 10px rgba(15, 23, 42, 0.08);
    }

    /* Ẩn sidebar cũ trên mobile */
    .font-tools .drawer-side {
        display: none !important;
    }

    /* Nội dung full width */
    .font-tools .drawer-content,
    .font-tools #main {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        overflow: visible !important;
    }

    /* Nếu trước đó còn nav/menu tool cũ thì ẩn luôn */
    .font-tools .drawer-content > nav.navbar {
        display: none !important;
    }
}

.font-tools #font-dropzone {
    background: #f5f7f9;
    border-width: 1px;
    border-style: dashed;
    margin: 0;
    border-radius: .5rem;
    padding: 1rem;
}

.font-tools .dropzone {
    position: relative;
}

.font-tools .dropzone .template-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.font-tools #font-dropzone .mantine-Group-root {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}

.font-tools .dropzone .template-container input[type="file"] {
    border: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    margin: 0 -1px -1px 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

.font-tools .dropzone .template-container svg {
    width: 52px;
    height: 52px;
    color: #868e96;
}

.font-tools .dropzone > *:not(.template-container),
.font-tools .dropzone .dz-complete,
.font-tools .dropzone .dz-message {
    display: none;
}

.font-tools .dropzone .template-container .mantine-Text-root {
    color: #888;
    font-size: 13px;
}

.font-tools .dropzone .template-container .mantine-Text-root:first-child {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
    color: #333;
    line-height: 21px;
}

.font-tools .dropzone .template-container .mantine-Text-root:last-child {
    margin-bottom: 0;
}

.font-tools #webfont-converter {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.font-tools .mantine-Stack-root {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.font-tools .mantine-Group-root {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.font-tools .mantine-Button-root {
    color: #fa5252;
    font-weight: 600;
    padding: 5px 18px;
    border-radius: .25rem;
    cursor: pointer;
    transition: all .25s;
    font-size: 15px;
}

.font-tools .mantine-Button-root:hover {
    background-color: #fa52521f;
}

.font-tools #webfont-converter > .mantine-UnstyledButton-root {
    background-color: #625bf8;
    height: 42px;
}

.font-tools .mantine-Table-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: none;
    font-size: 0.875rem;
}

.font-tools .mantine-Table-table thead,
.font-tools .mantine-Table-table tr {
    border-bottom: 1px solid #dee2e6;
}

.font-tools .mantine-Table-table td,
.font-tools .mantine-Table-table th {
    padding: 0.4375rem 0.625rem;
    text-align: left;
}

.font-tools .mantine-Table-table td {

}

.font-tools .mantine-Table-table tr:last-child {
    border-bottom: none;
}

.font-tools .mantine-Checkbox-body {
    display: flex;
    align-items: center;
}

.font-tools .mantine-Checkbox-label {
    padding-inline-start: .75rem;
    font-size: .875rem;
}

.font-tools .mantine-Checkbox-input {
    background-color: #fff;
    border: 1px solid #ced4da;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 0.25rem;
    transition: border-color .1s, background-color .1s;
    display: block;
}

.font-tools .mantine-Checkbox-body svg {
    width: 60%;
    color: #fff;
    pointer-events: none;
    transform: translateY(.3125rem) scale(.5);
    opacity: 0;
    margin: auto;
    transition: transform .1s, opacity .1s;
    position: absolute;
    inset: 0;
}

.font-tools .mantine-Group-root.list-extensions {
    justify-content: flex-start;
}

.font-tools .mantine-Checkbox-input:checked {
    background-color: #625bf8;
    border-color: #625bf8;
}

.font-tools .mantine-Checkbox-inner {
    position: relative;
}

.font-tools .mantine-Checkbox-input:checked + svg {
    opacity: 1;
    transform: none;
}

.font-tools .mantine-Button-inner {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

.font-tools .mantine-Button-inner .mantine-Button-section {
    color: #fff;
}

.font-tools #webfont-converter > .mantine-UnstyledButton-root .mantine-Button-label {
    color: #fff;
}

.font-tools #webfont-converter > .mantine-UnstyledButton-root:focus,
.font-tools #webfont-converter > .mantine-UnstyledButton-root:active {
    transform: translateY(.0625rem);
}

.font-tools #webfont-converter.waiting,
.font-tools #webfont-converter.waiting *,
.font-tools #webfont-converter.waiting form {
    pointer-events: none;
}

.font-tools #webfont-converter.no-file > .mantine-UnstyledButton-root,
.font-tools #webfont-converter.waiting .mantine-Button-root,
.font-tools #webfont-converter.waiting > .mantine-UnstyledButton-root {
    cursor: not-allowed;
    color: #fff;
    background: #adb5bd;
    border: 1px solid #0000;
    transform: none;
    pointer-events: none;
}

.font-tools #webfont-converter:not(.has-converted) button.download-all,
.font-tools #webfont-converter:not(.has-converted) .result-area,
.font-tools #webfont-converter.no-file button.download-all,
.font-tools #webfont-converter.no-file .result-area,
.font-tools .result-template,
.font-tools .table-template {
    display: none;
}

.font-tools #webfont-converter.no-file .file-details {
    display: none;
}

#font-changer-container .font-output:not([data-alphabet="emoji"]) {
    font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Arial Unicode MS', sans-serif;
}

#font-changer-container h2 {
    font-size: 1.1em;
    font-family: var(--font-mono), sans-serif;
}

#font-changer-container .card-body p {
    font-weight: 500;
}

#frequency-stats > * {
    display: inline-grid;
    place-items: center;
    min-width: 90px;
    overflow: hidden;
}

#frequency-stats[data-group-size="2"] > * {
    min-width: 120px;
}

#frequency-stats[data-group-size="3"] > * {
    min-width: 144px;
}

.font-tools .alert {
    box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08));
}

#morse-code-translator .grid.swapped #input-container {
    order: 2;
}

#morse-code-translator .grid.swapped #output-container {
    order: 1;
}

#binary-translator #input-1 {
    font-family: Consolas, "Courier New", monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

.font-tools .drawer-content main h1 {
    line-height: 1.5;
    margin-bottom: 30px;
}

.admin-bar .font-tools .sticky {
    top: 32px;
}

.font-tools #fonts-input input {
    display: block;
}

.font-tools .drawer-side.toggled,
:where(.drawer-toggle:checked~.drawer-side) {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    overflow-y: auto;
}

.font-tools .drawer-side.toggled aside {
    translate: 0;
}

.font-tools .drawer-side ul {
    margin: 0;
	padding: 10px;
}

.font-tools .drawer-side li a {
    text-decoration: none;
}

.font-tools .drawer-side li.current_page_item > a,
.font-tools .drawer-side li.current-menu-item > a,
.font-tools .drawer-side li a.menu-active {
    color: #fff;
    background-color: var(--menu-active-bg);
}

.admin-bar .font-tools .drawer-side {
    top: 32px;
    height: calc(100dvh - 32px);
}

.font-tools .drawer-side.toggled,
.font-tools .drawer-side {
}

.font-tools footer.footer {
    margin-top: 30px;
}

.font-tools .drawer-side aside > * + * > *:first-child {
    border-top: 1px solid #eee;
}

.font-tools .footer .widget ul li a {
    padding-left: 0;
    padding-right: 0;
    text-decoration: none;
}

.font-tools .footer a {
    text-decoration: none;
}

.font-tools .footer a:hover,
.font-tools .footer .widget ul li a:hover {
    text-decoration: underline;
    background-color: transparent;
}

.font-tools .footer .widget_polylang select {
    background: #fff;
    padding: 3px;
    border-radius: 3px;
    border: 1px solid #ddd;
}

.font-tools .footer ul.footer-menu,
.font-tools .footer .widget ul,
.font-tools .drawer-side .widget ul {
    padding: 0;
}

.font-tools .footer ul.footer-menu li:first-child,
.font-tools .footer ul.footer-menu li:first-child a {
    padding-left: 0;
}

.font-tools .drawer-content > .navbar {
    justify-content: center;
    display: flex;
}

.font-tools main fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.font-tools .drawer-content > .navbar h1 {
    margin: 0;
}

/*
 * WordPress Admin Bar change height.
 */
@media only screen and (max-width: 782px) {
    .admin-bar .font-tools .drawer-side {
        top: 46px;
        height: calc(100dvh - 46px);
    }

    .font-tools .navbar-center h1 {
        font-size: 30px;
        line-height: 46px;
    }

    .font-tools #font-dropzone .mantine-Group-root {
        width: 50%;
    }
}

@media only screen and (max-width: 660px) {
    .font-tools #font-dropzone .mantine-Group-root {
        width: 60%;
    }
}

@media only screen and (max-width: 480px) {
    .font-tools .navbar-center h1 {
        font-size: 25px;
        line-height: 36px;
    }

    .font-tools #font-dropzone .mantine-Group-root {
        width: 78%;
    }
}