:root {
    color-scheme: light;
    --bg: #f8fafc;
    --surface: #ffffff;
    --text: #172033;
    --muted: #64748b;
    --line: #e2e8f0;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --danger-bg: #fef2f2;
    --danger: #b91c1c;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
.container { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.site-header { background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); }
.nav-row { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-size: 1.4rem; font-weight: 800; text-decoration: none; letter-spacing: -.04em; display:inline-flex; align-items:center; min-height:32px; }
.brand-logo { display:block; max-width:180px; max-height:42px; width:auto; height:auto; object-fit:contain; }
nav { display: flex; align-items: center; gap: 18px; }
nav a, .link-button { text-decoration: none; color: #475569; font-weight: 600; }
.inline-form { display: inline; }
.link-button { border: 0; background: transparent; cursor: pointer; padding: 0; font: inherit; }
.page-shell { min-height: calc(100vh - 140px); padding-top: 64px; padding-bottom: 72px; }
.hero { max-width: 820px; padding: 42px 0 58px; }
.hero.compact { padding-top: 10px; }
.eyebrow { display: inline-block; color: var(--primary); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; }
h1 { font-size: clamp(2.25rem, 6vw, 4.8rem); line-height: 1.02; letter-spacing: -.055em; margin: 12px 0 20px; }
.compact h1, .auth-panel h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2, h3 { line-height: 1.2; letter-spacing: -.025em; }
.hero p, .section-heading p, .card p { color: var(--muted); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: 0 8px 30px rgba(15,23,42,.04); }
.coming-soon { display: inline-block; margin-top: 8px; color: var(--primary); font-size: .88rem; font-weight: 700; }
.auth-panel { max-width: 520px; margin: 0 auto; }
.form-card form { display: grid; gap: 10px; margin-top: 24px; }
label { font-weight: 700; margin-top: 6px; }
input { width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; padding: 12px 14px; font: inherit; background: #fff; }
input:focus { outline: 3px solid rgba(37,99,235,.15); border-color: var(--primary); }
.primary-button { margin-top: 12px; border: 0; border-radius: 10px; background: var(--primary); color: white; padding: 13px 18px; font: inherit; font-weight: 800; cursor: pointer; }
.primary-button:hover { background: var(--primary-dark); }
.alert { margin: 18px 0; background: var(--danger-bg); color: var(--danger); border: 1px solid #fecaca; border-radius: 10px; padding: 12px 14px; }
.auth-footer-link {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    text-align: center;
}
.auth-footer-link a { color: var(--primary); font-weight: 800; text-decoration: none; }
.auth-footer-link a:hover { text-decoration: underline; }
.field-help { margin: -4px 0 6px; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.notice-success { margin: 18px 0; background: #ecfdf3; color: #166534; border: 1px solid #bbf7d0; border-radius: 10px; padding: 12px 14px; }

.site-footer { border-top: 1px solid var(--line); padding: 24px 0; color: var(--muted); background: #fff; }
code { background: #eef2ff; padding: 2px 6px; border-radius: 5px; }
@media (max-width: 640px) { .nav-row, .section-heading { align-items: flex-start; } .nav-row { padding: 14px 0; } nav { gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .page-shell { padding-top: 36px; } }

/* Tool workflow */
.tool-card { display: flex; flex-direction: column; min-height: 190px; }
.tool-card p { flex: 1; }
.tool-link { display: inline-flex; margin-top: 14px; text-decoration: none; font-weight: 800; color: var(--primary); }
.muted-link { color: var(--muted); }
.tool-hero { max-width: 760px; }
.tool-panel { width: 100%; max-width: none; margin-bottom: 28px; }
.tool-form { display: grid; gap: 22px; }
.upload-dropzone { display: grid; gap: 8px; border: 2px dashed #cbd5e1; border-radius: 16px; padding: 30px; cursor: pointer; background: #f8fafc; }
.upload-dropzone strong { font-size: 1.15rem; }
.upload-dropzone span, .quality-control p { color: var(--muted); margin: 0; }
.upload-dropzone input { margin-top: 10px; background: #fff; }
.quality-control { display: grid; grid-template-columns: 1fr 120px; gap: 24px; align-items: end; }
.quality-control input { text-align: center; }
.button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.result-card { margin-bottom: 28px; border-color: #bbf7d0; background: #f0fdf4; overflow: hidden; }
.result-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.result-heading-row > div { min-width: 0; }
.result-heading-row .primary-button { margin-top: 0; flex: 0 0 auto; white-space: nowrap; }
.result-heading-row h2 { margin: 6px 0 0; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; width: 100%; clear: both; }
.stats-grid > div { background: rgba(255,255,255,.8); border: 1px solid #dcfce7; border-radius: 12px; padding: 16px; }
.stats-grid span { display: block; color: var(--muted); font-size: .82rem; font-weight: 700; margin-bottom: 5px; }
.stats-grid strong { font-size: 1.05rem; }
.tool-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
@media (max-width: 700px) { .quality-control, .stats-grid, .tool-info-grid { grid-template-columns: 1fr; } .result-heading-row { align-items: flex-start; flex-direction: column; } .result-heading-row .primary-button { width: 100%; } }

/* Drag-and-drop upload */
.upload-dropzone {
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.upload-dropzone:hover,
.upload-dropzone.is-dragging {
    border-color: var(--primary);
    background: #eff6ff;
    box-shadow: 0 0 0 4px rgba(37,99,235,.08);
}
.upload-dropzone.is-dragging {
    transform: translateY(-1px);
}
.dropzone-file-name {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #334155 !important;
    font-size: .88rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.upload-dropzone.has-file .dropzone-file-name {
    background: #dcfce7;
    color: #166534 !important;
}

/* Registered-user ZIP batch processing */
.batch-section { margin: 0 0 28px; }
.batch-heading-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.batch-heading-row h2 { margin: 7px 0 6px; }
.batch-heading-row p { margin: 0; max-width: 760px; }
.batch-badge { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 11px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: .82rem; font-weight: 800; white-space: nowrap; }
.batch-form { padding-top: 4px; }
.batch-dropzone { background: #fbfdff; }
.batch-result { margin-bottom: 26px; border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: 14px; padding: 20px; }
.batch-result h3 { margin: 5px 0 0; font-size: 1.35rem; }
.batch-stats-grid { margin-top: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.batch-details { margin-top: 18px; border-top: 1px solid #bbf7d0; padding-top: 14px; }
.batch-details summary { cursor: pointer; font-weight: 800; }
.batch-details ul { margin: 12px 0 0; padding-left: 20px; }
.batch-details li + li { margin-top: 7px; }
.batch-skipped { border-top-color: #fde68a; }
.batch-skipped summary { color: #92400e; }
.batch-login-prompt { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 18px; border: 1px dashed #cbd5e1; border-radius: 14px; background: #f8fafc; }
.batch-login-prompt p { margin: 0; }
.batch-login-prompt .primary-button { margin-top: 0; }
@media (max-width: 900px) { .batch-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .batch-stats-grid { grid-template-columns: 1fr; } .batch-login-prompt .primary-button { width: 100%; } }

/* Image resizer */
.resize-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.resize-dimensions-grid,
.resize-options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field-group { display: grid; gap: 8px; }
.field-group > label { margin: 0; }
.field-help { margin: 0; color: var(--muted); font-size: .9rem; }
.number-with-unit { position: relative; }
.number-with-unit input { padding-right: 48px; }
.number-with-unit span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; pointer-events: none; }
select { width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; padding: 12px 14px; font: inherit; color: var(--text); background: #fff; }
select:focus { outline: 3px solid rgba(37,99,235,.15); border-color: var(--primary); }
.option-card { margin: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #f8fafc; cursor: pointer; }
.option-copy { display: grid; gap: 4px; }
.option-copy small { color: var(--muted); font-weight: 500; line-height: 1.45; }
.option-card input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--primary); }
.resize-note { padding: 13px 15px; border-radius: 12px; background: #eef6ff; color: #334155; font-size: .92rem; }
.resize-note.is-warning { background: #fff7ed; color: #9a3412; }
@media (max-width: 900px) { .resize-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .resize-dimensions-grid, .resize-options-grid, .resize-stats-grid { grid-template-columns: 1fr; } }

/* Reusable processing state */
[data-processing-form] {
    position: relative;
    isolation: isolate;
}

.processing-overlay {
    position: absolute;
    inset: -1px;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 24px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, visibility .16s ease;
}

[data-processing-form].is-processing .processing-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.processing-overlay-content {
    display: grid;
    justify-items: center;
    gap: 10px;
    max-width: 420px;
    text-align: center;
}

.processing-overlay-content strong {
    font-size: 1.12rem;
    line-height: 1.3;
}

.processing-overlay-content span:last-child {
    color: var(--muted);
    font-size: .92rem;
}

.processing-spinner,
.button-spinner {
    display: inline-block;
    border-radius: 50%;
    border-style: solid;
    border-color: rgba(37, 99, 235, .2);
    border-top-color: var(--primary);
    animation: codix-spin .75s linear infinite;
}

.processing-spinner {
    width: 46px;
    height: 46px;
    border-width: 4px;
    margin-bottom: 3px;
}

.button-spinner {
    width: 17px;
    height: 17px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, .35);
    border-top-color: #fff;
    flex: 0 0 auto;
}

.primary-button.is-processing-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: wait;
}

.primary-button:disabled {
    opacity: .82;
    cursor: wait;
}

[data-processing-form].is-processing {
    cursor: wait;
}

[data-processing-form].is-processing .upload-dropzone,
[data-processing-form].is-processing input,
[data-processing-form].is-processing select,
[data-processing-form].is-processing .option-card {
    user-select: none;
}

@keyframes codix-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .processing-spinner,
    .button-spinner {
        animation-duration: 1.8s;
    }

    .processing-overlay {
        transition: none;
    }
}

/* Keep the active submit button visible above the form overlay. */
[data-processing-form].is-processing button[type="submit"] {
    position: relative;
    z-index: 21;
}


/* Client-side live image preview */
.image-live-preview {
    display: grid;
    gap: 20px;
    padding: 22px;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfdff 0%, #f8fbff 100%);
}

.image-live-preview[hidden] {
    display: none;
}

.live-preview-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.live-preview-heading h2 {
    margin: 5px 0 5px;
    font-size: 1.2rem;
}

.live-preview-heading p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
}

.preview-local-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #166534;
    font-size: .8rem;
    font-weight: 800;
    white-space: nowrap;
}

.live-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.preview-pane {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.preview-pane-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--line);
}

.preview-pane-heading span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
    text-align: right;
}

.preview-stage {
    min-height: 328px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background-color: #f8fafc;
    background-image:
        linear-gradient(45deg, #eef2f7 25%, transparent 25%),
        linear-gradient(-45deg, #eef2f7 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eef2f7 75%),
        linear-gradient(-45deg, transparent 75%, #eef2f7 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.preview-stage > img[data-preview-original-image] {
    display: block;
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

.preview-output-frame {
    flex: 0 0 auto;
    min-width: 36px;
    min-height: 36px;
    max-width: 100%;
    max-height: 300px;
    overflow: hidden;
    border: 2px solid rgba(37, 99, 235, .45);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(37, 99, 235, .12);
    transition: width .14s ease, height .14s ease;
}

.preview-output-frame[hidden] {
    display: none;
}

.preview-output-frame img {
    display: block;
}

/* Honor the HTML hidden state even when component display rules are present. */
.preview-output-frame img[hidden],
.preview-output-frame canvas[hidden] {
    display: none !important;
}

.preview-empty-state {
    max-width: 270px;
    padding: 18px;
    color: var(--muted);
    text-align: center;
    line-height: 1.5;
    font-size: .9rem;
}

.preview-empty-state[hidden] {
    display: none;
}

.preview-scale-note {
    display: block;
    padding: 0 15px 14px;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.4;
}

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

.preview-info-grid > div {
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255,255,255,.9);
}

.preview-info-grid span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 700;
}

.preview-info-grid strong {
    font-size: .92rem;
    overflow-wrap: anywhere;
}

.preview-warning {
    padding: 11px 13px;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    background: #fff7ed;
    color: #9a3412;
    font-size: .88rem;
    font-weight: 650;
}

.preview-warning[hidden] {
    display: none;
}

@media (max-width: 850px) {
    .live-preview-grid { grid-template-columns: 1fr; }
    .preview-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .image-live-preview { padding: 16px; }
    .preview-info-grid { grid-template-columns: 1fr; }
    .preview-stage { min-height: 260px; }
    .preview-stage > img[data-preview-original-image],
    .preview-output-frame { max-height: 232px; }
}


/* Image Resizer: precise custom crop */
.custom-crop-controls {
    display: grid;
    gap: 18px;
    padding: 20px;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: #f8fbff;
}

.custom-crop-controls[hidden] {
    display: none;
}

.custom-crop-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.custom-crop-heading h2 {
    margin: 5px 0 5px;
    font-size: 1.12rem;
}

.custom-crop-heading p {
    margin: 0;
    max-width: 720px;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.5;
}

.crop-origin-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

.crop-coordinate-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.crop-presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.crop-presets button {
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.crop-presets button:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}

.crop-presets button:active {
    transform: translateY(1px);
}

.option-card.is-disabled {
    opacity: .56;
    cursor: not-allowed;
}

.preview-original-stage {
    position: relative;
}

.crop-selection {
    position: absolute;
    z-index: 5;
    min-width: 10px;
    min-height: 10px;
    border: 2px solid #2563eb;
    border-radius: 5px;
    background: rgba(37, 99, 235, .12);
    box-shadow:
        0 0 0 9999px rgba(15, 23, 42, .33),
        inset 0 0 0 1px rgba(255, 255, 255, .6);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.crop-selection[hidden] {
    display: none;
}

.crop-selection.is-dragging {
    cursor: grabbing;
}

.crop-selection:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .28);
    outline-offset: 3px;
}

.crop-selection > span {
    position: absolute;
    left: 6px;
    top: 6px;
    max-width: calc(100% - 12px);
    padding: 4px 7px;
    border-radius: 6px;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.preview-output-frame canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.preview-output-frame canvas[hidden] {
    display: none;
}

@media (max-width: 700px) {
    .crop-coordinate-grid {
        grid-template-columns: 1fr;
    }

    .crop-presets {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .crop-presets {
        grid-template-columns: 1fr;
    }
}

/* Image Compressor */
.compressor-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.field-group {
    display: grid;
    gap: 7px;
}

.field-group label {
    font-weight: 750;
}

.field-group select,
.field-group input {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    font: inherit;
}

.field-group p {
    margin: 0;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.45;
}

.field-group [data-compression-custom]:disabled {
    background: #f8fafc;
    color: #94a3b8;
}

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

.compressor-facts > div {
    display: grid;
    gap: 4px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #f8fafc;
}

.compressor-facts span,
.result-note {
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.45;
}

.result-note {
    margin: 14px 0 0;
}

@media (max-width: 700px) {
    .compressor-settings-grid,
    .compressor-facts {
        grid-template-columns: 1fr;
    }
}

/* Standalone Image Cropper */
.cropper-toolbar-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
}
.cropper-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-self: start;
    margin-top: 31px;
}
.secondary-button {
    min-height: 44px;
    padding: 10px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}
.secondary-button:hover { background: #f8fafc; border-color: #93c5fd; }
.cropper-position-panel { margin-top: 2px; }
.cropper-selection { overflow: visible; }
.crop-handle {
    position: absolute;
    z-index: 7;
    width: 12px;
    height: 12px;
    border: 2px solid #2563eb;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .22);
}
.crop-handle.nw { left: -7px; top: -7px; cursor: nwse-resize; }
.crop-handle.n { left: 50%; top: -7px; transform: translateX(-50%); cursor: ns-resize; }
.crop-handle.ne { right: -7px; top: -7px; cursor: nesw-resize; }
.crop-handle.e { right: -7px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.crop-handle.se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.crop-handle.s { left: 50%; bottom: -7px; transform: translateX(-50%); cursor: ns-resize; }
.crop-handle.sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.crop-handle.w { left: -7px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

/* Keep the standalone cropper preview bounded and preserve the source aspect ratio. */
.cropper-live-preview .live-preview-grid {
    align-items: stretch;
}

.cropper-live-preview .preview-pane {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

.cropper-live-preview .preview-stage {
    flex: 1 1 auto;
    min-height: 340px;
    height: 340px;
    max-height: 340px;
}

.cropper-live-preview .preview-original-stage > img[data-cropper-original-image] {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 312px;
    object-fit: contain;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

.cropper-live-preview [data-cropper-output-stage] {
    min-height: 340px;
    height: 340px;
    max-height: 340px;
}

.cropper-live-preview .preview-output-frame {
    max-height: 312px;
}
.cropper-live-preview .preview-output-frame canvas {
    display: block;
    width: 100%;
    height: 100%;
}
@media (max-width: 700px) {
    .cropper-toolbar-grid { grid-template-columns: 1fr; }
    .cropper-actions { width: 100%; margin-top: 0; }
    .cropper-actions .secondary-button { flex: 1 1 0; }
    .cropper-live-preview .preview-stage,
    .cropper-live-preview [data-cropper-output-stage] {
        min-height: 280px;
        height: 280px;
        max-height: 280px;
    }
    .cropper-live-preview .preview-original-stage > img[data-cropper-original-image],
    .cropper-live-preview .preview-output-frame {
        max-height: 252px;
    }
}

/* User dashboard */
.dashboard-hero { max-width: 840px; padding-bottom: 42px; }
.dashboard-section { margin-bottom: 42px; }
.dashboard-section-heading { align-items: flex-end; }
.dashboard-section-heading h2 { margin: 7px 0 4px; font-size: clamp(1.55rem, 3vw, 2rem); }
.dashboard-section-heading p { margin: 6px 0 0; max-width: 820px; color: var(--muted); }
.dashboard-stats-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.dashboard-stat { min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; }
.dashboard-stat > span { color: var(--muted); font-weight: 700; font-size: .88rem; }
.dashboard-stat > strong { display: block; margin: 8px 0; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.1; letter-spacing: -.04em; }
.dashboard-stat > small { color: var(--muted); line-height: 1.4; }
.dashboard-stat-highlight { border-color: #bbf7d0; background: #f0fdf4; }
.dashboard-table-card { padding: 0; overflow: hidden; }
.table-scroll { overflow-x: auto; }
.dashboard-table { width: 100%; border-collapse: collapse; min-width: 880px; }
.dashboard-table th, .dashboard-table td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dashboard-table th { background: #f8fafc; color: #475569; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.dashboard-table tbody tr:last-child td { border-bottom: 0; }
.dashboard-table tbody tr:hover { background: #fbfdff; }
.dashboard-tool-link { color: var(--primary); font-weight: 800; text-decoration: none; white-space: nowrap; }
.dashboard-tool-link:hover { text-decoration: underline; }
.dashboard-file-name { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-date { white-space: nowrap; color: var(--muted); }
.status-badge { display: inline-flex; align-items: center; min-height: 27px; padding: 3px 9px; border-radius: 999px; font-size: .78rem; font-weight: 800; }
.status-completed { color: #166534; background: #dcfce7; }
.status-failed { color: #991b1b; background: #fee2e2; }
.status-processing, .status-pending, .status-warning { color: #92400e; background: #fef3c7; }
.dashboard-empty-state { padding: 36px; text-align: center; }
.dashboard-empty-state h3 { margin: 0 0 8px; }
.dashboard-empty-state p { margin: 0 auto 18px; max-width: 520px; color: var(--muted); }
.dashboard-empty-state .primary-button { margin-top: 0; }
.dashboard-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dashboard-tool-card { display: grid; gap: 20px; }
.dashboard-tool-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.dashboard-tool-card-heading h3 { margin: 0; }
.dashboard-tool-card-heading a { color: var(--primary); font-weight: 800; text-decoration: none; white-space: nowrap; }
.dashboard-tool-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dashboard-tool-metrics > div, .account-details-grid > div { padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.dashboard-tool-metrics span, .account-details-grid span { display: block; color: var(--muted); font-size: .78rem; font-weight: 700; margin-bottom: 4px; }
.dashboard-tool-metrics strong, .account-details-grid strong { overflow-wrap: anywhere; }
.account-card { display: grid; gap: 20px; }
.account-details-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.account-signout-form { display: flex; justify-content: flex-end; }
.secondary-button { border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #334155; padding: 11px 16px; font: inherit; font-weight: 800; cursor: pointer; }
.secondary-button:hover { background: #f8fafc; border-color: #94a3b8; }
@media (max-width: 1000px) { .dashboard-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .account-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .dashboard-stats-grid, .dashboard-tool-grid { grid-template-columns: 1fr; } .dashboard-tool-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .account-details-grid { grid-template-columns: 1fr; } .account-signout-form .secondary-button { width: 100%; } }
@media (max-width: 440px) { .dashboard-tool-metrics { grid-template-columns: 1fr; } }

/* Admin dashboard */
.admin-dashboard-hero { max-width: 900px; }
.admin-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.admin-stat-warning { border-color: #fed7aa; background: #fff7ed; }
.admin-secondary-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.admin-secondary-stats > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 17px; }
.admin-secondary-stats span { color: var(--muted); font-size: .84rem; font-weight: 700; }
.admin-secondary-stats strong { font-size: 1.12rem; }
.admin-activity-table { min-width: 1160px; }
.admin-users-table { min-width: 920px; }
.admin-user-label { display: inline-flex; align-items: center; min-height: 27px; padding: 3px 9px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: .78rem; font-weight: 800; }
.admin-user-label.is-guest { background: #f1f5f9; color: #64748b; }
.admin-user-email { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.admin-tool-card { display: grid; gap: 18px; }
.admin-tool-card .dashboard-tool-card-heading > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-tool-state { display: inline-flex; padding: 3px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.admin-tool-state.is-active { color: #166534; background: #dcfce7; }
.admin-tool-state.is-inactive { color: #991b1b; background: #fee2e2; }
.admin-tool-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.admin-tool-metrics > div { padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.admin-tool-metrics span { display: block; margin-bottom: 4px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.admin-tool-metrics strong { overflow-wrap: anywhere; }
@media (max-width: 1000px) {
    .admin-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-secondary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .admin-stats-grid,
    .admin-tool-grid { grid-template-columns: 1fr; }
    .admin-secondary-stats { grid-template-columns: 1fr; }
    .admin-tool-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
    .admin-tool-metrics { grid-template-columns: 1fr; }
}

/* Admin user management */
.secondary-button.button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.admin-users-hero, .admin-user-detail-hero { max-width: 900px; }
.danger-button { margin-top: 12px; border: 0; border-radius: 10px; background: #dc2626; color: #fff; padding: 13px 18px; font: inherit; font-weight: 800; cursor: pointer; }
.danger-button:hover { background: #b91c1c; }
.admin-user-filters { display: grid; grid-template-columns: minmax(260px, 2fr) minmax(150px, .7fr) minmax(160px, .8fr) auto; gap: 14px; align-items: end; margin-bottom: 18px; }
.admin-user-filters label { display: block; margin: 0 0 6px; }
.admin-user-filters select, .admin-action-card select { width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; padding: 12px 14px; font: inherit; background: #fff; }
.admin-filter-actions { display: flex; gap: 8px; align-items: center; }
.admin-filter-actions .primary-button { margin-top: 0; white-space: nowrap; }
.admin-user-management-table { min-width: 1040px; }
.admin-role-badge { display: inline-flex; padding: 3px 9px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: .78rem; font-weight: 800; }
.admin-role-badge.is-admin { background: #eef2ff; color: #4338ca; }
.admin-pagination { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 18px; }
.admin-pagination span { color: var(--muted); font-weight: 700; }
.admin-detail-nav { display: flex; gap: 10px; justify-content: space-between; margin-bottom: 28px; }
.admin-user-stats-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.admin-account-details-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-detail-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.admin-detail-two-column .dashboard-section { min-width: 0; }
.admin-session-list, .admin-audit-list { display: grid; gap: 0; padding-top: 8px; padding-bottom: 8px; }
.admin-session-item, .admin-audit-item { padding: 14px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.admin-session-item:last-child, .admin-audit-item:last-child { border-bottom: 0; }
.admin-session-item > div, .admin-audit-item > div { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.admin-session-item span, .admin-audit-item span, .admin-session-item small, .admin-audit-item small { color: var(--muted); overflow-wrap: anywhere; }
.admin-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.admin-action-card { display: flex; flex-direction: column; gap: 10px; }
.admin-action-card h3 { margin: 0; }
.admin-action-card p { margin: 0 0 8px; }
.admin-action-card .primary-button, .admin-action-card .danger-button { width: 100%; margin-top: auto; }
.admin-action-lock { margin-top: auto; padding: 12px 14px; border: 1px solid #dbeafe; border-radius: 10px; background: #eff6ff; color: #1e40af; font-weight: 700; }
@media (max-width: 900px) { .admin-user-filters { grid-template-columns: 1fr 1fr; } .admin-filter-search, .admin-filter-actions { grid-column: 1 / -1; } .admin-user-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-account-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .admin-user-filters, .admin-detail-two-column, .admin-action-grid, .admin-account-details-grid { grid-template-columns: 1fr; } .admin-filter-search, .admin-filter-actions { grid-column: auto; } .admin-filter-actions { flex-direction: column; align-items: stretch; } .admin-detail-nav { flex-direction: column; } .admin-user-stats-grid { grid-template-columns: 1fr; } .admin-session-item > div, .admin-audit-item > div { flex-direction: column; gap: 2px; } }

/* Admin tool management */
.admin-tools-hero, .admin-tool-detail-hero { max-width: 920px; }
.admin-tool-management-table { min-width: 1120px; }
.admin-tool-details-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-tool-detail-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-tool-settings-form { display: grid; gap: 20px; }
.admin-tool-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.admin-tool-settings-form label { display: block; margin: 0 0 7px; font-weight: 800; }
.admin-tool-settings-form input,
.admin-tool-settings-form select,
.admin-tool-settings-form textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; padding: 12px 14px; font: inherit; color: var(--text); }
.admin-tool-settings-form textarea { resize: vertical; min-height: 110px; }
.admin-tool-settings-form small { display: block; margin-top: 6px; color: var(--muted); line-height: 1.4; }
.admin-tool-readonly-field { display: grid; align-content: start; }
.admin-tool-readonly-field code { display: block; min-height: 46px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; overflow-wrap: anywhere; }
.admin-tool-description-field { grid-column: 1 / -1; }
.admin-tool-settings-note { margin-top: 12px; padding: 13px 15px; border: 1px solid #bbf7d0; border-radius: 10px; background: #f0fdf4; color: #166534; font-weight: 700; line-height: 1.5; }
.admin-tool-settings-note.is-warning { border-color: #fed7aa; background: #fff7ed; color: #9a3412; }
.tool-unavailable-card { max-width: 720px; display: grid; gap: 14px; }
.tool-unavailable-card h2, .tool-unavailable-card p { margin: 0; }
.tool-unavailable-card p { color: var(--muted); }
.tool-unavailable-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tool-unavailable-actions .primary-button { margin-top: 0; }
@media (max-width: 900px) {
    .admin-tool-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-tool-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .admin-tool-form-grid,
    .admin-tool-details-grid,
    .admin-tool-detail-stats { grid-template-columns: 1fr; }
    .admin-tool-description-field { grid-column: auto; }
    .tool-unavailable-actions { flex-direction: column; }
}

/* File retention + recent downloads */
.dashboard-download-table { min-width: 980px; }
.status-expired { background: #f1f5f9; color: #64748b; }

/* General Site Settings */
.admin-settings-hero { max-width: 940px; }
.admin-settings-form { display: grid; gap: 8px; }
.admin-settings-card { display: grid; gap: 20px; }
.admin-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.admin-settings-wide { grid-column: 1 / -1; }
.admin-settings-form label { display: block; margin-bottom: 7px; font-weight: 800; }
.admin-settings-form input:not([type="checkbox"]),
.admin-settings-form select,
.admin-settings-form textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; padding: 12px 14px; font: inherit; color: var(--text); }
.admin-settings-form textarea { resize: vertical; }
.admin-settings-form small { display: block; margin-top: 6px; color: var(--muted); line-height: 1.45; }
.admin-settings-toggle { display: flex !important; align-items: flex-start; gap: 12px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; cursor: pointer; }
.admin-settings-toggle input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; }
.admin-settings-toggle strong, .admin-settings-toggle small { display: block; }
.admin-settings-toggle small { margin-top: 4px; }
.admin-settings-field { display: grid; gap: 0; }
.admin-settings-savebar { display: flex; align-items: center; justify-content: space-between; gap: 22px; position: sticky; bottom: 16px; z-index: 5; box-shadow: 0 16px 40px rgba(15, 23, 42, .12); }
.admin-settings-savebar div { display: grid; gap: 4px; }
.admin-settings-savebar span { color: var(--muted); font-size: .9rem; }
.admin-settings-savebar .primary-button { margin: 0; min-width: 180px; }
.admin-heading-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.maintenance-panel { min-height: 60vh; }
.maintenance-card { text-align: center; }
.maintenance-card .button-link { margin-top: 18px; }
@media (max-width: 760px) {
    .admin-settings-grid { grid-template-columns: 1fr; }
    .admin-settings-wide { grid-column: auto; }
    .admin-settings-savebar { position: static; flex-direction: column; align-items: stretch; }
    .admin-settings-savebar .primary-button { width: 100%; }
}

.admin-branding-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.admin-branding-item { display:grid; gap:10px; align-content:start; }
.branding-preview { min-height:92px; border:1px dashed #cbd5e1; border-radius:12px; background:#f8fafc; display:flex; align-items:center; justify-content:center; padding:14px; }
.branding-logo-preview img { max-width:260px; max-height:72px; object-fit:contain; }
.branding-favicon-preview img { width:64px; height:64px; object-fit:contain; }
.compact-toggle { margin-top:4px; }
@media (max-width:700px){ .admin-branding-grid{grid-template-columns:1fr;} .brand-logo{max-width:140px;max-height:36px;} }

/* SEO management */
.admin-seo-entity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.admin-seo-entity-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.admin-seo-entity-card h3 {
    margin: 0 0 .45rem;
}

.admin-seo-entity-card p {
    margin: 0 0 .7rem;
}

.admin-seo-entity-card > a {
    flex: 0 0 auto;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 760px) {
    .admin-seo-entity-grid {
        grid-template-columns: 1fr;
    }

    .admin-seo-entity-card {
        flex-direction: column;
    }
}

/* Content / Page Management */
.admin-pages-table { min-width: 900px; }
.admin-readonly-code { display:block; min-height:46px; padding:13px 14px; border:1px solid var(--line); border-radius:10px; background:#f8fafc; overflow-wrap:anywhere; }
.content-page-hero { max-width: 880px; }
.content-page-card { max-width: 920px; }
.managed-content { color: var(--text); line-height: 1.75; font-size: 1.02rem; }
.managed-content > :first-child { margin-top: 0; }
.managed-content > :last-child { margin-bottom: 0; }
.managed-content h1,.managed-content h2,.managed-content h3,.managed-content h4 { line-height:1.2; margin:1.8em 0 .65em; }
.managed-content p,.managed-content ul,.managed-content ol,.managed-content blockquote { margin: 0 0 1.2em; }
.managed-content ul,.managed-content ol { padding-left: 1.5rem; }
.managed-content blockquote { border-left: 4px solid #bfdbfe; padding: .8rem 1rem; background:#f8fafc; color:var(--muted); }
.managed-content code { background:#f1f5f9; border-radius:5px; padding:.12em .35em; }
.managed-content hr { border:0; border-top:1px solid var(--line); margin:2rem 0; }
.footer-content { text-align: center; }
.footer-page-nav { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:0; }
.footer-copyright { margin-top: 10px; }
.footer-page-nav a { color:inherit; text-decoration:none; }
.footer-page-nav a:hover { text-decoration:underline; }

/* System information */
.system-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.system-info-card { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.system-info-card > span { color: var(--muted); font-weight: 700; font-size: .82rem; text-transform: capitalize; }
.system-info-card > strong { overflow-wrap: anywhere; font-size: 1.05rem; }
.system-info-card > small { color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.system-info-wide { grid-column: span 2; }
.system-info-table-card { margin-top: 16px; }
.system-ok { color: #15803d; }
.system-bad { color: #b91c1c; }
.cleanup-status-card .system-info-grid { margin-bottom: 4px; }
.cleanup-status-card code, .system-info-table-card code { overflow-wrap: anywhere; }
@media (max-width: 1000px) { .system-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .system-info-grid { grid-template-columns: 1fr; } .system-info-wide { grid-column: auto; } }

/* Public category landing pages */
.homepage-categories { margin-bottom: 34px; }
.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.category-card { display: flex; min-height: 210px; flex-direction: column; justify-content: space-between; gap: 22px; }
.category-card h3 { margin: 0 0 9px; }
.category-card p { margin: 0; color: var(--muted); line-height: 1.6; }
.category-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.category-card-footer span { color: var(--muted); font-size: .88rem; font-weight: 700; }
.category-card-footer a, .tool-category-link { color: var(--primary); font-weight: 800; text-decoration: none; }
.category-card-footer a:hover, .tool-category-link:hover { text-decoration: underline; }
.tool-category-link { display: inline-flex; width: fit-content; margin: -4px 0 12px; font-size: .84rem; }
.category-hero { max-width: 900px; }
.category-page-nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 28px; }
.category-page-nav > span { color: var(--muted); font-weight: 700; }
.category-tool-grid { margin-top: 4px; }
.category-empty-state { max-width: 780px; }
@media (max-width: 900px) { .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .category-grid { grid-template-columns: 1fr; } .category-page-nav { align-items: stretch; flex-direction: column; } }
.admin-seo-card-actions { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:0 0 auto; }
.admin-seo-card-actions a { color:var(--primary); font-weight:800; text-decoration:none; white-space:nowrap; }
.admin-seo-card-actions a:hover { text-decoration:underline; }
@media (max-width:760px){ .admin-seo-card-actions{align-items:flex-start;} }

/* Privacy consent */
.privacy-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(255,255,255,.98);
    border-top: 1px solid var(--border, #dbe3ef);
    box-shadow: 0 -10px 30px rgba(15,23,42,.08);
}
.privacy-consent-inner {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 16px;
}
.privacy-consent-inner p { margin: 4px 0 0; color: var(--muted, #64748b); }
.privacy-consent-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; justify-content: center; }
.privacy-consent-options { display: flex; gap: 14px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.privacy-consent-form label { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.privacy-consent-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
.privacy-consent-actions .primary-button,
.privacy-consent-actions .secondary-button { white-space: nowrap; }
.privacy-consent-actions .primary-button { margin-top: 0; }
@media (max-width: 760px) {
    .privacy-consent-inner { align-items: stretch; flex-direction: column; gap: 12px; }
    .privacy-consent-form { align-items: flex-start; }
    .privacy-consent-options { justify-content: flex-start; }
    .privacy-consent-actions { justify-content: flex-start; flex-wrap: wrap; }
}
.privacy-preferences-card { max-width: 720px; margin: 0 auto; }
.privacy-preferences-card .admin-settings-toggle { margin-bottom: 12px; }
.privacy-preferences-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }


/* Image Rotate / Flip */
.rotate-flip-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:20px 0; }
.rotate-control-group { margin:0; padding:16px; border:1px solid var(--line); border-radius:12px; min-width:0; }
.rotate-control-group legend { padding:0 7px; font-weight:800; }
.rotate-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.rotate-choice-grid label { display:flex; align-items:center; gap:9px; min-height:46px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:#f8fafc; font-weight:700; cursor:pointer; }
.rotate-choice-grid input[type="radio"], .rotate-choice-grid input[type="checkbox"] { width:auto; min-width:0; margin:0; padding:0; flex:0 0 auto; accent-color:#2563eb; }
.rotate-choice-grid label span { min-width:0; line-height:1.25; }
.rotate-flip-choice-grid { grid-template-columns:1fr; }
.field-help { margin:10px 0 0; color:var(--muted); font-size:.9rem; }
.rotate-live-preview { margin:20px 0; padding:18px; border:1px solid #bfdbfe; border-radius:14px; background:#f8fbff; }
.rotate-preview-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.rotate-preview-heading h2 { margin:5px 0 0; font-size:1.15rem; }
.rotate-preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.rotate-preview-grid figure { margin:0; min-width:0; border:1px solid var(--line); border-radius:11px; overflow:hidden; background:#fff; }
.rotate-preview-grid figcaption { display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); font-weight:800; font-size:.9rem; }
.rotate-preview-grid figcaption span { color:var(--muted); font-weight:700; }
.rotate-preview-stage { height:300px; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:12px; background-image:linear-gradient(45deg,#eef2f7 25%,transparent 25%),linear-gradient(-45deg,#eef2f7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef2f7 75%),linear-gradient(-45deg,transparent 75%,#eef2f7 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; }
.rotate-preview-stage img { display:block; max-width:100%; max-height:100%; object-fit:contain; transform-origin:center center; }
.rotate-preview-note { margin:12px 0 0; color:var(--muted); font-size:.9rem; }
.preview-local-badge { padding:5px 8px; border-radius:999px; background:#dcfce7; color:#166534; font-size:.75rem; font-weight:800; white-space:nowrap; }
@media (max-width:700px){ .rotate-flip-controls,.rotate-preview-grid{grid-template-columns:1fr;} .rotate-preview-stage{height:250px;} }


/* General Image Format Converter */
.format-converter-settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.format-color-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}
.format-color-row input[type="color"] {
    width: 58px;
    min-width: 58px;
    height: 42px;
    padding: 3px;
    cursor: pointer;
}
@media (max-width: 720px) {
    .format-converter-settings {
        grid-template-columns: 1fr;
    }
}


/* Thumbnail Generator */
.thumbnail-preset-section { display: grid; gap: 10px; }
.field-label-row { display:flex; justify-content:space-between; gap:12px; align-items:end; }
.field-label-row span { color: var(--muted); font-size: 0.9rem; }
.thumbnail-presets { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.thumbnail-presets button { border:1px solid var(--border); background:var(--surface-soft); border-radius:9px; padding:10px 8px; font:inherit; font-weight:700; cursor:pointer; color:var(--text); }
.thumbnail-presets button small { display:block; margin-top:3px; color:var(--muted); font-weight:500; }
.thumbnail-presets button:hover, .thumbnail-presets button.is-selected { border-color:var(--primary); background:#eef4ff; color:var(--primary); }
.thumbnail-settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.thumbnail-option-card { min-height:100%; }
.thumbnail-live-preview { border:1px solid #93c5fd; border-radius:12px; padding:14px; background:#f8fbff; display:grid; gap:14px; }
.thumbnail-preview-stage { min-height:210px; display:flex; align-items:center; justify-content:center; padding:12px; background-image:linear-gradient(45deg,#eef2f7 25%,transparent 25%),linear-gradient(-45deg,#eef2f7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef2f7 75%),linear-gradient(-45deg,transparent 75%,#eef2f7 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; overflow:hidden; }
.thumbnail-preview-stage > img { max-width:100%; max-height:260px; object-fit:contain; display:block; }
.thumbnail-preview-frame { width:min(100%, 360px); max-height:260px; overflow:hidden; background:white; border:1px solid #bfdbfe; display:flex; align-items:center; justify-content:center; }
.thumbnail-preview-frame img { width:100%; height:100%; display:block; }
@media (max-width:900px) { .thumbnail-presets { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:720px) { .thumbnail-settings-grid { grid-template-columns:1fr; } .thumbnail-presets { grid-template-columns:repeat(2,minmax(0,1fr)); } .field-label-row { align-items:start; flex-direction:column; } }


/* Image Watermark */
.watermark-mode-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.watermark-mode-row .option-card { min-height:78px; }
.watermark-mode-row input[type="radio"] { width:auto; min-width:auto; flex:0 0 auto; }
.watermark-settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.watermark-positions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.watermark-positions label { position:relative; cursor:pointer; }
.watermark-positions input { position:absolute; opacity:0; pointer-events:none; }
.watermark-positions span { display:block; padding:9px 8px; text-align:center; border:1px solid var(--border); border-radius:8px; background:#fff; font-weight:700; font-size:.82rem; }
.watermark-positions input:checked + span { border-color:var(--primary); background:#eff6ff; color:var(--primary); }
.watermark-preview-stage { position:relative; min-height:280px; max-height:520px; overflow:hidden; border:1px solid var(--border); border-radius:10px; background-image:linear-gradient(45deg,#eef2f7 25%,transparent 25%),linear-gradient(-45deg,#eef2f7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef2f7 75%),linear-gradient(-45deg,transparent 75%,#eef2f7 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; }
.watermark-preview-stage > img[data-watermark-base-image] { display:block; width:100%; height:auto; max-height:520px; object-fit:contain; }
.watermark-preview-overlay, .watermark-preview-logo { position:absolute; z-index:2; max-width:80%; max-height:80%; }
.watermark-preview-overlay { white-space:nowrap; font-family:"DejaVu Sans",Arial,sans-serif; font-weight:400; text-shadow:0 1px 3px rgba(0,0,0,.45); line-height:1; }
.watermark-preview-logo { height:auto; object-fit:contain; }
@media(max-width:720px){ .watermark-mode-row,.watermark-settings-grid{grid-template-columns:1fr;} .watermark-positions{grid-template-columns:repeat(3,1fr);} }


/* Image to ICO */
.ico-builder{padding:18px;margin-bottom:20px}.ico-workspace-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:18px;align-items:stretch}.ico-step-card{border:1px solid var(--border,#d8e1ed);border-radius:14px;padding:18px;background:#fff;min-width:0}.ico-step-heading{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}.ico-step-heading>span{width:36px;height:36px;display:grid;place-items:center;border-radius:999px;background:#2866eb;color:#fff;font-weight:800;flex:0 0 auto}.ico-step-heading h2{margin:2px 0 5px;font-size:1.08rem}.ico-step-heading p{margin:0;color:var(--muted,#6b7c99)}.ico-source-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:320px;max-height:560px;margin-top:16px;border-radius:10px;overflow:hidden;background-image:linear-gradient(45deg,#eef2f7 25%,transparent 25%),linear-gradient(-45deg,#eef2f7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef2f7 75%),linear-gradient(-45deg,transparent 75%,#eef2f7 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}.ico-source-stage img{display:block;max-width:100%;max-height:560px;width:auto;height:auto}.ico-selection{touch-action:none}.ico-coordinate-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px;margin-top:16px;align-items:start}.ico-coordinate-grid>.field-group{min-width:0}.ico-position-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ico-position-field{min-width:0}.ico-position-field>label{display:block;margin-bottom:7px;font-size:.84rem;font-weight:700;color:var(--text,#172033)}.ico-coordinate-group>label{display:block;margin-bottom:7px}.ico-coordinate-grid .number-with-unit input{width:100%;min-width:0}.ico-center-button{width:100%;margin-top:16px}.ico-preview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.ico-preview-item{appearance:none;border:1px solid #d7e1ee;background:#fff;border-radius:10px;padding:9px;display:grid;gap:8px;place-items:center;cursor:pointer;transition:.18s ease;min-width:0}.ico-preview-item:hover{border-color:#7fa7ff}.ico-preview-item.is-disabled-preview{opacity:.35}.ico-preview-item.is-expanded{position:relative;z-index:5;transform:scale(1.55);box-shadow:0 16px 34px rgba(17,37,70,.18)}.ico-preview-canvas-wrap{width:72px;height:72px;display:grid;place-items:center;border-radius:8px;background-image:linear-gradient(45deg,#eef2f7 25%,transparent 25%),linear-gradient(-45deg,#eef2f7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef2f7 75%),linear-gradient(-45deg,transparent 75%,#eef2f7 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0;overflow:hidden}.ico-preview-canvas-wrap canvas{max-width:64px;max-height:64px;image-rendering:auto}.ico-size-selector{border-top:1px solid #e1e8f1;margin-top:16px;padding-top:16px}.ico-size-selector-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.ico-size-selector-heading h3{margin:0;font-size:1rem}.text-button{background:none;border:0;color:#175ff3;font-weight:700;cursor:pointer}.ico-size-checkbox-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}.ico-size-checkbox-grid label{display:flex;align-items:center;gap:7px;font-weight:650}.ico-size-checkbox-grid input{width:auto}.ico-preview-panel .resize-note{margin-top:16px}.ico-preview-panel .primary-button{width:100%;margin-top:14px}.ico-info-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}.ico-info-grid .card{height:100%}@media(max-width:900px){.ico-workspace-grid{grid-template-columns:1fr}.ico-preview-grid{grid-template-columns:repeat(4,minmax(70px,1fr))}}@media(max-width:620px){.ico-coordinate-grid,.ico-position-fields{grid-template-columns:1fr}.ico-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ico-size-selector-heading{align-items:flex-start;flex-direction:column}.ico-size-checkbox-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ico-info-grid{grid-template-columns:1fr}}



/* Image Color & Background Editor */
.color-adjustment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.range-field label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.range-field output {
    min-width: 52px;
    padding: 5px 9px;
    border: 1px solid var(--border, #d9e2ef);
    border-radius: 8px;
    text-align: center;
    background: var(--surface-soft, #f7f9fc);
    font-weight: 700;
}
.range-field input[type="range"] { width: 100%; }
.color-grayscale-card { min-height: 82px; }
.color-toolbar { display: flex; justify-content: flex-end; }
.color-background-section { margin-top: 2px; }
.color-background-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.color-background-color { margin-top: 14px; max-width: 420px; }
.color-live-preview { margin-top: 4px; }
.color-preview-stage {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-image: linear-gradient(45deg,#e8edf4 25%,transparent 25%),linear-gradient(-45deg,#e8edf4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8edf4 75%),linear-gradient(-45deg,transparent 75%,#e8edf4 75%);
    background-size: 20px 20px;
    background-position: 0 0,0 10px,10px -10px,-10px 0;
}
.color-preview-stage img {
    display: block;
    max-width: 100%;
    max-height: 360px;
    object-fit: contain;
}
@media (max-width: 720px) {
    .color-adjustment-grid, .color-background-options { grid-template-columns: 1fr; }
    .color-toolbar { justify-content: stretch; }
    .color-toolbar .secondary-button { width: 100%; }
}

/* Merge PDF */
.pdf-merge-panel { margin-bottom: 20px; }
.pdf-order-section { margin-top: 4px; padding: 16px; border: 1px solid var(--border, #d9e2ef); border-radius: 12px; background: #f8fafc; }
.pdf-order-section .field-label-row > div { display: grid; gap: 4px; }
.pdf-clear-button { flex: 0 0 auto; }
.pdf-file-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; counter-reset: pdf-order; }
.pdf-file-item { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 11px; border: 1px solid #d8e2ef; border-radius: 10px; background: #fff; cursor: grab; }
.pdf-file-item.is-dragging { opacity: .5; cursor: grabbing; }
.pdf-file-position { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: #eef4ff; color: #175ff3; font-weight: 800; }
.pdf-file-copy { min-width: 0; display: grid; gap: 3px; }
.pdf-file-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-file-copy small { color: var(--muted, #6b7c99); }
.pdf-file-actions { display: flex; gap: 6px; }
.pdf-order-button { width: 34px; height: 34px; padding: 0; border: 1px solid #d8e2ef; border-radius: 8px; background: #fff; color: #17335d; font-weight: 900; cursor: pointer; }
.pdf-order-button:disabled { opacity: .35; cursor: not-allowed; }
.pdf-merge-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.pdf-merge-facts > div { padding: 13px; border: 1px solid var(--border,#d9e2ef); border-radius: 10px; display: grid; gap: 4px; }
.pdf-merge-facts span { color: var(--muted,#6b7c99); font-size: .88rem; }
.pdf-info-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
@media (max-width: 760px) { .pdf-merge-facts,.pdf-info-grid { grid-template-columns: 1fr; } .pdf-file-item { grid-template-columns: 32px minmax(0,1fr); } .pdf-file-actions { grid-column: 2; justify-content: flex-end; } .pdf-order-section .field-label-row { align-items: stretch; } }

/* Split PDF / Extract Pages */
.pdf-split-panel { margin-bottom: 20px; }
.pdf-split-controls { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.pdf-split-controls .field-group { display: grid; gap: 7px; }
.pdf-split-controls .field-group input[type="text"] { width: 100%; }
.pdf-split-controls small { color: var(--muted, #6b7c99); line-height: 1.45; }
.pdf-output-fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 9px; }
.pdf-output-fieldset legend { margin-bottom: 7px; font-weight: 800; }
.pdf-output-option { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; align-items: start; padding: 12px 13px; border: 1px solid var(--border, #d9e2ef); border-radius: 10px; background: #f8fafc; cursor: pointer; }
.pdf-output-option input { margin-top: 3px; }
.pdf-output-option span { display: grid; gap: 3px; }
.pdf-output-option small { color: var(--muted, #6b7c99); }
@media (max-width: 760px) { .pdf-split-controls { grid-template-columns: 1fr; } }

/* Organize PDF */
.pdf-organize-panel { margin-bottom: 20px; }
.pdf-organizer-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border, #d9e2ef); }
.pdf-organizer-heading { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.pdf-organizer-heading h2 { margin:4px 0 5px; }
.pdf-organizer-heading p { margin:0; color:var(--muted,#6b7c99); }
.pdf-organizer-summary { flex:0 0 auto; padding:8px 11px; border-radius:999px; background:#eef4ff; color:#175ff3; font-weight:800; font-size:.86rem; }
.pdf-page-organizer { list-style:none; margin:16px 0 2px; padding:0; display:grid; gap:10px; }
.pdf-page-card { display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:14px; align-items:center; padding:13px; border:1px solid #d8e2ef; border-radius:11px; background:#fff; cursor:grab; transition:.16s ease; }
.pdf-page-card.is-dragging { opacity:.5; cursor:grabbing; }
.pdf-page-card.is-removed { background:#fff5f5; border-color:#f2c7c7; opacity:.68; }
.pdf-page-number { font-weight:850; color:#17335d; }
.pdf-page-meta { display:grid; gap:3px; min-width:0; }
.pdf-page-meta small,.pdf-page-meta span { color:var(--muted,#6b7c99); font-size:.82rem; }
.pdf-page-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.pdf-page-action { min-width:34px; height:34px; padding:0 9px; border:1px solid #d8e2ef; border-radius:8px; background:#fff; color:#17335d; font-weight:800; cursor:pointer; }
.pdf-page-action:hover { border-color:#8fb0f8; color:#175ff3; }
.pdf-page-action:disabled { opacity:.35; cursor:not-allowed; }
.pdf-page-delete { min-width:auto; color:#b42318; }
.pdf-page-card.is-removed .pdf-page-delete { color:#176b39; }
@media (max-width:760px) {
    .pdf-organizer-heading { flex-direction:column; }
    .pdf-page-card { grid-template-columns:1fr; }
    .pdf-page-actions { justify-content:flex-start; }
}


/* Images to PDF */
.pdf-images-panel { margin-bottom: 20px; }
.images-pdf-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; align-items: start; }
.images-pdf-margin { grid-column: 1 / -1; max-width: 360px; }
.images-pdf-margin small { color: var(--muted, #6b7c99); line-height: 1.45; }
@media (max-width: 760px) { .images-pdf-options { grid-template-columns: 1fr; } .images-pdf-margin { grid-column: auto; max-width: none; } }

/* JSON Formatter & Validator */
.json-tool-panel { display: grid; gap: 18px; }
.json-toolbar { display:flex; justify-content:space-between; gap:18px; align-items:flex-end; flex-wrap:nowrap; }
.json-toolbar-group { display:flex; gap:9px; align-items:center; flex-wrap:nowrap; }
.json-toolbar .primary-button { margin-top:0; }
.json-toolbar-options { margin-left:auto; flex:0 0 auto; align-items:flex-end; }
.json-indent-field { min-width:150px; gap:6px; }
.json-indent-field select { width:100%; }

.base64-variant-field { min-width:175px; gap:6px; }
.base64-variant-field select { width:100%; }
.base64-padding-option { min-width:145px; }
.json-inline-option { display:flex; align-items:center; gap:8px; min-height:42px; min-width:150px; white-space:nowrap; font-weight:700; color:var(--text); }
.json-info-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.json-editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.json-editor-pane { min-width:0; border:1px solid var(--border,#d9e2ef); border-radius:12px; overflow:hidden; background:#fff; }
.json-pane-heading { min-height:52px; padding:10px 12px; display:flex; justify-content:space-between; gap:12px; align-items:center; border-bottom:1px solid var(--border,#d9e2ef); background:#f8fafc; }
.json-pane-heading > div:first-child { display:grid; gap:2px; min-width:0; }
.json-pane-heading span { color:var(--muted,#6b7c99); font-size:.78rem; }
.json-output-actions { display:flex!important; grid-auto-flow:column; gap:10px!important; align-items:center; }
.json-textarea { display:block; width:100%; min-height:430px; margin:0; padding:15px 16px; border:0; resize:vertical; outline:none; background:#0f172a; color:#e2e8f0; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size:.9rem; line-height:1.58; tab-size:4; }
.json-textarea::placeholder { color:#8291a8; }
.json-textarea:focus { box-shadow:inset 0 0 0 2px #8fb0f8; }
.json-textarea[readonly] { background:#111827; }
.text-button { padding:0; border:0; background:transparent; color:#175ff3; font:inherit; font-weight:800; cursor:pointer; }
.text-button:disabled { color:#94a3b8; cursor:not-allowed; }
.json-status-card { padding:15px; border:1px solid var(--border,#d9e2ef); border-radius:12px; background:#f8fafc; display:grid; gap:14px; }
.json-status-copy { display:flex; gap:12px; align-items:flex-start; }
.json-status-copy > div { display:grid; gap:3px; }
.json-status-copy p { margin:0; color:var(--muted,#6b7c99); }
.json-status-badge { flex:0 0 auto; padding:5px 9px; border-radius:999px; font-size:.78rem; font-weight:850; }
.json-status-badge.is-neutral { background:#eef2f7; color:#51627c; }
.json-status-badge.is-success { background:#dcfce7; color:#176b39; }
.json-status-badge.is-error { background:#fee2e2; color:#b42318; }
.json-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.json-stats > div { display:grid; gap:3px; padding:10px 11px; border:1px solid #dbe4ef; border-radius:9px; background:#fff; }
.json-stats span { color:var(--muted,#6b7c99); font-size:.78rem; }
.json-tool-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.json-tool-facts > div { padding:13px; border:1px solid var(--border,#d9e2ef); border-radius:10px; display:grid; gap:4px; }
.json-tool-facts span { color:var(--muted,#6b7c99); font-size:.88rem; line-height:1.5; }
@media (max-width: 860px) {
    .json-editor-grid { grid-template-columns:1fr; }
    .json-toolbar { align-items:flex-start; flex-wrap:wrap; }
    .json-toolbar-group { flex-wrap:wrap; }
    .json-toolbar-options { margin-left:0; }
    .json-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .json-tool-facts,.json-info-grid { grid-template-columns:1fr; }
    .json-textarea { min-height:320px; }
}

/* Hash Generator */
.hash-toolbar-options { align-items:flex-end; }
.hash-algorithm-field { min-width:210px; gap:6px; }
.hash-algorithm-field select { width:100%; }
.hash-case-field { min-width:135px; gap:6px; }
.hash-case-field select { width:100%; }
.hash-output-textarea { word-break:break-all; }
@media (max-width: 860px) {
    .hash-algorithm-field,.hash-case-field { min-width:0; width:100%; }
}


/* HTML/CSS/JS Minify & Unminify */
.code-minify-options { align-items:flex-end; }
.code-language-field { min-width:210px; gap:6px; }
.code-language-field select { width:100%; }
.code-language-detection { display:inline-flex; width:fit-content; align-items:center; min-height:24px; padding:3px 8px; border-radius:999px; background:#eff6ff; color:#1d4ed8; font-size:.72rem; font-weight:800; white-space:nowrap; }
.json-pane-heading .code-language-detection { color:#1d4ed8; font-size:.72rem; }
.code-language-detection.is-uncertain { background:#f8fafc; color:#64748b; }
.json-pane-heading .code-language-detection.is-uncertain { color:#64748b; }
.code-language-detection[hidden] { display:none; }
.code-indent-field { min-width:130px; gap:6px; }
.code-indent-field select { width:100%; }
.code-comments-option { min-width:130px; }
@media (max-width: 860px) {
    .code-language-field,.code-indent-field { min-width:0; width:100%; }
    .code-comments-option { min-width:0; }
}

/* Advanced Password Generator */
.password-generator-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:14px; align-items:stretch; }
.password-controls { display:grid; gap:16px; padding:16px; border:1px solid var(--border,#d9e2ef); border-radius:12px; background:#f8fafc; }
.password-control-grid { display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:14px; align-items:end; }
.password-range-row { display:grid; grid-template-columns:minmax(0,1fr) 84px; gap:10px; align-items:center; }
.password-range-row input[type="range"] { width:100%; }
.password-range-row input[type="number"] { text-align:center; }
.password-options-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.password-option-card { margin:0; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; min-height:78px; padding:13px; border:1px solid #dbe4ef; border-radius:10px; background:#fff; cursor:pointer; }
.password-option-card > span { display:grid; gap:3px; }
.password-option-card small { color:var(--muted,#6b7c99); font-weight:500; line-height:1.35; }
.password-option-card input { width:19px; height:19px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--primary); }
.password-actions { display:flex; gap:9px; flex-wrap:wrap; }
.password-actions .primary-button { margin-top:0; }
.password-output-card { min-width:0; border:1px solid var(--border,#d9e2ef); border-radius:12px; overflow:hidden; background:#fff; }
.password-output { min-height:420px; height:100%; }
@media (max-width:860px) {
    .password-generator-layout { grid-template-columns:1fr; }
    .password-control-grid,.password-options-grid { grid-template-columns:1fr; }
    .password-output { min-height:320px; }
}

/* Regex Tester */
.regex-builder { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.8fr); gap:18px; align-items:end; }
.regex-pattern-field { min-width:0; }
.regex-pattern-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; border:1px solid #cbd5e1; border-radius:10px; background:#fff; overflow:hidden; }
.regex-pattern-row:focus-within { outline:3px solid rgba(37,99,235,.15); border-color:var(--primary); }
.regex-pattern-row input { min-width:0; border:0; border-radius:0; outline:0 !important; box-shadow:none !important; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }
.regex-delimiter { padding:0 2px 0 12px; color:#64748b; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-weight:800; }
.regex-delimiter:last-child { padding:0 12px 0 2px; }
.regex-flags-field { min-width:0; margin:0; padding:0; border:0; }
.regex-flags-field legend { margin:0 0 6px; padding:0; font-weight:700; }
.regex-flags { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; }
.regex-flags label { margin:0; min-width:0; display:grid; grid-template-columns:auto auto; grid-template-areas:"check flag" "help help"; justify-content:center; align-items:center; column-gap:5px; min-height:48px; padding:7px 5px; border:1px solid #dbe4ef; border-radius:9px; background:#fff; cursor:pointer; text-align:center; }
.regex-flags input { grid-area:check; width:15px; height:15px; margin:0; accent-color:var(--primary); }
.regex-flags label > span { grid-area:flag; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-weight:800; color:#1d4ed8; }
.regex-flags small { grid-area:help; color:var(--muted); font-size:.68rem; font-weight:500; white-space:nowrap; }
.regex-actions { display:flex; gap:9px; margin-top:14px; flex-wrap:wrap; }
.regex-actions .primary-button { margin-top:0; }
.regex-editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.regex-test-input { min-height:390px; }
.regex-preview-pane { min-width:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.regex-preview { min-height:390px; max-height:560px; overflow:auto; padding:14px; background:#0f172a; color:#dbeafe; white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }
.regex-preview-placeholder { color:#8294b4; }
.regex-match-highlight { padding:1px 2px; border-radius:3px; background:#fde68a; color:#3f2d06; }
.regex-zero-match { display:inline-block; margin:0 1px; color:#60a5fa; font-weight:900; }
.regex-match-section { margin-top:14px; border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; }
.regex-match-heading { padding:13px 15px; border-bottom:1px solid var(--line); }
.regex-match-heading > div { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.regex-match-heading span { color:var(--muted); font-size:.8rem; }
.regex-match-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px; max-height:500px; overflow:auto; background:#f8fafc; }
.regex-match-card { min-width:0; padding:12px; border:1px solid #dbe4ef; border-radius:10px; background:#fff; }
.regex-match-card-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.regex-match-card-heading span { color:var(--muted); font-size:.78rem; font-weight:700; }
.regex-full-match { display:block; max-height:130px; overflow:auto; padding:9px; background:#0f172a; color:#e2e8f0; white-space:pre-wrap; overflow-wrap:anywhere; }
.regex-captures { display:grid; gap:6px; margin-top:9px; }
.regex-capture-row { display:grid; grid-template-columns:minmax(90px,.35fr) minmax(0,1fr); gap:8px; align-items:start; }
.regex-capture-row > span { color:var(--muted); font-size:.78rem; font-weight:700; }
.regex-capture-row code { min-width:0; overflow-wrap:anywhere; white-space:pre-wrap; }
@media (max-width:980px) {
    .regex-builder { grid-template-columns:1fr; }
    .regex-flags { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px) {
    .regex-editor-grid,.regex-match-list { grid-template-columns:1fr; }
    .regex-test-input,.regex-preview { min-height:300px; }
}
@media (max-width:480px) {
    .regex-flags { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .regex-capture-row { grid-template-columns:1fr; }
}


/* UUID Generator */
.uuid-generator-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:18px; align-items:stretch; }
.uuid-controls { min-width:0; display:flex; flex-direction:column; gap:16px; }
.uuid-control-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.uuid-version-note { padding:13px 14px; border:1px solid #dbe4ef; border-radius:10px; background:#f8fafc; }
.uuid-version-note strong { display:block; margin-bottom:4px; }
.uuid-version-note span { color:var(--muted); font-size:.86rem; line-height:1.5; }
.uuid-actions { display:flex; gap:9px; flex-wrap:wrap; }
.uuid-actions .primary-button { margin-top:0; }
.uuid-output-card { min-width:0; border:1px solid var(--border,#d9e2ef); border-radius:12px; overflow:hidden; background:#fff; }
.uuid-output { min-height:360px; height:100%; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }
@media (max-width:860px) {
    .uuid-generator-layout { grid-template-columns:1fr; }
    .uuid-output { min-height:300px; }
}
@media (max-width:560px) {
    .uuid-control-grid { grid-template-columns:1fr; }
}

/* URL Encoder / Decoder */
.url-mode-field { min-width:250px; }
@media (max-width:640px) { .url-mode-field { min-width:0; width:100%; } }


/* Unix Timestamp Converter */
.timestamp-tool-panel { display:grid; gap:14px; }
.timestamp-converter-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.timestamp-converter-card { min-width:0; display:flex; flex-direction:column; gap:14px; padding:16px; border:1px solid var(--line,#d9e2ef); border-radius:12px; background:#fff; }
.timestamp-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.timestamp-card-heading strong { display:block; font-size:1rem; }
.timestamp-card-heading span { display:block; margin-top:4px; color:var(--muted,#6b7c99); font-size:.82rem; line-height:1.45; }
.timestamp-control-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,.8fr); gap:12px; align-items:end; }
.timestamp-inline-action { display:grid; gap:6px; }
.timestamp-inline-action > span { font-weight:700; font-size:.84rem; }
.timestamp-inline-action .secondary-button { width:100%; }
.timestamp-primary-action { align-self:flex-start; margin-top:auto; }
.timestamp-results { margin-top:14px; border:1px solid var(--line,#d9e2ef); border-radius:12px; overflow:hidden; background:#fff; }
.timestamp-results-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line,#d9e2ef); background:#f8fafc; }
.timestamp-results-heading > div { display:grid; gap:2px; }
.timestamp-results-heading span { color:var(--muted,#6b7c99); font-size:.78rem; }
.timestamp-result-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px; }
.timestamp-result-item { min-width:0; padding:11px 12px; border:1px solid #dbe4ef; border-radius:10px; background:#fff; }
.timestamp-result-item > span { display:block; margin-bottom:7px; color:var(--muted,#6b7c99); font-size:.76rem; font-weight:700; }
.timestamp-result-item > div { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.timestamp-result-item code { min-width:0; overflow-wrap:anywhere; white-space:pre-wrap; color:#0f172a; font-size:.86rem; }
.timestamp-result-wide { grid-column:1 / -1; }
@media (max-width:800px) {
    .timestamp-converter-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
    .timestamp-control-grid,.timestamp-result-grid { grid-template-columns:1fr; }
    .timestamp-result-wide { grid-column:auto; }
    .timestamp-result-item > div { align-items:flex-start; }
    .timestamp-results-heading { align-items:flex-start; }
}

/* Text / Code Diff Checker */
.diff-tool-panel { display:grid; gap:14px; }
.diff-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.diff-options,.diff-toolbar-actions,.diff-result-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.diff-check { display:inline-flex; align-items:center; gap:7px; font-size:.86rem; font-weight:700; cursor:pointer; }
.diff-check input { width:16px; height:16px; }
.diff-toolbar .primary-button { margin-top:0; }
.diff-editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.diff-editor-card { min-width:0; }
.diff-editor-card .json-pane-heading > div { display:grid; gap:2px; }
.diff-editor-card .json-pane-heading span,.diff-limit-note { color:var(--muted,#6b7c99); font-size:.76rem; }
.diff-input { min-height:330px; resize:vertical; }
.diff-result-card { border:1px solid var(--line,#d9e2ef); border-radius:12px; overflow:hidden; background:#fff; }
.diff-result-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line,#d9e2ef); background:#f8fafc; }
.diff-result-heading > div:first-child { display:grid; gap:2px; }
.diff-result-heading span { color:var(--muted,#6b7c99); font-size:.78rem; }
.diff-table-wrap { max-height:520px; overflow:auto; }
.diff-table { width:100%; border-collapse:collapse; table-layout:fixed; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size:.82rem; }
.diff-table th { position:sticky; top:0; z-index:2; padding:8px 10px; text-align:left; color:#52627a; background:#f8fafc; border-bottom:1px solid #dbe4ef; }
.diff-table td { padding:4px 10px; vertical-align:top; border-bottom:1px solid #edf2f7; }
.diff-table .diff-line-number { width:58px; text-align:right; color:#8190a8; user-select:none; }
.diff-content { min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.diff-content code { color:inherit; white-space:pre-wrap; overflow-wrap:anywhere; }
.diff-marker { display:inline-block; width:18px; font-weight:800; user-select:none; }
.diff-row.is-add { background:#ecfdf3; color:#166534; }
.diff-row.is-remove { background:#fff1f2; color:#9f1239; }
.diff-row.is-equal { background:#fff; color:#334155; }
@media (max-width:800px) {
    .diff-editor-grid { grid-template-columns:1fr; }
    .diff-input { min-height:260px; }
    .diff-toolbar { align-items:flex-start; }
}
@media (max-width:560px) {
    .diff-toolbar-actions { width:100%; }
    .diff-toolbar-actions .primary-button,.diff-toolbar-actions .secondary-button { flex:1 1 auto; }
    .diff-result-heading { align-items:flex-start; flex-direction:column; }
    .diff-table .diff-line-number { width:44px; }
}


/* Meta Tag Generator & Preview */
.meta-tool-panel { display:grid; gap:14px; }
.meta-tool-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start; }
.meta-form-card,.meta-preview-card { min-width:0; padding:16px; border:1px solid var(--line,#d9e2ef); border-radius:12px; background:#fff; }
.meta-form-card { display:grid; gap:14px; }
.meta-preview-column { min-width:0; display:grid; gap:14px; }
.meta-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.meta-section-heading > div { display:grid; gap:3px; }
.meta-section-heading span { color:var(--muted,#6b7c99); font-size:.8rem; line-height:1.45; }
.meta-description-input { width:100%; min-height:118px; padding:11px 12px; border:1px solid var(--line,#d9e2ef); border-radius:9px; resize:vertical; font:inherit; color:var(--text); background:#fff; }
.meta-description-input:focus { outline:none; border-color:#8fb0f8; box-shadow:0 0 0 3px rgba(23,95,243,.08); }
.meta-robots-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.meta-inline-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; }
.meta-inline-options .json-inline-option { min-width:0; min-height:auto; }
.meta-form-actions { display:flex; gap:9px; flex-wrap:wrap; }
.meta-form-actions .primary-button { margin-top:0; }
.meta-preview-card { display:grid; gap:14px; }
.serp-preview { padding:18px; border:1px solid #e1e7ef; border-radius:11px; background:#fff; }
.serp-site-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; color:#202124; }
.serp-site-row > div { min-width:0; display:grid; gap:2px; }
.serp-site-row strong { font-size:.9rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.serp-site-row span:not(.serp-favicon) { max-width:100%; color:#4d5156; font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.serp-favicon { display:grid; place-items:center; width:28px; height:28px; flex:0 0 auto; border-radius:50%; background:#eef2f7; color:#475569; font-size:.78rem; font-weight:800; }
.serp-title { margin-bottom:5px; color:#1a0dab; font-size:1.28rem; line-height:1.3; overflow-wrap:anywhere; }
.serp-description { color:#4d5156; font-size:.9rem; line-height:1.55; overflow-wrap:anywhere; }
.meta-output { min-height:285px; }
.meta-output-card { min-width:0; }
.meta-output-card .json-output-actions { flex-wrap:wrap; }
.field small { color:var(--muted,#6b7c99); font-size:.78rem; line-height:1.4; }
@media (max-width:900px) {
    .meta-tool-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
    .meta-robots-grid,.meta-inline-options { grid-template-columns:1fr; }
    .meta-section-heading { flex-direction:column; }
    .meta-form-actions .primary-button,.meta-form-actions .secondary-button { flex:1 1 auto; }
    .serp-preview { padding:14px; }
}


/* Meta Tag Generator bottom information cards */
.meta-bottom-info-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.meta-bottom-info-grid > .info-card {
    min-width:0;
}
@media (max-width:800px) {
    .meta-bottom-info-grid {
        grid-template-columns:1fr;
    }
}


/* Open Graph & Social Meta Generator */
.social-meta-tool-panel { display:grid; gap:14px; }
.social-meta-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start; }
.social-meta-form { min-width:0; display:grid; gap:14px; padding:16px; border:1px solid var(--line,#d9e2ef); border-radius:12px; background:#fff; }
.social-meta-double-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.social-meta-actions { display:flex; gap:9px; flex-wrap:wrap; }
.social-meta-actions .primary-button { margin-top:0; }
.social-meta-preview-column { min-width:0; display:grid; gap:14px; }
.social-preview-card { min-width:0; display:grid; gap:14px; padding:16px; border:1px solid var(--line,#d9e2ef); border-radius:12px; background:#fff; }
.social-card-preview { overflow:hidden; border:1px solid #dbe4ef; border-radius:12px; background:#fff; }
.social-preview-image { display:grid; place-items:center; min-height:190px; padding:16px; background:linear-gradient(135deg,#eef2f7,#e2e8f0); color:#64748b; background-size:cover; background-position:center; text-align:center; }
.social-preview-image.has-image span { display:none; }
.social-preview-copy { display:grid; gap:5px; padding:13px 14px; }
.social-preview-copy strong { color:#0f172a; font-size:1rem; line-height:1.35; overflow-wrap:anywhere; }
.social-preview-copy p { margin:0; color:#475569; font-size:.86rem; line-height:1.5; overflow-wrap:anywhere; }
.social-preview-domain { color:#64748b; font-size:.76rem; text-transform:lowercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.social-card-twitter { border-radius:14px; }
.social-meta-output { min-height:300px; }
.social-meta-bottom-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.social-meta-bottom-grid > .info-card { min-width:0; }
@media (max-width:900px) {
    .social-meta-grid { grid-template-columns:1fr; }
}
@media (max-width:800px) {
    .social-meta-bottom-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
    .social-meta-double-grid { grid-template-columns:1fr; }
    .social-meta-actions .primary-button,.social-meta-actions .secondary-button { flex:1 1 auto; }
    .social-preview-image { min-height:160px; }
}


/* Robots.txt Generator & Validator */
.robots-tool-panel { display:grid; gap:14px; }
.robots-mode-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.robots-mode-buttons { display:flex; gap:9px; }
.robots-mode-buttons .primary-button { margin-top:0; }
.robots-builder-grid,.robots-validator-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.robots-builder-card,.robots-validation-card { min-width:0; display:grid; gap:14px; padding:16px; border:1px solid var(--line,#d9e2ef); border-radius:12px; background:#fff; }
.robots-path-input { width:100%; min-height:105px; padding:11px 12px; border:1px solid var(--line,#d9e2ef); border-radius:9px; resize:vertical; font:inherit; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; line-height:1.5; color:var(--text); background:#fff; }
.robots-path-input:focus { outline:none; border-color:#8fb0f8; box-shadow:0 0 0 3px rgba(23,95,243,.08); }
.robots-quick-actions { display:flex; gap:9px; flex-wrap:wrap; }
.robots-quick-actions .primary-button { margin-top:0; }
.robots-output { min-height:440px; }
.robots-validator-input { min-height:440px; }
.robots-validation-card { min-height:494px; align-content:start; }
.robots-issues { display:grid; gap:9px; }
.robots-empty-message { margin:0; padding:14px; border:1px dashed #cbd5e1; border-radius:9px; color:var(--muted,#6b7c99); background:#f8fafc; }
.robots-issue { display:grid; grid-template-columns:auto 1fr; gap:9px; padding:11px 12px; border:1px solid #dbe4ef; border-radius:9px; background:#fff; }
.robots-issue-badge { align-self:start; padding:4px 7px; border-radius:999px; font-size:.72rem; font-weight:850; }
.robots-issue.is-error { border-color:#fecaca; background:#fff7f7; }
.robots-issue.is-error .robots-issue-badge { background:#fee2e2; color:#b42318; }
.robots-issue.is-warning { border-color:#fde68a; background:#fffbeb; }
.robots-issue.is-warning .robots-issue-badge { background:#fef3c7; color:#92400e; }
.robots-issue.is-success { border-color:#bbf7d0; background:#f0fdf4; }
.robots-issue.is-success .robots-issue-badge { background:#dcfce7; color:#176b39; }
.robots-issue-copy { display:grid; gap:3px; min-width:0; }
.robots-issue-copy strong { overflow-wrap:anywhere; }
.robots-issue-copy span { color:var(--muted,#6b7c99); font-size:.8rem; line-height:1.45; overflow-wrap:anywhere; }
.robots-bottom-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.robots-bottom-grid > .info-card { min-width:0; }
@media (max-width:900px) {
    .robots-builder-grid,.robots-validator-grid { grid-template-columns:1fr; }
    .robots-validation-card { min-height:0; }
}
@media (max-width:800px) {
    .robots-bottom-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
    .robots-mode-toolbar { align-items:stretch; }
    .robots-mode-buttons,.robots-quick-actions { width:100%; }
    .robots-mode-buttons > button,.robots-quick-actions > button { flex:1 1 auto; }
}


/* XML Sitemap Generator */
.sitemap-tool-panel { display:grid; gap:14px; }
.sitemap-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:14px; align-items:start; }
.sitemap-input { min-height:430px; }
.sitemap-options-card { min-width:0; display:grid; gap:14px; padding:16px; border:1px solid var(--line,#d9e2ef); border-radius:12px; background:#fff; }
.sitemap-option-toggle { min-height:auto; }
.sitemap-actions { display:flex; gap:9px; flex-wrap:wrap; }
.sitemap-actions .primary-button { margin-top:0; }
.sitemap-limit-note { padding:11px 12px; border:1px solid #dbe4ef; border-radius:9px; background:#f8fafc; color:var(--muted,#6b7c99); font-size:.8rem; line-height:1.5; }
.sitemap-output { min-height:420px; }
.sitemap-bottom-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.sitemap-bottom-grid > .info-card { min-width:0; }
@media (max-width:900px) {
    .sitemap-grid { grid-template-columns:1fr; }
}
@media (max-width:800px) {
    .sitemap-bottom-grid { grid-template-columns:1fr; }
}

/* XML Sitemap Generator — option alignment bugfix */
.sitemap-options-card .sitemap-option-toggle {
    width: 100%;
    min-width: 0;
    margin: 0;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
}
.sitemap-options-card .sitemap-option-toggle input[type="checkbox"] {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}
.sitemap-options-card .sitemap-option-toggle span {
    min-width: 0;
    text-align: left;
}


/* Schema Markup / JSON-LD Generator */
.schema-tool-panel { display:grid; gap:14px; }
.schema-topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.schema-type-field { min-width:240px; margin:0; }
.schema-top-actions { display:flex; gap:12px; align-items:center; }
.schema-main-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start; }
.schema-form-card { min-width:0; display:grid; gap:14px; padding:16px; border:1px solid var(--line,#d9e2ef); border-radius:12px; background:#fff; }
.schema-dynamic-fields { display:grid; gap:12px; }
.schema-two-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.schema-textarea { width:100%; min-height:110px; padding:11px 12px; border:1px solid var(--line,#d9e2ef); border-radius:9px; resize:vertical; font:inherit; line-height:1.5; color:var(--text); background:#fff; }
.schema-textarea.schema-mono { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; }
.schema-textarea:focus { outline:none; border-color:#8fb0f8; box-shadow:0 0 0 3px rgba(23,95,243,.08); }
.schema-generate-button { justify-self:start; margin-top:0; }
.schema-output { min-height:590px; }
.schema-required-mark { color:#b42318; }
.schema-bottom-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.schema-bottom-grid > .info-card { min-width:0; }
@media (max-width:900px) {
    .schema-main-grid { grid-template-columns:1fr; }
    .schema-output { min-height:420px; }
}
@media (max-width:800px) {
    .schema-bottom-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
    .schema-topbar { align-items:stretch; }
    .schema-type-field { width:100%; min-width:0; }
    .schema-two-grid { grid-template-columns:1fr; }
    .schema-generate-button { width:100%; }
}


/* SERP Snippet Preview */
.serp-tool-panel { display:grid; gap:14px; }
.serp-editor-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:14px; align-items:start; }
.serp-input-card,.serp-preview-panel { min-width:0; padding:16px; border:1px solid var(--line,#d9e2ef); border-radius:12px; background:#fff; }
.serp-input-card { display:grid; gap:14px; }
.serp-description-input { min-height:128px; }
.serp-input-actions,.serp-export-actions { display:flex; gap:9px; flex-wrap:wrap; }
.serp-input-actions .primary-button { margin-top:0; }
.serp-preview-panel { display:grid; gap:14px; }
.serp-preview-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.serp-preview-toolbar > div:first-child { display:grid; gap:3px; }
.serp-preview-toolbar span { color:var(--muted,#6b7c99); font-size:.8rem; line-height:1.45; }
.serp-device-toggle { display:flex; gap:7px; }
.serp-device-toggle .primary-button { margin-top:0; }
.serp-preview-stage { padding:20px; border:1px solid #e2e8f0; border-radius:12px; background:#f8fafc; }
.serp-result-card { margin:0 auto; padding:14px 16px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.serp-result-desktop { max-width:620px; }
.serp-result-mobile { max-width:390px; }
.serp-source-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; min-width:0; }
.serp-source-row > div { min-width:0; display:grid; gap:2px; }
.serp-source-row strong { color:#202124; font-size:.88rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.serp-source-row span:not(.serp-preview-favicon) { color:#4d5156; font-size:.76rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.serp-preview-favicon { display:grid; place-items:center; width:28px; height:28px; flex:0 0 auto; border-radius:50%; background:#eef2f7; color:#475569; font-size:.78rem; font-weight:800; }
.serp-preview-title { color:#1a0dab; font-size:1.28rem; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.serp-preview-description { margin-top:5px; color:#4d5156; font-size:.9rem; line-height:1.55; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.serp-result-desktop .serp-preview-description { -webkit-line-clamp:2; }
.serp-result-mobile .serp-preview-description { -webkit-line-clamp:3; }
.serp-guidance-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.serp-guidance-grid > div { display:grid; gap:4px; padding:12px; border:1px solid #dbe4ef; border-radius:9px; background:#fff; }
.serp-guidance-grid span { color:var(--muted,#6b7c99); font-size:.78rem; }
.serp-guidance-grid strong { color:#0f172a; }
.serp-guidance-grid small { color:var(--muted,#6b7c99); line-height:1.4; }
.serp-guidance-grid .is-good strong { color:#176b39; }
.serp-guidance-grid .is-warning strong { color:#92400e; }
.serp-bottom-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.serp-bottom-grid > .info-card { min-width:0; }
@media (max-width:900px) {
    .serp-editor-grid { grid-template-columns:1fr; }
}
@media (max-width:800px) {
    .serp-bottom-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
    .serp-preview-stage { padding:10px; }
    .serp-guidance-grid { grid-template-columns:1fr; }
    .serp-device-toggle,.serp-input-actions,.serp-export-actions { width:100%; }
    .serp-device-toggle > button,.serp-input-actions > button,.serp-export-actions > button { flex:1 1 auto; }
}


/* Keyword Density & Text Analyzer */
.keyword-tool-panel { display:grid; gap:14px; }
.keyword-input-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(250px,.6fr); gap:14px; align-items:start; }
.keyword-input { min-height:460px; }
.keyword-options-card { min-width:0; display:grid; gap:14px; padding:16px; border:1px solid var(--line,#d9e2ef); border-radius:12px; background:#fff; }
.keyword-check-row { min-height:auto; justify-content:flex-start; }
.keyword-analyze-button { justify-self:start; margin-top:0; }
.keyword-limit-note { padding:11px 12px; border:1px solid #dbe4ef; border-radius:9px; background:#f8fafc; color:var(--muted,#6b7c99); font-size:.8rem; line-height:1.5; }
.keyword-stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.keyword-stats-grid > div { display:grid; gap:3px; padding:11px 12px; border:1px solid #dbe4ef; border-radius:9px; background:#fff; }
.keyword-stats-grid span { color:var(--muted,#6b7c99); font-size:.78rem; }
.keyword-results-card { border:1px solid var(--line,#d9e2ef); border-radius:12px; overflow:hidden; background:#fff; }
.keyword-results-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line,#d9e2ef); background:#f8fafc; }
.keyword-results-heading > div:first-child { display:grid; gap:2px; }
.keyword-results-heading span { color:var(--muted,#6b7c99); font-size:.78rem; }
.keyword-result-actions,.keyword-tabs { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.keyword-tabs { padding:12px 14px; border-bottom:1px solid #edf2f7; }
.keyword-tabs .primary-button { margin-top:0; }
.keyword-table-wrap { max-height:560px; overflow:auto; }
.keyword-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:.86rem; }
.keyword-table th { position:sticky; top:0; z-index:2; padding:9px 11px; text-align:left; background:#f8fafc; color:#52627a; border-bottom:1px solid #dbe4ef; }
.keyword-table td { padding:8px 11px; border-bottom:1px solid #edf2f7; vertical-align:top; }
.keyword-table th:first-child,.keyword-table td:first-child { width:54px; text-align:right; color:#8190a8; }
.keyword-table th:nth-child(3),.keyword-table td:nth-child(3) { width:90px; text-align:right; }
.keyword-table th:nth-child(4),.keyword-table td:nth-child(4) { width:110px; text-align:right; }
.keyword-term { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; overflow-wrap:anywhere; }
.keyword-bottom-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.keyword-bottom-grid > .info-card { min-width:0; }
@media (max-width:900px) {
    .keyword-input-grid { grid-template-columns:1fr; }
    .keyword-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:800px) {
    .keyword-bottom-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
    .keyword-stats-grid { grid-template-columns:1fr; }
    .keyword-analyze-button { width:100%; }
    .keyword-results-heading { align-items:flex-start; flex-direction:column; }
    .keyword-result-actions,.keyword-tabs { width:100%; }
    .keyword-tabs > button { flex:1 1 auto; }
    .keyword-table th:first-child,.keyword-table td:first-child { width:40px; }
    .keyword-table th:nth-child(3),.keyword-table td:nth-child(3) { width:65px; }
    .keyword-table th:nth-child(4),.keyword-table td:nth-child(4) { width:82px; }
}


/* Keyword analyzer checkbox alignment fix */
.keyword-options-card .keyword-check-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 0;
    text-align: left;
    white-space: normal;
}
.keyword-options-card .keyword-check-row input[type="checkbox"] {
    width: auto;
    min-width: 0;
    height: auto;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}
.keyword-options-card .keyword-check-row span {
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}


/* URL / Slug Generator */
.slug-tool-panel { display:grid; gap:14px; }
.slug-main-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:14px; align-items:start; }
.slug-input { min-height:420px; }
.slug-options-card { min-width:0; display:grid; gap:14px; padding:16px; border:1px solid var(--line,#d9e2ef); border-radius:12px; background:#fff; }
.slug-options-card .slug-check-row { display:flex; align-items:center; justify-content:flex-start; gap:8px; width:100%; min-width:0; margin:0; text-align:left; white-space:normal; }
.slug-options-card .slug-check-row input[type="checkbox"] { width:auto; min-width:0; height:auto; flex:0 0 auto; margin:0; padding:0; }
.slug-options-card .slug-check-row span { min-width:0; flex:1 1 auto; text-align:left; white-space:normal; overflow-wrap:anywhere; }
.slug-generate-button { justify-self:start; margin-top:0; }
.slug-limit-note { padding:11px 12px; border:1px solid #dbe4ef; border-radius:9px; background:#f8fafc; color:var(--muted,#6b7c99); font-size:.8rem; line-height:1.5; }
.slug-output-card { border:1px solid var(--line,#d9e2ef); border-radius:12px; overflow:hidden; background:#fff; }
.slug-output-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line,#d9e2ef); background:#f8fafc; }
.slug-output-heading > div:first-child { display:grid; gap:2px; }
.slug-output-heading span { color:var(--muted,#6b7c99); font-size:.78rem; }
.slug-output-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.slug-output-value { padding:18px; background:#0f172a; color:#e2e8f0; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size:1rem; line-height:1.6; overflow-wrap:anywhere; min-height:58px; }
.slug-url-preview { display:grid; gap:5px; padding:12px 14px; border-top:1px solid #dbe4ef; background:#fff; }
.slug-url-preview span { color:var(--muted,#6b7c99); font-size:.78rem; }
.slug-url-preview code { color:#0f172a; overflow-wrap:anywhere; white-space:normal; }
.slug-bottom-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.slug-bottom-grid > .info-card { min-width:0; }
@media (max-width:900px) { .slug-main-grid { grid-template-columns:1fr; } }
@media (max-width:800px) { .slug-bottom-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .slug-generate-button { width:100%; } .slug-output-heading { align-items:flex-start; flex-direction:column; } .slug-output-actions { width:100%; } }


/* QR Code Generator */
.qr-tool-panel { display:grid; gap:14px; }
.qr-main-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.8fr); gap:14px; align-items:start; }
.qr-input-card,.qr-preview-card { min-width:0; display:grid; gap:14px; padding:16px; border:1px solid var(--line,#d9e2ef); border-radius:12px; background:#fff; }
.qr-content-input { width:100%; min-height:190px; padding:12px; border:1px solid var(--line,#d9e2ef); border-radius:9px; resize:vertical; font:inherit; line-height:1.5; color:var(--text); background:#fff; }
.qr-content-input:focus { outline:none; border-color:#8fb0f8; box-shadow:0 0 0 3px rgba(23,95,243,.08); }
.qr-option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.qr-check-row { display:flex; align-items:center; justify-content:flex-start; gap:8px; width:100%; min-width:0; margin:0; text-align:left; white-space:normal; }
.qr-check-row input[type="checkbox"] { width:auto; min-width:0; height:auto; flex:0 0 auto; margin:0; padding:0; }
.qr-check-row span { min-width:0; flex:1 1 auto; text-align:left; white-space:normal; overflow-wrap:anywhere; }
.qr-actions,.qr-download-actions { display:flex; gap:9px; flex-wrap:wrap; }
.qr-actions .primary-button { margin-top:0; }
.qr-limit-note { padding:11px 12px; border:1px solid #dbe4ef; border-radius:9px; background:#f8fafc; color:var(--muted,#6b7c99); font-size:.8rem; line-height:1.5; }
.qr-preview-stage { display:grid; place-items:center; min-height:410px; padding:22px; border:1px solid #dbe4ef; border-radius:12px; background:#f8fafc; overflow:auto; }
.qr-preview-empty { display:grid; gap:4px; place-items:center; text-align:center; color:var(--muted,#6b7c99); }
.qr-preview-output { max-width:100%; line-height:0; }
.qr-preview-output svg { display:block; max-width:100%; height:auto; border-radius:4px; box-shadow:0 1px 3px rgba(15,23,42,.12); }
.qr-bottom-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.qr-bottom-grid > .info-card { min-width:0; }
@media (max-width:900px) {
    .qr-main-grid { grid-template-columns:1fr; }
}
@media (max-width:800px) {
    .qr-bottom-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
    .qr-option-grid { grid-template-columns:1fr; }
    .qr-actions .primary-button,.qr-actions .secondary-button,.qr-download-actions .secondary-button { flex:1 1 auto; }
    .qr-preview-stage { min-height:300px; padding:12px; }
}

/* QR Code Generator color-input visual fix
   Override the global input padding so Firefox/Chromium can display
   the selected foreground/background swatch at a useful height. */
.qr-option-grid input[type="color"] {
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 3px;
    cursor: pointer;
}
.qr-option-grid input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: 5px;
}
.qr-option-grid input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
.qr-option-grid input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 5px;
}



/* Color Converter */
.color-tool-panel { display:grid; gap:14px; }
.color-main-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.72fr); gap:14px; align-items:start; }
.color-input-card,.color-preview-card { min-width:0; display:grid; gap:14px; padding:16px; border:1px solid var(--line,#d9e2ef); border-radius:12px; background:#fff; }
.color-source-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,.55fr); gap:12px; }
.color-picker-field input[type="color"] {
    width:100%;
    height:42px;
    min-height:42px;
    padding:3px;
    cursor:pointer;
}
.color-picker-field input[type="color"]::-moz-color-swatch { border:0; border-radius:5px; }
.color-picker-field input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.color-picker-field input[type="color"]::-webkit-color-swatch { border:0; border-radius:5px; }
.color-actions { display:flex; gap:9px; flex-wrap:wrap; }
.color-actions .primary-button { margin-top:0; }
.color-format-help { display:grid; gap:4px; padding:11px 12px; border:1px solid #dbe4ef; border-radius:9px; background:#f8fafc; color:var(--muted,#6b7c99); font-size:.8rem; line-height:1.5; }
.color-format-help strong { color:var(--text,#0f172a); }
.color-preview-stage { position:relative; min-height:265px; overflow:hidden; border:1px solid #dbe4ef; border-radius:12px; background:#fff; }
.color-alpha-grid { position:absolute; inset:0; background-image:linear-gradient(45deg,#d7dce3 25%,transparent 25%),linear-gradient(-45deg,#d7dce3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d7dce3 75%),linear-gradient(-45deg,transparent 75%,#d7dce3 75%); background-size:24px 24px; background-position:0 0,0 12px,12px -12px,-12px 0; }
.color-preview-swatch { position:absolute; inset:0; background:rgba(51,102,204,1); }
.color-preview-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.color-preview-details > div { display:grid; gap:3px; padding:10px 11px; border:1px solid #dbe4ef; border-radius:9px; }
.color-preview-details span { color:var(--muted,#6b7c99); font-size:.75rem; }
.color-results-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.color-result-card { min-width:0; padding:12px; border:1px solid #dbe4ef; border-radius:10px; background:#fff; }
.color-result-card > div { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; }
.color-result-card > div > span { font-size:.75rem; color:var(--muted,#6b7c99); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.color-result-card code { display:block; min-width:0; padding:9px 10px; border-radius:7px; background:#f8fafc; color:#0f172a; white-space:normal; overflow-wrap:anywhere; }
.color-bottom-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.color-bottom-grid > .info-card { min-width:0; }
@media (max-width:900px) {
    .color-main-grid { grid-template-columns:1fr; }
}
@media (max-width:800px) {
    .color-results-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .color-bottom-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
    .color-source-grid,.color-results-grid,.color-preview-details { grid-template-columns:1fr; }
    .color-actions .primary-button,.color-actions .secondary-button { flex:1 1 auto; }
    .color-preview-stage { min-height:210px; }
}


/* Lorem Ipsum Generator */
.lorem-tool-panel { display:grid; gap:14px; }
.lorem-main-grid { display:grid; grid-template-columns:minmax(290px,.62fr) minmax(0,1.38fr); gap:14px; align-items:start; }
.lorem-options-card,.lorem-output-card { min-width:0; display:grid; gap:14px; padding:16px; border:1px solid var(--line,#d9e2ef); border-radius:12px; background:#fff; }
.lorem-option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.lorem-check-row { display:flex; align-items:center; justify-content:flex-start; gap:8px; width:100%; min-width:0; margin:0; text-align:left; white-space:normal; }
.lorem-check-row input[type="checkbox"] { width:auto; min-width:0; height:auto; flex:0 0 auto; margin:0; padding:0; }
.lorem-check-row span { min-width:0; flex:1 1 auto; text-align:left; white-space:normal; overflow-wrap:anywhere; }
.lorem-actions { display:flex; gap:9px; flex-wrap:wrap; }
.lorem-actions .primary-button { margin-top:0; }
.lorem-limit-note { padding:11px 12px; border:1px solid #dbe4ef; border-radius:9px; background:#f8fafc; color:var(--muted,#6b7c99); font-size:.8rem; line-height:1.5; }
.lorem-output { min-height:380px; }
.lorem-bottom-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.lorem-bottom-grid > .info-card { min-width:0; }
@media (max-width:900px) {
    .lorem-main-grid { grid-template-columns:1fr; }
}
@media (max-width:800px) {
    .lorem-bottom-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
    .lorem-option-grid { grid-template-columns:1fr; }
    .lorem-actions .primary-button,.lorem-actions .secondary-button { flex:1 1 auto; }
}

/* Homepage V2 — compact multi-tool landing page. Scoped to the homepage only. */
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.homepage-v2 { margin-top: -24px; }
.homepage-hero { max-width: 820px; margin: 0 auto; padding: 8px 0 30px; text-align: center; }
.homepage-hero h1 { margin: 0; font-size: clamp(2.35rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -.045em; }
.homepage-hero p { max-width: 700px; margin: 14px auto 0; color: var(--muted); font-size: 1.02rem; }
.homepage-search { position: relative; display: flex; align-items: center; max-width: 680px; margin: 24px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 34px rgba(15,23,42,.06); }
.homepage-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12), 0 10px 34px rgba(15,23,42,.06); }
.homepage-search-icon { flex: 0 0 auto; padding-left: 17px; color: var(--primary); font-size: 1.35rem; line-height: 1; }
.homepage-search input { min-width: 0; border: 0; border-radius: 16px; padding: 14px 12px; background: transparent; box-shadow: none; }
.homepage-search input:focus { outline: 0; border-color: transparent; }
.homepage-search-count { flex: 0 0 auto; margin-right: 8px; border-radius: 10px; background: #eff6ff; color: var(--primary); padding: 7px 10px; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.homepage-categories { margin-top: 8px; }
.homepage-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.homepage-section-heading h2 { margin: 0; font-size: 1.25rem; }
.homepage-section-heading > span { color: var(--muted); font-size: .84rem; font-weight: 700; }
.homepage-category-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.homepage-category-card { min-width: 0; min-height: 92px; padding: 16px 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; border-radius: 14px; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.homepage-category-card:hover { transform: translateY(-2px); border-color: #bfdbfe; box-shadow: 0 10px 28px rgba(15,23,42,.07); }
.homepage-category-card h3 { margin: 0 0 5px; font-size: .98rem; }
.homepage-category-card span { color: var(--muted); font-size: .8rem; font-weight: 700; }
.homepage-category-card strong { color: var(--primary); font-size: 1.15rem; }
.homepage-tools-section { margin-top: 34px; }
.homepage-tools-heading { margin-bottom: 14px; }
.homepage-tools-heading h2 { margin-bottom: 3px; }
.homepage-tools-heading p { margin: 0; color: var(--muted); font-size: .86rem; }
.homepage-tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.homepage-tool-card { min-height: 162px; padding: 17px; border-radius: 15px; display: flex; flex-direction: column; }
.homepage-tool-card h3 { margin: 0 0 8px; font-size: 1rem; }
.homepage-tool-card p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; margin: 0 0 10px; line-height: 1.45; font-size: .88rem; }
.homepage-tool-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 4px; }
.homepage-tool-card .tool-category-link { min-width: 0; margin: 0; font-size: .78rem; }
.homepage-tool-card .tool-link { flex: 0 0 auto; margin-top: 0; font-size: .86rem; white-space: nowrap; }
.homepage-tools-actions { display: flex; justify-content: center; margin-top: 22px; }
.homepage-view-all { cursor: pointer; }
.homepage-no-results { margin-top: 14px; text-align: center; }
.homepage-no-results h3 { margin-top: 0; }
.homepage-no-results p { margin-bottom: 0; }

@media (max-width: 1050px) {
    .homepage-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .homepage-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .homepage-v2 { margin-top: -10px; }
    .homepage-hero { padding: 8px 0 26px; text-align: left; }
    .homepage-hero h1 { font-size: clamp(2.05rem, 8vw, 2.8rem); }
    .homepage-hero p { margin-left: 0; }
    .homepage-search { max-width: none; margin-top: 20px; }
    .homepage-category-grid, .homepage-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .homepage-section-heading { align-items: flex-start; }
    .homepage-category-grid, .homepage-tool-grid { grid-template-columns: 1fr; }
    .homepage-category-card { min-height: 78px; }
    .homepage-search-count { display: none; }
    .homepage-tool-card { min-height: 0; }
}
.homepage-tool-card[hidden], .homepage-no-results[hidden], .homepage-view-all[hidden] { display: none !important; }

/* Launch Readiness Phase 3.2 — public tool-page title and breadcrumb density */
.tool-heading,
.tool-hero {
    margin-top: -18px;
    margin-bottom: 24px;
}

.tool-heading h1,
.tool-hero h1 {
    font-size: clamp(2rem, 3.5vw, 2.625rem);
    line-height: 1.08;
    letter-spacing: -.04em;
    margin: 8px 0 10px;
}

.tool-heading > p,
.tool-hero > p {
    margin: 0;
    max-width: 900px;
    color: var(--muted);
}

.tool-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.4;
}

.tool-breadcrumb a {
    color: var(--primary);
    text-decoration: none;
}

.tool-breadcrumb a:hover {
    text-decoration: underline;
}

.tool-breadcrumb span {
    color: #94a3b8;
}

@media (max-width: 640px) {
    .tool-heading,
    .tool-hero {
        margin-top: -8px;
        margin-bottom: 20px;
    }

    .tool-heading h1,
    .tool-hero h1 {
        font-size: clamp(1.9rem, 9vw, 2.25rem);
    }
}


/* Launch Readiness Phase 3.2 — category-page density normalization */
.category-tool-heading {
    max-width: 900px;
}
.category-tools-section {
    margin-top: 0;
}
.category-tool-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 4px;
}
.category-tool-card {
    min-height: 162px;
    padding: 17px;
    border-radius: 15px;
}
.category-tool-card h3 {
    margin: 0 0 8px;
    font-size: 1rem;
}
.category-tool-card p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    margin: 0 0 10px;
    line-height: 1.45;
    font-size: .88rem;
}
.category-tool-card .tool-link {
    margin-top: auto;
    font-size: .86rem;
}
@media (max-width: 1050px) {
    .category-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .category-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .category-tool-grid { grid-template-columns: 1fr; }
    .category-tool-card { min-height: 0; }
}


/* Launch Readiness Phase 3.2 — managed/static page heading normalization
   Managed pages and Privacy choices intentionally reuse the exact public
   tool heading/breadcrumb system used by Robots.txt and XML Sitemap. */
.content-page-heading {
    max-width: 900px;
}


/* Phase 4.3 — provider-neutral advertising placement QA.
   Markup renders only for development placeholders or an explicit authenticated-admin preview.
   Live advertising remains disabled until Phase 7. */
.advertising-slot {
    width: 100%;
    margin: 28px 0 0;
}
.advertising-slot--placeholder {
    min-height: 110px;
    padding: 18px 22px;
    overflow-wrap: anywhere;
    border: 1px dashed #aebed4;
    border-radius: 12px;
    background: #f7faff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}
.advertising-slot__label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.advertising-slot--placeholder strong {
    font-size: 14px;
}
.advertising-slot--placeholder small {
    font-size: 12px;
}
@media (max-width: 700px) {
    .advertising-slot { margin-top: 22px; }
    .advertising-slot--placeholder { min-height: 90px; padding: 14px 16px; }
}

/* Phase 5.4B — reusable, opt-in tool supporting content. */
.tool-supporting-content { display: grid; gap: 16px; margin-top: 24px; }
.tool-support-section { padding: 18px; }
.tool-support-section h2 { margin: 0 0 10px; font-size: 1.1rem; }
.tool-related-tools h2 { margin: 0 0 20px 14px; font-size: 1.1rem; }
.tool-support-section p { margin: 0; }
.tool-support-list { margin: 0; padding-left: 1.25rem; }
.tool-support-list li + li { margin-top: 6px; }
.tool-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tool-related-card { display: flex; flex-direction: column; gap: 6px; min-height: 112px; padding: 15px; text-decoration: none; }
.tool-related-card strong { color: var(--text); }
.tool-related-card span { color: var(--muted); font-size: .86rem; line-height: 1.45; }
.tool-faq-section details + details { margin-top: 10px; }
.tool-faq-section summary { cursor: pointer; font-weight: 700; }
.tool-faq-section details p { margin-top: 8px; color: var(--muted); }
@media (max-width: 1050px) { .tool-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .tool-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tool-related-grid { grid-template-columns: 1fr; } .tool-related-card { min-height: 0; } }

/* Phase 6.3 — restrained voluntary-support page. */
.support-heading { max-width: 900px; }
.support-card { max-width: 760px; padding: 24px; }
.support-card-copy h2 { margin: 0 0 8px; font-size: 1.25rem; }
.support-card-copy p { margin: 0; color: var(--muted); }
.support-amounts { margin: 24px 0 0; padding: 0; border: 0; }
.support-amounts legend { margin-bottom: 10px; font-weight: 800; }
.support-preset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.support-preset { position: relative; cursor: pointer; }
.support-preset input { position: absolute; opacity: 0; pointer-events: none; }
.support-preset span { display: flex; min-height: 46px; align-items: center; justify-content: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font-weight: 800; }
.support-preset input:checked + span { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, .12); color: var(--primary); }
.support-preset input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.support-custom-amount { margin-top: 14px; }
.support-custom-amount label { display: block; margin-bottom: 6px; font-weight: 700; }
.support-custom-amount input { width: min(260px, 100%); }
.support-custom-amount small { display: block; margin-top: 6px; color: var(--muted); }
.support-paypal-area { margin-top: 22px; }
.support-paypal-area paypal-button { display: block; max-width: 360px; }
.support-status { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: .92rem; }
.support-status--neutral { background: #f4f7fb; color: var(--text); }
.support-status--success { background: #ecfdf3; color: #166534; }
.support-status--error { background: #fff1f2; color: #9f1239; }
.support-provider-note { margin: 18px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
@media (max-width: 640px) {
    .support-card { padding: 18px; }
    .support-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phase 7 — manual AdSense units. Provider rendering remains server-gated until approval. */
.advertising-slot--provider {
    min-height: 110px;
    overflow: hidden;
}
.advertising-slot--provider .adsbygoogle {
    width: 100%;
    min-height: 110px;
}
@media (max-width: 700px) {
    .advertising-slot--provider,
    .advertising-slot--provider .adsbygoogle { min-height: 90px; }
}

/* Phase 8 legal/contact completion */
.managed-contact-email { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.managed-contact-email h2 { margin: 0 0 8px; font-size: 1.1rem; }
.managed-contact-email p { margin: 0; }