/* AllBlog public tools suite */
:root {
    --tool-accent: var(--category-active-bg, #6366f1);
    --tool-accent-strong: var(--category-active-border, #4f46e5);
    --tool-surface: var(--post-bg, #17191f);
    --tool-surface-soft: color-mix(in srgb, var(--tool-surface) 88%, var(--tool-accent) 12%);
    --tool-surface-raised: color-mix(in srgb, var(--tool-surface) 94%, white 6%);
    --tool-border: var(--category-border, rgba(148, 163, 184, .2));
    --tool-text: var(--text-color, #f8fafc);
    --tool-muted: var(--post-preview, #aab2c0);
    --tool-meta: var(--post-meta, #7f8998);
    --tool-success: #22c55e;
    --tool-danger: #ef4444;
    --tool-warning: #f59e0b;
    --tool-radius-xl: 28px;
    --tool-radius-lg: 22px;
    --tool-radius-md: 16px;
    --tool-shadow: 0 24px 70px rgba(0, 0, 0, .18);
}

[data-theme="light"] {
    --tool-surface-soft: color-mix(in srgb, var(--tool-surface) 94%, var(--tool-accent) 6%);
    --tool-surface-raised: color-mix(in srgb, var(--tool-surface) 97%, #0f172a 3%);
    --tool-shadow: 0 22px 60px rgba(15, 23, 42, .10);
}

.utility-container {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: min(100% - 32px, 1240px) !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 34px 0 72px !important;
    box-sizing: border-box;
}

.utility-page,
.utility-page * {
    box-sizing: border-box;
}

.utility-page {
    --tool-accent-rgb: 99, 102, 241;
    color: var(--tool-text);
}

.utility-page--green { --tool-accent: #10b981; --tool-accent-strong: #059669; --tool-accent-rgb: 16, 185, 129; }
.utility-page--orange { --tool-accent: #f97316; --tool-accent-strong: #ea580c; --tool-accent-rgb: 249, 115, 22; }
.utility-page--pink { --tool-accent: #ec4899; --tool-accent-strong: #db2777; --tool-accent-rgb: 236, 72, 153; }
.utility-page--cyan { --tool-accent: #06b6d4; --tool-accent-strong: #0891b2; --tool-accent-rgb: 6, 182, 212; }
.utility-page--violet { --tool-accent: #8b5cf6; --tool-accent-strong: #7c3aed; --tool-accent-rgb: 139, 92, 246; }
.utility-page--yellow { --tool-accent: #eab308; --tool-accent-strong: #ca8a04; --tool-accent-rgb: 234, 179, 8; }
.utility-page--red { --tool-accent: #ef4444; --tool-accent-strong: #dc2626; --tool-accent-rgb: 239, 68, 68; }

.utility-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
    align-items: center;
    min-height: 238px;
    padding: 42px 46px;
    margin-bottom: 24px;
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-xl);
    background:
        radial-gradient(circle at 88% 18%, rgba(var(--tool-accent-rgb), .22), transparent 33%),
        radial-gradient(circle at 6% 92%, rgba(var(--tool-accent-rgb), .10), transparent 32%),
        var(--tool-surface);
    box-shadow: var(--tool-shadow);
}

.utility-hero::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -120px;
    bottom: -150px;
    border: 1px solid rgba(var(--tool-accent-rgb), .25);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(var(--tool-accent-rgb), .04), 0 0 0 70px rgba(var(--tool-accent-rgb), .025);
    pointer-events: none;
}

.utility-hero__content,
.utility-hero__visual { position: relative; z-index: 1; }

.utility-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 32px;
    padding: 7px 12px;
    margin-bottom: 16px;
    border: 1px solid rgba(var(--tool-accent-rgb), .32);
    border-radius: 999px;
    background: rgba(var(--tool-accent-rgb), .10);
    color: var(--tool-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.utility-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 5px rgba(var(--tool-accent-rgb), .12);
}

.utility-title {
    max-width: 820px;
    margin: 0;
    font-size: clamp(34px, 5.2vw, 62px);
    line-height: .98;
    letter-spacing: -.045em;
    font-weight: 900;
    color: var(--tool-text);
}

.utility-lead {
    max-width: 760px;
    margin: 18px 0 0;
    color: var(--tool-muted);
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.7;
}

.utility-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.utility-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--tool-border);
    background: rgba(255,255,255,.025);
    color: var(--tool-muted);
    font-size: 13px;
    font-weight: 650;
}

.utility-meta__item svg { width: 16px; height: 16px; color: var(--tool-accent); }

.utility-hero__visual {
    display: grid;
    place-items: center;
    width: 142px;
    height: 142px;
    border-radius: 38px;
    border: 1px solid rgba(var(--tool-accent-rgb), .28);
    background: linear-gradient(145deg, rgba(var(--tool-accent-rgb), .19), rgba(var(--tool-accent-rgb), .05));
    color: var(--tool-accent);
    font-size: 66px;
    filter: drop-shadow(0 20px 36px rgba(var(--tool-accent-rgb), .17));
    transform: rotate(3deg);
}

.utility-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px;
    margin-bottom: 24px;
    border: 1px solid var(--tool-border);
    border-radius: 18px;
    background: var(--tool-surface);
}

.utility-toolbar__label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tool-muted);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.utility-toolbar__links {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.utility-toolbar__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--tool-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: .18s ease;
}

.utility-toolbar__link:hover,
.utility-toolbar__link.is-active {
    border-color: rgba(var(--tool-accent-rgb), .28);
    background: rgba(var(--tool-accent-rgb), .10);
    color: var(--tool-accent);
}

.utility-workbench {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-xl);
    background: var(--tool-surface);
    box-shadow: var(--tool-shadow);
}

.utility-workbench__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 30px;
    border-bottom: 1px solid var(--tool-border);
    background: linear-gradient(180deg, rgba(var(--tool-accent-rgb), .07), transparent);
}

.utility-workbench__title-wrap { display: flex; align-items: center; gap: 15px; min-width: 0; }
.utility-workbench__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    border: 1px solid rgba(var(--tool-accent-rgb), .26);
    background: rgba(var(--tool-accent-rgb), .12);
    color: var(--tool-accent);
    font-size: 23px;
}

.utility-workbench__title { margin: 0; color: var(--tool-text); font-size: 22px; line-height: 1.2; }
.utility-workbench__desc { margin: 7px 0 0; color: var(--tool-muted); font-size: 14px; line-height: 1.55; }

.utility-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid var(--tool-border);
    color: var(--tool-meta);
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}
.utility-status::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--tool-success); box-shadow:0 0 0 4px rgba(34,197,94,.11); }
.utility-status.is-busy::before { background: var(--tool-warning); box-shadow:0 0 0 4px rgba(245,158,11,.12); animation: toolPulse 1s infinite; }
.utility-status.is-error::before { background: var(--tool-danger); box-shadow:0 0 0 4px rgba(239,68,68,.12); }
@keyframes toolPulse { 50% { opacity:.35; transform:scale(.78); } }

.utility-workbench__body { padding: 30px; }

.utility-grid { display:grid; gap:24px; }
.utility-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.utility-grid--sidebar { grid-template-columns: minmax(0, 1.4fr) minmax(290px, .6fr); }
.utility-grid--color { grid-template-columns: minmax(300px, .76fr) minmax(0, 1.24fr); }

.utility-panel {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-lg);
    background: var(--tool-surface-soft);
}
.utility-panel--plain { padding:0; border:0; background:transparent; }
.utility-panel__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.utility-panel__title { margin:0; font-size:16px; color:var(--tool-text); }
.utility-panel__hint { margin:5px 0 0; font-size:13px; line-height:1.5; color:var(--tool-meta); }

.utility-label {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 0 9px;
    color:var(--tool-text);
    font-size:13px;
    font-weight:800;
}
.utility-label__meta { color:var(--tool-meta); font-size:12px; font-weight:650; }

.utility-input,
.utility-select,
.utility-textarea,
.utility-output {
    display:block;
    width:100%;
    max-width:100%;
    border:1px solid var(--tool-border);
    border-radius:15px;
    outline:none;
    background:var(--tool-surface);
    color:var(--tool-text);
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.utility-input,
.utility-select { height:50px; padding:0 15px; font:inherit; }
.utility-textarea { min-height:230px; padding:16px; resize:vertical; font:500 14px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.utility-textarea--compact { min-height:170px; }
.utility-textarea--tall { min-height:360px; }
.utility-input:focus,
.utility-select:focus,
.utility-textarea:focus { border-color:rgba(var(--tool-accent-rgb),.70); box-shadow:0 0 0 4px rgba(var(--tool-accent-rgb),.11); }
.utility-input::placeholder,
.utility-textarea::placeholder { color:var(--tool-meta); opacity:.72; }
.utility-select { appearance:auto; }

.utility-output {
    min-height:230px;
    padding:16px;
    overflow:auto;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    font:500 14px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.utility-output[hidden] { display:none; }
.utility-output.is-empty { display:grid; place-items:center; color:var(--tool-meta); font-family:inherit; text-align:center; }

.utility-field { min-width:0; }
.utility-field + .utility-field { margin-top:18px; }
.utility-field-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.utility-inline { display:flex; align-items:center; gap:10px; }
.utility-inline > .utility-input,
.utility-inline > .utility-select { flex:1 1 auto; min-width:0; }

.utility-segmented {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    padding:6px;
    border:1px solid var(--tool-border);
    border-radius:16px;
    background:var(--tool-surface-soft);
}
.utility-segmented--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.utility-segmented input { position:absolute; opacity:0; pointer-events:none; }
.utility-segmented label {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:42px;
    padding:9px 13px;
    border-radius:11px;
    color:var(--tool-muted);
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:.18s ease;
    text-align:center;
}
.utility-segmented input:checked + label { color:#fff; background:linear-gradient(135deg,var(--tool-accent),var(--tool-accent-strong)); box-shadow:0 10px 25px rgba(var(--tool-accent-rgb),.22); }

.utility-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.utility-choice { position:relative; }
.utility-choice input { position:absolute; opacity:0; pointer-events:none; }
.utility-choice label {
    display:flex;
    align-items:flex-start;
    gap:11px;
    min-height:66px;
    padding:14px;
    border:1px solid var(--tool-border);
    border-radius:15px;
    background:var(--tool-surface);
    cursor:pointer;
    transition:.18s ease;
}
.utility-choice label::before {
    content:"";
    flex:0 0 auto;
    width:18px;
    height:18px;
    margin-top:1px;
    border:2px solid var(--tool-border);
    border-radius:50%;
    box-shadow:inset 0 0 0 4px var(--tool-surface);
}
.utility-choice input:checked + label { border-color:rgba(var(--tool-accent-rgb),.64); background:rgba(var(--tool-accent-rgb),.09); box-shadow:0 0 0 3px rgba(var(--tool-accent-rgb),.07); }
.utility-choice input:checked + label::before { border-color:var(--tool-accent); background:var(--tool-accent); }
.utility-choice__text strong { display:block; color:var(--tool-text); font-size:13px; line-height:1.35; }
.utility-choice__text small { display:block; margin-top:4px; color:var(--tool-meta); font-size:11px; line-height:1.35; }

.utility-check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.utility-check { position:relative; }
.utility-check input { position:absolute; opacity:0; pointer-events:none; }
.utility-check label {
    display:flex;
    align-items:center;
    gap:11px;
    min-height:54px;
    padding:12px 14px;
    border:1px solid var(--tool-border);
    border-radius:14px;
    background:var(--tool-surface);
    cursor:pointer;
    color:var(--tool-muted);
    font-size:13px;
    font-weight:750;
    transition:.18s ease;
}
.utility-check label::before {
    content:"";
    width:19px;
    height:19px;
    border:2px solid var(--tool-border);
    border-radius:6px;
    flex:0 0 auto;
}
.utility-check input:checked + label { border-color:rgba(var(--tool-accent-rgb),.55); color:var(--tool-text); background:rgba(var(--tool-accent-rgb),.08); }
.utility-check input:checked + label::before { border-color:var(--tool-accent); background:var(--tool-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; }

.utility-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:20px; }
.utility-actions--between { justify-content:space-between; }
.utility-action-group { display:flex; flex-wrap:wrap; gap:10px; }

.utility-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:46px;
    padding:11px 17px;
    border:1px solid transparent;
    border-radius:13px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration:none;
    cursor:pointer;
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.utility-btn:hover { transform:translateY(-1px); }
.utility-btn:active { transform:translateY(0); }
.utility-btn:disabled { opacity:.55; cursor:wait; transform:none; }
.utility-btn svg { width:17px; height:17px; }
.utility-btn--primary { color:#fff; background:linear-gradient(135deg,var(--tool-accent),var(--tool-accent-strong)); box-shadow:0 12px 28px rgba(var(--tool-accent-rgb),.24); }
.utility-btn--primary:hover { box-shadow:0 15px 34px rgba(var(--tool-accent-rgb),.31); }
.utility-btn--secondary { color:var(--tool-text); border-color:var(--tool-border); background:var(--tool-surface); }
.utility-btn--secondary:hover { border-color:rgba(var(--tool-accent-rgb),.45); background:rgba(var(--tool-accent-rgb),.07); }
.utility-btn--ghost { color:var(--tool-muted); background:transparent; }
.utility-btn--ghost:hover { color:var(--tool-accent); background:rgba(var(--tool-accent-rgb),.08); }
.utility-btn--full { width:100%; }

.utility-result {
    display:none;
    margin-top:22px;
    padding:20px;
    border:1px solid rgba(var(--tool-accent-rgb),.28);
    border-radius:18px;
    background:linear-gradient(145deg,rgba(var(--tool-accent-rgb),.08),transparent),var(--tool-surface);
}
.utility-result.is-visible { display:block; animation:toolReveal .22s ease both; }
@keyframes toolReveal { from { opacity:0; transform:translateY(6px); } }
.utility-result__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.utility-result__title { margin:0; color:var(--tool-text); font-size:14px; }
.utility-result__meta { color:var(--tool-meta); font-size:12px; }
.utility-result__value {
    width:100%;
    min-height:90px;
    max-height:360px;
    margin:0;
    padding:16px;
    overflow:auto;
    border:1px solid var(--tool-border);
    border-radius:14px;
    background:var(--tool-surface-raised);
    color:var(--tool-text);
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    font:600 14px/1.65 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}

.utility-progress { height:8px; overflow:hidden; border-radius:999px; background:var(--tool-surface); border:1px solid var(--tool-border); }
.utility-progress__bar { height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--tool-danger),var(--tool-warning),var(--tool-success)); transition:width .2s ease; }

.utility-range-row { display:grid; grid-template-columns:minmax(0,1fr) 92px; align-items:center; gap:14px; }
.utility-range { width:100%; accent-color:var(--tool-accent); }

.utility-presets { display:flex; flex-wrap:wrap; gap:8px; }
.utility-preset {
    min-height:36px;
    padding:8px 12px;
    border:1px solid var(--tool-border);
    border-radius:999px;
    background:var(--tool-surface);
    color:var(--tool-muted);
    font-size:12px;
    font-weight:750;
    cursor:pointer;
    transition:.18s ease;
}
.utility-preset:hover,
.utility-preset.is-active { border-color:rgba(var(--tool-accent-rgb),.50); background:rgba(var(--tool-accent-rgb),.09); color:var(--tool-accent); }

.utility-number-cloud { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; padding:18px; }
.utility-number-chip {
    display:grid;
    place-items:center;
    min-width:58px;
    height:58px;
    padding:0 14px;
    border-radius:18px;
    border:1px solid rgba(var(--tool-accent-rgb),.28);
    background:linear-gradient(145deg,rgba(var(--tool-accent-rgb),.16),rgba(var(--tool-accent-rgb),.05));
    color:var(--tool-text);
    font-size:20px;
    font-weight:900;
    box-shadow:0 10px 24px rgba(var(--tool-accent-rgb),.09);
}

.utility-color-preview {
    position:relative;
    min-height:360px;
    overflow:hidden;
    border-radius:22px;
    border:1px solid var(--tool-border);
    background:#3b82f6;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.utility-color-preview::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.52));
    pointer-events:none;
}
.utility-color-preview__info { position:absolute; z-index:1; left:22px; right:22px; bottom:20px; display:flex; align-items:flex-end; justify-content:space-between; gap:14px; color:#fff; }
.utility-color-preview__hex { font-size:30px; font-weight:900; letter-spacing:-.03em; text-shadow:0 2px 14px rgba(0,0,0,.24); }
.utility-color-preview__caption { font-size:12px; opacity:.8; }
.utility-color-picker { width:52px; height:42px; padding:4px; border:1px solid rgba(255,255,255,.45); border-radius:12px; background:rgba(255,255,255,.12); cursor:pointer; }

.utility-result-list { display:grid; gap:10px; }
.utility-result-row {
    display:grid;
    grid-template-columns:62px minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    min-height:58px;
    padding:10px 12px;
    border:1px solid var(--tool-border);
    border-radius:14px;
    background:var(--tool-surface);
}
.utility-result-row__label { color:var(--tool-accent); font-size:12px; font-weight:900; }
.utility-result-row__value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--tool-text); font:700 13px ui-monospace,SFMono-Regular,Menlo,monospace; }
.utility-icon-btn { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--tool-border); border-radius:10px; background:transparent; color:var(--tool-muted); cursor:pointer; transition:.18s ease; }
.utility-icon-btn:hover { color:var(--tool-accent); border-color:rgba(var(--tool-accent-rgb),.45); background:rgba(var(--tool-accent-rgb),.07); }

.utility-callout {
    display:flex;
    gap:13px;
    padding:16px;
    border:1px solid var(--tool-border);
    border-radius:16px;
    background:rgba(var(--tool-accent-rgb),.06);
    color:var(--tool-muted);
    font-size:13px;
    line-height:1.55;
}
.utility-callout__icon { flex:0 0 auto; font-size:20px; }
.utility-callout strong { color:var(--tool-text); }

.utility-help {
    margin-top:24px;
    border:1px solid var(--tool-border);
    border-radius:var(--tool-radius-lg);
    background:var(--tool-surface);
    overflow:hidden;
}
.utility-help summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:20px 24px;
    list-style:none;
    cursor:pointer;
    color:var(--tool-text);
    font-size:14px;
    font-weight:850;
}
.utility-help summary::-webkit-details-marker { display:none; }
.utility-help summary::after { content:"+"; display:grid; place-items:center; width:30px; height:30px; border-radius:9px; border:1px solid var(--tool-border); color:var(--tool-accent); font-size:20px; transition:.18s ease; }
.utility-help[open] summary::after { content:"−"; }
.utility-help__body { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:0 24px 24px; }
.utility-help__step { padding:16px; border:1px solid var(--tool-border); border-radius:15px; background:var(--tool-surface-soft); }
.utility-help__number { display:grid; place-items:center; width:30px; height:30px; margin-bottom:12px; border-radius:10px; background:rgba(var(--tool-accent-rgb),.13); color:var(--tool-accent); font-size:12px; font-weight:900; }
.utility-help__step strong { display:block; color:var(--tool-text); font-size:13px; }
.utility-help__step p { margin:7px 0 0; color:var(--tool-meta); font-size:12px; line-height:1.55; }

.utility-toast-stack { position:fixed; right:22px; bottom:22px; z-index:5000; display:grid; gap:10px; pointer-events:none; }
.utility-toast {
    min-width:240px;
    max-width:min(380px,calc(100vw - 32px));
    padding:13px 16px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    background:#111827;
    color:#fff;
    box-shadow:0 18px 50px rgba(0,0,0,.28);
    font-size:13px;
    font-weight:750;
    opacity:0;
    transform:translateY(12px);
    transition:.22s ease;
}
.utility-toast.is-visible { opacity:1; transform:translateY(0); }
.utility-toast--error { background:#7f1d1d; }
.utility-toast--success { background:#064e3b; }

.utility-password-display {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:82px;
    padding:16px 18px;
    border:1px solid rgba(var(--tool-accent-rgb),.32);
    border-radius:18px;
    background:linear-gradient(145deg,rgba(var(--tool-accent-rgb),.10),transparent),var(--tool-surface-raised);
}
.utility-password-display code { flex:1; min-width:0; overflow-wrap:anywhere; color:var(--tool-text); font:800 19px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }

.utility-key-wrap { position:relative; }
.utility-key-wrap .utility-input { padding-right:52px; }
.utility-key-toggle { position:absolute; top:8px; right:8px; display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:9px; background:transparent; color:var(--tool-meta); cursor:pointer; }
.utility-key-toggle:hover { color:var(--tool-accent); background:rgba(var(--tool-accent-rgb),.08); }

.utility-swap { align-self:center; justify-self:center; }

@media (max-width: 980px) {
    .utility-grid--2,
    .utility-grid--sidebar,
    .utility-grid--color { grid-template-columns:1fr; }
    .utility-color-preview { min-height:260px; }
    .utility-help__body { grid-template-columns:1fr; }
}

@media (max-width: 760px) {
    .utility-container { width:min(100% - 20px,1240px) !important; padding-top:18px !important; }
    .utility-hero { grid-template-columns:1fr; min-height:0; padding:28px 24px; border-radius:22px; }
    .utility-hero__visual { display:none; }
    .utility-title { font-size:clamp(32px,11vw,48px); }
    .utility-lead { margin-top:14px; }
    .utility-meta { gap:7px; }
    .utility-meta__item { font-size:11px; min-height:32px; padding:7px 9px; }
    .utility-toolbar { align-items:flex-start; flex-direction:column; }
    .utility-toolbar__links { width:100%; }
    .utility-workbench { border-radius:22px; }
    .utility-workbench__head { padding:20px; }
    .utility-workbench__body { padding:20px; }
    .utility-workbench__desc { display:none; }
    .utility-status { display:none; }
    .utility-panel { padding:17px; border-radius:17px; }
    .utility-field-row,
    .utility-choice-grid,
    .utility-check-grid { grid-template-columns:1fr; }
    .utility-textarea { min-height:200px; }
    .utility-textarea--tall { min-height:290px; }
    .utility-actions { align-items:stretch; }
    .utility-actions .utility-btn { flex:1 1 auto; }
    .utility-action-group { width:100%; }
    .utility-action-group .utility-btn { flex:1; }
    .utility-result-row { grid-template-columns:54px minmax(0,1fr) auto; }
    .utility-help summary { padding:18px; }
    .utility-help__body { padding:0 18px 18px; }
    .utility-toast-stack { right:10px; bottom:10px; left:10px; }
    .utility-toast { min-width:0; max-width:none; }
}

@media (max-width: 460px) {
    .utility-kicker { font-size:10px; }
    .utility-workbench__icon { width:42px; height:42px; }
    .utility-workbench__title { font-size:18px; }
    .utility-inline { align-items:stretch; flex-direction:column; }
    .utility-inline .utility-btn { width:100%; }
    .utility-segmented label { font-size:11px; padding-inline:8px; }
    .utility-number-chip { min-width:50px; height:50px; border-radius:15px; font-size:17px; }
}


/* Tools Suite 1.2 — Image Optimizer, Text Diff, URL Toolkit */
.utility-segmented--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.utility-field-note { display:block; margin-top:7px; color:var(--tool-meta); font-size:11px; line-height:1.45; }
.utility-color-input { flex:0 0 52px; width:52px; height:50px; padding:5px; border:1px solid var(--tool-border); border-radius:14px; background:var(--tool-surface); cursor:pointer; }
.utility-color-input--full { width:100%; }
.utility-dropzone { display:grid; place-items:center; min-height:260px; padding:34px; border:1px dashed rgba(var(--tool-accent-rgb),.48); border-radius:24px; background:linear-gradient(145deg,rgba(var(--tool-accent-rgb),.09),transparent),var(--tool-surface-soft); text-align:center; cursor:pointer; transition:.2s ease; }
.utility-dropzone:hover,.utility-dropzone.is-dragging { border-color:var(--tool-accent); background:rgba(var(--tool-accent-rgb),.13); transform:translateY(-1px); }
.utility-dropzone__icon { display:grid; place-items:center; width:68px; height:68px; margin-bottom:16px; border-radius:22px; background:rgba(var(--tool-accent-rgb),.14); color:var(--tool-accent); font-size:36px; }
.utility-dropzone strong { color:var(--tool-text); font-size:18px; }
.utility-dropzone span:not(.utility-dropzone__icon) { margin-top:7px; color:var(--tool-muted); font-size:13px; }
.utility-dropzone small { margin-top:12px; color:var(--tool-meta); font-size:11px; }
.utility-image-queue { display:grid; gap:10px; margin-top:18px; }
.utility-image-item { display:grid; grid-template-columns:74px minmax(0,1fr) auto; align-items:center; gap:14px; padding:12px; border:1px solid var(--tool-border); border-radius:18px; background:var(--tool-surface-soft); }
.utility-image-item>img { width:74px; height:62px; object-fit:cover; border-radius:12px; border:1px solid var(--tool-border); background:var(--tool-surface); }
.utility-image-item__copy { min-width:0; }
.utility-image-item__name { display:flex; align-items:center; gap:9px; min-width:0; }
.utility-image-item__name strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--tool-text); font-size:13px; }
.utility-image-item__copy small,.utility-image-item__copy>span { display:block; margin-top:4px; color:var(--tool-meta); font-size:11px; }
.utility-image-item__progress { height:5px; margin-top:8px; overflow:hidden; border-radius:999px; background:var(--tool-surface); }
.utility-image-item__progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--tool-accent),var(--tool-success)); transition:.25s ease; }
.utility-image-item__actions { display:flex; gap:7px; }
.utility-image-badge { flex:0 0 auto; padding:4px 7px; border-radius:999px; border:1px solid var(--tool-border); color:var(--tool-meta); font-size:10px; font-weight:800; }
.utility-image-badge--done { color:var(--tool-success); border-color:rgba(34,197,94,.32); background:rgba(34,197,94,.08); }
.utility-image-badge--working { color:var(--tool-warning); border-color:rgba(245,158,11,.32); }
.utility-image-badge--error { color:var(--tool-danger); border-color:rgba(239,68,68,.32); }
.utility-empty-state { display:grid; place-items:center; min-height:180px; padding:28px; border:1px dashed var(--tool-border); border-radius:18px; color:var(--tool-meta); text-align:center; }
.utility-empty-state>span { display:grid; place-items:center; width:48px; height:48px; margin-bottom:10px; border-radius:15px; background:rgba(var(--tool-accent-rgb),.09); color:var(--tool-accent); font-size:22px; }
.utility-empty-state strong { color:var(--tool-text); font-size:14px; }
.utility-empty-state small { margin-top:6px; font-size:11px; }
.utility-diff-options { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; }
.utility-diff-options>.utility-check { flex:0 0 auto; }
.utility-stat-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:24px; }
.utility-stat-strip article { padding:16px; border:1px solid var(--tool-border); border-radius:16px; background:var(--tool-surface-soft); }
.utility-stat-strip span { display:block; color:var(--tool-meta); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.utility-stat-strip strong { display:block; margin-top:7px; color:var(--tool-text); font-size:24px; }
.utility-diff-result { margin-top:24px; border:1px solid var(--tool-border); border-radius:20px; overflow:hidden; background:var(--tool-surface-soft); }
.utility-diff-result__head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-bottom:1px solid var(--tool-border); }
.utility-diff-result__head strong { display:block; color:var(--tool-text); font-size:14px; }
.utility-diff-result__head span { display:block; margin-top:4px; color:var(--tool-meta); font-size:11px; }
.utility-diff-table { min-width:720px; }
.utility-diff-result>#diffOutput { max-height:650px; overflow:auto; }
.utility-diff-row { display:grid; grid-template-columns:52px minmax(0,1fr) 52px minmax(0,1fr); border-bottom:1px solid var(--tool-border); }
.utility-diff-row:last-child { border-bottom:0; }
.utility-diff-row>span { padding:11px 10px; border-right:1px solid var(--tool-border); color:var(--tool-meta); background:var(--tool-surface); text-align:right; font:11px ui-monospace,SFMono-Regular,Menlo,monospace; }
.utility-diff-row>div { min-height:42px; padding:10px 13px; border-right:1px solid var(--tool-border); color:var(--tool-text); white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace; }
.utility-diff-row>div:last-child { border-right:0; }
.utility-diff-row>div.is-remove { background:rgba(239,68,68,.09); }
.utility-diff-row>div.is-add { background:rgba(34,197,94,.09); }
.utility-diff-row>div.is-empty { background:repeating-linear-gradient(135deg,transparent,transparent 6px,rgba(148,163,184,.035) 6px,rgba(148,163,184,.035) 12px); }
.utility-diff-token--remove { color:#fecaca; background:rgba(239,68,68,.22); text-decoration:line-through; border-radius:4px; }
.utility-diff-token--add { color:#bbf7d0; background:rgba(34,197,94,.22); border-radius:4px; }
.utility-diff-pane { min-height:260px; padding:18px; border:1px solid var(--tool-border); border-radius:16px; background:var(--tool-surface); }
.utility-diff-pane>strong { display:block; margin-bottom:12px; color:var(--tool-accent); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.utility-diff-pane>div { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--tool-text); font:13px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace; }
.utility-mode-panel { display:none; padding-top:24px; }
.utility-mode-panel.is-active { display:block; animation:toolReveal .2s ease both; }
.utility-url-parts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:16px; }
.utility-url-parts div { min-width:0; padding:11px 12px; border:1px solid var(--tool-border); border-radius:12px; background:var(--tool-surface); }
.utility-url-parts span { display:block; color:var(--tool-meta); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.utility-url-parts strong { display:block; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--tool-text); font-size:12px; }
.utility-url-list { display:grid; gap:8px; max-height:500px; overflow:auto; }
.utility-url-item { display:grid; grid-template-columns:32px minmax(0,1fr) 34px; align-items:center; gap:9px; padding:9px; border:1px solid var(--tool-border); border-radius:13px; background:var(--tool-surface); }
.utility-url-item>span { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:rgba(var(--tool-accent-rgb),.09); color:var(--tool-accent); font-size:10px; font-weight:900; }
.utility-url-item>a { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--tool-text); font-size:12px; text-decoration:none; }
.utility-url-item>a:hover { color:var(--tool-accent); }
.utility-qr-panel { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.utility-qr-preview { display:grid; place-items:center; width:min(100%,440px); aspect-ratio:1; padding:20px; border:1px solid var(--tool-border); border-radius:22px; background:#fff; color:#0f172a; }
.utility-qr-preview svg { display:block; width:100%; height:100%; }
.utility-qr-preview>span { font-size:52px; font-weight:950; opacity:.13; }
.utility-qr-preview>small { margin-top:-42%; color:#64748b; font-size:11px; text-align:center; }
@media(max-width:760px){.utility-segmented--4{grid-template-columns:repeat(2,minmax(0,1fr))}.utility-image-item{grid-template-columns:58px minmax(0,1fr)}.utility-image-item>img{width:58px;height:54px}.utility-image-item__actions{grid-column:1/-1;justify-content:flex-end}.utility-stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.utility-diff-options{align-items:stretch}.utility-diff-options>.utility-check{flex:1 1 100%}.utility-diff-options>.utility-action-group{width:100%}.utility-diff-result__head{align-items:flex-start;flex-direction:column}.utility-url-parts{grid-template-columns:1fr}}


/* Tools Suite 1.2.1 — Image Optimizer usability */
.utility-grid--image-optimizer {
    grid-template-columns:minmax(0,1fr) 360px;
    align-items:start;
}
.utility-image-settings {
    position:sticky;
    top:18px;
    padding:24px;
    background:
        linear-gradient(180deg,rgba(var(--tool-accent-rgb),.055),transparent 34%),
        var(--tool-surface-soft);
}
.utility-settings-reset {
    flex:0 0 auto;
    padding:7px 9px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--tool-meta);
    font:inherit;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}
.utility-settings-reset:hover { color:var(--tool-accent); background:rgba(var(--tool-accent-rgb),.08); }
.utility-range-row--quality { grid-template-columns:minmax(0,1fr) 78px; }
.utility-resize-field {
    padding-top:18px;
    border-top:1px solid var(--tool-border);
}
.utility-resize-mode { margin-bottom:15px; }
.utility-resize-controls { transition:opacity .18s ease; }
.utility-resize-controls.is-disabled { opacity:.48; }
.utility-resize-controls.is-disabled .utility-presets,
.utility-resize-controls.is-disabled .utility-dimension-grid { pointer-events:none; }
.utility-resize-caption {
    display:block;
    margin:0 0 8px;
    color:var(--tool-meta);
    font-size:10px;
    font-weight:850;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.utility-size-presets { gap:6px; }
.utility-size-presets .utility-preset {
    min-height:32px;
    padding:7px 9px;
    font-size:10px;
}
.utility-dimension-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);
    align-items:end;
    gap:8px;
    margin-top:13px;
}
.utility-dimension-grid>label>span {
    display:block;
    margin-bottom:7px;
    color:var(--tool-muted);
    font-size:11px;
    font-weight:750;
}
.utility-dimension-cross {
    display:grid;
    place-items:center;
    height:50px;
    color:var(--tool-meta);
    font-size:14px;
    font-weight:900;
}
.utility-input-suffix { position:relative; }
.utility-input-suffix .utility-input { padding-right:40px; }
.utility-input-suffix>b {
    position:absolute;
    top:50%;
    right:13px;
    transform:translateY(-50%);
    color:var(--tool-meta);
    font-size:10px;
    pointer-events:none;
}
.utility-resize-preview {
    margin-top:13px;
    padding:13px 14px;
    border:1px solid rgba(var(--tool-accent-rgb),.24);
    border-radius:14px;
    background:rgba(var(--tool-accent-rgb),.055);
}
.utility-resize-preview>span {
    display:block;
    color:var(--tool-accent);
    font-size:9px;
    font-weight:900;
    letter-spacing:.07em;
    text-transform:uppercase;
}
.utility-resize-preview>strong {
    display:block;
    margin-top:6px;
    color:var(--tool-text);
    font-size:12px;
    line-height:1.4;
}
.utility-resize-preview>small {
    display:block;
    margin-top:5px;
    color:var(--tool-meta);
    font-size:10px;
    line-height:1.45;
}
.utility-jpeg-background { align-items:stretch; }
.utility-callout--compact { margin-top:18px; padding:14px; font-size:11px; }
.utility-image-badge--larger {
    color:var(--tool-warning);
    border-color:rgba(245,158,11,.34);
    background:rgba(245,158,11,.08);
}
.utility-image-item__progress i.is-larger { background:linear-gradient(90deg,var(--tool-warning),var(--tool-danger)); }
.utility-image-item__copy>span.is-warning { color:var(--tool-warning); }
.utility-field[hidden] { display:none !important; }
@media(max-width:1020px){
    .utility-grid--image-optimizer { grid-template-columns:1fr; }
    .utility-image-settings { position:static; }
}
@media(max-width:520px){
    .utility-dimension-grid { grid-template-columns:1fr; align-items:stretch; }
    .utility-dimension-cross { height:auto; transform:rotate(90deg); }
    .utility-size-presets .utility-preset { flex:1 1 calc(50% - 6px); }
}

/* SEO Pack 1.0: breadcrumbs, editorial content and service catalog */
.utility-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 18px;
    padding: 0 4px;
    color: var(--tool-meta);
    font-size: 13px;
    line-height: 1.5;
}

.utility-breadcrumb a {
    color: var(--tool-muted);
    text-decoration: none;
    transition: color .18s ease;
}

.utility-breadcrumb a:hover { color: var(--tool-accent); }
.utility-breadcrumb span[aria-hidden="true"] { opacity: .48; }
.utility-breadcrumb span[aria-current="page"] { color: var(--tool-text); font-weight: 700; }

.utility-seo {
    margin-top: 28px;
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-xl);
    background:
        radial-gradient(circle at 95% 4%, rgba(var(--tool-accent-rgb), .09), transparent 28%),
        var(--tool-surface);
    box-shadow: var(--tool-shadow);
}

.utility-seo__head {
    max-width: 850px;
    margin-bottom: 30px;
}

.utility-seo__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--tool-accent);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.utility-seo__eyebrow::before {
    content: "";
    width: 20px;
    height: 1px;
    background: currentColor;
}

.utility-seo__head h2,
.utility-catalog__head h2 {
    margin: 0;
    color: var(--tool-text);
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.05;
    letter-spacing: -.035em;
}

.utility-seo__head p,
.utility-catalog__head p {
    margin: 13px 0 0;
    color: var(--tool-muted);
    font-size: 16px;
    line-height: 1.7;
}

.utility-seo__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(250px, .75fr);
    gap: 22px;
    align-items: stretch;
}

.utility-seo__intro > article,
.utility-seo__intro > aside {
    padding: 24px;
    border: 1px solid var(--tool-border);
    border-radius: 20px;
    background: rgba(255, 255, 255, .018);
}

.utility-seo__intro > article p {
    margin: 0;
    color: var(--tool-muted);
    font-size: 15px;
    line-height: 1.82;
}

.utility-seo__intro > article p + p { margin-top: 14px; }
.utility-seo__intro > aside { background: rgba(var(--tool-accent-rgb), .055); }
.utility-seo__intro > aside h3 { margin: 0 0 15px; color: var(--tool-text); font-size: 17px; }
.utility-seo__intro > aside ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.utility-seo__intro > aside li {
    position: relative;
    padding-left: 22px;
    color: var(--tool-muted);
    font-size: 14px;
    line-height: 1.5;
}
.utility-seo__intro > aside li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--tool-accent);
    font-weight: 900;
}

.utility-seo__features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.utility-seo__features article {
    min-height: 112px;
    padding: 18px;
    border: 1px solid var(--tool-border);
    border-radius: 18px;
    background: var(--tool-surface-raised);
}

.utility-seo__features span {
    display: block;
    margin-bottom: 19px;
    color: var(--tool-accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 800;
}

.utility-seo__features strong {
    display: block;
    color: var(--tool-text);
    font-size: 14px;
    line-height: 1.45;
}

.utility-seo__faq,
.utility-seo__related { margin-top: 34px; }
.utility-seo__section-title { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.utility-seo__section-title span { color: var(--tool-meta); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.utility-seo__section-title h3 { margin: 0; color: var(--tool-text); font-size: 23px; letter-spacing: -.02em; }

.utility-seo__faq-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.utility-seo__faq-list details {
    border: 1px solid var(--tool-border);
    border-radius: 18px;
    background: rgba(255,255,255,.018);
    overflow: hidden;
}

.utility-seo__faq-list summary {
    position: relative;
    cursor: pointer;
    padding: 18px 48px 18px 18px;
    color: var(--tool-text);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.5;
    list-style: none;
}
.utility-seo__faq-list summary::-webkit-details-marker { display: none; }
.utility-seo__faq-list summary::after {
    content: "+";
    position: absolute;
    top: 16px;
    right: 18px;
    color: var(--tool-accent);
    font-size: 20px;
    font-weight: 500;
}
.utility-seo__faq-list details[open] summary::after { content: "−"; }
.utility-seo__faq-list p {
    margin: 0;
    padding: 0 18px 18px;
    color: var(--tool-muted);
    font-size: 14px;
    line-height: 1.65;
}

.utility-seo__related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.utility-seo__related-grid > a {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    min-height: 104px;
    padding: 16px;
    border: 1px solid var(--tool-border);
    border-radius: 18px;
    color: inherit;
    text-decoration: none;
    background: var(--tool-surface-raised);
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.utility-seo__related-grid > a:hover {
    border-color: rgba(var(--tool-accent-rgb), .45);
    background: rgba(var(--tool-accent-rgb), .065);
    transform: translateY(-2px);
}

.utility-seo__related-grid > a > span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(var(--tool-accent-rgb), .12);
    color: var(--tool-accent);
    font-size: 20px;
    font-weight: 850;
}
.utility-seo__related-grid strong { display: block; color: var(--tool-text); font-size: 14px; }
.utility-seo__related-grid small {
    display: -webkit-box;
    margin-top: 5px;
    overflow: hidden;
    color: var(--tool-meta);
    font-size: 11px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.utility-seo__related-grid i { color: var(--tool-accent); font-style: normal; font-size: 20px; }

.utility-hero--catalog { min-height: 280px; }
.utility-catalog {
    margin-top: 24px;
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-xl);
    background: var(--tool-surface);
    box-shadow: var(--tool-shadow);
}

.utility-catalog__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--tool-border);
}
.utility-catalog__head > div { max-width: 720px; }

.utility-catalog__search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(100%, 360px);
    min-height: 50px;
    padding: 0 12px 0 16px;
    border: 1px solid var(--tool-border);
    border-radius: 16px;
    background: var(--tool-surface-raised);
    color: var(--tool-meta);
}
.utility-catalog__search:focus-within { border-color: rgba(var(--tool-accent-rgb), .55); box-shadow: 0 0 0 3px rgba(var(--tool-accent-rgb), .10); }
.utility-catalog__search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--tool-text); font: inherit; }
.utility-catalog__search input::placeholder { color: var(--tool-meta); }
.utility-catalog__search kbd { padding: 4px 7px; border: 1px solid var(--tool-border); border-radius: 7px; color: var(--tool-meta); background: rgba(255,255,255,.025); font-size: 11px; }

.utility-catalog__filters {
    display: flex;
    gap: 8px;
    margin: 22px 0 30px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.utility-catalog__filters button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--tool-border);
    border-radius: 999px;
    background: transparent;
    color: var(--tool-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}
.utility-catalog__filters button span { margin-left: 5px; color: var(--tool-meta); }
.utility-catalog__filters button:hover,
.utility-catalog__filters button.is-active { border-color: rgba(var(--tool-accent-rgb), .4); color: var(--tool-accent); background: rgba(var(--tool-accent-rgb), .10); }

.utility-catalog__groups { display: grid; gap: 30px; }
.utility-catalog__group > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.utility-catalog__group > header h3 { margin: 0; color: var(--tool-text); font-size: 20px; letter-spacing: -.02em; }
.utility-catalog__group > header span { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; border: 1px solid var(--tool-border); border-radius: 999px; color: var(--tool-meta); font-size: 11px; font-weight: 800; }
.utility-catalog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }

.utility-service-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 15px;
    min-height: 230px;
    padding: 20px;
    border: 1px solid var(--tool-border);
    border-radius: 20px;
    background: var(--tool-surface-raised);
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.utility-service-card:hover { transform: translateY(-3px); border-color: rgba(var(--tool-accent-rgb), .42); box-shadow: 0 18px 44px rgba(0,0,0,.12); }
.utility-service-card[hidden] { display: none !important; }
.utility-service-card__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; border: 1px solid rgba(99,102,241,.25); background: rgba(99,102,241,.10); color: #8b5cf6; font-size: 22px; font-weight: 900; }
.utility-service-card__icon--cyan { color: #06b6d4; border-color: rgba(6,182,212,.3); background: rgba(6,182,212,.10); }
.utility-service-card__icon--pink { color: #ec4899; border-color: rgba(236,72,153,.3); background: rgba(236,72,153,.10); }
.utility-service-card__icon--orange { color: #f97316; border-color: rgba(249,115,22,.3); background: rgba(249,115,22,.10); }
.utility-service-card__icon--green { color: #10b981; border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.10); }
.utility-service-card__icon--yellow { color: #eab308; border-color: rgba(234,179,8,.3); background: rgba(234,179,8,.10); }
.utility-service-card__icon--violet { color: #8b5cf6; border-color: rgba(139,92,246,.3); background: rgba(139,92,246,.10); }
.utility-service-card__category { display: block; margin-bottom: 7px; color: var(--tool-meta); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.utility-service-card h4 { margin: 0; color: var(--tool-text); font-size: 18px; line-height: 1.25; letter-spacing: -.02em; }
.utility-service-card p { display: -webkit-box; margin: 10px 0 18px; overflow: hidden; color: var(--tool-muted); font-size: 13px; line-height: 1.6; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.utility-service-card__action { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; color: var(--tool-accent); font-size: 12px; font-weight: 800; }
.utility-service-card__action i { font-style: normal; transition: transform .18s ease; }
.utility-service-card:hover .utility-service-card__action i { transform: translateX(3px); }

.utility-catalog__empty { display: grid; place-items: center; min-height: 260px; padding: 30px; border: 1px dashed var(--tool-border); border-radius: 20px; text-align: center; }
.utility-catalog__empty[hidden] { display: none !important; }
.utility-catalog__empty > span { font-size: 40px; color: var(--tool-accent); }
.utility-catalog__empty strong { margin-top: 12px; color: var(--tool-text); font-size: 20px; }
.utility-catalog__empty p { margin: 7px 0 0; color: var(--tool-muted); }
.utility-seo--catalog { margin-top: 24px; }

@media (max-width: 980px) {
    .utility-seo__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .utility-seo__faq-list,
    .utility-seo__related-grid,
    .utility-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .utility-catalog__head { align-items: stretch; flex-direction: column; }
    .utility-catalog__search { width: 100%; }
}

@media (max-width: 720px) {
    .utility-breadcrumb { margin-bottom: 14px; font-size: 12px; }
    .utility-seo { padding: 24px 18px; }
    .utility-seo__intro { grid-template-columns: 1fr; }
    .utility-seo__features,
    .utility-seo__faq-list,
    .utility-seo__related-grid,
    .utility-catalog__grid { grid-template-columns: 1fr; }
    .utility-seo__section-title { align-items: flex-start; flex-direction: column; gap: 5px; }
    .utility-catalog { padding: 22px 16px; }
    .utility-service-card { min-height: 0; }
    .utility-hero--catalog { min-height: 0; }
}

/* Service menu 1.4 */
.utility-toolbar--services {
    display:grid;
    grid-template-columns:auto 34px minmax(0,1fr) 34px;
    align-items:center;
    gap:10px;
    overflow:hidden;
}
.utility-toolbar__viewport { min-width:0; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior-inline:contain; }
.utility-toolbar__viewport::-webkit-scrollbar { display:none; }
.utility-toolbar--services .utility-toolbar__links { width:max-content; min-width:100%; overflow:visible; padding:0; }
.utility-toolbar__arrow {
    display:grid; place-items:center; width:34px; height:34px; padding:0;
    border:1px solid var(--tool-border); border-radius:11px; background:var(--tool-surface-soft);
    color:var(--tool-muted); font:800 23px/1 system-ui; cursor:pointer; transition:.18s ease;
}
.utility-toolbar__arrow:hover:not(:disabled) { color:var(--tool-accent); border-color:rgba(var(--tool-accent-rgb),.45); background:rgba(var(--tool-accent-rgb),.10); }
.utility-toolbar__arrow:disabled { opacity:.24; cursor:default; }
.utility-toolbar__link.is-active { box-shadow:0 0 0 1px rgba(var(--tool-accent-rgb),.12),0 8px 22px rgba(var(--tool-accent-rgb),.12); }

/* Shared small controls */
.utility-btn--small { min-height:36px!important; padding:7px 12px!important; font-size:12px!important; }
.utility-output--compact { min-height:120px; }
.utility-switch { display:inline-flex; align-items:center; gap:10px; cursor:pointer; color:var(--tool-text); font-size:13px; }
.utility-switch input { position:absolute; opacity:0; }
.utility-switch > span { position:relative; width:42px; height:23px; border:1px solid var(--tool-border); border-radius:999px; background:var(--tool-surface); transition:.18s ease; }
.utility-switch > span::after { content:""; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:var(--tool-meta); transition:.18s ease; }
.utility-switch input:checked + span { border-color:rgba(var(--tool-accent-rgb),.55); background:rgba(var(--tool-accent-rgb),.16); }
.utility-switch input:checked + span::after { left:22px; background:var(--tool-accent); }

/* Regex Studio */
.regex-layout { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:22px; align-items:start; }
.regex-pattern-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:8px; margin-bottom:13px; }
.regex-pattern-input { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.regex-delimiter { color:var(--tool-accent); font:800 24px/1 ui-monospace,monospace; }
.regex-flags-preview { min-width:42px; color:var(--tool-accent); font:800 14px/1 ui-monospace,monospace; }
.regex-flags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.regex-flags label { display:flex; align-items:center; gap:7px; min-height:37px; padding:7px 10px; border:1px solid var(--tool-border); border-radius:12px; background:var(--tool-surface); cursor:pointer; }
.regex-flags input { accent-color:var(--tool-accent); }
.regex-flags span { color:var(--tool-accent); font:800 14px ui-monospace,monospace; }
.regex-flags small { color:var(--tool-meta); font-size:11px; }
.regex-replace-box { display:grid; gap:13px; margin-top:18px; padding:15px; border:1px solid var(--tool-border); border-radius:16px; background:var(--tool-surface); }
.regex-highlighted { min-height:240px; max-height:430px; overflow:auto; padding:17px; border:1px solid var(--tool-border); border-radius:16px; background:var(--tool-surface); color:var(--tool-text); white-space:pre-wrap; overflow-wrap:anywhere; font:500 14px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace; }
.regex-highlighted.is-empty { display:grid; place-items:center; color:var(--tool-meta); font-family:inherit; }
.regex-highlighted mark { padding:1px 2px; border-radius:4px; background:rgba(var(--tool-accent-rgb),.28); color:var(--tool-text); box-shadow:inset 0 -1px 0 var(--tool-accent); }
.regex-match-list { display:grid; gap:10px; margin-top:15px; max-height:440px; overflow:auto; padding-right:4px; }
.regex-match-card { border:1px solid var(--tool-border); border-radius:14px; background:var(--tool-surface); overflow:hidden; }
.regex-match-card header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px 13px; }
.regex-match-card header strong { color:var(--tool-accent); }
.regex-match-card code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--tool-text); }
.regex-match-card small { color:var(--tool-meta); }
.regex-groups { display:flex; flex-wrap:wrap; gap:7px; padding:0 13px 12px; }
.regex-groups span { display:inline-flex; gap:7px; padding:6px 8px; border-radius:9px; background:rgba(var(--tool-accent-rgb),.08); color:var(--tool-muted); font-size:11px; }
.regex-groups b { color:var(--tool-accent); }
.regex-replace-result { margin-top:16px; }
.regex-presets { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:22px; padding:15px; border:1px solid var(--tool-border); border-radius:17px; background:var(--tool-surface-soft); }
.regex-presets > div { margin-right:auto; display:grid; gap:2px; }
.regex-presets > div span { color:var(--tool-meta); font-size:11px; }
.regex-presets button { min-height:34px; padding:7px 11px; border:1px solid var(--tool-border); border-radius:999px; background:var(--tool-surface); color:var(--tool-muted); cursor:pointer; font-weight:750; }
.regex-presets button:hover { color:var(--tool-accent); border-color:rgba(var(--tool-accent-rgb),.45); }

/* Metadata Cleaner */
.metadata-dropzone { display:grid; place-items:center; min-height:285px; padding:36px; border:1px dashed rgba(var(--tool-accent-rgb),.56); border-radius:22px; background:linear-gradient(145deg,rgba(var(--tool-accent-rgb),.10),rgba(var(--tool-accent-rgb),.035)); text-align:center; cursor:pointer; outline:none; transition:.18s ease; }
.metadata-dropzone:hover,.metadata-dropzone:focus-visible,.metadata-dropzone.is-dragging { border-color:var(--tool-accent); background:rgba(var(--tool-accent-rgb),.13); transform:translateY(-1px); }
.metadata-dropzone__icon { display:grid; place-items:center; width:66px; height:66px; margin-bottom:17px; border-radius:20px; background:rgba(var(--tool-accent-rgb),.17); color:var(--tool-accent); font-size:34px; }
.metadata-dropzone strong { color:var(--tool-text); font-size:20px; }
.metadata-dropzone p { margin:8px 0; color:var(--tool-muted); }
.metadata-dropzone small { color:var(--tool-meta); }
.metadata-workspace { display:grid; gap:22px; margin-top:22px; }
.metadata-workspace[hidden] { display:none !important; }
.metadata-summary { display:grid; grid-template-columns:170px minmax(0,1fr); gap:22px; align-items:center; }
.metadata-preview { height:150px; border:1px solid var(--tool-border); border-radius:17px; overflow:hidden; background:repeating-conic-gradient(#1c2028 0 25%,#272c36 0 50%) 50%/18px 18px; }
.metadata-preview img { width:100%; height:100%; object-fit:contain; }
.metadata-preview img[hidden], .metadata-preview img:not([src]) { display:none !important; }
.metadata-file-copy h3 { margin:9px 0 6px; color:var(--tool-text); overflow-wrap:anywhere; }
.metadata-file-copy p { margin:0; color:var(--tool-meta); }
.metadata-warnings { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.metadata-warnings span { padding:7px 9px; border-radius:10px; background:rgba(245,158,11,.10); color:#fbbf24; font-size:11px; font-weight:750; }
.metadata-warnings .is-danger { background:rgba(239,68,68,.12); color:#f87171; }
.metadata-warnings .is-safe { background:rgba(34,197,94,.10); color:#4ade80; }
.metadata-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:22px; align-items:start; }
.metadata-table { display:grid; gap:7px; }
.metadata-table > div { display:grid; grid-template-columns:minmax(145px,.42fr) minmax(0,.58fr); gap:15px; padding:11px 13px; border:1px solid var(--tool-border); border-radius:12px; background:var(--tool-surface); }
.metadata-table span { color:var(--tool-meta); font-size:12px; }
.metadata-table strong { color:var(--tool-text); font-size:12px; overflow-wrap:anywhere; }
.metadata-empty { place-items:center; min-height:220px; text-align:center; color:var(--tool-muted); }
.metadata-empty:not([hidden]) { display:grid; }
.metadata-empty > span { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; background:rgba(34,197,94,.12); color:#4ade80; font-size:24px; }
.metadata-empty p { margin:4px 0 0; color:var(--tool-meta); font-size:12px; }
.metadata-clean-panel { display:grid; gap:16px; }
.metadata-mode-list { display:grid; gap:9px; }
.metadata-mode-list label { display:grid; grid-template-columns:auto minmax(0,1fr); gap:11px; padding:13px; border:1px solid var(--tool-border); border-radius:14px; background:var(--tool-surface); cursor:pointer; }
.metadata-mode-list label:has(input:checked) { border-color:rgba(var(--tool-accent-rgb),.55); background:rgba(var(--tool-accent-rgb),.08); }
.metadata-mode-list input { margin-top:3px; accent-color:var(--tool-accent); }
.metadata-mode-list span { display:grid; gap:4px; }
.metadata-mode-list strong { color:var(--tool-text); font-size:13px; }
.metadata-mode-list small { color:var(--tool-meta); line-height:1.5; }
.metadata-result-box { display:grid; gap:5px; padding:15px; border:1px solid var(--tool-border); border-radius:14px; background:var(--tool-surface); }
.metadata-result-box span,.metadata-result-box small { color:var(--tool-meta); font-size:11px; }
.metadata-result-box strong { color:var(--tool-accent); font-size:17px; }
.metadata-privacy-note { margin:0; padding:12px; border-radius:12px; background:rgba(var(--tool-accent-rgb),.07); color:var(--tool-meta); font-size:11px; line-height:1.6; }

/* Cron Builder */
.cron-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr); gap:22px; align-items:start; }
.cron-builder-panel { display:grid; gap:18px; }
.cron-mode { margin-bottom:1px; }
.cron-fields { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.cron-field { display:grid; grid-column:span 2; gap:6px; min-width:0; padding:12px; border:1px solid var(--tool-border); border-radius:14px; background:var(--tool-surface); }
.cron-field[hidden] { display:none !important; }
.cron-fields[data-mode="5"] .cron-field[data-cron-field="month"],
.cron-fields[data-mode="5"] .cron-field[data-cron-field="weekday"] { grid-column:span 3; }
.cron-field > span { color:var(--tool-text); font-size:12px; font-weight:800; }
.cron-field > small { color:var(--tool-meta); font-size:10px; }
.cron-field .utility-input { height:42px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.cron-expression-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; }
.cron-expression-row code { display:flex; align-items:center; min-height:50px; padding:11px 15px; border:1px solid rgba(var(--tool-accent-rgb),.45); border-radius:15px; background:var(--tool-surface); color:var(--tool-accent); outline:none; overflow-wrap:anywhere; font:800 17px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
.cron-expression-row code:focus { box-shadow:0 0 0 4px rgba(var(--tool-accent-rgb),.11); }
.cron-presets { display:flex; flex-wrap:wrap; gap:7px; }
.cron-presets button { min-height:34px; padding:7px 10px; border:1px solid var(--tool-border); border-radius:999px; background:var(--tool-surface); color:var(--tool-muted); cursor:pointer; font-weight:750; font-size:11px; }
.cron-presets button:hover { color:var(--tool-accent); border-color:rgba(var(--tool-accent-rgb),.5); }
.cron-result-panel { display:grid; gap:16px; }
.cron-human { padding:17px; border:1px solid rgba(var(--tool-accent-rgb),.36); border-radius:16px; background:rgba(var(--tool-accent-rgb),.08); color:var(--tool-text); font-size:16px; font-weight:800; line-height:1.55; }
.cron-error { padding:13px; border:1px solid rgba(239,68,68,.35); border-radius:13px; background:rgba(239,68,68,.09); color:#f87171; font-size:12px; }
.cron-next-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cron-next-head strong { color:var(--tool-text); }
.cron-next-head span { color:var(--tool-meta); font-size:10px; }
.cron-next-list { display:grid; gap:7px; margin:0; padding:0; list-style:none; max-height:430px; overflow:auto; }
.cron-next-list li { display:grid; grid-template-columns:28px minmax(0,1fr); gap:2px 10px; align-items:center; padding:10px 12px; border:1px solid var(--tool-border); border-radius:12px; background:var(--tool-surface); }
.cron-next-list span { grid-row:1/3; display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:rgba(var(--tool-accent-rgb),.11); color:var(--tool-accent); font-weight:800; }
.cron-next-list strong { color:var(--tool-text); font-size:12px; }
.cron-next-list small { color:var(--tool-meta); font-size:9px; }
.cron-note { padding:12px; border-radius:12px; background:rgba(245,158,11,.07); color:var(--tool-meta); font-size:10px; line-height:1.6; }

@media (max-width:980px) {
    .regex-layout,.metadata-grid,.cron-layout { grid-template-columns:1fr; }
}
@media (max-width:760px) {
    .utility-toolbar--services { grid-template-columns:minmax(0,1fr); gap:10px; align-items:stretch; }
    .utility-toolbar--services .utility-toolbar__label { padding:0 2px; }
    .utility-toolbar__arrow { display:none; }
    .utility-toolbar__viewport { width:100%; }
    .utility-toolbar--services .utility-toolbar__links { min-width:max-content; }
    .metadata-summary { grid-template-columns:1fr; }
    .metadata-preview { height:210px; }
    .metadata-table > div { grid-template-columns:1fr; gap:4px; }
    .cron-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .cron-field,
    .cron-fields[data-mode="5"] .cron-field[data-cron-field="month"],
    .cron-fields[data-mode="5"] .cron-field[data-cron-field="weekday"] { grid-column:auto; }
    .regex-pattern-row { grid-template-columns:auto minmax(0,1fr) auto; }
    .regex-flags-preview { grid-column:2; }
}
@media (max-width:460px) {
    .cron-fields { grid-template-columns:1fr; }
    .cron-expression-row { grid-template-columns:1fr; }
    .regex-flags label small { display:none; }
}