:root {
    --bg: #f7f8fb;
    --surface: #ffffff;
    --surface-subtle: #f9fafb;
    --surface-tint: #f4f7ff;
    --ink: #111827;
    --text: #243041;
    --muted: #6b7280;
    --faint: #9ca3af;
    --line: #e5e7eb;
    --line-strong: #d1d5db;
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --blue-soft: #eff6ff;
    --green: #059669;
    --green-soft: #ecfdf5;
    --amber: #b45309;
    --danger: #dc2626;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 14px 34px rgba(17, 24, 39, .08);
    --shadow-soft: 0 1px 2px rgba(17, 24, 39, .04);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
html,
body {
    overflow-x: hidden;
}
body.cf-body {
    min-height: 100%;
    margin: 0;
    background:
        radial-gradient(circle at 50% -10%, rgba(37, 99, 235, .08), transparent 34%),
        var(--bg);
    color: var(--text);
    font-family: "Segoe UI", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }
button, input, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
code {
    background: #f3f4f6;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: #0f172a;
    padding: 2px 6px;
}
.site-shell {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .88);
    border-bottom: 1px solid rgba(229, 231, 235, .92);
    backdrop-filter: blur(18px);
}
.top-strip {
    display: none;
}
.header-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 280px;
    gap: 24px;
    align-items: center;
    min-height: 68px;
}
.brand-link {
    align-items: center;
    color: var(--ink);
    display: inline-flex;
    font-size: 18px;
    font-weight: 800;
    gap: 10px;
    white-space: nowrap;
}
.brand-link::before {
    background: linear-gradient(135deg, var(--blue), #60a5fa);
    border-radius: 8px;
    color: #fff;
    content: "CF";
    display: inline-grid;
    font-size: 11px;
    font-weight: 900;
    height: 30px;
    letter-spacing: .02em;
    place-items: center;
    width: 30px;
}
.primary-nav {
    align-items: center;
    display: flex;
    gap: 4px;
}
.primary-nav a {
    border-radius: 8px;
    color: #4b5563;
    font-size: 14px;
    font-weight: 700;
    padding: 9px 11px;
}
.primary-nav a:hover {
    background: var(--surface-tint);
    color: var(--blue);
}
.header-search input {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    min-height: 42px;
    max-width: none;
    outline: 0;
    padding: 0 13px;
    transition: border-color .14s ease, box-shadow .14s ease;
    width: 100%;
}
.header-search input:focus,
.command-bar input:focus,
.input-panel textarea:focus {
    border-color: rgba(37, 99, 235, .58);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .11);
}
.site-main { min-height: calc(100vh - 210px); }
.site-footer {
    background: #0f172a;
    color: #e5e7eb;
    margin-top: 72px;
    padding: 34px 0;
}
.footer-grid {
    align-items: center;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) auto;
}
.footer-grid strong { color: #fff; }
.footer-grid p { color: #aeb8c7; margin: 7px 0 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; font-weight: 700; }
.ops-page { padding-top: 34px; }
.ops-hero {
    align-items: end;
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) 420px;
    padding-bottom: 24px;
}
.kicker,
.block-head span,
.panel-label span,
.note-block span,
.ad-band span,
.ad-tower span,
.ad-slot span {
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
h1, h2, h3 {
    color: var(--ink);
    font-weight: 800;
    letter-spacing: 0;
}
.hero-title h1,
.catalog-head h1,
.tool-head-grid h1 {
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.08;
    margin: 12px 0 16px;
    max-width: 840px;
    word-break: keep-all;
}
.hero-title p,
.catalog-head p,
.tool-head-grid p {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.72;
    margin: 0;
    max-width: 760px;
}
.command-bar {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    overflow: hidden;
}
.command-bar.compact { width: min(460px, 100%); }
.command-bar span {
    align-self: stretch;
    background: #f3f4f6;
    border-right: 1px solid var(--line);
    color: #374151;
    display: grid;
    font-weight: 800;
    min-width: 62px;
    padding: 0 16px;
    place-items: center;
}
.command-bar input {
    border: 0;
    color: var(--ink);
    min-height: 56px;
    max-width: none;
    outline: 0;
    padding: 0 16px;
}
.command-bar button,
.button-row button,
.result-panel button,
.note-block a,
.plain-link {
    background: var(--blue);
    border: 0;
    color: #fff;
    font-weight: 800;
    min-height: 56px;
    padding: 0 18px;
    text-align: center;
    transition: background-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.command-bar button:hover,
.button-row button:hover,
.result-panel button:hover,
.note-block a:hover,
.plain-link:hover {
    background: var(--blue-dark);
    color: #fff;
}
.quick-console {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 8px;
    overflow: hidden;
}
.quick-console a {
    border-right: 1px solid var(--line);
    display: grid;
    gap: 5px;
    min-height: 108px;
    padding: 17px;
}
.quick-console a:last-child { border-right: 0; }
.quick-console a.live {
    background: #0f172a;
    color: #fff;
}
.quick-console b {
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
}
.quick-console a.live b { color: #93c5fd; }
.quick-console strong { font-size: 18px; line-height: 1.22; }
.quick-console span { color: var(--muted); line-height: 1.42; }
.quick-console a.live span { color: #cbd5e1; }
.ops-layout {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: 210px minmax(0, 1fr) 300px;
    margin-top: 18px;
}
.ops-sidebar,
.tool-index,
.guide-index,
.note-block,
.ad-tower,
.ad-slot,
.tool-workbench {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.ops-sidebar {
    display: grid;
    gap: 0;
    position: sticky;
    top: 92px;
}
.ops-sidebar strong {
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--line);
    color: #374151;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 13px 14px;
    text-transform: uppercase;
}
.ops-sidebar a {
    border-top: 1px solid var(--line);
    color: #4b5563;
    font-weight: 700;
    padding: 13px 14px;
}
.ops-sidebar a:first-of-type { border-top: 0; }
.ops-sidebar a.active,
.ops-sidebar a:hover {
    background: var(--blue-soft);
    color: var(--blue);
}
.ops-sidebar a.active { box-shadow: inset 3px 0 0 var(--blue); }
.ops-main,
.ops-aside { display: grid; gap: 16px; }
.ops-aside { position: sticky; top: 92px; }
.block-head {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 16px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 15px 16px;
}
.block-head.compact { grid-template-columns: auto minmax(0, 1fr) auto; }
.block-head h2 { font-size: 23px; line-height: 1.18; margin: 0; }
.block-head a { color: var(--blue); font-weight: 800; }
.tool-rows { display: grid; }
.tool-rows a {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 14px;
    grid-template-columns: 72px minmax(190px, .78fr) minmax(0, 1fr) 76px;
    min-height: 70px;
    padding: 13px 16px;
    transition: background-color .14s ease;
}
.tool-rows a:last-child { border-bottom: 0; }
.tool-rows a:hover { background: var(--surface-subtle); color: var(--ink); }
.tool-rows a.ready { background: var(--surface-tint); }
.tool-rows em {
    color: var(--blue);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}
.tool-rows strong { color: var(--ink); font-size: 17px; font-weight: 760; line-height: 1.28; }
.tool-rows span { color: var(--muted); line-height: 1.48; }
.tool-rows b {
    background: #eef2f7;
    border-radius: 999px;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    justify-self: end;
    padding: 7px 10px;
}
.tool-rows a.ready b { background: var(--blue); color: #fff; }
.ad-band,
.ad-tower,
.ad-slot {
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(246,249,253,.98)),
        repeating-linear-gradient(-45deg, rgba(37,99,235,.05), rgba(37,99,235,.05) 1px, transparent 1px, transparent 13px);
    border: 1px solid #dbe4f0;
    border-radius: var(--radius);
    color: #64748b;
    display: grid;
    font-weight: 700;
    min-height: 96px;
    overflow: hidden;
    place-items: center;
    position: relative;
    text-align: center;
}

.ad-slot::before {
    background: linear-gradient(90deg, transparent, rgba(37,99,235,.12), transparent);
    content: "";
    height: 1px;
    left: 18px;
    position: absolute;
    right: 18px;
    top: 0;
}

.ad-slot-inner {
    align-items: center;
    display: grid;
    gap: 4px;
    justify-items: center;
    padding: 18px;
}

.ad-slot strong {
    color: #334155;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.3;
}

.ad-slot small {
    color: #8492a6;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    max-width: 24ch;
}

.ad-slot-inline {
    min-height: 112px;
}

.ad-slot-mobile-inline {
    display: none;
    min-height: 104px;
}

.ad-slot-sidebar,
.ad-tower {
    min-height: 280px;
}

.ad-slot-sidebar .ad-slot-inner {
    min-height: 250px;
}

.ad-slot-banner-link {
    display: inline-block;
    max-width: 100%;
}

.ad-slot-banner-img {
    display: block;
    height: auto;
    max-width: 100%;
}
.guide-rows { display: grid; }
.guide-rows a {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(190px, .6fr) minmax(0, 1fr);
    padding: 14px 16px;
}
.guide-rows a:last-child { border-bottom: 0; }
.guide-rows strong { color: var(--ink); }
.guide-rows span { color: var(--muted); }
.note-block {
    display: grid;
    gap: 10px;
    padding: 18px;
}
.note-block.dark {
    background: #0f172a;
    color: #fff;
}
.note-block.accent { background: var(--green-soft); }
.note-block strong { color: inherit; font-size: 19px; font-weight: 760; line-height: 1.34; }
.note-block p { color: var(--muted); line-height: 1.64; margin: 0; }
.note-block.dark p { color: #cbd5e1; }
.note-block a {
    border-radius: 9px;
    display: block;
    min-height: auto;
    padding: 12px 14px;
}
.catalog-head,
.tool-head-grid {
    align-items: end;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-bottom: 22px;
}
.catalog-grid {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: 220px minmax(0, 1fr);
    margin-top: 18px;
}
.tool-index.full { min-height: 320px; }
.breadcrumb-line {
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    margin-bottom: 14px;
}
.breadcrumb-line a { color: var(--blue); }
.plain-link {
    border-radius: 9px;
    display: grid;
    min-height: 46px;
    place-items: center;
}
.tool-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
    margin-top: 18px;
}
.input-panel,
.result-panel { padding: 18px; }
.input-panel { border-right: 1px solid var(--line); }
.panel-label {
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
}
.panel-label b { color: #4b5563; font-size: 12px; letter-spacing: .04em; }
.input-panel label {
    color: var(--ink);
    display: block;
    font-weight: 800;
    margin-bottom: 8px;
}
.input-panel textarea {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font-family: Consolas, "Courier New", monospace;
    font-size: 16px;
    line-height: 1.55;
    max-width: none;
    min-height: 230px;
    outline: 0;
    padding: 13px;
    resize: vertical;
    width: 100%;
}
.option-row,
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.option-row label {
    align-items: center;
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #374151;
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 7px;
    margin: 0;
    padding: 8px 11px;
}
.button-row button {
    border-radius: 9px;
    min-height: 42px;
}
.button-row button:nth-child(n+2) {
    background: #eef2f7;
    color: #334155;
}
.button-row button:nth-child(n+2):hover {
    background: #e2e8f0;
    color: #0f172a;
}
.privacy-note {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    margin: 12px 0 0;
}
.result-panel { background: #fbfdff; }
.result-panel dl {
    display: grid;
    gap: 9px;
    margin: 0 0 16px;
}
.result-panel dt {
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.result-panel dd {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--ink);
    font-family: Consolas, "Courier New", monospace;
    font-size: 16px;
    margin: 0;
    min-height: 42px;
    overflow-wrap: anywhere;
    padding: 10px 12px;
}
.result-panel button { border-radius: 9px; min-height: 42px; }
.error-message { color: var(--danger); font-weight: 800; margin: 12px 0 0; }
.tool-bottom-grid {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 300px;
    margin-top: 18px;
}
.article-panel { padding-bottom: 14px; }
.article-panel p {
    color: #374151;
    font-size: 16px;
    line-height: 1.78;
    margin: 14px 16px;
}
.ops-aside.single { position: sticky; top: 92px; }
.preview-switcher {
    background: #0f172a;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    bottom: 12px;
    display: flex;
    gap: 4px;
    padding: 6px;
    position: fixed;
    right: 12px;
    z-index: 99;
}
.preview-switcher a { color: #fff; font-size: 12px; font-weight: 800; padding: 7px 9px; }
.preview-switcher a:hover { background: #eef3ff; border-radius: 7px; color: var(--blue); }
@media (max-width: 1080px) {
    .header-grid,
    .ops-hero,
    .ops-layout,
    .catalog-head,
    .tool-head-grid,
    .catalog-grid,
    .tool-workbench,
    .tool-bottom-grid {
        grid-template-columns: 1fr;
    }
    .header-grid { gap: 10px; padding: 12px 0; }
    .primary-nav { flex-wrap: wrap; }
    .primary-nav a { padding: 10px 12px; }
    .quick-console { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ops-sidebar,
    .ops-aside,
    .ops-aside.single { position: static; }
    .input-panel { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 720px) {
    .site-shell { width: min(100% - 22px, 1200px); }
    .ops-page { padding-top: 22px; }
    .hero-title h1,
    .catalog-head h1,
    .tool-head-grid h1 { font-size: 34px; line-height: 1.12; }
    .command-bar { grid-template-columns: 1fr; }
    .command-bar span { min-height: 38px; }
    .command-bar button { min-height: 48px; }
    .quick-console { grid-template-columns: 1fr; }
    .quick-console a { border-right: 0; border-bottom: 1px solid var(--line); }
    .tool-rows a { grid-template-columns: 1fr; gap: 7px; }
    .tool-rows b { justify-self: start; }
    .guide-rows a { grid-template-columns: 1fr; gap: 6px; }
    .footer-grid { grid-template-columns: 1fr; }
    .preview-switcher { left: 8px; right: 8px; overflow-x: auto; }
}

/* Premium polish layer */
:root {
    --bg: #f8fafc;
    --surface: rgba(255, 255, 255, .92);
    --surface-subtle: #fbfcfe;
    --surface-tint: #f1f6ff;
    --ink: #0f172a;
    --text: #263243;
    --muted: #667085;
    --line: #e6eaf0;
    --line-strong: #cfd7e3;
    --blue: #2f6fed;
    --blue-dark: #2458c8;
    --blue-soft: #edf4ff;
    --shadow: 0 1px 2px rgba(15, 23, 42, .035), 0 18px 42px rgba(15, 23, 42, .075);
    --shadow-soft: 0 1px 2px rgba(15, 23, 42, .035), 0 8px 22px rgba(15, 23, 42, .045);
}

body.cf-body {
    background:
        radial-gradient(circle at 18% -8%, rgba(47, 111, 237, .09), transparent 30%),
        radial-gradient(circle at 82% 4%, rgba(14, 165, 233, .055), transparent 28%),
        linear-gradient(180deg, #fbfdff 0, var(--bg) 360px);
    color: var(--text);
    font-family: "Inter", "Segoe UI", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
}

.site-shell {
    width: min(1188px, calc(100% - 44px));
}

.site-header {
    background: rgba(255, 255, 255, .78);
    border-bottom-color: rgba(230, 234, 240, .76);
}

.header-grid {
    min-height: 66px;
}

.brand-link {
    font-size: 17px;
    font-weight: 760;
}

.brand-link::before {
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px rgba(47,111,237,.18);
    height: 32px;
    width: 32px;
}

.primary-nav a {
    color: #556174;
    font-weight: 650;
}

.header-search input {
    background: rgba(255,255,255,.82);
    border-color: rgba(207, 215, 227, .86);
}

.ops-page {
    padding-top: 38px;
}

.ops-hero {
    align-items: center;
    gap: 34px;
    padding-bottom: 26px;
}

.kicker,
.block-head span,
.panel-label span,
.note-block span,
.ad-band span,
.ad-tower span {
    color: #3569df;
    font-size: 11px;
    font-weight: 780;
    letter-spacing: .075em;
}

h1, h2, h3 {
    font-weight: 760;
}

.hero-title h1,
.catalog-head h1,
.tool-head-grid h1 {
    font-size: clamp(34px, 3.65vw, 50px);
    font-weight: 740;
    line-height: 1.12;
    letter-spacing: -.01em;
    max-width: 820px;
}

.hero-title p,
.catalog-head p,
.tool-head-grid p {
    color: #647084;
    font-size: 16px;
    line-height: 1.78;
}

.command-bar {
    border-color: rgba(207, 215, 227, .9);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.command-bar span {
    background: #f8fafc;
    color: #475569;
    font-weight: 720;
}

.command-bar button,
.button-row button,
.result-panel button,
.note-block a,
.plain-link {
    background: linear-gradient(180deg, #3b7af4 0%, var(--blue) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    font-weight: 740;
}

.quick-console,
.ops-sidebar,
.tool-index,
.guide-index,
.note-block,
.ad-tower,
.tool-workbench {
    border-color: rgba(230, 234, 240, .95);
    box-shadow: var(--shadow-soft);
}

.quick-console a {
    min-height: 104px;
    padding: 18px;
}

.quick-console a.live {
    background: linear-gradient(145deg, #162033 0%, #0f172a 100%);
}

.quick-console strong {
    font-size: 17px;
    font-weight: 760;
}

.quick-console span,
.tool-rows span,
.guide-rows span {
    color: #68758a;
}

.ops-layout {
    gap: 20px;
    margin-top: 20px;
}

.ops-sidebar strong {
    background: #fbfcfe;
    color: #475569;
}

.ops-sidebar a {
    color: #596579;
    font-weight: 660;
}

.block-head {
    padding: 16px 18px;
}

.block-head h2 {
    font-size: 22px;
    font-weight: 760;
}

.tool-rows a {
    min-height: 72px;
    padding: 14px 18px;
}

.tool-rows a.ready {
    background: linear-gradient(90deg, rgba(47,111,237,.08), rgba(47,111,237,.035));
}

.tool-rows strong {
    font-size: 16px;
    font-weight: 720;
}

.tool-rows b {
    background: #f1f5f9;
    color: #475569;
}

.tool-rows a.ready b {
    background: var(--blue);
    color: #fff;
}

.note-block.dark {
    background: linear-gradient(145deg, #162033 0%, #0f172a 100%);
}

.ad-band,
.ad-tower {
    background: rgba(248, 250, 252, .78);
    border-color: #d6dee9;
    color: #8490a3;
}

.input-panel textarea,
.result-panel dd,
.option-row label,
.header-search input {
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, .02);
}

.site-footer {
    background: #111827;
}

@media (max-width: 720px) {
    .site-shell {
        width: min(100% - 24px, 1188px);
    }

    .hero-title h1,
    .catalog-head h1,
    .tool-head-grid h1 {
        font-size: 32px;
        line-height: 1.16;
    }
}

/* Elevated visual system across every public page */
:root {
    --premium-line: rgba(203, 213, 225, .72);
    --premium-panel: rgba(255, 255, 255, .86);
    --premium-panel-solid: #ffffff;
    --premium-shadow: 0 1px 2px rgba(15, 23, 42, .035), 0 24px 64px rgba(37, 99, 235, .095);
    --premium-blue: #246bfe;
    --premium-cyan: #0ea5e9;
    --premium-navy: #101b31;
}

body.cf-body {
    background:
        linear-gradient(115deg, rgba(36, 107, 254, .11) 0%, rgba(36, 107, 254, 0) 31%),
        linear-gradient(245deg, rgba(14, 165, 233, .085) 0%, rgba(14, 165, 233, 0) 33%),
        linear-gradient(180deg, #ffffff 0%, #f6f9ff 360px, #f8fafc 100%);
}

.site-main {
    position: relative;
}

.site-main::before {
    background: linear-gradient(90deg, transparent, rgba(36, 107, 254, .22), rgba(14, 165, 233, .14), transparent);
    content: "";
    height: 1px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.brand-link::before {
    background: linear-gradient(135deg, #246bfe 0%, #5794ff 52%, #71d7ff 100%);
}

.primary-nav a {
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.primary-nav a:hover {
    transform: translateY(-1px);
}

.header-search input {
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
}

.ops-hero {
    padding-top: 8px;
}

.hero-title h1,
.catalog-head h1,
.tool-head-grid h1,
.page-head h1,
.article-body h1 {
    text-wrap: balance;
}

.hero-title h1 {
    background: linear-gradient(180deg, #0f172a 0%, #17213a 72%, #334155 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.command-bar {
    border-color: var(--premium-line);
    box-shadow: var(--premium-shadow);
}

.command-bar button,
.button-row button,
.result-panel button,
.note-block a,
.plain-link,
.primary-action {
    background: linear-gradient(180deg, #4082ff 0%, var(--premium-blue) 100%);
}

.command-bar button:hover,
.button-row button:hover,
.result-panel button:hover,
.note-block a:hover,
.plain-link:hover,
.primary-action:hover {
    background: linear-gradient(180deg, #2f73f5 0%, #1d56d9 100%);
}

.quality-strip,
.quick-console,
.ops-sidebar,
.tool-index,
.guide-index,
.note-block,
.ad-tower,
.tool-workbench,
.page-head .container,
.article-card,
.contact-panel,
.tool-callout,
.related-panel {
    border-color: var(--premium-line);
    box-shadow: var(--premium-shadow);
}

.quick-console,
.tool-index,
.guide-index,
.ops-sidebar,
.note-block,
.tool-workbench {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .84)),
        var(--premium-panel-solid);
}

.quick-console a.live,
.note-block.dark,
.contact-panel.strong {
    background:
        linear-gradient(145deg, rgba(68, 111, 255, .16), transparent 42%),
        linear-gradient(145deg, #17243d 0%, var(--premium-navy) 100%);
}

.quick-console a.live::after {
    background: linear-gradient(135deg, rgba(96, 165, 250, .34), rgba(14, 165, 233, 0));
    border-radius: 999px;
}

.tool-rows a.ready {
    background:
        linear-gradient(90deg, rgba(36, 107, 254, .105), rgba(14, 165, 233, .035)),
        #f8fbff;
}

.tool-rows a:hover,
.guide-rows a:hover {
    background: #f8fbff;
}

.tool-rows b,
.status-chip {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.ad-band,
.ad-tower {
    background:
        linear-gradient(180deg, rgba(255,255,255,.8), rgba(248,250,252,.92)),
        linear-gradient(135deg, rgba(36,107,254,.08), transparent 34%),
        repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(148,163,184,.075) 10px, rgba(148,163,184,.075) 20px);
}

/* Legacy pages: articles, Q&A, contact, about */
.container {
    width: min(1188px, calc(100% - 44px));
    max-width: none;
}

.page-head {
    padding: 38px 0 0;
}

.page-head .container {
    background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82)),
        #fff;
    border: 1px solid var(--premium-line);
    border-radius: 20px;
    padding: 34px;
}

.eyebrow,
.card-kicker {
    color: var(--premium-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .075em;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.page-head h1,
.article-body h1 {
    color: #111c2f;
    font-size: clamp(32px, 3.35vw, 46px);
    font-weight: 700;
    line-height: 1.16;
    margin: 0 0 14px;
}

.page-head p:not(.eyebrow),
.article-summary {
    color: #647084;
    font-size: 16px;
    line-height: 1.78;
    margin: 0;
    max-width: 760px;
}

.section-band,
.article-page {
    padding: 22px 0 36px;
}

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

.article-card,
.contact-panel,
.tool-callout,
.related-panel {
    background: var(--premium-panel);
    border: 1px solid var(--premium-line);
    border-radius: 18px;
    color: var(--text);
    padding: 24px;
}

.article-card {
    display: grid;
    gap: 10px;
    min-height: 170px;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.article-card:hover {
    border-color: rgba(36, 107, 254, .36);
    box-shadow: var(--premium-shadow);
    color: var(--text);
    transform: translateY(-2px);
}

.article-card strong,
.contact-panel h2,
.tool-callout h2,
.related-panel h3 {
    color: #111c2f;
    font-size: 21px;
    font-weight: 740;
    line-height: 1.32;
    margin: 0;
}

.article-card p,
.contact-panel p,
.tool-callout p,
.related-panel p {
    color: #667085;
    line-height: 1.7;
    margin: 0;
}

.contact-grid,
.article-layout {
    align-items: start;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) 320px;
}

.contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-panel {
    display: grid;
    gap: 14px;
}

.contact-panel.strong {
    color: #fff;
}

.contact-panel.strong h2 {
    color: #fff;
}

.contact-panel.strong p {
    color: #cbd5e1;
}

.primary-action,
.secondary-action,
.ghost-action {
    align-items: center;
    border: 0;
    border-radius: 10px;
    color: #fff;
    display: inline-flex;
    font-weight: 780;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
}

.secondary-action,
.ghost-action {
    background: #eef2f7;
    color: #334155;
}

.secondary-action:hover,
.ghost-action:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.article-body {
    background: var(--premium-panel);
    border: 1px solid var(--premium-line);
    border-radius: 20px;
    box-shadow: var(--premium-shadow);
    padding: 34px;
}

.breadcrumb-lite {
    color: #647084;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    gap: 8px;
    margin-bottom: 20px;
}

.breadcrumb-lite a {
    color: var(--premium-blue);
    font-weight: 700;
}

.article-body h2 {
    color: #111c2f;
    font-size: 25px;
    font-weight: 740;
    margin: 32px 0 12px;
}

.article-body p,
.article-body li {
    color: #374151;
    font-size: 16px;
    line-height: 1.82;
}

.article-side {
    display: grid;
    gap: 16px;
}

.sticky-panel {
    position: sticky;
    top: 92px;
}

.related-panel a {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: #334155;
    display: block;
    font-weight: 720;
    margin-top: 10px;
    padding: 12px;
}

.related-panel a:hover {
    background: var(--blue-soft);
    color: var(--premium-blue);
}

@media (max-width: 900px) {
    .article-list,
    .contact-grid,
    .article-layout {
        grid-template-columns: 1fr;
    }

    .page-head .container,
    .article-body {
        padding: 24px;
    }
}

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

/* High-quality utility hub finish */
:root {
    --surface-glass: rgba(255, 255, 255, .82);
    --panel-glow: 0 1px 2px rgba(15, 23, 42, .04), 0 22px 58px rgba(37, 99, 235, .08);
}

body.cf-body {
    background:
        radial-gradient(circle at 18% -12%, rgba(37, 99, 235, .12), transparent 34%),
        radial-gradient(circle at 86% 10%, rgba(56, 189, 248, .08), transparent 30%),
        linear-gradient(180deg, #ffffff 0, #f7f9fd 420px, #f8fafc 100%);
}

.site-header {
    box-shadow: 0 1px 0 rgba(15, 23, 42, .03), 0 10px 30px rgba(15, 23, 42, .035);
}

.ops-hero {
    position: relative;
}

.ops-hero::after {
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .14), transparent);
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
}

.hero-command-stack {
    display: grid;
    gap: 12px;
}

.quality-strip {
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
}

.quality-strip span {
    color: #647084;
    display: grid;
    font-size: 12px;
    gap: 3px;
    min-height: 58px;
    padding: 11px 12px;
}

.quality-strip span + span {
    border-left: 1px solid rgba(226, 232, 240, .9);
}

.quality-strip b {
    color: #172033;
    font-size: 13px;
}

.command-bar {
    background: rgba(255, 255, 255, .9);
    border-color: rgba(203, 213, 225, .86);
}

.command-bar input::placeholder,
.header-search input::placeholder {
    color: #9aa4b2;
}

.quick-console {
    background: var(--surface-glass);
    backdrop-filter: blur(10px);
    box-shadow: var(--panel-glow);
}

.quick-console a {
    position: relative;
    transition: background-color .16s ease, transform .16s ease;
}

.quick-console a:not(.live):hover {
    background: #fbfdff;
    transform: translateY(-1px);
}

.quick-console a.live::after {
    background: radial-gradient(circle, rgba(96, 165, 250, .42), transparent 62%);
    content: "";
    height: 110px;
    position: absolute;
    right: -36px;
    top: -40px;
    width: 110px;
}

.quick-console a.live > * {
    position: relative;
    z-index: 1;
}

.ops-sidebar,
.tool-index,
.guide-index,
.note-block,
.tool-workbench {
    background: var(--surface-glass);
    backdrop-filter: blur(10px);
}

.tool-index {
    box-shadow: var(--panel-glow);
}

.tool-rows a {
    position: relative;
}

.tool-rows a::before {
    background: transparent;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 3px;
}

.tool-rows a.ready::before {
    background: var(--blue);
}

.tool-rows a:hover::before {
    background: #93c5fd;
}

.tool-rows em {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.tool-rows em::before {
    background: currentColor;
    border-radius: 999px;
    content: "";
    height: 6px;
    opacity: .8;
    width: 6px;
}

.note-block.dark {
    box-shadow: 0 18px 44px rgba(15, 23, 42, .14);
}

.ad-tower,
.ad-band {
    background:
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(248,250,252,.82)),
        repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(148,163,184,.08) 10px, rgba(148,163,184,.08) 20px);
}

.guide-index {
    box-shadow: 0 1px 2px rgba(15,23,42,.035);
}

.guide-rows a {
    transition: background-color .14s ease;
}

.guide-rows a:hover {
    background: #fbfdff;
}

.catalog-head,
.tool-head-grid {
    position: relative;
}

.catalog-head::after,
.tool-head-grid::after {
    background: linear-gradient(90deg, rgba(37,99,235,.16), transparent);
    bottom: -1px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 48%;
}

@media (max-width: 1080px) {
    .quality-strip {
        grid-template-columns: 1fr;
    }

    .quality-strip span + span {
        border-left: 0;
        border-top: 1px solid rgba(226, 232, 240, .9);
    }
}

/* Final refinement: calmer enterprise-grade finish */
.hero-title h1,
.catalog-head h1,
.tool-head-grid h1 {
    color: #111c2f;
    font-size: clamp(32px, 3.35vw, 46px);
    font-weight: 700;
    line-height: 1.16;
    max-width: 760px;
}

.hero-title p,
.catalog-head p,
.tool-head-grid p {
    max-width: 720px;
}

.ops-hero {
    gap: 42px;
    padding-bottom: 30px;
}

.command-bar {
    box-shadow: 0 18px 46px rgba(15, 23, 42, .08);
}

.quick-console a.live,
.note-block.dark {
    background: linear-gradient(145deg, #1d2a44 0%, #142033 100%);
}

.quick-console a.live {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.quick-console strong,
.tool-rows strong,
.note-block strong {
    letter-spacing: -.005em;
}

.tool-rows a {
    grid-template-columns: 72px minmax(180px, .72fr) minmax(0, 1fr) 70px;
}

.tool-rows span {
    font-size: 15px;
}

.ops-sidebar,
.tool-index,
.guide-index,
.note-block,
.ad-tower,
.tool-workbench,
.quick-console {
    border-color: rgba(226, 232, 240, .98);
}

.ops-sidebar a.active {
    background: linear-gradient(90deg, #eef5ff 0%, #f8fbff 100%);
}

.block-head h2 {
    color: #152033;
}

@media (max-width: 720px) {
    .hero-title h1,
    .catalog-head h1,
    .tool-head-grid h1 {
        font-size: 30px;
        line-height: 1.18;
    }
}

/* More vivid, polished navigation and page-wide premium accents */
:root {
    --aurora-blue: rgba(37, 99, 235, .18);
    --aurora-cyan: rgba(14, 165, 233, .16);
    --aurora-violet: rgba(99, 102, 241, .13);
    --menu-glow: 0 10px 26px rgba(37, 99, 235, .14);
}

body.cf-body {
    background:
        radial-gradient(circle at 12% 2%, var(--aurora-blue), transparent 28%),
        radial-gradient(circle at 82% 0%, var(--aurora-cyan), transparent 30%),
        radial-gradient(circle at 54% 18%, var(--aurora-violet), transparent 28%),
        linear-gradient(180deg, #ffffff 0, #f4f8ff 410px, #f8fafc 100%);
}

.site-header {
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
    box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 16px 42px rgba(37,99,235,.08);
}

.brand-link::before {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        0 10px 22px rgba(37,99,235,.28),
        0 0 0 4px rgba(37,99,235,.08);
}

.primary-nav {
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(226,232,240,.86);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(15,23,42,.035);
    padding: 4px;
    width: max-content;
}

.primary-nav a {
    align-items: center;
    display: inline-flex;
    gap: 7px;
    padding: 8px 12px;
    position: relative;
}

.primary-nav a::before {
    background: linear-gradient(135deg, #dbeafe, #eef2ff);
    border: 1px solid rgba(191,219,254,.8);
    border-radius: 999px;
    color: var(--blue);
    display: inline-grid;
    font-size: 11px;
    font-weight: 900;
    height: 20px;
    place-items: center;
    width: 20px;
}

.primary-nav a[href="/tools"]::before { content: "T"; }
.primary-nav a[href="/articles"]::before { content: "G"; }
.primary-nav a[href="/qna"]::before { content: "Q"; }
.primary-nav a[href="/contact"]::before { content: "R"; }

.primary-nav a:hover {
    background: #ffffff;
    box-shadow: var(--menu-glow);
}

.header-search input {
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.86));
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 28px rgba(15,23,42,.035);
}

.ops-hero::before {
    background:
        radial-gradient(circle, rgba(37,99,235,.18), transparent 62%);
    content: "";
    height: 220px;
    pointer-events: none;
    position: absolute;
    right: 170px;
    top: -82px;
    width: 220px;
}

.hero-title,
.hero-command-stack {
    position: relative;
    z-index: 1;
}

.kicker {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.kicker::before {
    background: linear-gradient(135deg, var(--blue), var(--premium-cyan));
    border-radius: 999px;
    content: "";
    height: 8px;
    box-shadow: 0 0 0 5px rgba(37,99,235,.1);
    width: 8px;
}

.quality-strip {
    background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.68));
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 16px 34px rgba(37,99,235,.08);
}

.quality-strip b {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.quality-strip b::before {
    background: #22c55e;
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(34,197,94,.12);
    content: "";
    height: 7px;
    width: 7px;
}

.quick-console {
    border-color: rgba(191,219,254,.72);
}

.quick-console a {
    overflow: hidden;
}

.quick-console a:not(.live)::after {
    background: linear-gradient(135deg, rgba(37,99,235,.1), transparent 48%);
    content: "";
    height: 96px;
    opacity: 0;
    position: absolute;
    right: -36px;
    top: -36px;
    transition: opacity .16s ease;
    width: 96px;
}

.quick-console a:not(.live):hover::after {
    opacity: 1;
}

.ops-sidebar {
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
}

.ops-sidebar strong {
    align-items: center;
    display: flex;
    gap: 8px;
}

.ops-sidebar strong::before {
    background: linear-gradient(135deg, var(--blue), var(--premium-cyan));
    border-radius: 6px;
    content: "";
    height: 18px;
    width: 18px;
}

.ops-sidebar a {
    align-items: center;
    display: flex;
    gap: 9px;
    position: relative;
}

.ops-sidebar a::before {
    background: #cbd5e1;
    border-radius: 999px;
    content: "";
    height: 7px;
    transition: background-color .14s ease, box-shadow .14s ease;
    width: 7px;
}

.ops-sidebar a.active::before,
.ops-sidebar a:hover::before {
    background: var(--blue);
    box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

.ops-sidebar a.active {
    box-shadow: inset 3px 0 0 var(--blue), 0 12px 28px rgba(37,99,235,.06);
}

.tool-index,
.guide-index,
.article-body,
.page-head .container,
.article-card,
.contact-panel {
    position: relative;
}

.tool-index::before,
.guide-index::before,
.article-body::before,
.page-head .container::before,
.contact-panel::before {
    background: linear-gradient(90deg, rgba(37,99,235,.45), rgba(14,165,233,.18), transparent);
    content: "";
    height: 1px;
    left: 18px;
    position: absolute;
    right: 18px;
    top: 0;
}

.block-head {
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.72));
}

.block-head span,
.tool-rows em,
.card-kicker,
.eyebrow {
    color: #1f66e5;
}

.tool-rows a {
    transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.tool-rows a:hover {
    box-shadow: inset 0 0 0 1px rgba(37,99,235,.12);
    transform: translateX(2px);
}

.tool-rows a.ready {
    box-shadow: inset 3px 0 0 var(--blue);
}

.tool-rows b,
.related-panel a,
.secondary-action,
.ghost-action {
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.tool-rows b:hover,
.related-panel a:hover,
.secondary-action:hover,
.ghost-action:hover {
    transform: translateY(-1px);
}

.note-block.dark {
    overflow: hidden;
    position: relative;
}

.note-block.dark::after,
.contact-panel.strong::after {
    background: radial-gradient(circle, rgba(96,165,250,.32), transparent 62%);
    content: "";
    height: 140px;
    position: absolute;
    right: -44px;
    top: -48px;
    width: 140px;
}

.note-block.dark > *,
.contact-panel.strong > * {
    position: relative;
    z-index: 1;
}

.article-card {
    overflow: hidden;
}

.article-card::after {
    background: linear-gradient(135deg, rgba(37,99,235,.1), transparent 48%);
    content: "";
    height: 120px;
    opacity: 0;
    position: absolute;
    right: -44px;
    top: -44px;
    transition: opacity .16s ease;
    width: 120px;
}

.article-card:hover::after {
    opacity: 1;
}

.footer-links a {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    padding: 8px 12px;
}

.footer-links a:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}

@media (max-width: 1080px) {
    .primary-nav {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* MVP focus: one excellent CRC tool instead of empty catalog noise */
.crc-only-page .hero-title h1,
.crc-only-page.catalog-page h1 {
    max-width: 700px;
}

.single-tool-console {
    grid-template-columns: minmax(0, 1fr);
}

.single-tool-console a {
    min-height: 128px;
}

.single-tool-console a.live {
    background:
        linear-gradient(135deg, rgba(96,165,250,.22), transparent 36%),
        linear-gradient(145deg, #1d2a44 0%, #142033 100%);
}

.crc-only-layout {
    grid-template-columns: 210px minmax(0, 1fr) 300px;
}

.single-tool-rows a {
    min-height: 92px;
}

.single-guide-rows a,
.single-article-list .article-card {
    min-height: 150px;
}

.single-article-list {
    grid-template-columns: minmax(0, 720px);
}

.crc-only-catalog .tool-index {
    min-height: 0;
}

.crc-only-catalog .tool-rows a {
    min-height: 112px;
}

.primary-nav a[href="/qna"] {
    display: none;
}

@media (max-width: 1080px) {
    .crc-only-layout,
    .crc-only-catalog {
        grid-template-columns: 1fr;
    }
}

/* Utility tool controls and export tables */
.tool-input,
.result-textarea,
.input-panel select {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    display: block;
    margin: 8px 0 14px;
    max-width: none;
    min-height: 44px;
    outline: 0;
    padding: 0 13px;
    width: 100%;
}

.result-textarea {
    font-family: Consolas, "Courier New", monospace;
    min-height: 260px;
    padding: 13px;
    resize: vertical;
}

.compact-tool .input-panel,
.compact-tool .result-panel {
    min-height: 360px;
}

.compact-actions {
    gap: 7px;
}

.history-panel {
    background: var(--surface-glass);
    border: 1px solid rgba(226, 232, 240, .98);
    border-radius: var(--radius);
    box-shadow: var(--panel-glow);
    margin-top: 18px;
    overflow: hidden;
}

.history-panel .block-head button {
    background: #eef2f7;
    border: 0;
    border-radius: 999px;
    color: #334155;
    font-weight: 780;
    min-height: 34px;
    padding: 0 13px;
}

.history-table-wrap {
    overflow-x: auto;
}

.history-table {
    border-collapse: collapse;
    min-width: 760px;
    width: 100%;
}

.history-table th,
.history-table td {
    border-bottom: 1px solid var(--line);
    color: #475569;
    font-size: 14px;
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
}

.history-table th {
    background: #f8fafc;
    color: #172033;
    font-weight: 800;
}

.image-preview {
    background: #f8fafc;
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    display: block;
    height: auto;
    margin-bottom: 14px;
    max-height: 280px;
    max-width: 100%;
    width: 100%;
}

.disabled-link {
    opacity: .55;
    pointer-events: none;
}

/* HTTP and image watermark tools */
.http-head,
.watermark-head {
    border-bottom: 1px solid rgba(226,232,240,.9);
}

.http-workbench,
.watermark-workbench {
    align-items: stretch;
}

.http-url-row {
    display: grid;
    gap: 10px;
    grid-template-columns: 128px minmax(0, 1fr);
}

.code-input,
.result-textarea.small {
    font-family: Consolas, "Courier New", monospace;
    line-height: 1.55;
    padding: 13px;
}

.result-textarea.small {
    min-height: 128px;
}

.http-status-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 14px;
}

.http-status-grid dl {
    background: linear-gradient(180deg, #f8fbff, #eef6ff);
    border: 1px solid rgba(191,219,254,.92);
    border-radius: 12px;
    margin: 0;
    padding: 14px;
}

.http-status-grid dt {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.http-status-grid dd {
    color: #0f172a;
    font-size: 17px;
    font-weight: 850;
    margin: 5px 0 0;
    min-height: 24px;
    overflow-wrap: anywhere;
}

.tool-hint {
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
    margin: 10px 0 0;
}

.watermark-two-col {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.color-input {
    min-height: 48px;
    padding: 6px;
}

.watermark-preview {
    background:
        linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
        linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
    background-color: #f8fafc;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-size: 20px 20px;
    object-fit: contain;
}

@media (max-width: 760px) {
    .http-url-row,
    .http-status-grid,
    .watermark-two-col {
        grid-template-columns: 1fr;
    }
}

/* 2026-06 home usability correction: clean launch surface */
.site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid rgba(219,226,238,.9);
    box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 10px 26px rgba(15,23,42,.05);
    backdrop-filter: blur(18px);
}

.header-grid {
    grid-template-columns: auto auto minmax(220px, 280px);
    justify-content: space-between;
    min-height: 68px;
}

.brand-link {
    color: #111827;
    font-size: 17px;
    font-weight: 820;
}

.primary-nav {
    background: #fff;
    border-color: #e5ebf5;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

.primary-nav a {
    color: #475569;
    font-size: 13px;
    font-weight: 760;
    padding: 8px 13px;
}

.header-search input {
    background: #fff;
    border-color: #d9e2ef;
    border-radius: 9px;
    box-shadow: inset 0 1px 0 rgba(15,23,42,.02), 0 8px 18px rgba(15,23,42,.04);
    min-height: 42px;
}

.site-main::before,
.home-page .ops-hero::before {
    display: none;
}

.ops-page.home-page {
    padding-top: 0;
}

.home-page .ops-hero {
    align-items: start;
    background:
        linear-gradient(135deg, rgba(231,240,255,.95), rgba(244,250,255,.62) 46%, rgba(255,255,255,.72)),
        radial-gradient(circle at 72% 16%, rgba(47,111,237,.14), transparent 30%);
    border-bottom: 1px solid rgba(207,217,232,.8);
    display: grid;
    gap: 22px;
    grid-template-columns: 1fr;
    justify-items: center;
    margin: 0 auto 22px;
    padding-bottom: 30px;
    padding-top: 34px;
    position: relative;
    text-align: center;
}

.home-page .hero-title {
    max-width: 900px;
    width: 100%;
}

.home-page .kicker {
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(191,211,244,.72);
    border-radius: 999px;
    color: #2458c8;
    padding: 7px 11px;
}

.home-page .hero-title h1 {
    background: none;
    color: #0c1424;
    font-size: clamp(36px, 4.1vw, 56px);
    font-weight: 860;
    line-height: 1.12;
    margin: 14px auto 14px;
    max-width: 820px;
    text-wrap: balance;
}

.home-page .hero-title p {
    color: #526174;
    font-size: 17px;
    line-height: 1.78;
    margin-left: auto;
    margin-right: auto;
    max-width: 680px;
    text-wrap: balance;
}

.hero-tool-pills {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 18px;
}

.hero-tool-pills a {
    background: rgba(255,255,255,.76);
    border: 1px solid rgba(191,211,244,.86);
    border-radius: 999px;
    color: #2458c8;
    font-size: 13px;
    font-weight: 850;
    min-height: 34px;
    padding: 8px 13px;
}

.hero-command-stack {
    align-self: start;
    display: grid;
    gap: 12px;
    margin-top: 0;
    max-width: 820px;
    width: 100%;
}

.home-page .command-bar {
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(37,99,235,.1), 0 1px 2px rgba(15,23,42,.05);
}

.home-page .quality-strip {
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(207,217,232,.88);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(15,23,42,.07);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    text-align: left;
}

.home-page .quality-strip span {
    min-height: 58px;
    padding: 11px 13px;
}

.home-page .quick-console {
    border: 1px solid rgba(198,211,231,.96);
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(15,23,42,.08);
    margin-bottom: 22px;
    margin-top: 0;
}

.home-page .quick-console a {
    min-height: 108px;
    padding: 20px 18px;
}

.home-page .quick-console a.live {
    background: linear-gradient(145deg, #111d31 0%, #172842 100%);
}

.home-page .quick-console a.live::after {
    display: none;
}

.home-page .quick-console strong {
    color: #172033;
    font-size: 17px;
    font-weight: 850;
}

.home-page .quick-console a.live strong {
    color: #fff;
}

.home-page .quick-console span {
    color: #64748b;
    font-size: 15px;
}

.home-page .ops-layout {
    align-items: start;
    grid-template-columns: 210px minmax(0, 1fr) 300px;
}

.home-page .ops-sidebar,
.home-page .ops-main,
.home-page .ops-aside > * {
    border-color: rgba(213,222,236,.92);
    box-shadow: 0 14px 34px rgba(15,23,42,.055);
}

.home-page .block-head {
    background: #fff;
    border-bottom: 1px solid rgba(226,232,240,.96);
    padding: 18px 20px;
}

.home-page .block-head h2 {
    font-size: 25px;
    letter-spacing: 0;
}

.home-page .tool-rows {
    background: #fff;
}

.home-page .tool-rows a {
    background: #fff;
    grid-template-columns: 68px minmax(170px, .75fr) minmax(0, 1fr) auto;
    min-height: 74px;
    padding: 16px 18px;
}

.home-page .tool-rows a:hover {
    background: #f8fbff;
    transform: none;
}

.home-page .tool-rows em {
    align-items: center;
    display: inline-flex;
    gap: 7px;
    letter-spacing: .04em;
}

.home-page .tool-rows em::before {
    background: currentColor;
    border-radius: 999px;
    content: "";
    height: 6px;
    width: 6px;
}

.home-page .tool-rows strong {
    color: #0f172a;
    font-size: 16px;
    font-weight: 850;
}

.home-page .tool-rows span {
    color: #5d6b7f;
    font-size: 15px;
    line-height: 1.55;
}

.home-page .tool-rows b {
    background: #eef4fb;
    color: #334155;
}

.home-page .tool-rows a.ready {
    background: #eef5ff;
    box-shadow: inset 3px 0 0 #2f6fed;
}

.home-page .tool-rows a.ready b {
    background: #2f6fed;
    color: #fff;
}

.home-page .note-block.dark {
    background: linear-gradient(145deg, #132039 0%, #0f1a2e 100%);
    border-radius: 11px;
}

.home-page .ad-tower,
.home-page .ad-band,
.home-page .ad-slot {
    border-color: rgba(203,213,225,.9);
    box-shadow: 0 16px 34px rgba(15,23,42,.052);
    color: #64748b;
}

@media (max-width: 1080px) {
    .header-grid {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .home-page .ops-hero,
    .home-page .ops-layout {
        grid-template-columns: 1fr;
    }

    .home-page .quality-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-page .tool-rows a {
        grid-template-columns: 58px minmax(0, 1fr) auto;
    }

    .home-page .tool-rows span {
        grid-column: 2 / -1;
    }
}

@media (max-width: 720px) {
    .site-shell {
        width: min(100% - 24px, 1200px);
    }

    .home-page .ops-hero {
        padding-bottom: 24px;
        padding-top: 24px;
    }

    .home-page .hero-title h1 {
        font-size: 34px;
    }

    .home-page .hero-title p {
        font-size: 15px;
        line-height: 1.72;
    }

    .home-page .command-bar {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .home-page .command-bar input {
        text-align: center;
    }

    .home-page .quality-strip {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .home-page .quick-console {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .home-page .tool-rows a {
        grid-template-columns: 1fr auto;
        text-align: center;
    }

    .home-page .tool-rows em,
    .home-page .tool-rows span {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .home-page .tool-rows strong {
        text-align: center;
    }

    .home-page .tool-rows b {
        justify-self: center;
    }
}

/* Header responsive correction */
@media (min-width: 721px) and (max-width: 1080px) {
    .header-grid {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px 18px;
        min-height: 112px;
        padding: 10px 0 12px;
    }

    .primary-nav {
        justify-self: end;
        width: max-content;
    }

    .header-search {
        grid-column: 1 / -1;
    }

    .home-page .ops-hero {
        padding-top: 34px;
    }
}

@media (min-width: 1081px) {
    .header-grid {
        min-height: 68px;
    }

    .home-page .ops-hero {
        padding-top: 42px;
    }
}

/* Mobile header compact mode */
@media (max-width: 720px) {
    .site-header {
        position: sticky;
    }

    .header-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        min-height: 0;
        padding: 9px 0 10px;
    }

    .brand-link {
        font-size: 16px;
    }

    .primary-nav {
        justify-self: stretch;
        max-width: 100%;
        overflow-x: auto;
        width: 100%;
    }

    .primary-nav a {
        flex: 1 0 auto;
        justify-content: center;
        min-width: 88px;
    }

    .header-search {
        display: none;
    }

    .home-page .ops-hero {
        padding-top: 24px;
    }
}

/* Friendly utility affordances: presets, sharing, histories */
.tool-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 14px;
}

.tool-chip,
.file-chip {
    align-items: center;
    background: #eef4ff;
    border: 1px solid #d6e4ff;
    border-radius: 999px;
    color: #2458c8;
    display: inline-flex;
    font-size: 13px;
    font-weight: 820;
    min-height: 34px;
    padding: 0 12px;
}

.tool-chip:hover,
.file-chip:hover {
    background: #fff;
    box-shadow: 0 8px 18px rgba(37,99,235,.1);
    color: #1d4ed8;
}

.helper-drawer {
    background: #f8fbff;
    border: 1px solid #e0e8f4;
    border-radius: 10px;
    color: #536177;
    margin: 0 0 14px;
    padding: 10px 12px;
}

.helper-drawer summary {
    color: #172033;
    cursor: pointer;
    font-weight: 820;
}

.helper-drawer ul {
    margin: 10px 0 2px;
    padding-left: 18px;
}

.helper-drawer li {
    line-height: 1.65;
    margin: 3px 0;
}

.result-textarea.mini {
    min-height: 84px;
}

.tool-support-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 330px;
    margin-top: 18px;
}

.tool-promo-panel,
.friendly-related {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border: 1px solid rgba(213,222,236,.94);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(15,23,42,.055);
    padding: 20px;
}

.tool-promo-panel span {
    color: #2563eb;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .075em;
}

.tool-promo-panel strong {
    color: #0f172a;
    display: block;
    font-size: 19px;
    line-height: 1.35;
    margin-top: 8px;
}

.tool-promo-panel p {
    color: #5f6d80;
    line-height: 1.65;
    margin: 8px 0 15px;
}

.promo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.promo-actions button {
    background: #132039;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 850;
    min-height: 36px;
    padding: 0 13px;
}

.promo-actions button:nth-child(2) {
    background: #2563eb;
}

.promo-actions button:nth-child(3) {
    background: #eef4fb;
    color: #334155;
}

.embedded-history {
    margin-top: 0;
}

.mini-history-list {
    display: grid;
    gap: 0;
}

.mini-history-list p {
    color: #64748b;
    margin: 0;
    padding: 18px 20px;
}

.mini-history-list button {
    align-items: center;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #e7edf5;
    color: #334155;
    display: grid;
    gap: 10px;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    min-height: 54px;
    padding: 10px 16px;
    text-align: left;
}

.mini-history-list button:hover {
    background: #f8fbff;
}

.mini-history-list b {
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
}

.mini-history-list span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-history-list em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

.json-option-row {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: auto 150px minmax(0, 1fr);
    margin-bottom: 12px;
}

.json-option-row .tool-input {
    margin: 0;
}

.check-control {
    align-items: center;
    color: #475569;
    display: inline-flex;
    font-weight: 760;
    gap: 8px;
    min-height: 44px;
}

.json-stats {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 12px;
}

.json-stats span {
    background: #f8fbff;
    border: 1px solid #e0e8f4;
    border-radius: 999px;
    color: #334155;
    font-size: 13px;
    font-weight: 820;
    min-height: 34px;
    overflow: hidden;
    padding: 8px 10px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friendly-related h3 {
    color: #0f172a;
    font-size: 18px;
    margin: 0 0 12px;
}

.friendly-related a {
    background: #f8fbff;
    border: 1px solid #e0e8f4;
    border-radius: 9px;
    color: #334155;
    display: inline-flex;
    font-weight: 820;
    margin: 0 7px 8px 0;
    padding: 9px 11px;
}

@media (max-width: 980px) {
    .tool-support-grid,
    .json-option-row,
    .mini-history-list button {
        grid-template-columns: 1fr;
    }

    .json-stats {
        grid-template-columns: 1fr;
    }
}

/* Batch image watermark workflow */
.batch-watermark .input-panel,
.batch-watermark .result-panel {
    min-height: 680px;
}

.drop-zone {
    align-items: center;
    background:
        linear-gradient(180deg, rgba(248,251,255,.98), rgba(239,246,255,.86));
    border: 1px dashed #b8c9e6;
    border-radius: 14px;
    color: #526174;
    cursor: pointer;
    display: grid;
    gap: 6px;
    margin: 8px 0 10px;
    min-height: 118px;
    padding: 18px;
    position: relative;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.drop-zone strong {
    color: #0f172a;
    font-size: 17px;
    font-weight: 860;
}

.drop-zone span {
    font-size: 14px;
}

.drop-zone input {
    inset: 0;
    opacity: 0;
    position: absolute;
    cursor: pointer;
}

.drop-zone.dragging,
.drop-zone:hover {
    background: #f3f8ff;
    border-color: #2563eb;
    box-shadow: 0 12px 28px rgba(37,99,235,.12);
}

.watermark-batch-meta {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 0 14px;
}

.watermark-batch-meta span {
    color: #2563eb;
    font-size: 13px;
    font-weight: 850;
}

.mini-action {
    background: #eef4fb;
    border: 0;
    border-radius: 999px;
    color: #334155;
    font-size: 13px;
    font-weight: 820;
    min-height: 30px;
    padding: 0 11px;
}

.watermark-check {
    background: #f8fbff;
    border: 1px solid #e0e8f4;
    border-radius: 10px;
    margin: 0 0 14px;
    padding: 0 12px;
}

.batch-file-list {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-top: 14px;
    max-height: 280px;
    overflow: auto;
}

.batch-file-list p {
    color: #64748b;
    margin: 0;
    padding: 16px;
}

.batch-file-item {
    align-items: center;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #e7edf5;
    color: #334155;
    display: grid;
    gap: 10px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    min-height: 52px;
    padding: 10px 13px;
    text-align: left;
    width: 100%;
}

.batch-file-item:last-child {
    border-bottom: 0;
}

.batch-file-item:hover,
.batch-file-item.active {
    background: #f4f8ff;
}

.batch-file-item b {
    background: #eaf2ff;
    border-radius: 999px;
    color: #2563eb;
    display: grid;
    font-size: 12px;
    height: 26px;
    place-items: center;
    width: 26px;
}

.batch-file-item span {
    color: #172033;
    font-weight: 780;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.batch-file-item em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

.batch-watermark .button-row a.plain-link {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

@media (max-width: 760px) {
    .batch-file-item {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .batch-file-item em {
        grid-column: 2;
    }
}

/* Final UX cleanup: neutral home, cleaner share, detail navigation */
.primary-nav a::before {
    display: none;
}

.primary-nav {
    border-radius: 12px;
    gap: 2px;
    padding: 3px;
}

.primary-nav a {
    border-radius: 9px;
    padding: 9px 14px;
}

.home-page .quick-console a,
.home-page .quick-console a.live {
    background: #fff;
    box-shadow: none;
}

.home-page .quick-console a:first-child {
    background: #fff;
}

.home-page .quick-console a:hover {
    background: #f8fbff;
}

.home-page .quick-console a.live strong,
.home-page .quick-console a strong {
    color: #172033;
}

.home-page .quick-console a.live span,
.home-page .quick-console a span {
    color: #64748b;
}

.home-page .quick-console b {
    color: #2563eb;
}

.home-page .tool-rows a.ready {
    background: #fff;
    box-shadow: inset 3px 0 0 #2f6fed;
}

.home-page .tool-rows a.ready b {
    background: #eef4fb;
    color: #334155;
}

.share-card {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border: 1px solid rgba(213,222,236,.94);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(15,23,42,.055);
    padding: 20px;
}

.share-card span {
    color: #2563eb;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .075em;
}

.share-card strong {
    color: #0f172a;
    display: block;
    font-size: 18px;
    line-height: 1.35;
    margin-top: 8px;
}

.share-card p {
    color: #5f6d80;
    line-height: 1.6;
    margin: 8px 0 14px;
}

.home-share-card .promo-actions button {
    min-height: 34px;
}

.guide-rows {
    display: grid;
    gap: 0;
}

.guide-rows a {
    min-height: 76px;
}

.tool-nav-panel {
    background: linear-gradient(180deg, #fff, #f8fbff);
    border: 1px solid rgba(213,222,236,.94);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(15,23,42,.055);
    margin-top: 18px;
    overflow: hidden;
}

.tool-nav-head {
    align-items: center;
    border-bottom: 1px solid #e7edf5;
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 16px 18px;
}

.tool-nav-head span {
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .075em;
}

.tool-nav-head strong {
    color: #0f172a;
    font-size: 18px;
}

.tool-nav-head a {
    background: #eef4fb;
    border-radius: 999px;
    color: #334155;
    font-size: 13px;
    font-weight: 850;
    padding: 8px 12px;
}

.tool-nav-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tool-nav-grid a {
    border-right: 1px solid #e7edf5;
    color: #334155;
    display: grid;
    gap: 5px;
    min-height: 112px;
    padding: 17px;
}

.tool-nav-grid a:last-child {
    border-right: 0;
}

.tool-nav-grid a:hover {
    background: #f4f8ff;
    color: #172033;
}

.tool-nav-grid em {
    color: #2563eb;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .075em;
}

.tool-nav-grid strong {
    color: #0f172a;
    font-size: 16px;
}

.tool-nav-grid span {
    color: #64748b;
    font-size: 14px;
    line-height: 1.45;
}

.guide-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .tool-nav-head,
    .tool-nav-grid,
    .guide-list-grid {
        grid-template-columns: 1fr;
    }

    .tool-nav-grid a {
        border-right: 0;
        border-bottom: 1px solid #e7edf5;
        min-height: 92px;
    }
}

/* Unified tool shell and two-level category navigation */
.tool-detail-page {
    padding-top: 28px;
}

.tool-detail-page .site-shell {
    width: min(1680px, calc(100% - 32px));
}

.tool-detail-layout {
    align-items: start;
    grid-template-columns: 240px minmax(0, 1fr) 310px;
}

.tool-detail-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.tool-detail-main .tool-workbench {
    grid-template-columns: minmax(460px, 1fr) minmax(420px, .95fr);
    margin-top: 0;
}

.tool-detail-main .compact-tool {
    grid-template-columns: minmax(430px, .9fr) minmax(460px, 1.1fr);
}

.tool-detail-main .input-panel,
.tool-detail-main .result-panel {
    padding: 22px;
}

.tool-detail-main .result-panel dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tool-detail-main .result-panel dt {
    align-self: end;
    grid-column: auto;
}

.tool-detail-main .result-panel dd {
    min-height: 48px;
}

.tool-detail-main .aspect-ratio-tool .stacked-result-list {
    grid-template-columns: 1fr;
}

.tool-detail-main .aspect-ratio-tool .stacked-result-list dt {
    align-self: auto;
    margin-top: 4px;
}

.tool-detail-main .aspect-ratio-tool .stacked-result-list dd {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
}

.tool-tree-sidebar {
    max-height: calc(100vh - 96px);
    overflow: auto;
}

.tool-tree-sidebar .all-tools {
    border-top: 1px solid var(--line);
}

.tool-tree-sidebar details {
    border-top: 1px solid var(--line);
}

.tool-tree-sidebar summary {
    align-items: center;
    color: #334155;
    cursor: pointer;
    display: flex;
    font-size: 15px;
    font-weight: 850;
    justify-content: space-between;
    list-style: none;
    min-height: 48px;
    padding: 0 14px;
}

.tool-tree-sidebar summary::-webkit-details-marker {
    display: none;
}

.tool-tree-sidebar summary::after {
    color: #94a3b8;
    content: "+";
    font-weight: 900;
}

.tool-tree-sidebar details[open] summary::after {
    content: "-";
}

.tool-tree-sidebar details a {
    background: #fbfdff;
    border-top: 1px solid #edf2f7;
    font-size: 14px;
    min-height: 42px;
    padding-left: 28px;
}

.tool-tree-sidebar a.active,
.tool-tree-sidebar details a.active {
    background: #eef5ff;
    color: #1d4ed8;
    box-shadow: inset 3px 0 0 #2563eb;
}

.tool-context-aside {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 92px;
}

.context-share-card .promo-actions button {
    min-height: 34px;
}

.tool-detail-main > .breadcrumb-line,
.tool-detail-main > .tool-head-grid,
.tool-detail-main > .tool-workbench,
.tool-detail-main > .history-panel,
.tool-detail-main > .ad-band,
.tool-detail-main > .ad-slot,
.tool-detail-main > .tool-bottom-grid,
.tool-detail-main > .tool-support-grid,
.tool-detail-main > .tool-nav-panel {
    min-width: 0;
}

.catalog-page .tool-tree-sidebar,
.home-page .tool-tree-sidebar {
    max-height: none;
}

@media (max-width: 1180px) {
    .tool-detail-layout {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .tool-detail-main .tool-workbench,
    .tool-detail-main .compact-tool {
        grid-template-columns: 1fr;
    }

    .tool-detail-main .input-panel {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .tool-context-aside {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        position: static;
    }

    .tool-context-aside .ad-slot-sidebar {
        min-height: 180px;
    }
}

@media (max-width: 900px) {
    .tool-detail-page .site-shell {
        width: min(100% - 22px, 1680px);
    }

    .tool-detail-layout {
        grid-template-columns: 1fr;
    }

    .tool-tree-sidebar {
        max-height: none;
        position: static;
    }

    .tool-tree-sidebar strong {
        min-height: 44px;
    }

    .tool-tree-sidebar details:not([open]) summary {
        border-bottom: 0;
    }

    .tool-context-aside {
        grid-template-columns: 1fr;
    }

    .tool-detail-main {
        gap: 16px;
    }

    .tool-head-grid,
    .breadcrumb-line,
    .tool-nav-head,
    .tool-nav-grid a,
    .tool-detail-main .panel-label,
    .tool-detail-main .input-panel label,
    .tool-detail-main .result-panel,
    .tool-detail-main .error-message,
    .tool-detail-main .tool-hint,
    .tool-detail-main .privacy-note {
        text-align: center;
    }

    .breadcrumb-line,
    .tool-head-grid,
    .tool-detail-main .panel-label,
    .button-row,
    .tool-chip-row,
    .option-row,
    .compact-actions {
        justify-content: center;
    }

    .tool-head-grid h1,
    .tool-head-grid p {
        margin-left: auto;
        margin-right: auto;
    }

    .tool-detail-main .result-panel dl,
    .checksum-result-grid {
        grid-template-columns: 1fr;
    }

    .tool-detail-main .result-panel dt {
        margin-top: 4px;
    }

    .tool-detail-main .result-panel dd {
        align-items: center;
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .tool-detail-main textarea,
    .tool-detail-main input,
    .tool-detail-main select {
        text-align: left;
    }

    .tool-detail-main input[type="range"],
    .tool-detail-main input[type="color"] {
        text-align: initial;
    }

    .tool-detail-main .batch-file-list p {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .qr-preview,
    .tool-detail-main .qr-preview {
        min-height: 260px;
    }

    .ad-slot-mobile-inline {
        display: grid;
        min-height: 108px;
    }

    .ad-slot-mobile-inline .ad-slot-inner {
        padding: 14px 18px;
    }

    .tool-context-aside .ad-slot-sidebar {
        display: none;
    }

    .tool-context-aside .note-block.dark {
        order: 1;
    }

    .tool-context-aside .context-share-card {
        order: 3;
    }

    .tool-context-aside .note-block:not(.dark) {
        order: 4;
    }

    .tool-detail-page {
        padding-top: 18px;
    }
}

@media (max-width: 640px) {
    .tool-tree-sidebar summary,
    .tool-tree-sidebar a,
    .tool-tree-sidebar details a {
        min-height: 46px;
    }

    .tool-detail-main {
        gap: 14px;
    }

    .tool-head-grid .plain-link {
        justify-self: start;
        min-height: 42px;
    }
}

/* Feature gap polish: stronger inputs, history and compact actions */
textarea.tool-input {
    min-height: 120px;
    padding: 13px;
    resize: vertical;
}

.option-row + .check-control,
.watermark-two-col + .check-control {
    margin: 0 0 14px;
}

.result-panel dl dd {
    overflow-wrap: anywhere;
}

.compact-actions a.plain-link,
.compact-actions button {
    min-height: 42px;
}

@media (max-width: 720px) {
    .button-row,
    .compact-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .tool-chip-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tool-chip,
    .file-chip {
        justify-content: center;
    }
}

/* Final responsive QA fixes */
@media (max-width: 720px) {
    .catalog-page .tool-rows a,
    .home-page .tool-rows a,
    .tool-rows.catalog-rows a {
        align-items: start;
        box-sizing: border-box;
        grid-template-columns: minmax(0, 1fr);
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .catalog-page .tool-rows em,
    .catalog-page .tool-rows strong,
    .catalog-page .tool-rows span,
    .catalog-page .tool-rows b,
    .home-page .tool-rows em,
    .home-page .tool-rows strong,
    .home-page .tool-rows span,
    .home-page .tool-rows b {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .catalog-page .tool-rows b,
    .home-page .tool-rows b {
        justify-self: start;
    }

    .tool-head-grid h1,
    .catalog-head h1,
    .article-body h1 {
        overflow-wrap: anywhere;
    }

    .contact-grid,
    .contact-panel,
    .contact-panel.strong {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
    }

    .contact-panel a,
    .primary-action,
    .secondary-action,
    .plain-link {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .history-table-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .history-table {
        min-width: 640px;
    }
}

/* Design QA pass: calmer workbench tone */
.home-page .ops-hero {
    background:
        linear-gradient(135deg, rgba(246, 249, 253, .98), rgba(238, 245, 255, .78)),
        linear-gradient(90deg, rgba(255,255,255,.6), rgba(255,255,255,.12));
    border-bottom: 1px solid rgba(218, 226, 238, .88);
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) 420px;
    min-height: 304px;
    padding-bottom: 28px;
    padding-top: 34px;
}

.home-page .kicker {
    background: #fff;
    border-color: #dbe5f3;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    color: #2563eb;
    font-size: 11px;
    padding: 6px 9px;
}

.home-page .hero-title h1 {
    color: #0f172a;
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 780;
    letter-spacing: 0;
    line-height: 1.08;
    margin: 14px 0 16px;
    max-width: 660px;
}

.home-page .hero-title p {
    color: #536176;
    font-size: 16px;
    line-height: 1.7;
    max-width: 650px;
}

.home-page .command-bar {
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15,23,42,.07);
}

.home-page .command-bar input {
    min-height: 54px;
}

.home-page .command-bar button {
    min-height: 54px;
}

.home-page .quality-strip {
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15,23,42,.05);
}

.home-page .quality-strip span {
    min-height: 52px;
}

.json-workbench {
    background: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 18px 46px rgba(15,23,42,.14);
}

.json-workbench .input-panel,
.json-workbench .result-panel {
    background: #111827;
    color: #dbeafe;
}

.json-workbench .input-panel {
    border-right-color: #243044;
}

.json-workbench .panel-label {
    border-bottom-color: #27364d;
}

.json-workbench .panel-label b,
.json-workbench .input-panel label,
.json-workbench .check-control {
    color: #cbd5e1;
}

.json-workbench textarea,
.json-workbench .result-textarea,
.json-workbench .tool-input {
    background: #0b1220;
    border-color: #26344b;
    color: #e5edf8;
}

.json-workbench textarea::placeholder {
    color: #64748b;
}

.json-workbench .tool-chip,
.json-workbench .file-chip,
.json-workbench .helper-drawer,
.json-workbench .json-stats span {
    background: #172236;
    border-color: #2b3b54;
    color: #dbeafe;
}

.json-workbench .helper-drawer summary {
    color: #e2e8f0;
}

.json-workbench .helper-drawer li {
    color: #aebbd0;
}

.json-workbench .button-row button:nth-child(n+2) {
    background: #1f2a3d;
    color: #dbeafe;
}

.json-workbench .button-row button:nth-child(n+2):hover {
    background: #29364d;
    color: #fff;
}

.json-support-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}

.json-note-panel {
    background: #fff;
}

@media (max-width: 900px) {
    .home-page .ops-hero,
    .json-support-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .home-page .ops-hero {
        min-height: 0;
        padding-bottom: 24px;
        padding-top: 24px;
    }

    .home-page .hero-title h1 {
        font-size: 34px;
    }

    .json-workbench .input-panel {
        border-right: 0;
        border-bottom: 1px solid #243044;
    }
}

/* Anti-vertical text guard */
.brand-link,
.primary-nav a,
.command-bar span,
.command-bar button,
.kicker,
.tool-chip,
.file-chip,
.mini-action,
.plain-link,
.primary-action,
.secondary-action,
.button-row button,
.compact-actions button,
.promo-actions button,
.tool-tree-sidebar summary,
.tool-tree-sidebar a,
.panel-label span,
.panel-label b,
.tool-rows em,
.tool-rows b,
.ad-slot span,
.ad-slot strong,
.json-stats span,
.watermark-batch-meta span {
    overflow-wrap: normal;
    text-wrap: nowrap;
    white-space: nowrap;
    word-break: keep-all;
}

.hero-title h1,
.catalog-head h1,
.tool-head-grid h1,
.article-body h1,
.block-head h2,
.tool-rows strong,
.tool-rows span,
.guide-rows strong,
.guide-rows span,
.article-card strong,
.article-card p,
.note-block strong,
.note-block p,
.tool-promo-panel strong,
.tool-promo-panel p,
.share-card strong,
.share-card p,
.ad-slot small,
.contact-panel h2,
.contact-panel p {
    overflow-wrap: break-word;
    word-break: keep-all;
}

@media (max-width: 380px) {
    .tool-chip-row,
    .json-stats {
        grid-template-columns: 1fr;
    }

    .tool-chip,
    .file-chip,
    .button-row button,
    .compact-actions button,
    .plain-link,
    .primary-action,
    .secondary-action {
        width: 100%;
    }
}

/* HTTP tester needs desktop-grade working space */
.http-tool-page .site-shell {
    width: min(1680px, calc(100% - 32px));
}

.http-tool-page .tool-detail-layout {
    grid-template-columns: 230px minmax(0, 1fr);
}

.http-tool-page .tool-detail-main {
    min-width: 0;
}

.http-tool-page .http-workbench {
    grid-template-columns: minmax(420px, .92fr) minmax(520px, 1.08fr);
    margin-top: 0;
}

.http-tool-page .http-workbench .input-panel,
.http-tool-page .http-workbench .result-panel {
    padding: 22px;
}

.http-tool-page .http-url-row {
    grid-template-columns: 126px minmax(0, 1fr);
}

.http-tool-page #httpHeaders {
    min-height: 156px;
}

.http-tool-page #httpBody,
.http-tool-page #httpResponseBody {
    min-height: 260px;
}

.http-tool-page #httpResponseHeaders {
    min-height: 126px;
}

.http-tool-page #httpCurlOutput {
    min-height: 92px;
}

.http-tool-page .tool-support-grid {
    grid-template-columns: minmax(0, 1fr);
}

.http-tool-page .tool-promo-panel {
    display: none;
}

@media (max-width: 1180px) {
    .http-tool-page .tool-detail-layout,
    .http-tool-page .http-workbench {
        grid-template-columns: 1fr;
    }

    .http-tool-page .input-panel {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
}

.checksum-options-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1.1fr .7fr .7fr;
    margin: 0 0 14px;
}

.checksum-options-grid.two {
    grid-template-columns: minmax(0, 1fr) 170px;
}

.checksum-workbench #checksumInput {
    min-height: 190px;
}

.checksum-result-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 14px;
}

.qr-extra-grid,
.unit-select-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 14px;
}

.unit-select-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qr-preview {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    min-height: 300px;
    padding: 18px;
    place-items: center;
}

.tool-detail-main .qr-preview {
    min-height: 340px;
}

.qr-preview canvas {
    background: #fff;
    border-radius: 8px;
    max-width: 100%;
}

.color-preview-box {
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
    min-height: 130px;
    margin-bottom: 14px;
}

.tool-detail-main .color-preview-box {
    min-height: 180px;
}

.tool-detail-main .batch-file-list p {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 86px minmax(0, 1fr);
}

.tool-detail-main .batch-file-list p b {
    color: #1d4ed8;
    font-size: 12px;
}

@media (max-width: 900px) {
    .checksum-options-grid,
    .checksum-options-grid.two,
    .checksum-result-grid,
    .qr-extra-grid,
    .unit-select-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .http-tool-page .site-shell {
        width: min(100% - 22px, 1680px);
    }

    .http-tool-page .http-url-row {
        grid-template-columns: 1fr;
    }

    .http-tool-page #httpBody,
    .http-tool-page #httpResponseBody {
        min-height: 220px;
    }
}

/* Home comfort pass: use desktop space like a real utility workbench */
.home-page.site-shell,
.home-page .site-shell,
.site-header .site-shell,
.site-footer .site-shell {
    width: min(1520px, calc(100% - 40px));
}

.home-page .ops-hero {
    align-items: center;
    grid-template-columns: minmax(520px, 1.12fr) minmax(440px, .88fr);
    min-height: 320px;
    overflow: hidden;
    padding: 54px clamp(30px, 4vw, 64px);
}

.home-page .hero-title {
    align-items: flex-start;
    justify-items: start;
    max-width: 720px;
    text-align: left;
}

.home-page .hero-title h1 {
    font-size: clamp(56px, 4.9vw, 84px);
    line-height: .98;
    max-width: 760px;
}

.home-page .hero-title p {
    font-size: 18px;
    line-height: 1.72;
    max-width: 680px;
}

.home-page .hero-tool-pills {
    justify-content: flex-start;
}

.home-page .hero-command-stack {
    justify-self: stretch;
    max-width: none;
}

.home-page .command-bar {
    grid-template-columns: 72px minmax(0, 1fr) 98px;
}

.home-page .quality-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-page .quick-console {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-page .ops-layout {
    align-items: start;
    grid-template-columns: 240px minmax(640px, 1fr) 320px;
}

.home-page .tool-rows a {
    grid-template-columns: 72px minmax(220px, .78fr) minmax(280px, 1fr) 62px;
}

@media (min-width: 1600px) {
    .home-page.site-shell,
    .home-page .site-shell,
    .site-header .site-shell,
    .site-footer .site-shell {
        width: min(1640px, calc(100% - 56px));
    }

    .home-page .ops-layout {
        grid-template-columns: 250px minmax(760px, 1fr) 340px;
    }
}

@media (max-width: 1180px) {
    .home-page .ops-hero {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .home-page .hero-title {
        align-items: center;
        justify-items: center;
        max-width: 820px;
        text-align: center;
    }

    .home-page .hero-tool-pills {
        justify-content: center;
    }

    .home-page .hero-command-stack {
        max-width: 720px;
        width: 100%;
    }

    .home-page .ops-layout {
        grid-template-columns: 230px minmax(0, 1fr);
    }

    .home-page .ops-aside {
        display: none;
    }
}

@media (max-width: 760px) {
    .home-page.site-shell,
    .home-page .site-shell,
    .site-header .site-shell,
    .site-footer .site-shell {
        width: min(100% - 24px, 1520px);
    }

    .home-page .ops-hero {
        min-height: 0;
        padding: 34px 18px 28px;
    }

    .home-page .hero-title {
        text-align: center;
    }

    .home-page .hero-title h1 {
        font-size: clamp(38px, 13vw, 54px);
        line-height: 1.04;
        text-align: center;
    }

    .home-page .hero-title p {
        font-size: 15px;
        line-height: 1.7;
        text-align: center;
    }

    .home-page .hero-tool-pills,
    .home-page .quality-strip {
        grid-template-columns: 1fr 1fr;
    }

    .home-page .command-bar {
        grid-template-columns: 54px minmax(0, 1fr) 66px;
    }

    .home-page .command-bar span,
    .home-page .command-bar input,
    .home-page .command-bar button {
        min-height: 46px;
        text-align: center;
    }

    .home-page .quality-strip {
        display: none;
    }

    .home-page .quick-console,
    .home-page .ops-layout {
        grid-template-columns: 1fr;
    }

    .home-page .tool-rows a {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .home-page .tool-rows em,
    .home-page .tool-rows strong,
    .home-page .tool-rows span,
    .home-page .tool-rows b {
        justify-self: center;
        text-align: center;
    }
}

/* Unified page width: home, catalog, guides and every tool detail stay consistent */
:root {
    --workbench-max: 1520px;
    --workbench-wide: 1640px;
    --workbench-gutter: 40px;
    --workbench-mobile-gutter: 24px;
}

.site-shell,
.home-page.site-shell,
.home-page .site-shell,
.catalog-page.site-shell,
.tool-detail-page .site-shell,
.http-tool-page .site-shell,
.checksum-tool-page .site-shell,
.site-header .site-shell,
.site-footer .site-shell {
    width: min(var(--workbench-max), calc(100% - var(--workbench-gutter)));
}

.tool-detail-layout,
.home-page .ops-layout {
    grid-template-columns: 240px minmax(0, 1fr) 320px;
}

.catalog-grid {
    grid-template-columns: 240px minmax(0, 1fr);
}

.http-tool-page .tool-detail-layout {
    grid-template-columns: 240px minmax(0, 1fr);
}

@media (min-width: 1600px) {
    .site-shell,
    .home-page.site-shell,
    .home-page .site-shell,
    .catalog-page.site-shell,
    .tool-detail-page .site-shell,
    .http-tool-page .site-shell,
    .checksum-tool-page .site-shell,
    .site-header .site-shell,
    .site-footer .site-shell {
        width: min(var(--workbench-wide), calc(100% - 56px));
    }

    .tool-detail-layout,
    .home-page .ops-layout {
        grid-template-columns: 250px minmax(0, 1fr) 340px;
    }

    .catalog-grid,
    .http-tool-page .tool-detail-layout {
        grid-template-columns: 250px minmax(0, 1fr);
    }
}

@media (max-width: 1180px) {
    .tool-detail-layout,
    .home-page .ops-layout,
    .catalog-grid {
        grid-template-columns: 230px minmax(0, 1fr);
    }

    .http-tool-page .tool-detail-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .site-shell,
    .home-page.site-shell,
    .home-page .site-shell,
    .catalog-page.site-shell,
    .tool-detail-page .site-shell,
    .http-tool-page .site-shell,
    .checksum-tool-page .site-shell,
    .site-header .site-shell,
    .site-footer .site-shell {
        width: min(100% - var(--workbench-mobile-gutter), var(--workbench-wide));
    }

    .tool-detail-layout,
    .home-page .ops-layout,
    .catalog-grid,
    .http-tool-page .tool-detail-layout {
        grid-template-columns: 1fr;
    }
}

/* Scalable tool taxonomy */
.tool-tree-sidebar strong {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.sidebar-total,
.tool-tree-sidebar summary b {
    align-items: center;
    background: #eef5ff;
    border: 1px solid #d8e7ff;
    border-radius: 999px;
    color: #2563eb;
    display: inline-flex;
    font-size: 11px;
    font-weight: 850;
    justify-content: center;
    min-width: 25px;
    padding: 2px 7px;
}

.tool-tree-sidebar summary {
    gap: 10px;
}

.tool-tree-sidebar summary span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-tree-sidebar summary::after {
    flex: 0 0 auto;
}

.catalog-index {
    display: grid;
    gap: 18px;
    overflow: hidden;
}

.catalog-section {
    background: #fff;
    border-top: 1px solid var(--line);
}

.catalog-section:first-child {
    border-top: 0;
}

.catalog-section header {
    align-items: center;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 12px;
    grid-template-columns: 110px minmax(0, 1fr) 42px;
    min-height: 64px;
    padding: 0 22px;
}

.catalog-section header span {
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
}

.catalog-section header h2 {
    color: var(--ink);
    font-size: 21px;
    line-height: 1.2;
    margin: 0;
}

.catalog-section header b {
    align-items: center;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    color: #2563eb;
    display: inline-flex;
    font-size: 12px;
    justify-content: center;
    min-height: 28px;
}

.catalog-section .tool-rows a:last-child {
    border-bottom: 0;
}

@media (max-width: 720px) {
    .catalog-index {
        gap: 14px;
    }

    .catalog-section header {
        grid-template-columns: 1fr auto;
        min-height: auto;
        padding: 16px;
        text-align: left;
    }

    .catalog-section header span {
        grid-column: 1 / -1;
    }

    .catalog-section header h2 {
        font-size: 19px;
    }
}

/* Home discovery: curated gallery first, full catalog second */
.home-gallery-shell {
    align-items: start;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1fr) 340px;
}

.home-gallery-main {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.featured-tools,
.category-gallery {
    min-width: 0;
}

.feature-card-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96));
    border: 1px solid #dbe5f2;
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .06);
    color: var(--text);
    display: grid;
    gap: 12px;
    min-height: 190px;
    overflow: hidden;
    padding: 22px;
    position: relative;
}

.feature-card::before {
    background: #2563eb;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.feature-card.is-large {
    background:
        radial-gradient(circle at 94% 10%, rgba(37,99,235,.15), transparent 32%),
        linear-gradient(135deg, #0f172a, #172554);
    color: #fff;
    grid-column: span 2;
}

.feature-card em {
    color: #2563eb;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .05em;
}

.feature-card.is-large em {
    color: #93c5fd;
}

.feature-card strong {
    color: var(--ink);
    font-size: 22px;
    line-height: 1.25;
}

.feature-card.is-large strong {
    color: #fff;
    font-size: 30px;
    max-width: 520px;
}

.feature-card span {
    color: #64748b;
    line-height: 1.58;
}

.feature-card.is-large span {
    color: #dbeafe;
    max-width: 560px;
}

.feature-card b {
    align-self: end;
    background: #eef5ff;
    border-radius: 999px;
    color: #2563eb;
    display: inline-flex;
    font-size: 13px;
    justify-content: center;
    justify-self: start;
    min-width: 56px;
    padding: 8px 12px;
}

.feature-card.is-large b {
    background: #fff;
    color: #1d4ed8;
}

.feature-card:hover {
    border-color: #bfd3f5;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .1);
    color: inherit;
    transform: translateY(-1px);
}

.category-gallery {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.category-panel {
    background: #fff;
    border: 1px solid #dfe8f4;
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.category-head {
    align-items: center;
    border-bottom: 1px solid #e6edf7;
    display: grid;
    gap: 10px;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    min-height: 64px;
    padding: 0 18px;
}

.category-head span {
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .05em;
}

.category-head h2 {
    color: var(--ink);
    font-size: 20px;
    line-height: 1.2;
    margin: 0;
}

.category-head a {
    color: #64748b;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.category-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.category-links a {
    border-right: 1px solid #edf2f7;
    border-top: 1px solid #edf2f7;
    color: #334155;
    font-weight: 800;
    min-height: 52px;
    padding: 16px 18px;
}

.category-links a:nth-child(odd) {
    border-left: 0;
}

.category-links a:nth-child(-n + 2) {
    border-top: 0;
}

.category-links a:hover {
    background: #f8fbff;
    color: #1d4ed8;
}

.category-panel.image .category-head span { color: #0891b2; }
.category-panel.dev .category-head span { color: #4f46e5; }
.category-panel.biz .category-head span { color: #059669; }
.category-panel.net .category-head span { color: #dc2626; }

@media (max-width: 1180px) {
    .home-gallery-shell {
        grid-template-columns: 1fr;
    }

    .home-gallery-shell .ops-aside {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .feature-card-grid,
    .category-gallery {
        grid-template-columns: 1fr;
    }

    .feature-card.is-large {
        grid-column: auto;
    }

    .home-gallery-shell .ops-aside {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .feature-card {
        min-height: 164px;
        padding: 20px;
        text-align: center;
    }

    .feature-card b {
        justify-self: center;
    }

    .feature-card.is-large strong {
        font-size: 26px;
    }

    .category-head {
        grid-template-columns: 1fr auto;
        padding: 16px;
    }

    .category-head span {
        grid-column: 1 / -1;
    }

    .category-links {
        grid-template-columns: 1fr;
    }

    .category-links a {
        border-right: 0;
        text-align: center;
    }
}

/* Visual QA fixes inspired by the Magic Patterns draft */
.home-page .hero-title h1 {
    height: auto;
    line-height: 1.18;
    max-width: 820px;
    overflow: visible;
    padding-bottom: 10px;
}

.home-page .hero-title p {
    max-width: 620px;
}

.home-page .quick-console a {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-width: 0;
    overflow: hidden;
    row-gap: 4px;
}

.home-page .quick-console b {
    grid-row: 1 / 3;
}

.home-page .quick-console strong,
.home-page .quick-console span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feature-card,
.category-panel,
.catalog-section,
.tool-nav-grid a,
.guide-rows a,
.note-block,
.share-card {
    min-width: 0;
}

.feature-card strong,
.feature-card span,
.category-head h2,
.category-links a,
.catalog-section header h2,
.tool-nav-grid strong,
.tool-nav-grid span,
.guide-rows strong,
.guide-rows span {
    overflow-wrap: anywhere;
    word-break: keep-all;
}

@media (max-width: 760px) {
    .home-page .hero-title h1 {
        font-size: clamp(34px, 10.5vw, 48px);
        line-height: 1.16;
    }

    .home-page .quick-console a {
        grid-template-columns: 38px minmax(0, 1fr);
    }
}

/* Home category board: show every tool without the noisy all-in-one list */
.home-tool-board {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    gap: 18px;
    overflow: visible;
}

.home-tool-board .block-head {
    background: #fff;
    border: 1px solid #dfe8f4;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.home-category-section {
    background: #fff;
    border: 1px solid #dfe8f4;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .065);
    overflow: hidden;
    position: relative;
}

.home-category-section::before {
    background: #2563eb;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 5px;
    z-index: 1;
}

.home-category-section header {
    align-items: center;
    background: linear-gradient(180deg, #ffffff, #f7faff);
    border-bottom: 1px solid #e1eaf6;
    display: grid;
    gap: 14px;
    grid-template-columns: 104px minmax(0, 1fr) 42px;
    min-height: 74px;
    padding: 0 24px 0 28px;
    position: relative;
    z-index: 2;
}

.home-category-section header span {
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .05em;
}

.home-category-section header h2 {
    color: var(--ink);
    font-size: 23px;
    line-height: 1.2;
    margin: 0;
}

.home-category-section header b {
    align-items: center;
    background: #eef5ff;
    border: 1px solid #d8e7ff;
    border-radius: 999px;
    color: #2563eb;
    display: inline-flex;
    font-size: 12px;
    justify-content: center;
    min-height: 28px;
}

.home-category-section.image header span { color: #0891b2; }
.home-category-section.net header span { color: #dc2626; }
.home-category-section.dev header span { color: #4f46e5; }
.home-category-section.biz header span { color: #059669; }

.home-category-section.image::before { background: #0891b2; }
.home-category-section.net::before { background: #dc2626; }
.home-category-section.dev::before { background: #4f46e5; }
.home-category-section.biz::before { background: #059669; }

.home-category-section.image header { background: linear-gradient(180deg, #ffffff, #f0fdff); }
.home-category-section.net header { background: linear-gradient(180deg, #ffffff, #fff5f5); }
.home-category-section.dev header { background: linear-gradient(180deg, #ffffff, #f6f5ff); }
.home-category-section.biz header { background: linear-gradient(180deg, #ffffff, #f2fff8); }

.home-tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-left: 5px;
}

.home-tool-grid a {
    border-top: 1px solid #edf2f7;
    border-right: 1px solid #edf2f7;
    color: #334155;
    display: grid;
    gap: 8px;
    min-height: 132px;
    min-width: 0;
    padding: 18px 20px;
}

.home-tool-grid a:nth-child(3n) {
    border-right: 0;
}

.home-tool-grid em {
    color: #2563eb;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .04em;
}

.home-tool-grid strong {
    color: var(--ink);
    font-size: 17px;
    font-weight: 850;
    line-height: 1.28;
}

.home-tool-grid span {
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
}

.home-tool-grid a:hover {
    background: #f8fbff;
    color: inherit;
}

.home-category-section.image .home-tool-grid a:hover { background: #f0fdff; }
.home-category-section.net .home-tool-grid a:hover { background: #fff7f7; }
.home-category-section.dev .home-tool-grid a:hover { background: #f7f6ff; }
.home-category-section.biz .home-tool-grid a:hover { background: #f5fff9; }

.home-category-section.image .home-tool-grid em { color: #0891b2; }
.home-category-section.net .home-tool-grid em { color: #dc2626; }
.home-category-section.dev .home-tool-grid em { color: #4f46e5; }
.home-category-section.biz .home-tool-grid em { color: #059669; }

/* File/image selection: consistent large drop zone */
.drop-zone {
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,252,255,.94));
    border: 1px dashed #9fc0f5;
    border-radius: 14px;
    gap: 16px;
    margin: 8px 0 16px;
    min-height: 118px;
    padding: 26px 22px;
}

.drop-zone strong {
    color: #111827;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.25;
}

.drop-zone span {
    color: #64748b;
    font-size: 15px;
    line-height: 1.45;
}

.drop-zone.dragging,
.drop-zone:hover {
    background: #f8fbff;
    border-color: #2563eb;
    box-shadow: inset 0 0 0 1px rgba(37,99,235,.08), 0 14px 30px rgba(37,99,235,.1);
}

@media (max-width: 1120px) {
    .home-tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-tool-grid a:nth-child(3n) {
        border-right: 1px solid #edf2f7;
    }

    .home-tool-grid a:nth-child(2n) {
        border-right: 0;
    }
}

/* High zoom / 200% scale comfort */
@media (max-width: 1280px) {
    .site-shell,
    .home-page.site-shell,
    .home-page .site-shell,
    .catalog-page.site-shell,
    .tool-detail-page .site-shell,
    .http-tool-page .site-shell,
    .checksum-tool-page .site-shell,
    .site-header .site-shell,
    .site-footer .site-shell {
        width: min(100% - 24px, var(--workbench-wide));
    }

    .header-grid {
        grid-template-columns: auto 1fr;
    }

    .header-search {
        grid-column: 1 / -1;
        max-width: none;
        width: 100%;
    }

    .home-page .ops-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 34px 24px;
        text-align: center;
    }

    .home-page .hero-title,
    .home-page .hero-command-stack {
        align-items: center;
        justify-items: center;
        max-width: 860px;
        text-align: center;
        width: 100%;
    }

    .home-page .hero-title h1 {
        font-size: clamp(42px, 7vw, 68px);
    }

    .home-page .hero-tool-pills {
        justify-content: center;
    }

    .home-gallery-shell {
        grid-template-columns: 1fr;
    }

    .home-gallery-shell .ops-aside {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .quick-console {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tool-detail-layout,
    .catalog-grid {
        grid-template-columns: 1fr;
    }

    .tool-context-aside {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        position: static;
    }
}

@media (max-width: 980px) {
    .primary-nav {
        justify-self: end;
    }

    .home-page .command-bar {
        grid-template-columns: 64px minmax(0, 1fr) 82px;
    }

    .home-page .quality-strip,
    .home-gallery-shell .ops-aside,
    .tool-context-aside {
        grid-template-columns: 1fr;
    }

    .quick-console,
    .home-tool-grid {
        grid-template-columns: 1fr;
    }

    .quick-console a,
    .home-tool-grid a,
    .home-tool-grid a:nth-child(2n),
    .home-tool-grid a:nth-child(3n) {
        border-right: 0;
    }

    .home-page .quick-console strong,
    .home-page .quick-console span {
        white-space: normal;
    }

    .home-tool-grid a {
        min-height: auto;
    }
}

@media (max-width: 640px) {
    .home-category-section header {
        grid-template-columns: 1fr auto;
        padding: 16px;
    }

    .home-category-section header span {
        grid-column: 1 / -1;
    }

    .home-tool-grid {
        grid-template-columns: 1fr;
    }

    .home-tool-grid a,
    .home-tool-grid a:nth-child(2n),
    .home-tool-grid a:nth-child(3n) {
        border-right: 0;
        min-height: 116px;
        text-align: center;
    }

    .drop-zone {
        min-height: 116px;
        padding: 24px 16px;
    }

    .drop-zone strong {
        font-size: 18px;
    }
}

/* Compact portal-style home */
.home-page {
    background:
        radial-gradient(circle at 18% 8%, rgba(37, 99, 235, .10), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(14, 165, 233, .10), transparent 26%),
        #f7faff;
}

.home-portal-page .header-grid {
    grid-template-columns: auto minmax(0, 1fr);
    width: min(980px, calc(100% - 32px));
}

.home-portal-page .primary-nav {
    justify-content: flex-end;
}

.home-portal-page .header-search {
    display: none;
}

.home-page .site-shell {
    width: min(980px, calc(100% - 32px));
}

.home-page .ops-hero {
    align-items: center;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(219, 228, 241, .95);
    border-radius: 22px 22px 10px 10px;
    box-shadow: 0 24px 60px rgba(37, 99, 235, .16), 0 2px 8px rgba(15, 23, 42, .05);
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
    margin-top: 18px;
    padding: 44px 56px 22px;
    text-align: center;
}

.home-page .hero-title {
    justify-items: center;
}

.home-page .kicker {
    background: #eef5ff;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    color: #2563eb;
    display: inline-grid;
    min-height: 24px;
    padding: 0 10px;
    place-items: center;
}

.home-page .hero-title h1 {
    font-size: clamp(30px, 4.4vw, 46px);
    letter-spacing: 0;
    line-height: 1.16;
    margin: 16px 0 8px;
}

.home-page .hero-title p {
    color: #64748b;
    font-size: 15px;
    line-height: 1.65;
    margin: 0 auto;
}

.home-page .hero-tool-pills,
.home-page .quality-strip {
    display: none;
}

.home-page .hero-command-stack {
    justify-items: center;
}

.home-page .command-bar {
    border-color: #dbeafe;
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(37, 99, 235, .14);
    grid-template-columns: minmax(0, 1fr);
    margin: 0 auto;
    max-width: 620px;
    overflow: visible;
    width: 100%;
}

.home-page .command-bar span,
.home-page .command-bar button {
    display: none;
}

.home-page .command-bar input {
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    min-height: 42px;
    padding: 0 22px;
    text-align: center;
}

.portal-section {
    background: rgba(255, 255, 255, .88);
    border-left: 1px solid rgba(219, 228, 241, .95);
    border-right: 1px solid rgba(219, 228, 241, .95);
    padding: 18px 22px 0;
}

.portal-section h2 {
    color: #0f172a;
    font-size: 16px;
    margin: 0 0 12px;
}

.portal-category-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.portal-category-card,
.portal-popular-grid a {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    color: #1f2937;
    display: grid;
    min-width: 0;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.portal-category-card {
    gap: 7px;
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 104px;
    padding: 16px;
}

.portal-category-card i,
.portal-popular-grid i {
    align-items: center;
    border-radius: 9px;
    display: inline-flex;
    font-style: normal;
    font-weight: 900;
    justify-content: center;
}

.portal-category-card i {
    align-self: start;
    color: #fff;
    font-size: 12px;
    height: 38px;
    width: 38px;
}

.portal-category-card strong,
.portal-category-card span {
    grid-column: 2;
}

.portal-category-card strong {
    color: #0f172a;
    font-size: 15px;
    line-height: 1.25;
}

.portal-category-card span {
    color: #64748b;
    font-size: 12px;
    line-height: 1.48;
    word-break: keep-all;
}

.portal-category-card.business i { background: linear-gradient(135deg, #22c55e, #059669); }
.portal-category-card.image i { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.portal-category-card.network i { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.portal-category-card.dev i { background: linear-gradient(135deg, #0ea5e9, #2563eb); }

.portal-category-card:hover,
.portal-popular-grid a:hover {
    border-color: #bfdbfe;
    box-shadow: 0 18px 34px rgba(37, 99, 235, .14);
    color: inherit;
    transform: translateY(-2px);
}

.portal-popular {
    border-bottom: 1px solid rgba(219, 228, 241, .95);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 26px 70px rgba(37, 99, 235, .12);
    padding-bottom: 28px;
}

.portal-popular-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.portal-popular-grid a {
    align-content: start;
    gap: 8px;
    justify-items: center;
    min-height: 116px;
    padding: 16px 10px 14px;
    text-align: center;
}

.portal-popular-grid i {
    background: #eef5ff;
    color: #2563eb;
    font-size: 15px;
    height: 38px;
    min-width: 38px;
    padding: 0 8px;
}

.portal-popular-grid strong {
    color: #0f172a;
    font-size: 14px;
    line-height: 1.25;
}

.portal-popular-grid span {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.home-page .ad-slot-portal {
    border-color: rgba(191, 219, 254, .92);
    border-radius: 16px;
    margin: 20px auto 0;
    min-height: 92px;
    width: min(100% - 44px, 980px);
}

.home-page .ad-slot-portal .ad-slot-inner {
    min-height: 72px;
    padding: 16px 22px;
}

.home-gallery-shell {
    margin-top: 32px;
}

@media (max-width: 900px) {
    .portal-category-grid,
    .portal-popular-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .home-portal-page .header-grid {
        gap: 10px;
        grid-template-columns: 1fr;
        justify-items: center;
        min-height: 92px;
        padding: 10px 0;
    }

    .home-portal-page .primary-nav {
        background: rgba(255, 255, 255, .92);
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .07);
        justify-content: center;
        padding: 4px;
    }

    .home-portal-page .primary-nav a {
        min-width: 76px;
        padding: 8px 10px;
        text-align: center;
    }

    .home-page .site-shell {
        width: min(100% - 18px, 980px);
    }

    .home-page .ad-slot-portal {
        margin-top: 14px;
        width: min(100% - 18px, 980px);
    }

    .home-page .ops-hero {
        border-radius: 18px 18px 8px 8px;
        margin-top: 10px;
        padding: 34px 18px 18px;
    }

    .home-page .hero-title h1 {
        font-size: 32px;
    }

    .portal-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .portal-category-grid,
    .portal-popular-grid {
        grid-template-columns: 1fr;
    }

    .portal-category-card,
    .portal-popular-grid a {
        min-height: 96px;
    }
}