:root {
    --fh-bg: #f5f7fb;
    --fh-surface: #ffffff;
    --fh-surface-soft: #f8fafc;
    --fh-text: #101828;
    --fh-muted: #667085;
    --fh-border: #e4e7ec;
    --fh-shadow: 0 18px 60px rgba(16, 24, 40, .08);
    --fh-primary: #6d4aff;
    --fh-primary-2: #2da9ff;
    --fh-primary-soft: rgba(109, 74, 255, .10);
    --fh-header: rgba(255,255,255,.78);
    --fh-hero-bg: #07111f;
    --fh-hero-text: #ffffff;
    --fh-hero-muted: #c5cedc;
    --fh-card-radius: 22px;
    --fh-shell: 1320px;
}

html[data-theme="dark"] {
    --fh-bg: #07111f;
    --fh-surface: #0d1929;
    --fh-surface-soft: #101e30;
    --fh-text: #f7f9fc;
    --fh-muted: #9aa9bd;
    --fh-border: #203047;
    --fh-shadow: 0 18px 60px rgba(0,0,0,.28);
    --fh-primary-soft: rgba(109,74,255,.18);
    --fh-header: rgba(7,17,31,.78);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--fh-bg);
    color: var(--fh-text);
    transition: background .25s ease, color .25s ease;
}
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }

.fh-shell {
    width: min(calc(100% - 40px), var(--fh-shell));
    margin-inline: auto;
}

.fh-header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: var(--fh-header);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.fh-nav {
    min-height: 72px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px;
}
.fh-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: -.04em;
}
.fh-brand-mark {
    position: relative;
    width: 36px;
    height: 26px;
    display: inline-block;
}
.fh-brand-mark::before,
.fh-brand-mark::after,
.fh-cloud-dot {
    content: "";
    position: absolute;
    border: 4px solid;
    border-image: linear-gradient(135deg, #7c4dff, #2da9ff) 1;
}
.fh-brand-mark::before {
    width: 20px; height: 15px;
    left: 7px; top: 6px;
    border-radius: 12px 12px 8px 8px;
    border-bottom-width: 4px;
}
.fh-brand-mark::after {
    width: 13px; height: 13px;
    left: 2px; top: 10px;
    border-radius: 50%;
}
.fh-cloud-dot {
    width: 13px; height: 13px;
    right: 0; top: 10px;
    border-radius: 50%;
}
.fh-brand-text { font-size: 25px; }
.fh-brand-text span {
    background: linear-gradient(90deg, #7954ff, #35b5ff);
    -webkit-background-clip: text;
    color: transparent;
}
.fh-beta {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 7px;
    border: 1px solid var(--fh-border);
    border-radius: 999px;
    color: var(--fh-muted);
}

.fh-main-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 26px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fh-muted);
}
.fh-main-nav a { transition: color .2s ease; }
.fh-main-nav a:hover { color: var(--fh-text); }

.fh-nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}
.fh-nav-link {
    font-size: 14px;
    font-weight: 700;
}
.fh-icon-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--fh-border);
    color: var(--fh-text);
    background: var(--fh-surface);
}
.fh-icon-btn svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
}
html[data-theme="dark"] .fh-theme-sun { display: none; }
html:not([data-theme="dark"]) .fh-theme-moon { display: none; }

.fh-btn {
    border: 0;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fh-btn:hover { transform: translateY(-2px); }
.fh-btn-small { min-height: 42px; padding: 0 16px; font-size: 14px; }
.fh-btn-large { min-height: 54px; padding: 0 22px; }
.fh-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--fh-primary), var(--fh-primary-2));
    box-shadow: 0 14px 36px rgba(80,100,255,.24);
}
.fh-btn-ghost {
    color: var(--fh-hero-text);
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
}
.fh-btn-light {
    background: #fff;
    color: #142035;
}
.fh-btn-outline-light {
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    background: transparent;
}

.fh-hero {
    position: relative;
    overflow: hidden;
    color: var(--fh-hero-text);
    background:
        radial-gradient(circle at 78% 12%, rgba(92,58,255,.36), transparent 32%),
        radial-gradient(circle at 78% 84%, rgba(34,160,255,.32), transparent 35%),
        linear-gradient(145deg, #050b16 0%, #07111f 52%, #091f37 100%);
    padding: 76px 0 28px;
}
.fh-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .22;
    pointer-events: none;
}
.fh-hero-orb-one { width: 380px; height: 380px; background: #7146ff; top: -160px; right: 10%; }
.fh-hero-orb-two { width: 330px; height: 330px; background: #1ba7ff; bottom: -180px; right: 22%; }

.fh-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}
.fh-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.05);
    color: #ced7e6;
    border-radius: 999px;
    padding: 9px 13px;
    font-size: 13px;
    font-weight: 700;
}
.fh-kicker-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #3fb4ff;
    box-shadow: 0 0 0 5px rgba(63,180,255,.12);
}
.fh-hero h1 {
    max-width: 700px;
    margin: 22px 0 20px;
    font-size: clamp(48px, 6vw, 78px);
    line-height: 1.02;
    letter-spacing: -.055em;
}
.fh-hero h1 span {
    display: block;
    background: linear-gradient(90deg, #5d90ff 0%, #885cff 48%, #ffffff 100%);
    -webkit-background-clip: text;
    color: transparent;
}
.fh-hero-lead {
    max-width: 660px;
    margin: 0;
    color: var(--fh-hero-muted);
    font-size: 18px;
    line-height: 1.75;
}
.fh-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 28px 0 32px;
    color: #d8e0eb;
    font-size: 14px;
}
.fh-hero-points span { display: inline-flex; gap: 8px; align-items: center; }
.fh-hero-points i { font-style: normal; }
.fh-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.fh-upload-panel {
    position: relative;
    min-height: 430px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.18);
    background:
        linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035)),
        radial-gradient(circle at 85% 15%, rgba(112,67,255,.45), transparent 38%);
    box-shadow: 0 28px 80px rgba(0,0,0,.26);
    overflow: hidden;
}
.fh-upload-panel.is-dragging {
    border-color: #5dbdff;
    box-shadow: 0 0 0 4px rgba(93,189,255,.14), 0 28px 80px rgba(0,0,0,.26);
}
.fh-upload-glow {
    position: absolute;
    inset: auto -20% -50% 20%;
    height: 70%;
    background: radial-gradient(circle, rgba(42,169,255,.40), transparent 62%);
}
.fh-upload-inner {
    position: relative;
    z-index: 2;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 38px;
    text-align: center;
}
.fh-file-art {
    position: relative;
    width: 210px;
    height: 130px;
    margin-bottom: 14px;
}
.fh-upload-cloud {
    position: absolute;
    z-index: 6;
    width: 118px;
    height: 86px;
    border-radius: 22px;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #9b67ff, #6651ff 50%, #4c9cff);
    box-shadow: 0 16px 44px rgba(81,74,255,.38);
}
.fh-upload-cloud svg { width: 52px; height: 52px; fill: none; stroke: #fff; stroke-width: 2.2; }
.fh-file-tile {
    position: absolute;
    width: 62px; height: 78px;
    display: grid; place-items: center;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 900;
    color: #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.fh-file-pdf { background: linear-gradient(145deg,#ff5269,#d92b51); left: 38px; top: 5px; transform: rotate(-8deg); }
.fh-file-doc { background: linear-gradient(145deg,#348dff,#355be0); left: 81px; top: -3px; transform: rotate(3deg); }
.fh-file-img { background: linear-gradient(145deg,#40c982,#1ba36b); right: 24px; top: 17px; transform: rotate(15deg); }
.fh-file-zip { background: linear-gradient(145deg,#ffad45,#e66f3f); left: 7px; top: 55px; transform: rotate(-18deg); }

.fh-upload-inner h2 { margin: 10px 0 6px; font-size: 24px; letter-spacing: -.03em; }
.fh-upload-inner > p { margin: 0 0 20px; color: #b8c4d5; }
.fh-upload-button { min-width: 220px; min-height: 54px; }
.fh-upload-meta {
    margin-top: 18px;
    color: #8ea0b8;
    font-size: 12px;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: center;
}
.fh-selected-files {
    margin-top: 16px;
    padding: 10px 14px;
    max-width: 100%;
    border-radius: 12px;
    color: #d9e4f2;
    background: rgba(0,0,0,.18);
    font-size: 13px;
}

.fh-stat-strip {
    position: relative;
    z-index: 2;
    margin-top: 56px;
    min-height: 76px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid rgba(255,255,255,.10);
}
.fh-stat-strip div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #aab8ca;
    font-size: 13px;
    border-right: 1px solid rgba(255,255,255,.08);
}
.fh-stat-strip div:last-child { border-right: 0; }
.fh-stat-strip strong { color: #fff; font-size: 14px; }

.fh-tools-section { padding: 82px 0 76px; background: var(--fh-bg); }
.fh-section-heading {
    display: grid;
    grid-template-columns: 1fr minmax(290px, 410px);
    gap: 32px;
    align-items: end;
    margin-bottom: 30px;
}
.fh-eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
    color: var(--fh-primary);
}
.fh-section-heading h2,
.fh-cta-card h2 {
    margin: 0;
    font-size: clamp(34px, 4vw, 48px);
    letter-spacing: -.045em;
    line-height: 1.08;
}
.fh-section-heading h2 span {
    background: linear-gradient(90deg, #7554ff, #2fa9ff);
    -webkit-background-clip: text;
    color: transparent;
}
.fh-section-heading p:not(.fh-eyebrow) {
    color: var(--fh-muted);
    margin: 14px 0 0;
}
.fh-tool-search-wrap {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
    border: 1px solid var(--fh-border);
    border-radius: 15px;
    background: var(--fh-surface);
    box-shadow: 0 6px 20px rgba(16,24,40,.04);
}
.fh-tool-search-wrap svg { width: 19px; height: 19px; fill: none; stroke: var(--fh-muted); stroke-width: 2; }
.fh-tool-search-wrap input {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--fh-text);
    background: transparent;
}
.fh-tool-search-wrap input::placeholder { color: #98a2b3; }

.fh-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 24px;
}
.fh-filter {
    min-height: 39px;
    padding: 0 14px;
    border: 1px solid var(--fh-border);
    border-radius: 999px;
    background: var(--fh-surface);
    color: var(--fh-muted);
    font-weight: 700;
    font-size: 13px;
}
.fh-filter:hover,
.fh-filter.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--fh-primary), var(--fh-primary-2));
}

.fh-tools-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
}
.fh-tool-card {
    min-height: 132px;
    display: grid;
    grid-template-columns: 54px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border: 1px solid var(--fh-border);
    border-radius: 18px;
    background: var(--fh-surface);
    box-shadow: 0 8px 24px rgba(16,24,40,.035);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fh-tool-card:hover {
    transform: translateY(-3px);
    border-color: rgba(109,74,255,.25);
    box-shadow: var(--fh-shadow);
}
.fh-tool-icon {
    width: 54px; height: 54px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: -.02em;
}
.fh-icon-pdf { color:#5d55ff; background:rgba(92,85,255,.11); }
.fh-icon-document { color:#2577e8; background:rgba(37,119,232,.10); }
.fh-icon-image { color:#1c9a61; background:rgba(28,154,97,.10); }
.fh-icon-audio { color:#ee7b17; background:rgba(238,123,23,.11); }
.fh-icon-archive { color:#7255d9; background:rgba(114,85,217,.10); }
.fh-icon-ebook { color:#0c9da7; background:rgba(12,157,167,.10); }
.fh-icon-font { color:#cb388e; background:rgba(203,56,142,.10); }
.fh-icon-developer { color:#22a05a; background:rgba(34,160,90,.10); }
.fh-icon-video { color:#8c54d9; background:rgba(140,84,217,.10); }

.fh-tool-title-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.fh-tool-body h3 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.fh-tool-body p { margin: 7px 0 0; color: var(--fh-muted); font-size: 12px; line-height: 1.55; }
.fh-popular,
.fh-soon-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    border-radius: 999px;
    padding: 0 7px;
    font-size: 9px;
    font-weight: 900;
}
.fh-popular { color: #6545ff; background: rgba(101,69,255,.10); }
.fh-soon-badge { color: #8750c8; background: rgba(135,80,200,.12); }
.fh-tool-arrow {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--fh-surface-soft);
    color: var(--fh-muted);
    transition: color .2s ease, background .2s ease;
}
.fh-tool-card:hover .fh-tool-arrow:not(.fh-tool-arrow-disabled) {
    color: #fff;
    background: linear-gradient(135deg, var(--fh-primary), var(--fh-primary-2));
}
.fh-tool-arrow-disabled { opacity: .55; }
.fh-tool-card-soon { opacity: .82; }
.fh-no-results {
    margin-top: 24px;
    padding: 22px;
    border: 1px dashed var(--fh-border);
    border-radius: 16px;
    text-align: center;
    color: var(--fh-muted);
}

.fh-trust-section { padding: 0 0 82px; }
.fh-trust-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
}
.fh-trust-grid article {
    padding: 24px;
    border: 1px solid var(--fh-border);
    border-radius: 18px;
    background: var(--fh-surface);
}
.fh-trust-icon {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--fh-primary-soft);
    margin-bottom: 17px;
}
.fh-trust-grid h3 { margin: 0 0 8px; font-size: 16px; }
.fh-trust-grid p { margin: 0; color: var(--fh-muted); font-size: 13px; line-height: 1.65; }

.fh-cta-section { padding: 0 0 80px; }
.fh-cta-card {
    position: relative;
    overflow: hidden;
    min-height: 270px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
    padding: 48px;
    border-radius: 28px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 20%, rgba(64,176,255,.30), transparent 32%),
        linear-gradient(135deg, #4428c9, #6f44f4 48%, #137bc9);
}
.fh-cta-card::after {
    content:"";
    position:absolute;
    width:320px;height:320px;border-radius:50%;
    right:-120px;bottom:-190px;
    background:rgba(255,255,255,.10);
}
.fh-cta-card .fh-eyebrow { color:#dcd7ff; }
.fh-cta-card p:not(.fh-eyebrow) { color:#e4e5f3; max-width:700px; line-height:1.7; }
.fh-cta-actions { position:relative; z-index:2; display:flex; gap:10px; flex-wrap:wrap; }

.fh-footer {
    padding: 54px 0 26px;
    background: #050b14;
    color: #e8edf5;
}
.fh-footer-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
}
.fh-brand-footer { color:#fff; }
.fh-footer-grid p { margin: 12px 0 0; color:#8f9db0; }
.fh-footer-links { display:flex; gap:24px; flex-wrap:wrap; color:#aeb9c9; font-size:13px; }
.fh-footer-links a:hover { color:#fff; }
.fh-footer-bottom {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.08);
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:#708096;
    font-size:12px;
}

.fh-toast {
    position: fixed;
    z-index: 90;
    right: 22px;
    bottom: 22px;
    max-width: 360px;
    padding: 14px 16px;
    border-radius: 13px;
    color: #fff;
    background: #101828;
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.fh-toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1180px) {
    .fh-main-nav { display: none; }
    .fh-nav { grid-template-columns: 1fr auto; }
    .fh-hero-grid { gap: 38px; }
    .fh-tools-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
    .fh-hero { padding-top: 48px; }
    .fh-hero-grid { grid-template-columns: 1fr; }
    .fh-upload-panel, .fh-upload-inner { min-height: 380px; }
    .fh-stat-strip { grid-template-columns: repeat(2,1fr); }
    .fh-stat-strip div { border-bottom: 1px solid rgba(255,255,255,.08); }
    .fh-section-heading { grid-template-columns: 1fr; align-items:start; }
    .fh-tools-grid { grid-template-columns: repeat(2,1fr); }
    .fh-trust-grid { grid-template-columns: repeat(2,1fr); }
    .fh-cta-card { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .fh-shell { width: min(calc(100% - 24px), var(--fh-shell)); }
    .fh-header { position: relative; }
    .fh-nav { min-height: 64px; gap: 10px; }
    .fh-brand-text { font-size: 21px; }
    .fh-beta, .fh-nav-link { display: none; }
    .fh-icon-btn { width: 38px; height: 38px; }
    .fh-btn-small { min-height: 38px; padding: 0 12px; font-size: 12px; }
    .fh-hero { padding-top: 34px; }
    .fh-hero h1 { font-size: 45px; }
    .fh-hero-lead { font-size: 16px; }
    .fh-hero-points { gap: 12px; }
    .fh-hero-actions .fh-btn { width: 100%; }
    .fh-upload-inner { padding: 24px 17px; }
    .fh-stat-strip { margin-top: 34px; }
    .fh-stat-strip div { flex-direction: column; gap: 2px; min-height: 70px; }
    .fh-tools-section { padding-top: 58px; }
    .fh-tools-grid { grid-template-columns: 1fr; }
    .fh-trust-grid { grid-template-columns: 1fr; }
    .fh-cta-card { padding: 30px 22px; }
    .fh-cta-actions .fh-btn { width: 100%; }
    .fh-footer-grid { grid-template-columns: 1fr; }
    .fh-footer-links { gap: 16px; }
    .fh-footer-bottom { flex-direction: column; }
}


.fh-hero-search {
    margin-top: 34px;
    max-width: 760px;
}
.fh-hero-search-label {
    margin-bottom: 9px;
    color: #dbe5f3;
    font-size: 13px;
    font-weight: 800;
}
.fh-hero-search-box {
    min-height: 66px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 18px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;
    background: rgba(255,255,255,.09);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 18px 54px rgba(0,0,0,.20);
}
.fh-hero-search-box svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #aebbd0;
    stroke-width: 2;
}
.fh-hero-search-box input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font-size: 16px;
}
.fh-hero-search-box input::placeholder { color: #9eacc0; }
.fh-hero-search-box button {
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg, var(--fh-primary), var(--fh-primary-2));
}
.fh-hero-search-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.fh-hero-search-hints button {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    padding: 7px 10px;
    color: #b9c6d8;
    background: rgba(255,255,255,.04);
    font-size: 12px;
}
.fh-hero-search-hints button:hover {
    color: #fff;
    border-color: rgba(255,255,255,.26);
    background: rgba(255,255,255,.08);
}
@media (max-width: 640px) {
    .fh-hero-search-box {
        min-height: 60px;
        grid-template-columns: auto 1fr;
        padding-right: 14px;
    }
    .fh-hero-search-box button {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 2px;
    }
}


.fh-benefit-strip div {
    flex-direction: column;
    gap: 4px;
    text-align: center;
    padding: 16px 12px;
}
.fh-benefit-strip strong {
    font-size: 14px;
    color: #fff;
}
.fh-benefit-strip span {
    color: #94a5bb;
    font-size: 11px;
    line-height: 1.35;
}


/* Google Translate remains engine-only and must never be visible */
#google_translate_element,.fh-google-translate,.goog-te-gadget,.goog-te-gadget-simple,.goog-te-combo,
.goog-te-banner-frame,.goog-te-banner-frame.skiptranslate,iframe.goog-te-banner-frame,body>.skiptranslate,
.VIpgJd-ZVi9od-ORHb-OEVmcd,.VIpgJd-ZVi9od-l4eHX-hSRGPd,.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,.VIpgJd-yAWNEb-L7lbkb{
position:fixed!important;left:-10000px!important;top:-10000px!important;width:1px!important;height:1px!important;max-width:1px!important;max-height:1px!important;overflow:hidden!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;border:0!important;margin:0!important;padding:0!important}
html,body{top:0!important;margin-top:0!important}
html[data-theme="dark"] .fh-cloud-language{color:#f7f9fc}
@media(max-width:640px){.fh-cloud-language{height:30px;font-size:15px}.fh-cloud-globe,.fh-cloud-globe svg{width:18px;height:18px}}


/* ===== FrontHub CLOUD language globe: final isolated implementation ===== */
.fh-brand {
    position: relative;
    overflow: visible !important;
}

.fh-cloud-wordmark {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    height: 34px;
    color: var(--fh-text);
    font-size: 20px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: -0.055em;
    white-space: nowrap;
    overflow: visible !important;
}

.fh-cloud-letter {
    display: inline-block;
    position: relative;
    z-index: 12;
}

.fh-globe-toggle {
    position: relative;
    z-index: 20;
    width: 23px;
    height: 23px;
    margin: 0 1px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #475467;
    background: transparent;
    box-shadow: none;
    outline: none;
    overflow: visible;
    transition: color .18s ease, transform .18s ease;
}

.fh-globe-toggle svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
}

html[data-theme="dark"] .fh-cloud-wordmark,
html[data-theme="dark"] .fh-globe-toggle {
    color: #f2f4f7;
}

.fh-globe-toggle:hover {
    color: #5b67f1;
    transform: scale(1.06);
}

/* Spin only while changing language */
.fh-globe-toggle.is-spinning svg {
    animation: fhGlobeSpin .9s linear infinite;
}

/* Translated language = red globe */
.fh-globe-toggle.is-translated {
    color: #ef4444 !important;
}

@keyframes fhGlobeSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Ring is centered on the globe, not the entire CLOUD word */
.fh-language-ring {
    position: absolute;
    left: 49px; /* center on O/globe within CLOUD */
    top: 50%;
    width: 132px;
    height: 132px;
    transform: translate(-50%, -50%) scale(.18);
    transform-origin: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 18;
    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        opacity .16s ease,
        visibility .16s ease;
}

.fh-cloud-wordmark.is-open .fh-language-ring {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.fh-language-flag {
    position: absolute;
    width: 30px;
    height: 22px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.28);
    transition: transform .15s ease, filter .15s ease;
}

.fh-language-flag img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: none !important;
}

.fh-language-flag:hover {
    filter: brightness(1.06) saturate(1.12);
}

/* Six positions around the globe */
.fh-flag-en {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}
.fh-flag-ko {
    right: 3px;
    top: 26px;
}
.fh-flag-zh {
    right: 3px;
    bottom: 26px;
}
.fh-flag-ja {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}
.fh-flag-vi {
    left: 3px;
    bottom: 26px;
}
.fh-flag-ar {
    left: 3px;
    top: 26px;
}

.fh-flag-en:hover,
.fh-flag-ja:hover {
    transform: translateX(-50%) scale(1.12);
}
.fh-flag-ko:hover,
.fh-flag-zh:hover,
.fh-flag-vi:hover,
.fh-flag-ar:hover {
    transform: scale(1.12);
}

/* Google Translate is engine-only; it must never occupy layout space. */
#google_translate_element,
.fh-google-engine,
.goog-te-gadget,
.goog-te-gadget-simple,
.goog-te-combo,
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
body > .skiptranslate,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-yAWNEb-L7lbkb {
    position: fixed !important;
    left: -12000px !important;
    top: -12000px !important;
    width: 1px !important;
    height: 1px !important;
    max-width: 1px !important;
    max-height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

html, body {
    top: 0 !important;
    margin-top: 0 !important;
}

@media (max-width: 640px) {
    .fh-cloud-wordmark {
        height: 30px;
        font-size: 16px;
        margin-left: 2px;
    }

    .fh-globe-toggle,
    .fh-globe-toggle svg {
        width: 19px;
        height: 19px;
    }

    .fh-language-ring {
        left: 40px;
        width: 112px;
        height: 112px;
    }

    .fh-language-flag {
        width: 27px;
        height: 20px;
    }
}


/* ===== Language globe refinement: blue, always rotating, compact flag ring ===== */

/* Default globe is blue and visually active. */
.fh-globe-toggle {
    color: #278cff !important;
    background: rgba(39, 140, 255, .09) !important;
    box-shadow: 0 0 0 3px rgba(39, 140, 255, .08) !important;
}

/* Globe rotates continuously so visitors notice it. */
.fh-globe-toggle svg {
    animation: fhGlobeIdleSpin 6s linear infinite;
    transform-origin: 50% 50%;
}

/* During a language change it spins faster. */
.fh-globe-toggle.is-spinning svg {
    animation: fhGlobeChangeSpin .72s linear infinite !important;
}

/* Non-English translation remains red, as requested. */
.fh-globe-toggle.is-translated {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, .09) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .08) !important;
}

@keyframes fhGlobeIdleSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes fhGlobeChangeSpin {
    from { transform: rotate(0deg) scale(1.02); }
    to   { transform: rotate(360deg) scale(1.02); }
}

/* Much smaller circle around the globe. */
.fh-language-ring {
    left: 49px !important;
    width: 88px !important;
    height: 88px !important;
}

/* Smaller flags to suit the tighter ring. */
.fh-language-flag {
    width: 25px !important;
    height: 18px !important;
    border-width: 1.5px !important;
    border-radius: 5px !important;
}

/* Six compact positions around globe. */
.fh-flag-en {
    left: 50% !important;
    top: -2px !important;
    transform: translateX(-50%) !important;
}
.fh-flag-ko {
    right: -2px !important;
    top: 16px !important;
}
.fh-flag-zh {
    right: -2px !important;
    bottom: 16px !important;
}
.fh-flag-ja {
    left: 50% !important;
    bottom: -2px !important;
    transform: translateX(-50%) !important;
}
.fh-flag-vi {
    left: -2px !important;
    bottom: 16px !important;
}
.fh-flag-ar {
    left: -2px !important;
    top: 16px !important;
}

/* Small first-visit Language tooltip. */
.fh-language-hint {
    position: absolute;
    z-index: 35;
    left: 46px;
    top: calc(100% + 8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 0 9px;
    border-radius: 7px;
    background: #172033;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(0,0,0,.20);
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    pointer-events: none;
}

.fh-language-hint::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -5px;
    width: 9px;
    height: 9px;
    background: #172033;
    transform: translateX(-50%) rotate(45deg);
}

.fh-language-hint.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-3px);
}

/* Accessibility: no constant motion when the user prefers reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .fh-globe-toggle svg {
        animation: none !important;
    }
    .fh-globe-toggle.is-spinning svg {
        animation: none !important;
    }
}

@media (max-width: 640px) {
    .fh-language-ring {
        left: 40px !important;
        width: 78px !important;
        height: 78px !important;
    }

    .fh-language-flag {
        width: 23px !important;
        height: 17px !important;
    }

    .fh-flag-ko,
    .fh-flag-ar {
        top: 13px !important;
    }

    .fh-flag-zh,
    .fh-flag-vi {
        bottom: 13px !important;
    }

    .fh-language-hint {
        left: 38px;
        top: calc(100% + 7px);
        font-size: 10px;
        min-height: 23px;
    }
}

/* ===== Common header: compact language ring centered exactly on globe ===== */
.fh-cloud-wordmark{display:inline-flex;align-items:center;height:34px;margin-left:4px;color:var(--fh-text);font-size:20px;line-height:1;font-weight:850;letter-spacing:-.055em;white-space:nowrap;overflow:visible!important}
.fh-globe-wrap{position:relative;z-index:40;display:inline-grid;place-items:center;width:24px;height:24px;margin:0 1px;overflow:visible!important}
.fh-globe-toggle{position:relative!important;inset:auto!important;width:23px!important;height:23px!important;margin:0!important;padding:0!important;z-index:44!important;color:#278cff!important;background:rgba(39,140,255,.09)!important;box-shadow:0 0 0 3px rgba(39,140,255,.08)!important}
.fh-globe-toggle svg{width:22px!important;height:22px!important;animation:fhGlobeIdleSpin 6s linear infinite!important;transform-origin:50% 50%}
.fh-globe-toggle.is-spinning svg{animation:fhGlobeChangeSpin .72s linear infinite!important}
.fh-globe-toggle.is-translated{color:#ef4444!important;background:rgba(239,68,68,.09)!important;box-shadow:0 0 0 3px rgba(239,68,68,.08)!important}

.fh-globe-wrap .fh-language-ring{position:absolute!important;left:50%!important;top:50%!important;width:58px!important;height:58px!important;transform:translate(-50%,-50%) scale(.2)!important;transform-origin:center center!important;z-index:42!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.fh-globe-wrap.is-open .fh-language-ring{transform:translate(-50%,-50%) scale(1)!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}

.fh-globe-wrap .fh-language-flag{position:absolute!important;width:21px!important;height:15px!important;border:1px solid #fff!important;border-radius:4px!important;padding:0!important;margin:0!important;overflow:hidden!important;background:#fff!important;box-shadow:0 4px 10px rgba(0,0,0,.22)!important}
.fh-globe-wrap .fh-language-flag img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important}

.fh-globe-wrap .fh-flag-en{left:50%!important;top:0!important;transform:translateX(-50%)!important}
.fh-globe-wrap .fh-flag-ko{right:0!important;top:11px!important;transform:none!important}
.fh-globe-wrap .fh-flag-zh{right:0!important;bottom:11px!important;transform:none!important}
.fh-globe-wrap .fh-flag-ja{left:50%!important;bottom:0!important;transform:translateX(-50%)!important}
.fh-globe-wrap .fh-flag-vi{left:0!important;bottom:11px!important;transform:none!important}
.fh-globe-wrap .fh-flag-ar{left:0!important;top:11px!important;transform:none!important}

.fh-globe-wrap .fh-language-hint{left:50%!important;top:calc(100% + 10px)!important;transform:translateX(-50%)!important}
.fh-footer-cloud{margin-left:4px;color:#8f9db0;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}

@media(max-width:640px){
 .fh-cloud-wordmark{height:30px;font-size:16px;margin-left:2px}
 .fh-globe-wrap{width:20px;height:20px}
 .fh-globe-toggle,.fh-globe-toggle svg{width:19px!important;height:19px!important}
 .fh-globe-wrap .fh-language-ring{width:52px!important;height:52px!important}
 .fh-globe-wrap .fh-language-flag{width:19px!important;height:14px!important}
}

/* ===== Legacy Blade compatibility for shared FrontHub header/footer ===== */
.fh-common-ui,.fh-common-ui *,.fh-footer,.fh-footer *{box-sizing:border-box}
.fh-common-ui{width:100%!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
.fh-common-ui .fh-shell,.fh-footer .fh-shell{width:min(calc(100% - 40px),1320px)!important;max-width:1320px!important;margin-left:auto!important;margin-right:auto!important}
.fh-common-ui a,.fh-footer a{text-decoration:none!important}
.fh-common-ui button{font-family:inherit!important}
.fh-common-ui .fh-language-flag img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important}
.fh-google-engine,#google_translate_element{position:fixed!important;left:-10000px!important;top:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* ===== Logo CLOUD positioning refinements ===== */
/* Header CLOUD: 10px left, 4px down */
.fh-header .fh-cloud-wordmark {
    position: relative !important;
    left: -10px !important;
    top: 4px !important;
}

/* Footer CLOUD: complementary type, gradient colour, 5px left / 3px down */
.fh-footer .fh-footer-cloud {
    position: relative !important;
    left: -5px !important;
    top: 3px !important;
    margin-left: 4px !important;
    font-family: "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .035em !important;
    text-transform: uppercase !important;
    background: linear-gradient(90deg, #7954ff, #35b5ff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* ===== Header CLOUD final position adjustment ===== */
/* Move from previous position: 2px right and 2px up */
.fh-header .fh-cloud-wordmark {
    left: -8px !important;
    top: 2px !important;
}


/* ===== FRONTHUB CONVERTER MODAL ===== */
body.fh-modal-open{overflow:hidden!important}
.fh-converter-modal[hidden]{display:none!important}
.fh-converter-modal{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;padding:22px}
.fh-converter-backdrop{position:absolute;inset:0;background:rgba(3,10,22,.68);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.fh-converter-dialog{position:relative;z-index:2;width:min(720px,100%);max-height:calc(100vh - 44px);overflow:auto;padding:34px;border:1px solid var(--fh-border);border-radius:24px;background:var(--fh-surface);box-shadow:0 30px 90px rgba(0,0,0,.3);color:var(--fh-text)}
.fh-converter-close{position:absolute;right:18px;top:16px;width:38px;height:38px;border:1px solid var(--fh-border);border-radius:12px;background:var(--fh-surface-soft);color:var(--fh-text);font-size:25px;line-height:1}
.fh-converter-head{padding-right:46px;margin-bottom:22px}.fh-converter-kicker{display:block;margin-bottom:8px;color:var(--fh-primary);font-size:10px;font-weight:900;letter-spacing:.16em}.fh-converter-head h2{margin:0;font-size:30px;letter-spacing:-.04em}.fh-converter-head p{margin:8px 0 0;color:var(--fh-muted);line-height:1.6}
.fh-modal-dropzone{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px;border:1.5px dashed #8ea6d6;border-radius:18px;background:linear-gradient(135deg,rgba(109,74,255,.055),rgba(45,169,255,.055));text-align:center;transition:.2s}.fh-modal-dropzone.is-dragging{border-color:#398eff;background:rgba(57,142,255,.09);transform:translateY(-1px)}
.fh-modal-drop-icon{width:54px;height:54px;display:grid;place-items:center;margin-bottom:4px;border-radius:16px;background:linear-gradient(135deg,var(--fh-primary),var(--fh-primary-2));color:#fff;font-size:29px;font-weight:700}.fh-modal-dropzone>strong{font-size:18px}.fh-modal-dropzone>span{margin-bottom:10px;color:var(--fh-muted);font-size:13px}
.fh-detected-file{display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:center;margin-top:18px;padding:14px;border:1px solid var(--fh-border);border-radius:14px;background:var(--fh-surface-soft)}.fh-detected-file-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:12px;background:var(--fh-primary-soft);color:var(--fh-primary);font-size:10px;font-weight:900}.fh-detected-file strong,.fh-detected-file span{display:block;min-width:0}.fh-detected-file strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fh-detected-file span{margin-top:4px;color:var(--fh-muted);font-size:12px}
.fh-format-step{margin-top:22px}.fh-step-title{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:12px}.fh-step-title strong{font-size:15px}.fh-step-title span{color:var(--fh-muted);font-size:11px}.fh-format-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.fh-format-option{min-height:62px;padding:8px;border:1px solid var(--fh-border);border-radius:13px;background:var(--fh-surface);color:var(--fh-text);font-weight:900;text-transform:uppercase;transition:.16s}.fh-format-option:hover{border-color:#5b7cff;color:#fff;background:linear-gradient(135deg,var(--fh-primary),var(--fh-primary-2));transform:translateY(-1px)}
.fh-modal-progress,.fh-home-progress{margin-top:20px;padding:18px;border:1px solid var(--fh-border);border-radius:16px;background:var(--fh-surface)}.fh-home-progress{grid-column:2;margin-top:-46px;margin-bottom:10px;position:relative;z-index:4;background:rgba(255,255,255,.97);color:#101828}html[data-theme="dark"] .fh-home-progress{background:#0d1929;color:#f7f9fc}
.fh-progress-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:11px}.fh-progress-heading>div{min-width:0}.fh-progress-heading strong,.fh-progress-heading span{display:block}.fh-progress-heading>div>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.fh-progress-heading span{margin-top:3px;color:var(--fh-muted);font-size:11px}.fh-progress-heading>strong{color:var(--fh-primary);font-size:15px}.fh-progress-track{height:9px;overflow:hidden;border-radius:999px;background:var(--fh-border)}.fh-progress-track>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--fh-primary),var(--fh-primary-2));transition:width .18s ease}
.fh-modal-result{margin-top:17px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:15px;border-top:1px solid var(--fh-border)}.fh-modal-result strong,.fh-modal-result span{display:block}.fh-modal-result span{margin-top:3px;color:var(--fh-muted);font-size:11px}.fh-converter-error{margin-top:16px;padding:12px 14px;border:1px solid rgba(220,38,38,.25);border-radius:12px;background:rgba(220,38,38,.07);color:#c62828;font-size:12px;line-height:1.55}.fh-progress-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}.fh-btn-progress-secondary{min-height:46px;padding:0 16px;border:1px solid var(--fh-border);background:var(--fh-surface-soft);color:var(--fh-text)}
@media(max-width:900px){.fh-home-progress{grid-column:1;margin-top:12px}.fh-format-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.fh-converter-modal{padding:10px}.fh-converter-dialog{max-height:calc(100vh - 20px);padding:24px 16px;border-radius:18px}.fh-converter-head h2{font-size:25px}.fh-format-grid{grid-template-columns:repeat(2,1fr)}.fh-step-title{align-items:flex-start;flex-direction:column;gap:4px}.fh-modal-result{align-items:stretch;flex-direction:column}.fh-modal-result .fh-btn{width:100%}}

/* ===== 2026-08-26 fixes: translation ring + converter modal ===== */
.fh-globe-wrap .fh-language-ring{width:64px!important;height:64px!important}
.fh-globe-wrap .fh-flag-ko{top:13px!important}.fh-globe-wrap .fh-flag-ar{top:13px!important}
.fh-globe-wrap .fh-flag-zh{bottom:13px!important}.fh-globe-wrap .fh-flag-vi{bottom:13px!important}
@media(max-width:640px){.fh-globe-wrap .fh-language-ring{width:58px!important;height:58px!important}.fh-globe-wrap .fh-flag-ko,.fh-globe-wrap .fh-flag-ar{top:12px!important}.fh-globe-wrap .fh-flag-zh,.fh-globe-wrap .fh-flag-vi{bottom:12px!important}}
.fh-converter-modal:not([hidden]){display:grid!important}
.fh-converter-modal[hidden]{display:none!important}

/* ===== FrontHub v3 home conversion fixes ===== */
#upload,#tools,.fh-upload-panel{scroll-margin-top:96px}
.fh-converter-modal{z-index:20000!important}
.fh-converter-dialog{position:relative!important;z-index:1!important}

/* Registration pricing v3 */
.fh-register-plans-v3{width:min(1180px,calc(100% - 30px))!important;margin:12px auto 20px!important}
.fh-register-plans-v3 .pricing-container{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;max-width:1180px!important;width:100%!important;align-items:stretch!important}
.fh-register-plans-v3 .pricing-card{width:auto!important;min-width:0!important;min-height:0!important;margin:0!important;padding:16px 14px!important;border-radius:14px!important;transform:none!important}
.fh-register-plans-v3 .pricing-card:hover,.fh-register-plans-v3 .pricing-card.popular:hover{transform:translateY(-3px)!important}
.fh-register-plans-v3 .pricing-card h3{font-size:19px!important;margin:0 0 6px!important}
.fh-register-plans-v3 .fh-plan-price{font-size:26px!important;font-weight:850!important;line-height:1.1!important;margin:6px 0 3px!important}
.fh-register-plans-v3 .fh-plan-price small{font-size:11px!important;font-weight:700!important}
.fh-register-plans-v3 .fh-plan-annual{font-size:11px!important;color:#667085!important;margin-bottom:10px!important}
.fh-register-plans-v3 .fh-plan-credit{padding:8px 7px!important;border-radius:10px!important;margin:8px 0!important;background:rgba(109,74,255,.08)!important;font-size:12px!important;font-weight:800!important;line-height:1.35!important}
.fh-register-plans-v3 .pricing-card ul{margin:9px 0 12px!important;padding:0!important}
.fh-register-plans-v3 .pricing-card li{font-size:11px!important;line-height:1.45!important;margin:4px 0!important}
.fh-register-plans-v3 .select-plan-btn{min-height:38px!important;padding:8px 10px!important;font-size:12px!important}
.fh-register-plans-v3 .fh-enterprise-note{font-size:10px!important;color:#667085!important}
@media(max-width:980px){.fh-register-plans-v3 .pricing-container{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:580px){.fh-register-plans-v3 .pricing-container{grid-template-columns:1fr!important}}

/* ===== Tool library gradient + category focus ===== */
.fh-tool-grid{
    position:relative;
    padding:14px;
    border-radius:20px;
    background:linear-gradient(135deg,rgba(80,91,255,.10),rgba(70,183,255,.08),rgba(130,72,255,.08));
}
.fh-tool-card{
    transition:transform .18s ease,box-shadow .18s ease,background .22s ease,color .22s ease,border-color .22s ease,opacity .22s ease!important;
}
.fh-tool-grid.fh-filter-all .fh-tool-card{
    background:linear-gradient(145deg,rgba(245,248,255,.98),rgba(231,241,255,.96))!important;
    border-color:rgba(91,113,255,.18)!important;
}
.fh-tool-grid:not(.fh-filter-all) .fh-tool-card{
    opacity:.34;
}
.fh-tool-grid:not(.fh-filter-all) .fh-tool-card.fh-category-match{
    opacity:1;
    color:#fff!important;
    border-color:rgba(255,255,255,.18)!important;
    background:linear-gradient(135deg,#5766ee,#7358e8 55%,#318fdf)!important;
    box-shadow:0 10px 26px rgba(66,82,200,.18)!important;
}
.fh-tool-grid:not(.fh-filter-all) .fh-tool-card.fh-category-match h3,
.fh-tool-grid:not(.fh-filter-all) .fh-tool-card.fh-category-match p{
    color:#fff!important;
}
.fh-tool-grid:not(.fh-filter-all) .fh-tool-card.fh-category-match .fh-tool-arrow{
    color:#fff!important;
}
.fh-filter[data-category="all"].is-active{
    color:#fff!important;
    border-color:transparent!important;
    background:linear-gradient(135deg,#5367ef,#318fdf)!important;
}
html[data-theme="dark"] .fh-tool-grid.fh-filter-all .fh-tool-card{
    background:linear-gradient(145deg,rgba(23,33,53,.98),rgba(20,42,69,.98))!important;
}

/* ===== Converter v5: conversion remains in modal ===== */
#modalProgress {
    display: block;
    margin-top: 18px;
}
#modalProgress[hidden],
#modalResult[hidden] {
    display: none !important;
}
.fh-converter-dialog {
    min-height: 360px;
}
.fh-converter-progress {
    padding: 16px;
    border-radius: 14px;
    background: rgba(72, 91, 255, .06);
    border: 1px solid rgba(72, 91, 255, .14);
}

/* ===== Tool category highlight v11 ===== */

/* Keep every tool visible; category buttons now highlight instead of hiding cards. */
.fh-tool-card {
    display: flex !important;
    opacity: 1 !important;
    filter: none !important;
    transition:
        background .22s ease,
        color .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        transform .18s ease !important;
}

/* Normal card appearance. */
.fh-tool-card:not(.fh-tool-highlight) {
    background: #fff !important;
    color: inherit !important;
    border-color: rgba(148, 163, 184, .28) !important;
    box-shadow: 0 8px 22px rgba(31, 41, 55, .055) !important;
}

.fh-tool-card:not(.fh-tool-highlight) h3 {
    color: #0f172a !important;
}

.fh-tool-card:not(.fh-tool-highlight) p {
    color: #64748b !important;
}

/* Selected category cards: blue/purple gradient inversion. */
.fh-tool-card.fh-tool-highlight {
    background:
        linear-gradient(135deg, #5b5ff4 0%, #536df4 38%, #3f8ff5 72%, #2fa5ee 100%) !important;
    border-color: rgba(71, 101, 238, .55) !important;
    box-shadow:
        0 14px 30px rgba(67, 86, 214, .18),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
    color: #fff !important;
}

.fh-tool-card.fh-tool-highlight h3,
.fh-tool-card.fh-tool-highlight p {
    color: #fff !important;
}

.fh-tool-card.fh-tool-highlight .fh-tool-icon {
    background: rgba(255,255,255,.16) !important;
    color: #fff !important;
}

.fh-tool-card.fh-tool-highlight .fh-tool-arrow {
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
}

.fh-tool-card.fh-tool-highlight .fh-popular {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
}

/* Category buttons: only the active button is filled. */
.fh-filter {
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

.fh-filter.fh-category-active {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #6258f5 0%, #3f8ff5 100%) !important;
    box-shadow: 0 8px 20px rgba(75, 91, 220, .16) !important;
}

/* Dark mode: unselected cards return to the native dark surface. */
html[data-theme="dark"] .fh-tool-card:not(.fh-tool-highlight),
body.dark .fh-tool-card:not(.fh-tool-highlight) {
    background: #172033 !important;
    border-color: rgba(148,163,184,.16) !important;
}

html[data-theme="dark"] .fh-tool-card:not(.fh-tool-highlight) h3,
body.dark .fh-tool-card:not(.fh-tool-highlight) h3 {
    color: #f8fafc !important;
}

html[data-theme="dark"] .fh-tool-card:not(.fh-tool-highlight) p,
body.dark .fh-tool-card:not(.fh-tool-highlight) p {
    color: #aeb9cb !important;
}

/* ===== Favicon + Video category buttons v12 ===== */
.fh-filter[data-category="favicon"].fh-category-active,
.fh-filter[data-category="video"].fh-category-active {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #6258f5 0%, #318ef5 100%) !important;
}

/* ===== Credit estimator v13 ===== */
.fh-credit-estimate{
    margin:14px 0 4px;
    padding:14px 16px;
    border:1px solid rgba(88,94,235,.16);
    border-radius:14px;
    background:linear-gradient(135deg,rgba(91,95,244,.06),rgba(47,165,238,.06));
}
.fh-credit-estimate[hidden]{display:none!important}
.fh-credit-estimate-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}
#creditEstimateTotal{
    font-size:18px;
    font-weight:850;
    color:#4f63ee;
}
.fh-credit-estimate-grid{
    display:grid;
    grid-template-columns:1fr auto;
    gap:6px 14px;
    font-size:12px;
}
.fh-credit-estimate-grid span{color:#64748b}
.fh-credit-estimate-grid strong{text-align:right}
.fh-credit-estimate-note{
    margin:9px 0 0;
    font-size:11px;
    color:#748096;
}

/* ===== Credit formula v14 ===== */
.fh-credit-estimate-note::after {
    content: "  Formula: (size + resolution + processing) × workload.";
}