@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root {
    --red:#e6403a;
    --red2:#c92f2b;
    --ink:#22252a;
    --muted:#6f737c;
    --line:#e6e7ea;
    --soft:#f7f7f8;
    --paper:#fff;
    --shadow:0 8px 28px rgba(24,28,35,.09);
    --radius:14px;
    --max:1180px
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
    color:var(--ink);
    background:var(--paper)
}

a {
    color:inherit;
    text-decoration:none
}

button,input,select,textarea {
    font:inherit
}

.container {
    width:min(var(--max),calc(100% - 36px));
    margin:auto
}

.topbar {
    position:sticky;
    top:0;
    z-index:40;
    height:66px;
    background:#fff;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center
}

.nav {
    display:flex;
    align-items:center;
    gap:24px
}

.brand {
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    font-size:20px;
    white-space:nowrap
}

.brand-mark {
    width:36px;
    height:36px;
    border-radius:10px;
    background:var(--red);
    color:#fff;
    display:grid;
    place-items:center;
    font-size:14px;
    box-shadow:0 5px 14px rgba(230,64,58,.22)
}

.navlinks {
    display:flex;
    align-items:center;
    gap:22px;
    font-size:14px;
    font-weight:600
}

.navlinks a:hover {
    color:var(--red)
}

.nav-spacer {
    flex:1
}

.search-mini {
    position:relative
}

.search-mini input {
    width:240px;
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 38px 10px 12px;
    background:var(--soft);
    outline:none
}

.search-mini input:focus {
    border-color:#c7c9ce;
    background:#fff
}

.search-mini span {
    position:absolute;
    right:12px;
    top:9px;
    color:var(--muted)
}

.menu-btn {
    display:none;
    background:none;
    border:0;
    font-size:24px
}

.hero {
    padding:58px 0 34px;
    text-align:center
}

.hero h1 {
    font-size:clamp(34px,5vw,54px);
    line-height:1.05;
    margin:0 0 14px;
    letter-spacing:-1.8px
}

.hero p {
    max-width:760px;
    margin:0 auto;
    color:var(--muted);
    font-size:18px;
    line-height:1.65
}

.hero .accent {
    color:var(--red)
}

.filterbar {
    display:flex;
    gap:8px;
    justify-content:center;
    flex-wrap:wrap;
    margin:32px auto 26px
}

.filter {
    border:1px solid var(--line);
    background:#fff;
    padding:9px 14px;
    border-radius:999px;
    font-weight:600;
    font-size:13px;
    cursor:pointer
}

.filter.active,.filter:hover {
    background:var(--ink);
    color:#fff;
    border-color:var(--ink)
}

.tools-section {
    padding:0 0 72px
}

.tool-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px
}

.tool-card {
    min-height:180px;
    border:1px solid var(--line);
    border-radius:12px;
    padding:22px;
    background:#fff;
    position:relative;
    transition:.18s ease
}

.tool-card:hover {
    transform:translateY(-3px);
    box-shadow:var(--shadow);
    border-color:#d8d9dd
}

.tool-card .icon {
    width:46px;
    height:46px;
    border-radius:11px;
    background:#fff0ef;
    color:var(--red);
    display:grid;
    place-items:center;
    font-weight:800;
    font-size:12px;
    margin-bottom:22px
}

.tool-card h3 {
    font-size:17px;
    margin:0 0 7px
}

.tool-card p {
    font-size:13px;
    color:var(--muted);
    line-height:1.55;
    margin:0;
    padding-right:8px
}

.tool-card .arrow {
    position:absolute;
    right:18px;
    bottom:16px;
    color:#a5a7ad;
    font-size:19px
}

.category-title {
    font-size:13px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.11em;
    margin:34px 0 13px;
    font-weight:800
}

.soft {
    background:var(--soft);
    padding:58px 0
}

.feature-row {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px
}

.feature {
    background:#fff;
    padding:26px;
    border-radius:14px;
    border:1px solid var(--line)
}

.feature strong {
    display:block;
    font-size:18px;
    margin-bottom:8px
}

.feature p {
    margin:0;
    color:var(--muted);
    line-height:1.6;
    font-size:14px
}

.footer {
    border-top:1px solid var(--line);
    padding:42px 0 24px
}

.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:34px
}

.footer h4 {
    font-size:13px;
    margin:0 0 13px
}

.footer a {
    display:block;
    color:var(--muted);
    font-size:13px;
    margin:9px 0
}

.footer p {
    color:var(--muted);
    font-size:13px;
    line-height:1.6
}

.copyright {
    border-top:1px solid var(--line);
    margin-top:34px;
    padding-top:20px;
    color:#999;
    font-size:12px
}

.tool-hero {
    background:linear-gradient(180deg,#fafafa,#f4f4f5);
    padding:48px 0 58px;
    text-align:center;
    border-bottom:1px solid var(--line)
}

.breadcrumbs {
    text-align:left;
    font-size:12px;
    color:#8b8e95;
    margin-bottom:32px
}

.tool-hero h1 {
    font-size:clamp(32px,4.6vw,48px);
    letter-spacing:-1.4px;
    margin:0 0 10px
}

.tool-hero> .container>p {
    color:var(--muted);
    font-size:16px;
    margin:0 auto 28px;
    max-width:700px
}

.workspace {
    max-width:860px;
    margin:auto
}

.dropzone {
    border:2px dashed #cfd1d6;
    background:#fff;
    border-radius:16px;
    min-height:260px;
    padding:34px;
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:.2s
}

.dropzone.drag {
    border-color:var(--red);
    background:#fff8f7
}

.drop-inner {
    text-align:center
}

.drop-icon {
    width:64px;
    height:64px;
    border-radius:18px;
    background:#fff0ef;
    color:var(--red);
    display:grid;
    place-items:center;
    margin:0 auto 16px;
    font-size:22px;
    font-weight:800
}

.drop-inner h2 {
    margin:0 0 7px;
    font-size:21px
}

.drop-inner p {
    margin:0 0 19px;
    color:var(--muted);
    font-size:13px
}

.primary {
    border:0;
    background:var(--red);
    color:#fff;
    font-weight:700;
    padding:13px 22px;
    border-radius:10px;
    cursor:pointer;
    box-shadow:0 7px 18px rgba(230,64,58,.2)
}

.primary:hover {
    background:var(--red2)
}

.secondary {
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    font-weight:700;
    padding:12px 17px;
    border-radius:10px;
    cursor:pointer
}

.hidden-input {
    display:none
}

.file-list {
    display:grid;
    gap:8px;
    margin-top:12px
}

.file-item {
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid var(--line);
    background:#fff;
    border-radius:10px;
    padding:11px 13px;
    text-align:left
}

.file-item b {
    font-size:13px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.file-item small {
    color:var(--muted);
    margin-left:auto
}

.options {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-top:14px;
    text-align:left
}

.option {
    border:1px solid var(--line);
    background:#fff;
    border-radius:10px;
    padding:13px
}

.option label {
    display:block;
    font-size:12px;
    font-weight:700;
    margin-bottom:7px
}

.option input,.option select,.option textarea {
    width:100%;
    border:1px solid #d9dadd;
    border-radius:8px;
    padding:10px;
    background:#fff
}

.option.full {
    grid-column:1/-1
}

.actions {
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:16px;
    flex-wrap:wrap
}

.status {
    margin-top:14px;
    font-size:13px;
    color:var(--muted);
    min-height:20px
}

.status.error {
    color:#b42318
}

.status.success {
    color:#187a42
}

.output-links {
    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:12px
}

.download {
    display:inline-flex;
    padding:10px 14px;
    border-radius:9px;
    background:#1e7b4a;
    color:white;
    font-size:13px;
    font-weight:700
}

.info-section {
    padding:54px 0
}

.info-layout {
    display:grid;
    grid-template-columns:1.4fr .8fr;
    gap:55px
}

.info-layout h2 {
    font-size:28px;
    letter-spacing:-.6px;
    margin:0 0 15px
}

.info-layout p,.info-layout li {
    color:var(--muted);
    line-height:1.75;
    font-size:14px
}

.steps-list {
    counter-reset:s;
    list-style:none;
    padding:0
}

.steps-list li {
    counter-increment:s;
    display:flex;
    gap:12px;
    margin:14px 0
}

.steps-list li:before {
    content:counter(s);
    width:27px;
    height:27px;
    flex:0 0 27px;
    border-radius:50%;
    background:#fff0ef;
    color:var(--red);
    display:grid;
    place-items:center;
    font-weight:800;
    font-size:12px
}

.faq details {
    border-top:1px solid var(--line);
    padding:16px 0
}

.faq summary {
    font-weight:700;
    cursor:pointer;
    font-size:14px
}

.related {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px
}

.related a {
    border:1px solid var(--line);
    padding:13px;
    border-radius:9px;
    font-size:13px;
    font-weight:700
}

.related a:hover {
    border-color:var(--red);
    color:var(--red)
}

.search-panel {
    position:fixed;
    inset:66px 0 auto 0;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 14px 24px rgba(0,0,0,.08);
    z-index:35;
    display:none
}

.search-panel.open {
    display:block
}

.search-results {
    padding:18px 0;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px
}

.search-result {
    padding:12px;
    border-radius:8px
}

.search-result:hover {
    background:var(--soft)
}

.search-result b {
    font-size:13px
}

.search-result small {
    display:block;
    color:var(--muted);
    margin-top:4px
}

.note {
    margin-top:14px;
    font-size:12px;
    color:#777;
    line-height:1.6
}

.editor-preview {
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    padding:16px;
    min-height:130px;
    text-align:left;
    margin-top:12px;
    white-space:pre-wrap;
    overflow:auto
}

.badge {
    display:inline-block;
    background:#fff0ef;
    color:var(--red);
    font-weight:800;
    font-size:11px;
    padding:6px 9px;
    border-radius:999px;
    margin-bottom:12px
}

@media(max-width:950px) {
    .tool-grid {
        grid-template-columns:repeat(3,1fr)
    }

    .search-mini {
        display:none
    }

    .info-layout {
        grid-template-columns:1fr
    }

    .footer-grid {
        grid-template-columns:2fr 1fr 1fr
    }

    .feature-row {
        grid-template-columns:1fr
    }

    .related {
        grid-template-columns:1fr 1fr
    }

}

@media(max-width:720px) {
    .container {
        width:min(100% - 24px,var(--max))
    }

    .navlinks {
        position:absolute;
        top:66px;
        left:0;
        right:0;
        background:#fff;
        border-bottom:1px solid var(--line);
        padding:16px 20px;
        display:none;
        flex-direction:column;
        align-items:flex-start
    }

    .navlinks.open {
        display:flex
    }

    .menu-btn {
        display:block
    }

    .tool-grid {
        grid-template-columns:repeat(2,1fr)
    }

    .hero {
        padding-top:42px
    }

    .tool-card {
        min-height:170px;
        padding:18px
    }

    .footer-grid {
        grid-template-columns:1fr 1fr
    }

    .options {
        grid-template-columns:1fr
    }

    .search-results {
        grid-template-columns:1fr 1fr
    }

    .dropzone {
        min-height:225px;
        padding:22px
    }

}

@media(max-width:460px) {
    .tool-grid {
        grid-template-columns:1fr
    }

    .footer-grid,.search-results {
        grid-template-columns:1fr
    }

    .tool-hero {
        padding-top:34px
    }

    .related {
        grid-template-columns:1fr
    }

    .brand span:last-child {
        font-size:18px
    }

}


/* ===========================================================
   PREMIUM TOOL WORKSPACES — Converter Guy
   =========================================================== */

:root {
    --red: #e64343;
    --red2: #cb3035;
    --ink: #1c2534;
    --muted: #687484;
    --line: #e4e8ee;
    --soft: #f7f9fc;
    --paper: #ffffff;
    --shadow: 0 20px 65px rgba(29, 40, 64, 0.075);
    --radius: 18px;
}

body {
    color: var(--ink);
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
}

.topbar {
    height: 76px;
    border-bottom: 1px solid #e9edf2;
    box-shadow: 0 2px 12px rgba(30, 42, 65, 0.025);
}

.brand {
    font-size: 20px;
    letter-spacing: -0.65px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    box-shadow: none;
}

.navlinks a,
.search-mini input {
    font-size: 14px;
}

.search-mini input {
    width: 290px;
    min-height: 45px;
    border-radius: 12px;
    background: #fafbfc;
}

.tool-hero {
    padding: 38px 0 72px;
    background: linear-gradient(180deg, #fafbfe 0%, #f7f9fc 80%, #ffffff 100%);
    border-bottom: 0;
}

.breadcrumbs {
    margin-bottom: 28px;
    color: #8993a0;
    font-size: 12px;
}

.tool-hero h1 {
    margin: 0 0 11px;
    font-size: clamp(34px, 4.5vw, 50px);
    letter-spacing: -1.75px;
    line-height: 1.12;
}

.tool-hero > .container > p {
    margin: 0 auto 30px;
    max-width: 660px;
    color: #657183;
    line-height: 1.7;
}

.tool-hero .badge {
    padding: 7px 13px;
    margin-bottom: 18px;
    color: #bd363b;
    background: #ffefee;
    letter-spacing: .025em;
}

.workspace {
    max-width: 960px;
    padding: 30px;
    margin: 0 auto;
    border: 1px solid #e9edf2;
    border-radius: 23px;
    background: #ffffff;
    box-shadow: var(--shadow);
    text-align: left;
}

.workspace-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 19px;
}

.workspace-header h2 {
    margin: 0 0 5px;
    font-size: 19px;
    letter-spacing: -.45px;
}

.workspace-header p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.workspace-step {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    margin-right: 9px;
    border-radius: 10px;
    color: #d83a40;
    background: #fff0f0;
    font-size: 13px;
    font-weight: 800;
}

.dropzone {
    min-height: 225px;
    padding: 29px;
    border: 1.5px dashed #cad4e0;
    border-radius: 15px;
    background: #fafbfd;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.dropzone:hover,
.dropzone.drag {
    border-color: var(--red);
    background: #fff9f9;
    box-shadow: inset 0 0 0 1px rgba(230, 67, 67, .05);
}

.drop-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 15px;
    border-radius: 16px;
    background: #ffebeb;
    color: #df4146;
    font-size: 25px;
}

.drop-inner h2 {
    font-size: 18px;
    letter-spacing: -.35px;
}

.drop-inner p {
    font-size: 13px;
    margin-bottom: 16px;
}

.primary,
.secondary {
    min-height: 47px;
    padding: 12px 21px;
    border-radius: 11px;
    font-weight: 700;
    transition: transform .15s, box-shadow .15s, background .15s;
}

.primary { box-shadow: none; }
.primary:hover { box-shadow: 0 8px 20px rgba(230, 67, 67, .16); }
.primary:active,
.secondary:active { transform: translateY(1px); }
.secondary:hover { background: #f7f9fc; border-color: #cdd5df; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(230, 67, 67, .22);
    outline-offset: 3px;
}

.file-list:not(:empty) {
    padding-top: 5px;
}

.file-item {
    padding: 13px 15px;
    border-radius: 11px;
    border-color: #e6eaf0;
    background: #fbfcfe;
}

.selected-files-label {
    margin-top: 13px;
    color: #8290a0;
    font-size: 12px;
    text-align: left;
}

.workspace .utility-options:not(:empty),
.workspace .options:not(:empty) {
    padding: 20px 0 4px;
    margin-top: 19px;
    border-top: 1px solid var(--line);
}

.utility-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 14px;
    align-items: end;
    text-align: left;
}

.utility-options > label,
.utility-options > .field-label {
    display: block;
    grid-column: 1 / -1;
    margin-bottom: -7px;
    color: #455264;
    font-weight: 700;
    font-size: 13px;
}

.utility-options select,
.utility-options input,
.utility-options textarea,
.mega-input,
.mega-output {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #dce3eb;
    border-radius: 11px;
    background: #ffffff;
    color: var(--ink);
    font-size: 14px;
}

.mega-input,
.mega-output {
    min-height: 190px;
    resize: vertical;
    line-height: 1.65;
    font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
}

.mega-input::placeholder { color: #a2adbb; }

.workspace .actions {
    justify-content: flex-start;
    gap: 11px;
    margin-top: 23px;
}

.workspace .status {
    min-height: 0;
    margin-top: 13px;
    color: #6a7887;
    line-height: 1.6;
}

.workspace .status:empty { display: none; }
.workspace .status.success { color: #167449; }
.workspace .status.error { color: #b02f34; }

.result-panel {
    margin-top: 24px;
    padding: 23px;
    border: 1px solid #e2e9f1;
    border-radius: 15px;
    background: #f8fafc;
    text-align: left;
}

.result-panel h3 {
    margin: 0 0 7px;
    font-size: 18px;
    letter-spacing: -.35px;
}

.result-panel .result-caption {
    margin: 0 0 15px;
    color: #6e7a89;
    font-size: 13px;
}

.result-panel .mega-output {
    background: #ffffff;
    min-height: 168px;
}

.result-panel .actions {
    margin-top: 15px;
}

.result-panel .visual-output {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.result-panel .visual-output:empty { display: none; }
.result-panel .visual-output canvas,
.result-panel .visual-output img,
.result-panel .visual-output svg {
    display: block;
    width: auto;
    max-width: min(100%, 520px);
    height: auto;
    border-radius: 10px;
}

.result-panel .download,
.output-links .download {
    padding: 13px 18px;
    background: #1b7653;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: none;
}

.info-section { padding-top: 50px; }
.info-layout h2 { letter-spacing: -.65px; }
.info-layout p,
.info-layout li { font-size: 14px; }

[hidden] { display: none !important; }

@media (max-width: 720px) {
    .topbar { height: 66px; }
    .navlinks { top: 66px; }
    .workspace { padding: 18px; border-radius: 16px; }
    .tool-hero { padding: 24px 0 42px; }
    .breadcrumbs { margin-bottom: 19px; }
    .dropzone { min-height: 205px; padding: 24px 13px; }
    .workspace-header { align-items: flex-start; }
    .result-panel { padding: 16px; }
    .workspace .actions { align-items: stretch; }
    .workspace .actions > button { flex: 1 1 auto; }
    .search-mini input { width: 200px; }
}