@charset "UTF-8";
body.image-page .tool-main a {
    color:var(--gold)
}
body.image-page .tool-main .wrap {
    max-width:980px;
    margin:auto;
    padding:24px 18px 70px
}
body.image-page .tool-main .top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:10px 0 48px
}
body.image-page .tool-main .brand {
    font-weight:900;
    letter-spacing:.02em;
    text-decoration:none;
    color:var(--text);
    font-size:23px
}
body.image-page .tool-main .brand span {
    color:var(--gold)
}
body.image-page .tool-main .top nav a {
    color:var(--muted);
    text-decoration:none;
    font-size:14px
}
body.image-page .tool-main .eyebrow {
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:800
}
body.image-page .tool-main .hero {
    text-align:center;
    margin-bottom:28px
}
body.image-page .tool-main h1 {
    font-size:clamp(30px,5vw,48px);
    line-height:1.14;
    margin:12px 0
}
body.image-page .tool-main h2 {
    font-size:22px
}
body.image-page .tool-main .hero p {
    color:var(--muted);
    max-width:620px;
    margin:0 auto
}
body.image-page .tool-main .tool {
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:22px;
    padding:clamp(18px,4vw,32px);
    box-shadow:0 20px 70px #0005
}
body.image-page .tool-main .drop {
    border:2px dashed #526177;
    border-radius:16px;
    padding:35px 16px;
    text-align:center;
    cursor:pointer;
    background:#111a27;
    transition:.2s;
    display:block
}
body.image-page .tool-main .drop:hover, body.image-page .tool-main .drop.over {
    border-color:var(--gold);
    background-color: #cca14344;
}
body.image-page .tool-main .drop svg {
    display:block;
    margin:auto auto 10px;
    color:var(--gold)
}
body.image-page .tool-main .drop strong {
    display:block;
    font-size:19px
}
body.image-page .tool-main .drop small {
    display:block;
    color:var(--muted);
    margin-top:6px
}
body.image-page .tool-main input[type=file] {
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none
}
body.image-page .tool-main .controls {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-top:26px
}
body.image-page .tool-main .control label, body.image-page .tool-main .control legend {
    display:block;
    font-weight:700;
    margin-bottom:8px
}
body.image-page .tool-main .rangehead {
    display:flex;
    justify-content:space-between
}
body.image-page .tool-main .rangehead output {
    color:var(--gold)
}
body.image-page .tool-main input[type=range] {
    width:100%;
    accent-color:var(--gold);
    cursor:pointer
}
body.image-page .tool-main select {
    width:100%;
    background:var(--panel2);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px;
    font:inherit
}
body.image-page .tool-main .hint {
    font-size:12px;
    color:var(--muted);
    margin-top:6px
}
body.image-page .tool-main .actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:24px
}
body.image-page .tool-main button, body.image-page .tool-main .download {
    font:inherit;
    font-weight:750;
    border-radius:11px;
    padding:12px 22px;
    cursor:pointer;
    text-decoration:none;
    text-align:center
}
body.image-page .tool-main button.primary, body.image-page .tool-main .download {
    background:var(--gold);
    color:#10141b;
    border:1px solid var(--gold)
}
body.image-page .tool-main button.secondary {
    background:transparent;
    color:var(--text);
    border:1px solid var(--border)
}
body.image-page .tool-main button:disabled {
    opacity:.45;
    cursor:not-allowed
}
body.image-page .tool-main .result {
    margin-top:24px;
    border-top:1px solid var(--border);
    padding-top:22px
}
body.image-page .tool-main .result[hidden], body.image-page .tool-main .error[hidden], body.image-page .tool-main .loading[hidden] {
    display:none
}
body.image-page .tool-main .comparison {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}
body.image-page .tool-main .stat {
    padding:15px;
    background:var(--panel2);
    border-radius:12px;
    min-width:0
}
body.image-page .tool-main .stat span {
    display:block;
    color:var(--muted);
    font-size:13px
}
body.image-page .tool-main .stat strong {
    display:block;
    font-size:22px;
    overflow-wrap:anywhere
}
body.image-page .tool-main .saving {
    margin:16px 0;
    color:#8de1a3;
    font-weight:750
}
body.image-page .tool-main .preview {
    max-width:100%;
    max-height:330px;
    object-fit:contain;
    border-radius:12px;
    background:#0c1420;
    margin-top:12px
}
body.image-page .tool-main .notice {
    display:flex;
    gap:10px;
    align-items:flex-start;
    color:var(--muted);
    font-size:13px;
    margin-top:24px
}
body.image-page .tool-main .notice svg {
    flex-shrink:0;
    color:#7bd7a3
}
body.image-page .tool-main .error {
    color:#ff9f9f;
    margin-top:12px
}
body.image-page .tool-main .loading {
    color:var(--gold);
    margin-top:12px
}
body.image-page .tool-main .info {
    margin-top:40px;
    color:var(--muted);
    padding: 30px 20px;
}
body.image-page .tool-main .info h2 {
    color:var(--text)
}
body.image-page .tool-main .info p {
    max-width:850px
}
body.image-page .tool-main footer {
    margin-top:50px;
    padding-top:20px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:13px
}
@media(max-width:640px) {
    .controls,.comparison {
        grid-template-columns:1fr
    }
    .top {
        padding-bottom:30px
    }
    .tool {
        border-radius:16px
    }
    .actions>* {
        width:100%
    }
}
body.image-page .tool-main .info ol {
    padding-left: 1.45rem;
    line-height: 1.75;
}
body.image-page .tool-main .info li {
    margin-bottom: .55rem;
}
body.image-page .tool-main .info h3 {
    margin-top: 1.35rem;
    margin-bottom: .4rem;
    font-size: 1.08rem;
}
body.image-page .tool-main .info-table-wrap {
    overflow-x: auto;
    margin: 1.1rem 0 1.6rem;
}
body.image-page .tool-main .info-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 460px;
    text-align: left;
}
body.image-page .tool-main .info-table th, body.image-page .tool-main .info-table td {
    padding: .8rem;
    border-bottom: 1px solid rgba(160,170,185,.24);
    vertical-align: top;
}
body.image-page .tool-main .info-table thead th {
    color: var(--gold);;
}
body.image-page .tool-main .info a {
    color: var(--gold);;
    text-underline-offset: 3px;
}
body.image-page .tool-main .info-end {
    margin-top: 1.7rem;
}

body.image-page { background:#fff; color:var(--ink);; font-family:Arial,Helvetica,sans-serif; }
body.image-page .tool-main { width:min(1120px,calc(100% - 48px)); margin:0 auto; padding:42px 0 75px; color:var(--ink);; }
body.image-page .tool-main .hero { background:var(--blue);; color:#fff; border-radius:8px; padding:44px 24px; margin:0 0 32px; text-align:center; min-height:0; }
body.image-page .tool-main .hero h1 { color:#fff; font-size:clamp(30px,4vw,46px); line-height:1.2; }
body.image-page .tool-main .hero p { color:#f0f4fa; }
body.image-page .tool-main .eyebrow { color:var(--gold);; }
body.image-page .tool-main .container,body.image-page .tool-main .wrap { max-width:100%; width:100%; padding-left:0; padding-right:0; margin-left:auto; margin-right:auto; }
body.image-page .tool-main .tool,body.image-page .tool-main .upload-panel,body.image-page .tool-main .editor,body.image-page .tool-main .info,body.image-page .tool-main .content { background:#fff; color:var(--ink);; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(23,38,59,.04); }
body.image-page .tool-main button:not(:disabled) { cursor:pointer; }
body.image-page .tool-main button:focus-visible,body.image-page .tool-main input:focus-visible,body.image-page .tool-main select:focus-visible { outline:3px solid var(--gold);; outline-offset:2px; }
body.image-page .tool-main a { color:var(--blue);; }
body.image-page .tool-main h2,body.image-page .tool-main h3 { color:var(--ink);; }
body.image-page .tool-main .drop,body.image-page .tool-main .dropzone { background:#f7f9fc; color:var(--ink);; border-color:var(--gold);; }
body.image-page .tool-main .drop strong,body.image-page .tool-main .dropzone strong { color:var(--ink);; }
@media(max-width:700px){body.image-page .tool-main { width:calc(100% - 28px); padding-top:20px; } body.image-page .tool-main .hero { padding:32px 16px; }}