/* ============================================================
   FoxFormat — site.css
   White + blue accent, mobile-friendly, clean/minimal
   ============================================================ */

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Ensure the HTML hidden attribute always wins over CSS display rules */
[hidden] { display: none !important; }

:root {
    --blue-50:  #E6F1FB;
    --blue-100: #B5D4F4;
    --blue-400: #378ADD;
    --blue-600: #185FA5;
    --blue-800: #0C447C;

    --gray-50:  #F7F8FA;
    --gray-100: #EEF0F3;
    --gray-200: #DDE1E7;
    --gray-400: #9AA3B0;
    --gray-600: #5C6472;
    --gray-900: #1A1D23;

    --teal-50:  #E1F5EE;
    --teal-600: #0F6E56;

    --purple-50:  #EEEDFE;
    --purple-600: #534AB7;

    --amber-50:  #FAEEDA;
    --amber-600: #854F0B;

    --coral-50:  #FAECE7;
    --coral-600: #993C1D;

    --green-50:  #EAF3DE;
    --green-600: #3B6D11;

    --red-50:   #FCEBEB;
    --red-600:  #A32D2D;

    --sidebar-width: 220px;
    --topbar-height: 52px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --transition: 0.18s ease;
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--font);
    background: var(--gray-50);
    color: var(--gray-900);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--blue-800); }
h1, h2, h3 { font-weight: 500; line-height: 1.3; }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--font); }


/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--topbar-height);
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    flex-shrink: 0;
}

.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-center { flex: 1; max-width: 380px; margin: 0 auto; }
.topbar-right { display: flex; align-items: center; gap: 20px; font-size: 14px; }
.topbar-right a { color: var(--gray-600); }
.topbar-right a:hover { color: var(--blue-600); text-decoration: none; }

.sidebar-toggle {
    background: none;
    border: none;
    padding: 6px;
    border-radius: var(--radius-sm);
    color: var(--gray-600);
    font-size: 20px;
    display: flex;
    align-items: center;
}
.sidebar-toggle:hover { background: var(--gray-100); color: var(--gray-900); }

.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 50%;
}
.logo-text { font-size: 15px; color: var(--gray-900); font-weight: 400; }
.logo-text strong { color: var(--blue-600); font-weight: 600; }


/* ── Search ───────────────────────────────────────────────── */
.search-wrap { position: relative; }
.search-icon {
    position: absolute; left: 10px; top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400); font-size: 15px; pointer-events: none;
}
.search-input {
    width: 100%; height: 36px;
    padding: 0 12px 0 32px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 14px;
    background: var(--gray-50);
    color: var(--gray-900);
    outline: none;
    transition: border-color var(--transition);
}
.search-input:focus { border-color: var(--blue-400); background: #fff; }

.search-results {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    z-index: 200;
    max-height: 320px;
    overflow-y: auto;
}
.search-results.open { display: block; }
.search-result-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--gray-900);
    cursor: pointer;
    border-bottom: 1px solid var(--gray-100);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--blue-50); }
.search-result-item i { color: var(--blue-600); font-size: 16px; }
.search-result-category { font-size: 11px; color: var(--gray-400); margin-left: auto; }
.search-no-results { padding: 14px; font-size: 13px; color: var(--gray-400); text-align: center; }


/* ── App body ─────────────────────────────────────────────── */
.app-body {
    display: flex;
    flex: 1;
    min-height: 0;
}


/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid var(--gray-200);
    overflow-y: auto;
    transition: width var(--transition), transform var(--transition);
    position: relative;
}

.sidebar.collapsed { width: 0; overflow: hidden; }

.sidebar-nav { padding: 12px 0 24px; }

.sidebar-section { margin-bottom: 4px; }

.sidebar-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 10px 16px 4px;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px;
    font-size: 13px;
    color: var(--gray-600);
    border-left: 2px solid transparent;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.sidebar-item:hover {
    background: var(--gray-50);
    color: var(--gray-900);
    text-decoration: none;
}
.sidebar-item.active {
    color: var(--blue-600);
    background: var(--blue-50);
    border-left-color: var(--blue-600);
    font-weight: 500;
}
.sidebar-item i { font-size: 15px; flex-shrink: 0; }

.sidebar-divider {
    height: 1px;
    background: var(--gray-100);
    margin: 6px 12px;
}


/* ── Main content ─────────────────────────────────────────── */
.main-content {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
    min-width: 0;
}


/* ── Home page ────────────────────────────────────────────── */
.home-hero {
    background: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-400) 100%);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.home-hero h1 { font-size: 22px; font-weight: 500; color: #fff; margin-bottom: 6px; }
.home-hero p  { font-size: 14px; color: rgba(255,255,255,0.85); }
.hero-stats   { font-size: 13px; color: rgba(255,255,255,0.75); white-space: nowrap; flex-shrink: 0; }
.hero-stats strong { color: #fff; }

.tool-section { margin-bottom: 32px; }

.section-heading {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--gray-600);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.section-heading i { font-size: 15px; }

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.tool-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: border-color var(--transition), box-shadow var(--transition);
    text-decoration: none;
    color: inherit;
    position: relative;
}
.tool-card:hover {
    border-color: var(--blue-400);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}
.tool-card:hover .tool-card-arrow { opacity: 1; }

.tool-card-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.accent-blue   { background: var(--blue-50);   color: var(--blue-600); }
.accent-teal   { background: var(--teal-50);   color: var(--teal-600); }
.accent-purple { background: var(--purple-50); color: var(--purple-600); }
.accent-amber  { background: var(--amber-50);  color: var(--amber-600); }
.accent-coral  { background: var(--coral-50);  color: var(--coral-600); }
.accent-green  { background: var(--green-50);  color: var(--green-600); }

.tool-card-body { flex: 1; min-width: 0; }
.tool-card-name { font-size: 13px; font-weight: 500; color: var(--gray-900); margin-bottom: 3px; }
.tool-card-desc { font-size: 12px; color: var(--gray-600); line-height: 1.5; }
.tool-card-arrow {
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%);
    font-size: 14px; color: var(--blue-400);
    opacity: 0; transition: opacity var(--transition);
}


/* ── Tool page ────────────────────────────────────────────── */
.page-tool { max-width: 900px; }

.tool-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}
.tool-header-icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.tool-header-text { flex: 1; }

.breadcrumb {
    display: flex; align-items: center; gap: 6px;
    list-style: none;
    font-size: 12px;
    color: var(--gray-400);
    margin-bottom: 6px;
}
.breadcrumb a { color: var(--gray-400); }
.breadcrumb a:hover { color: var(--blue-600); }

.tool-header h1 { font-size: 22px; font-weight: 500; margin-bottom: 4px; }
.tool-description { font-size: 14px; color: var(--gray-600); }

.tool-workspace { display: flex; flex-direction: column; gap: 0; }

/* Input panel */
.panel {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.panel-input { flex-shrink: 0; }
.panel-output { flex: 1; }

.panel + .action-bar { margin-top: 10px; }
.action-bar + .panel { margin-top: 10px; }

.panel-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
}
.panel-label { font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.05em; }
.panel-actions { display: flex; gap: 6px; }

.btn-toolbar {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    font-size: 12px;
    background: none;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    color: var(--gray-600);
    transition: background var(--transition), color var(--transition);
}
.btn-toolbar:hover { background: var(--gray-100); color: var(--gray-900); }
.btn-toolbar:disabled { opacity: 0.4; cursor: not-allowed; }

.panel-textarea {
    width: 100%;
    height: 180px;
    padding: 14px;
    border: none;
    resize: vertical;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    color: var(--gray-900);
    background: #fff;
    outline: none;
}

.panel-output-inner {
    min-height: 260px;
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.panel-output-inner pre {
    font-family: var(--font-mono);
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
}

.output-placeholder, .output-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    text-align: center;
    color: var(--gray-400);
    font-family: var(--font);
}
.output-placeholder i, .output-coming-soon i { font-size: 28px; }
.output-placeholder p, .output-coming-soon p { font-size: 14px; line-height: 1.6; max-width: 320px; }
.output-coming-soon i { color: var(--blue-400); }
.output-coming-soon strong { color: var(--blue-600); }

.action-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 4px 0;
}

.btn-primary {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 22px;
    background: var(--blue-600);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    transition: background var(--transition);
}
.btn-primary:hover:not(:disabled) { background: var(--blue-800); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-secondary {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    background: #fff;
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 14px;
    transition: background var(--transition);
}
.btn-secondary:hover { background: var(--gray-100); }

.tool-info {
    margin-top: 28px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
}
.tool-info h2 { font-size: 15px; font-weight: 500; margin-bottom: 10px; }
.tool-info p  { font-size: 13px; color: var(--gray-600); line-height: 1.7; margin-bottom: 8px; }


/* ── Static pages ─────────────────────────────────────────── */
.page-static { max-width: 720px; }
.page-static h1 { font-size: 26px; margin-bottom: 6px; }
.page-updated { font-size: 13px; color: var(--gray-400); margin-bottom: 28px; }
.page-static section { margin-bottom: 28px; }
.page-static h2 { font-size: 17px; font-weight: 500; margin-bottom: 10px; color: var(--gray-900); }
.page-static p { font-size: 14px; color: var(--gray-600); line-height: 1.75; margin-bottom: 10px; }
.page-static ul { padding-left: 18px; }
.page-static ul li { font-size: 14px; color: var(--gray-600); line-height: 1.75; list-style: disc; margin-bottom: 4px; }
.page-static strong { color: var(--gray-900); font-weight: 500; }

.sitemap-list { padding-left: 0; margin-bottom: 8px; }
.sitemap-list li { padding: 5px 0; font-size: 14px; border-bottom: 1px solid var(--gray-100); }
.sitemap-list li:last-child { border-bottom: none; }
.sitemap-desc { color: var(--gray-400); font-size: 13px; }


/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
    background: #fff;
    border-top: 1px solid var(--gray-200);
    padding: 24px 32px 16px;
    margin-top: auto;
}
.footer-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
}
.footer-brand .logo-text { font-size: 14px; }
.footer-brand p { font-size: 13px; color: var(--gray-400); margin-top: 4px; }
.footer-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-links a { font-size: 13px; color: var(--gray-600); }
.footer-links a:hover { color: var(--blue-600); text-decoration: none; }
.footer-bottom { font-size: 12px; color: var(--gray-400); border-top: 1px solid var(--gray-100); padding-top: 14px; }


/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .main-content { padding: 20px 16px; }
    .home-hero { flex-direction: column; gap: 10px; }
    .hero-stats { display: none; }
    .tool-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .topbar-right { display: none; }
    .topbar-center { max-width: none; }
}

@media (max-width: 600px) {
    .sidebar { position: fixed; left: 0; top: var(--topbar-height); height: calc(100vh - var(--topbar-height)); z-index: 90; transform: translateX(0); box-shadow: 4px 0 16px rgba(0,0,0,0.08); }
    .sidebar.collapsed { transform: translateX(-100%); width: var(--sidebar-width); }
    .tool-grid { grid-template-columns: 1fr 1fr; }
    .tool-card-arrow { display: none; }
    .page-tool { max-width: 100%; }
    .footer-inner { flex-direction: column; }
}

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

/* ── Focus / accessibility ────────────────────────────────── */
:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }


/* ============================================================
   JSON Formatter — tool-specific styles
   ============================================================ */

/* Indent options in action bar */
.indent-options {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--gray-600);
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 0 14px;
    height: 38px;
}
.indent-label { font-weight: 500; color: var(--gray-600); white-space: nowrap; }
.indent-radio {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    white-space: nowrap;
    color: var(--gray-700);
}
.indent-radio input[type="radio"] { accent-color: var(--blue-600); cursor: pointer; }

/* Error banner */
.error-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: var(--red-50);
    border: 1px solid #F7C1C1;
    border-radius: var(--radius-md);
    font-size: 13px;
    color: #A32D2D;
    line-height: 1.5;
}
.error-banner i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* Output stats badge */
.output-stats {
    font-size: 12px;
    color: var(--gray-400);
    padding-right: 8px;
}

/* Syntax highlighted JSON output */
.json-output {
    margin: 0;
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.7;
    white-space: pre;
    overflow-x: auto;
    tab-size: 4;
}
.json-output code { font-family: inherit; }

.json-key     { color: #0550AE; font-weight: 500; }  /* blue  — object keys   */
.json-string  { color: #116329; }                     /* green — string values */
.json-number  { color: #7D4E00; }                     /* amber — numbers       */
.json-boolean { color: #8250DF; }                     /* purple — true / false */
.json-null    { color: #CF222E; }                     /* red   — null          */

/* Placeholder error state */
.output-placeholder--error {
    color: #A32D2D;
}
.output-placeholder--error i { color: #CF222E; }

/* Tool info section — feature list */
.tool-info h3 {
    font-size: 14px;
    font-weight: 500;
    margin: 16px 0 8px;
    color: var(--gray-900);
}
.tool-info code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--gray-100);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--gray-900);
}
.tool-info-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tool-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--gray-600);
    line-height: 1.5;
}
.tool-info-list li i { color: var(--blue-600); font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.tool-info-list strong { color: var(--gray-900); font-weight: 500; }
.tool-info-list--ol { counter-reset: ol-counter; }
.tool-info-list--ol li { counter-increment: ol-counter; }
.tool-info-list--ol li::before {
    content: counter(ol-counter);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--blue-50);
    color: var(--blue-600);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ============================================================
   Google AdSense ad slots
   ============================================================ */
.ad-slot {
    width: 100%;
    overflow: hidden;
    background: var(--gray-50);
    border: 1px dashed var(--gray-200);
    border-radius: var(--radius-md);
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ad-slot--top    { margin-bottom: 20px; }
.ad-slot--bottom { margin-top: 20px; }

/* Hide dashed border once AdSense fills the slot */
.ad-slot:has(ins.adsbygoogle[data-ad-status="filled"]) {
    border: none;
    background: transparent;
}

/* Responsive: stack indent options on small screens */
@media (max-width: 700px) {
    .action-bar { flex-wrap: wrap; gap: 8px; }
    .indent-options { width: 100%; justify-content: flex-start; }
    .json-output { font-size: 12px; }
}


/* ============================================================
   XML Formatter — tool-specific styles
   ============================================================ */

/* Syntax highlighted XML output */
.xml-output {
    margin: 0;
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.7;
    white-space: pre;
    overflow-x: auto;
    tab-size: 4;
}
.xml-output code { font-family: inherit; }

/* Colour scheme — harmonises with JSON formatter palette */
.xml-bracket  { color: #5C6472; }                     /* gray    — < > / brackets     */
.xml-tag      { color: #0550AE; font-weight: 500; }   /* blue    — element names       */
.xml-attr-name  { color: #8250DF; }                   /* purple  — attribute names     */
.xml-attr-value { color: #116329; }                   /* green   — attribute values    */
.xml-text     { color: #1A1D23; }                     /* dark    — text content        */
.xml-comment  { color: #9AA3B0; font-style: italic; } /* gray    — <!-- comments -->   */
.xml-cdata    { color: #7D4E00; }                     /* amber   — <![CDATA[ ... ]]>   */
.xml-decl     { color: #CF222E; }                     /* red     — <?xml ... ?>        */

/* Error list inside error banner */
.error-list {
    list-style: disc;
    padding-left: 18px;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.error-list li { font-size: 12px; }


/* ============================================================
   HTML Formatter — tool-specific styles
   ============================================================ */

.html-output {
    margin: 0;
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.7;
    white-space: pre;
    overflow-x: auto;
    tab-size: 4;
}
.html-output code { font-family: inherit; }

/* Colour scheme */
.html-doctype    { color: #9AA3B0; font-style: italic; }  /* gray   — <!DOCTYPE>        */
.html-bracket    { color: #5C6472; }                       /* gray   — < > / brackets    */
.html-tag        { color: #0550AE; font-weight: 500; }    /* blue   — element names     */
.html-attr-name  { color: #8250DF; }                      /* purple — attribute names   */
.html-attr-value { color: #116329; }                      /* green  — attribute values  */
.html-comment    { color: #9AA3B0; font-style: italic; }  /* gray   — <!-- comments --> */

/* Warning banner — amber, distinct from the red error banner */
.warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: var(--amber-50);
    border: 1px solid #FAC775;
    border-radius: var(--radius-md);
    font-size: 13px;
    color: #633806;
    line-height: 1.5;
}
.warning-banner i { font-size: 16px; flex-shrink: 0; margin-top: 1px; color: #854F0B; }


/* ============================================================
   SQL Formatter — tool-specific styles
   ============================================================ */

/* Dialect selector in action bar */
.dialect-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 0 12px;
    height: 38px;
}
.dialect-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-600);
    white-space: nowrap;
}
.dialect-select {
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--gray-900);
    background: transparent;
    cursor: pointer;
    padding: 0;
    font-family: var(--font);
}

/* Syntax highlighted SQL output */
.sql-output {
    margin: 0;
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.8;
    white-space: pre;
    overflow-x: auto;
    tab-size: 4;
}
.sql-output code { font-family: inherit; }

/* Colour scheme */
.sql-keyword  { color: #0550AE; font-weight: 600; }   /* blue   — SELECT, FROM, WHERE  */
.sql-function { color: #8250DF; font-weight: 500; }   /* purple — COUNT, SUM, COALESCE */
.sql-type     { color: #CF222E; }                      /* red    — VARCHAR, INT, DATE   */
.sql-string   { color: #116329; }                      /* green  — 'string literals'    */
.sql-number   { color: #7D4E00; }                      /* amber  — 42, 3.14             */
.sql-comment  { color: #9AA3B0; font-style: italic; } /* gray   — -- comments          */
.sql-ident    { color: #1A1D23; }                      /* dark   — table/column names   */
.sql-operator { color: #5C6472; }                      /* gray   — = < > != operators   */
.sql-punct    { color: #5C6472; }                      /* gray   — ( ) , ;              */

/* Responsive */
@media (max-width: 700px) {
    .dialect-wrap { width: 100%; }
    .dialect-select { flex: 1; }
    .sql-output { font-size: 12px; }
}


/* ============================================================
   JS Beautifier — tool-specific styles
   ============================================================ */

.js-output {
    margin: 0;
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.7;
    white-space: pre;
    overflow-x: auto;
    tab-size: 4;
}
.js-output code { font-family: inherit; }

/* Colour scheme — distinct from JSON/XML/HTML/SQL but harmonious */
.js-keyword  { color: #CF222E; font-weight: 600; }    /* red    — if, function, return  */
.js-literal  { color: #0550AE; }                      /* blue   — true, false, null     */
.js-builtin  { color: #8250DF; }                      /* purple — console, Math, fetch  */
.js-string   { color: #116329; }                      /* green  — 'strings'             */
.js-number   { color: #7D4E00; }                      /* amber  — 42, 3.14              */
.js-comment  { color: #9AA3B0; font-style: italic; }  /* gray   — // comments           */
.js-regex    { color: #0F6E56; }                      /* teal   — /regex/gi             */
.js-operator { color: #5C6472; }                      /* gray   — = === + - operators   */

/* Warning banner bulb icon colour override for JS hints */
.warning-banner .ti-bulb { color: var(--blue-600); }

/* Responsive */
@media (max-width: 700px) {
    .js-output { font-size: 12px; }
}


/* ============================================================
   CSS Beautifier — tool-specific styles
   ============================================================ */

.css-output {
    margin: 0;
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.7;
    white-space: pre;
    overflow-x: auto;
    tab-size: 4;
}
.css-output code { font-family: inherit; }

/* Colour scheme */
.css-selector   { color: #0550AE; font-weight: 500; }  /* blue   — .nav, h1, #id        */
.css-at-rule    { color: #8250DF; font-weight: 500; }  /* purple — @media, @keyframes   */
.css-at-prelude { color: #534AB7; }                    /* indigo — (max-width: 768px)   */
.css-property   { color: #CF222E; }                    /* red    — display, color       */
.css-colon      { color: #5C6472; }                    /* gray   — :                    */
.css-value      { color: #1A1D23; }                    /* dark   — flex, center         */
.css-color      { color: #0F6E56; font-weight: 500; }  /* teal   — #fff, rgba(...)      */
.css-function   { color: #8250DF; }                    /* purple — linear-gradient(...) */
.css-string     { color: #116329; }                    /* green  — 'font name'          */
.css-number     { color: #7D4E00; }                    /* amber  — 12px, 1.5rem         */
.css-comment    { color: #9AA3B0; font-style: italic; }/* gray   — /* comments */       */
.css-brace      { color: #5C6472; }                    /* gray   — { }                  */
.css-semi       { color: #5C6472; }                    /* gray   — ;                    */

/* Responsive */
@media (max-width: 700px) {
    .css-output { font-size: 12px; }
}


/* ============================================================
   JS Minifier — tool-specific styles
   ============================================================ */

.minify-output {
    margin: 0;
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;   /* wrap long minified lines */
    word-break: break-all;
    overflow-x: auto;
}
.minify-output code { font-family: inherit; color: var(--gray-900); }

/* Savings stat — bold the percentage */
.output-stats strong { color: var(--blue-600); font-weight: 600; }


/* ============================================================
   JSON Validator — result banner + tree view styles
   ============================================================ */

/* Pass / fail result banner */
.validator-result {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    margin: 14px;
    font-size: 14px;
}
.validator-result i { font-size: 24px; flex-shrink: 0; margin-top: 1px; }
.validator-result strong { display: block; font-size: 15px; font-weight: 500; margin-bottom: 3px; }
.validator-result p { font-size: 13px; margin: 0; line-height: 1.5; }

.validator-pass {
    background: var(--green-50);
    border: 1px solid #B3D89B;
    color: var(--green-600);
}
.validator-pass i { color: var(--green-600); }

.validator-fail {
    background: var(--red-50);
    border: 1px solid #F7C1C1;
    color: var(--red-600);
}
.validator-fail i { color: var(--red-600); }

/* Tree view wrapper */
.tree-wrap {
    border-top: 1px solid var(--gray-100);
    padding: 0 14px 14px;
}

.tree-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tree-header span { flex: 1; }

/* Tree nodes */
.json-tree {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.7;
    user-select: text;
}

.tree-node { margin: 0; }

.tree-head {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 1px 0;
}

.tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 10px;
    color: var(--gray-400);
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
    border-radius: 3px;
}
.tree-toggle:hover { background: var(--gray-100); color: var(--gray-900); }

.tree-body {
    margin-left: 20px;
    border-left: 1px solid var(--gray-200);
    padding-left: 12px;
}

.tree-row {
    display: flex;
    align-items: baseline;
    gap: 0;
    flex-wrap: wrap;
    padding: 1px 0;
}

/* Tree value colours */
.tree-key    { color: #0550AE; font-weight: 500; }
.tree-colon  { color: var(--gray-400); margin-right: 4px; }
.tree-index  { color: var(--gray-400); font-size: 11px; margin-right: 4px; }
.tree-brace  { color: var(--gray-600); font-style: italic; font-size: 12px; }
.tree-string  { color: #116329; }
.tree-number  { color: #7D4E00; }
.tree-boolean { color: #8250DF; }
.tree-null    { color: #CF222E; }
.tree-other   { color: var(--gray-600); }

/* Responsive */
@media (max-width: 600px) {
    .json-tree { font-size: 12px; }
    .tree-body { margin-left: 12px; padding-left: 8px; }
}


/* ============================================================
   JWT Decoder — two-column layout + token display + claims
   ============================================================ */

/* Wide page variant for two-column tools */
.page-tool--wide { max-width: 1100px; }

/* Two-column JWT workspace */
.jwt-workspace {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.jwt-col { display: flex; flex-direction: column; gap: 12px; }

/* JWT panel (card) */
.jwt-panel {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.jwt-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
    gap: 8px;
    flex-wrap: wrap;
}

.jwt-panel-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Colour-coded title dots */
.jwt-title--header  { color: #CF222E; }
.jwt-title--header  i { color: #CF222E; }
.jwt-title--payload { color: #8250DF; }
.jwt-title--payload i { color: #8250DF; }

/* Token textarea */
.jwt-token-input {
    width: 100%;
    min-height: 160px;
    padding: 14px;
    border: none;
    resize: vertical;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    color: var(--gray-900);
    background: #fff;
    outline: none;
    word-break: break-all;
}

/* Colour-coded token display */
.jwt-token-display {
    padding: 10px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    word-break: break-all;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
    min-height: 36px;
}
.jwt-header    { color: #CF222E; font-weight: 500; }
.jwt-payload   { color: #8250DF; font-weight: 500; }
.jwt-signature { color: #0F6E56; font-weight: 500; }
.jwt-dot       { color: var(--gray-400); }

/* Signature section */
.jwt-sig-section {
    border-top: 1px solid var(--gray-100);
    padding: 14px;
}
.jwt-sig-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.jwt-optional {
    font-size: 11px;
    background: var(--gray-100);
    color: var(--gray-600);
    padding: 2px 7px;
    border-radius: 20px;
}

/* Signature status badge */
.sig-status {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: 13px;
    margin-bottom: 12px;
    font-weight: 500;
}
.sig-status i { font-size: 16px; flex-shrink: 0; }

.sig-verified    { background: var(--green-50);  color: var(--green-600); border: 1px solid #B3D89B; }
.sig-invalid     { background: var(--red-50);    color: var(--red-600);   border: 1px solid #F7C1C1; }
.sig-unverified  { background: var(--gray-50);   color: var(--gray-600);  border: 1px solid var(--gray-200); }
.sig-unsupported { background: var(--amber-50);  color: var(--amber-600); border: 1px solid #FAC775; }

/* Secret input */
.jwt-secret-wrap { display: flex; flex-direction: column; gap: 6px; }
.jwt-secret-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 6px;
}
.jwt-alg-note { font-size: 11px; color: var(--gray-400); font-weight: 400; }
.jwt-secret-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--gray-900);
    background: #fff;
    outline: none;
    resize: vertical;
}
.jwt-secret-input:focus { border-color: var(--blue-400); }
.jwt-b64-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gray-600);
    cursor: pointer;
}
.jwt-b64-label input { accent-color: var(--blue-600); }

/* JSON output inside JWT panels */
.jwt-json-wrap { padding: 0; }
.jwt-json {
    margin: 0;
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.7;
    white-space: pre;
    overflow-x: auto;
}
.jwt-json code { font-family: inherit; }

/* Claims table */
.jwt-claims-wrap { overflow-x: auto; }
.claims-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.claims-table th {
    text-align: left;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
}
.claims-table td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
    line-height: 1.5;
}
.claims-table tr:last-child td { border-bottom: none; }
.claims-table tr:hover td { background: var(--gray-50); }

.claim-key   { font-family: var(--font-mono); font-size: 12px; color: var(--blue-600); font-weight: 500; white-space: nowrap; }
.claim-std   { color: #8250DF; }
.claim-label { color: var(--gray-600); white-space: nowrap; }
.claim-value { color: var(--gray-900); word-break: break-word; }

.claim-expired { color: var(--red-600);   font-size: 11px; font-weight: 500; }
.claim-valid   { color: var(--green-600); font-size: 11px; font-weight: 500; }

/* Responsive — stack columns on mobile */
@media (max-width: 800px) {
    .jwt-workspace { grid-template-columns: 1fr; }
    .jwt-token-input { min-height: 120px; }
}

/* JWT decoded-column placeholder (empty state) */
.jwt-decoded-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 280px;
    padding: 32px 24px;
    background: #fff;
    border: 1px dashed var(--gray-200);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--gray-400);
}
.jwt-decoded-placeholder i  { font-size: 32px; color: var(--gray-300); }
.jwt-decoded-placeholder p  { font-size: 13px; line-height: 1.6; max-width: 240px; }
.jwt-placeholder-legend     { display: flex; align-items: center; gap: 2px; font-family: var(--font-mono); font-size: 12px; }

/* Taller token textarea so left column fills nicely on load */
.jwt-token-input { min-height: 220px; }


/* ============================================================
   XML Validator — tree node colour overrides
   ============================================================ */

.xml-tree-tag       { color: #0550AE; font-weight: 500; }
.xml-tree-bracket   { color: #5C6472; }
.xml-tree-attr-name { color: #8250DF; }
.xml-tree-attr-val  { color: #116329; }
.xml-tree-punct     { color: #5C6472; }
.xml-tree-comment   { color: #9AA3B0; font-style: italic; }
.xml-tree-empty     { color: var(--gray-400); font-size: 11px; font-style: italic; }


/* ============================================================
   HTML Validator — error list with location prefix support
   ============================================================ */

/* Error banner for HTML validator uses a list not a single span */
.error-banner .error-list { margin-top: 4px; }
.error-banner .error-list li { font-size: 12px; }
.error-banner .error-list strong { font-weight: 600; }

/* HTML Validator tree — closing tags and collapsed summary */
.tree-closing { padding-left: 0; color: var(--gray-400); }
.tree-collapsed-summary { color: var(--gray-400); font-style: italic; }


/* ============================================================
   Base64 Encoder / Decoder — two-column layout
   ============================================================ */

/* Options bar above the workspace */
.b64-options {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--gray-700);
    flex-wrap: wrap;
}
.b64-option-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.b64-option-label input[type="checkbox"] { accent-color: var(--blue-600); }
.b64-option-label code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--gray-100);
    padding: 1px 4px;
    border-radius: 3px;
}

/* Two-column workspace */
.b64-workspace {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: start;
    margin-bottom: 20px;
}

.b64-col { display: flex; flex-direction: column; gap: 10px; }

/* Vertical divider between columns */
.b64-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    padding-top: 120px; /* align with middle of textareas */
    color: var(--gray-400);
    font-size: 12px;
    user-select: none;
}
.b64-divider-line {
    width: 1px;
    flex: 1;
    background: var(--gray-200);
    min-height: 40px;
}
.b64-divider-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Textarea height for encode/decode panels */
.b64-textarea {
    min-height: 150px;
    resize: vertical;
    font-family: var(--font-mono);
    font-size: 13px;
    word-break: break-all;
}

.b64-output {
    background: var(--gray-50);
    color: var(--gray-700);
}

/* Action row between input and output */
.b64-action-row {
    display: flex;
    justify-content: center;
}

/* Responsive — stack on mobile */
@media (max-width: 700px) {
    .b64-workspace {
        grid-template-columns: 1fr;
    }
    .b64-divider {
        flex-direction: row;
        padding: 4px 0;
        gap: 10px;
    }
    .b64-divider-line { width: auto; height: 1px; flex: 1; min-height: unset; }
}


/* ============================================================
   URL Encoder / Decoder — mode selector bar
   ============================================================ */

.url-mode-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.url-mode-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: 2px;
    white-space: nowrap;
    margin-right: 4px;
}

.url-mode-option {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    cursor: pointer;
    padding: 6px 12px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 13px;
    flex: 1;
    min-width: 160px;
    transition: border-color var(--transition), background var(--transition);
}
.url-mode-option:has(input:checked) {
    border-color: var(--blue-400);
    background: var(--blue-50);
}
.url-mode-option input[type="radio"] {
    accent-color: var(--blue-600);
    margin-top: 3px;
    flex-shrink: 0;
}
.url-mode-option span { display: flex; flex-direction: column; gap: 2px; }
.url-mode-option strong { font-weight: 500; color: var(--gray-900); }
.url-mode-option small  { font-size: 11px; color: var(--gray-500); line-height: 1.5; }
.url-mode-option code {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--gray-100);
    padding: 1px 3px;
    border-radius: 3px;
}

@media (max-width: 600px) {
    .url-mode-option { min-width: 100%; }
}


/* ============================================================
   QR Code Generator — layout, controls, preview
   ============================================================ */

/* Two-column workspace */
.qr-workspace {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 16px;
    margin-bottom: 20px;
    align-items: start;
}

.qr-controls { display: flex; flex-direction: column; gap: 12px; }

/* Content type icon grid */
.qr-type-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 12px;
}
.qr-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 6px 8px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 11px;
    color: var(--gray-600);
    text-align: center;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
    user-select: none;
}
.qr-type-btn:has(input:checked) {
    border-color: var(--blue-600);
    background: var(--blue-50);
    color: var(--blue-600);
    font-weight: 500;
}
.qr-type-btn i  { font-size: 20px; }
.qr-type-btn input[type="radio"] { display: none; }

/* Dynamic content fields */
.qr-dynamic-fields { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

.qr-field { display: flex; flex-direction: column; gap: 4px; }
.qr-field label {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
}
.qr-required { color: var(--red-600); }

.qr-field--check label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    cursor: pointer;
    color: var(--gray-700);
}
.qr-field--check input[type="checkbox"] { accent-color: var(--blue-600); }

.qr-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: var(--font);
    color: var(--gray-900);
    background: #fff;
    outline: none;
    transition: border-color var(--transition);
}
.qr-input:focus { border-color: var(--blue-400); }
.qr-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.qr-select   { cursor: pointer; }

/* Options panel */
.qr-options { padding: 14px; display: flex; flex-direction: column; gap: 14px; }

.qr-option-group { display: flex; flex-direction: column; gap: 6px; }
.qr-option-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.qr-option-row { display: flex; gap: 6px; flex-wrap: wrap; }

.qr-opt-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--gray-600);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
    white-space: nowrap;
}
.qr-opt-btn:has(input:checked) {
    border-color: var(--blue-600);
    background: var(--blue-50);
    color: var(--blue-600);
    font-weight: 500;
}
.qr-opt-btn input[type="radio"] { display: none; }
.qr-opt-btn small { font-size: 11px; color: var(--gray-400); }

/* Colour pickers */
.qr-color-row { display: flex; gap: 12px; flex-wrap: wrap; }
.qr-color-pick {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--gray-700);
}
.qr-color-pick input[type="color"] {
    width: 36px;
    height: 28px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 2px;
    background: none;
}

/* Preview panel */
.qr-preview-panel { height: 100%; }

.qr-preview-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 24px;
    position: relative;
}

.qr-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--gray-300);
    text-align: center;
}
.qr-placeholder i { font-size: 64px; }
.qr-placeholder p { font-size: 13px; color: var(--gray-400); max-width: 200px; line-height: 1.5; }

.qr-canvas-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.qr-canvas-wrap canvas,
.qr-canvas-wrap img {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    max-width: 100%;
    height: auto;
}

/* Responsive */
@media (max-width: 900px) {
    .qr-workspace { grid-template-columns: 1fr; }
    .qr-type-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 480px) {
    .qr-type-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================
   Epoch & Unix Timestamp Converter
   ============================================================ */

/* Live clock banner */
.epoch-clock-banner {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 16px 24px;
    margin-bottom: 20px;
}
.epoch-clock-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.epoch-clock-divider {
    width: 1px;
    height: 40px;
    background: var(--gray-200);
    margin: 0 24px;
    flex-shrink: 0;
}
.epoch-clock-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-400);
}
.epoch-clock-value {
    font-size: 20px;
    font-weight: 500;
    color: var(--gray-900);
    letter-spacing: 0.01em;
}
.epoch-clock-mono { font-family: var(--font-mono); color: var(--blue-600); }

/* Workspace — two panels stacked */
.epoch-workspace { display: flex; flex-direction: column; gap: 16px; }

/* Epoch input row */
.epoch-input-row {
    display: flex;
    gap: 10px;
    padding: 14px;
    align-items: center;
}

.epoch-number-input {
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: var(--font-mono);
    color: var(--gray-900);
    background: #fff;
    outline: none;
    transition: border-color var(--transition);
    flex: 1;
    min-width: 0;
}
.epoch-number-input:focus { border-color: var(--blue-400); }

/* Results table */
.epoch-results-wrap { padding: 0 14px; }

.epoch-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 4px;
}
.epoch-table tr { border-bottom: 1px solid var(--gray-100); }
.epoch-table tr:last-child { border-bottom: none; }
.epoch-table tr:hover td { background: var(--gray-50); }
.epoch-label {
    padding: 8px 12px 8px 0;
    color: var(--gray-500);
    white-space: nowrap;
    width: 200px;
    font-size: 12px;
    font-weight: 500;
}
.epoch-value {
    padding: 8px 0;
    color: var(--gray-900);
    font-family: var(--font-mono);
    font-size: 12px;
    word-break: break-all;
}

/* Copy row */
.epoch-copy-row {
    padding: 8px 14px 14px;
    display: flex;
    gap: 8px;
}

/* Date grid */
.epoch-date-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 14px;
}
.epoch-date-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.epoch-date-field label {
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-500);
    text-align: center;
}
.epoch-date-field .epoch-number-input {
    text-align: center;
    padding: 8px 4px;
}

/* Date action row */
.epoch-date-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 10px;
    gap: 10px;
    flex-wrap: wrap;
}
.epoch-tz-note {
    font-size: 12px;
    color: var(--gray-400);
    display: flex;
    align-items: center;
    gap: 5px;
}
.epoch-tz-note i { font-size: 14px; }

/* Responsive */
@media (max-width: 600px) {
    .epoch-clock-banner   { flex-direction: column; gap: 12px; }
    .epoch-clock-divider  { width: 100%; height: 1px; margin: 0; }
    .epoch-clock-value    { font-size: 16px; }
    .epoch-date-grid      { grid-template-columns: repeat(3, 1fr); }
    .epoch-label          { width: 130px; }
}


/* ============================================================
   Regex Tester
   ============================================================ */

.rx-workspace { display: flex; flex-direction: column; gap: 14px; }

/* Pattern row */
.rx-pattern-row {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 4px;
    border-bottom: 1px solid var(--gray-100);
}
.rx-slash {
    font-family: var(--font-mono);
    font-size: 22px;
    color: var(--gray-400);
    flex-shrink: 0;
    line-height: 1;
    padding: 0 2px;
}
.rx-pattern-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--gray-900);
    background: transparent;
    min-width: 0;
}
.rx-flags-input {
    width: 52px;
    border: none;
    outline: none;
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--blue-600);
    background: transparent;
    text-align: left;
}

/* Flag toggles */
.rx-flag-toggles {
    display: flex;
    gap: 6px;
    padding: 8px 14px 10px;
    flex-wrap: wrap;
}
.flag-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-400);
    background: #fff;
    cursor: pointer;
    transition: all var(--transition);
}
.flag-toggle small { font-family: var(--font); font-size: 11px; font-weight: 400; }
.flag-toggle.active {
    border-color: var(--blue-600);
    background: var(--blue-50);
    color: var(--blue-600);
}
.flag-toggle:hover:not(.active) { background: var(--gray-50); color: var(--gray-600); }

/* Match count badge */
.match-count {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--gray-100);
    color: var(--gray-500);
    white-space: nowrap;
}
.match-count--hit  { background: var(--green-50);  color: var(--green-600); }
.match-count--miss { background: var(--red-50);    color: var(--red-600); }

/* Test + highlight two columns */
.rx-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.rx-textarea    { min-height: 150px; font-family: var(--font-mono); font-size: 13px; resize: vertical; }

/* Highlighted output */
.rx-highlight-out {
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.8;
    min-height: 150px;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--gray-900);
}
.rx-no-match { color: var(--gray-900); }
mark.rx-match {
    border-radius: 3px;
    padding: 1px 0;
    font-weight: 500;
    cursor: default;
}

/* Match detail list */
.rx-match-list {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}
.rx-empty-matches {
    font-size: 13px;
    color: var(--gray-400);
    padding: 8px 0;
    font-style: italic;
}
.rx-match-item {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.rx-match-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    background: var(--gray-50);
    flex-wrap: wrap;
}
.rx-match-num {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid;
    white-space: nowrap;
}
.rx-match-val {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--gray-900);
    flex: 1;
    word-break: break-all;
}
.rx-match-pos {
    font-size: 11px;
    color: var(--gray-400);
    white-space: nowrap;
}
.rx-groups {
    padding: 6px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid var(--gray-100);
    background: #fff;
}
.rx-group {
    font-size: 12px;
    color: var(--gray-600);
}
.rx-group code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--gray-100);
    padding: 1px 4px;
    border-radius: 3px;
    color: var(--gray-900);
}

/* Replace section */
.rx-replace-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 14px;
}
.rx-replace-field { display: flex; flex-direction: column; gap: 6px; }
.rx-replace-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-500);
}
.rx-replace-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--gray-900);
    background: #fff;
    outline: none;
    transition: border-color var(--transition);
}
.rx-replace-input:focus { border-color: var(--blue-400); }
.rx-replace-out {
    min-height: 80px;
    font-family: var(--font-mono);
    font-size: 13px;
    background: var(--gray-50);
    resize: vertical;
}

/* Cheat sheet */
.rx-cheat-sheet {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.rx-cheat-header {
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
}
.rx-cheat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--gray-100);
}
.rx-cheat-section {
    padding: 12px 16px;
    border-right: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
}
.rx-cheat-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.rx-cheat-items { display: flex; flex-wrap: wrap; gap: 5px; }

.cheat-insert {
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 3px 8px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    color: var(--blue-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background var(--transition), border-color var(--transition);
}
.cheat-insert:hover { background: var(--blue-50); border-color: var(--blue-400); }
.cheat-insert span { font-family: var(--font); font-size: 10px; color: var(--gray-400); }

.rx-cheat-common { padding: 12px 16px; }
.rx-cheat-patterns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.rx-cheat-patterns .cheat-insert {
    font-family: var(--font);
    font-size: 12px;
    color: var(--gray-700);
    background: var(--gray-50);
}
.rx-cheat-patterns .cheat-insert:hover { background: var(--blue-50); color: var(--blue-600); }

/* Responsive */
@media (max-width: 700px) {
    .rx-two-col     { grid-template-columns: 1fr; }
    .rx-replace-row { grid-template-columns: 1fr; }
    .rx-cheat-grid  { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .rx-cheat-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   Credit Card Number Generator
   ============================================================ */

/* Disclaimer banner */
.card-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: var(--amber-50);
    border: 1px solid #FAC775;
    border-radius: var(--radius-md);
    font-size: 13px;
    color: #633806;
    margin-bottom: 16px;
    line-height: 1.5;
}
.card-disclaimer i    { font-size: 16px; flex-shrink: 0; margin-top: 1px; color: #854F0B; }
.card-disclaimer strong { color: #5C3D00; }

/* Two-column workspace */
.card-workspace {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    margin-bottom: 20px;
    align-items: start;
}
.card-controls { display: flex; flex-direction: column; gap: 12px; }

/* Network grid */
.card-network-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px;
}
.card-network-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 6px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--transition), background var(--transition);
}
.card-network-btn:has(input:checked) {
    border-color: var(--blue-600);
    background: var(--blue-50);
}
.card-network-btn input[type="radio"] { display: none; }

.card-net-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 30px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
}
.card-net-visa  { background: #1A1F71; }
.card-net-mc    { background: #EB001B; }
.card-net-amex  { background: #007BC1; }
.card-net-disc  { background: #FF6600; }
.card-net-dine  { background: #004A97; }
.card-net-jcb   { background: #003087; }

.card-net-name {
    font-size: 11px;
    color: var(--gray-600);
    font-weight: 500;
}
.card-network-btn:has(input:checked) .card-net-name { color: var(--blue-600); }

/* Options */
.card-options { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.card-option-group { display: flex; flex-direction: column; gap: 6px; }
.card-option-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.card-qty-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: var(--font-mono);
    color: var(--gray-900);
    outline: none;
    transition: border-color var(--transition);
}
.card-qty-input:focus { border-color: var(--blue-400); }

.card-format-row { display: flex; flex-direction: column; gap: 5px; }
.card-fmt-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--gray-600);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.card-fmt-btn:has(input:checked) {
    border-color: var(--blue-600);
    background: var(--blue-50);
    color: var(--blue-600);
}
.card-fmt-btn input[type="radio"] { accent-color: var(--blue-600); }
.card-fmt-btn small { font-family: var(--font-mono); font-size: 11px; color: var(--gray-400); }

.card-generate-row { display: flex; }

/* Results list */
.card-results-col { min-width: 0; }
.card-results-list {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 200px;
}

.card-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 160px;
    color: var(--gray-300);
    text-align: center;
}
.card-placeholder i { font-size: 40px; }
.card-placeholder p { font-size: 13px; color: var(--gray-400); }

.card-result-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    transition: background var(--transition);
}
.card-result-row:hover { background: var(--blue-50); border-color: var(--blue-100); }

.card-result-num {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    color: var(--gray-900);
    flex: 1;
    min-width: 0;
    word-break: break-all;
}
.card-result-valid {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    padding: 2px 7px;
    border-radius: 20px;
}
.valid   { background: var(--green-50); color: var(--green-600); }
.invalid { background: var(--red-50);   color: var(--red-600); }

.card-copy-btn { flex-shrink: 0; }

/* Responsive */
@media (max-width: 700px) {
    .card-workspace { grid-template-columns: 1fr; }
    .card-network-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================
   Barcode Generator
   ============================================================ */

/* Two-column workspace */
.bc-workspace {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 16px;
    margin-bottom: 20px;
    align-items: start;
}
.bc-controls { display: flex; flex-direction: column; gap: 12px; }

/* Fields inside panels */
.bc-fields { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

.bc-field { display: flex; flex-direction: column; gap: 5px; }
.bc-field label {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
}
.bc-field label small { font-size: 11px; color: var(--gray-400); font-weight: 400; }

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

.bc-select, .bc-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-family: var(--font);
    color: var(--gray-900);
    background: #fff;
    outline: none;
    transition: border-color var(--transition);
}
.bc-select:focus, .bc-input:focus { border-color: var(--blue-400); }
.bc-select { cursor: pointer; }

.bc-input-sm {
    width: 100%;
    padding: 7px 8px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-family: var(--font-mono);
    color: var(--gray-900);
    background: #fff;
    outline: none;
    text-align: center;
    transition: border-color var(--transition);
}
.bc-input-sm:focus { border-color: var(--blue-400); }

.bc-hint { font-size: 11px; color: var(--gray-400); line-height: 1.5; }

.bc-check-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--gray-700);
    cursor: pointer;
}
.bc-check-label input[type="checkbox"] { accent-color: var(--blue-600); }

.bc-color-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bc-color-wrap input[type="color"] {
    width: 36px;
    height: 28px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 2px;
    background: none;
}
.bc-color-label { font-size: 12px; color: var(--gray-500); }

/* Preview panel */
.bc-preview-panel { height: 100%; }
.bc-preview-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 24px;
    background: #fff;
}

.bc-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--gray-300);
    text-align: center;
}
.bc-placeholder i { font-size: 56px; }
.bc-placeholder p { font-size: 13px; color: var(--gray-400); max-width: 220px; line-height: 1.5; }

.bc-canvas-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.bc-canvas-wrap svg {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

/* Responsive */
@media (max-width: 900px) {
    .bc-workspace { grid-template-columns: 1fr; }
    .bc-field-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .bc-field-row { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   Bcrypt Hash Generator
   ============================================================ */

/* Security note banner */
.bcrypt-security-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--green-50);
    border: 1px solid #B3D89B;
    border-radius: var(--radius-md);
    font-size: 13px;
    color: #2D5A1B;
    margin-bottom: 16px;
}
.bcrypt-security-note i { font-size: 15px; color: var(--green-600); flex-shrink: 0; }

/* Two-panel stacked layout */
.bcrypt-workspace { display: flex; flex-direction: column; gap: 16px; }

/* Fields */
.bcrypt-fields { padding: 16px; display: flex; flex-direction: column; gap: 14px; }

.bcrypt-field { display: flex; flex-direction: column; gap: 5px; }
.bcrypt-field label { font-size: 12px; font-weight: 500; color: var(--gray-600); }

/* Password input with eye toggle */
.bcrypt-pw-wrap { display: flex; align-items: center; gap: 0; }
.bcrypt-pw-wrap .bcrypt-input { border-radius: var(--radius-md) 0 0 var(--radius-md); border-right: none; flex: 1; }
.bcrypt-eye {
    border: 1px solid var(--gray-200);
    border-left: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 0 10px;
    height: 36px;
    background: var(--gray-50);
    color: var(--gray-500);
    flex-shrink: 0;
}
.bcrypt-eye:hover { background: var(--gray-100); color: var(--gray-900); }

.bcrypt-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--gray-900);
    background: #fff;
    outline: none;
    transition: border-color var(--transition);
    height: 36px;
}
.bcrypt-input:focus { border-color: var(--blue-400); }
.bcrypt-input--mono { font-family: var(--font-mono); font-size: 12px; height: auto; }

/* Cost factor slider */
.bcrypt-cost-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bcrypt-cost-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--blue-600);
    font-family: var(--font-mono);
    min-width: 28px;
    text-align: right;
}
.bcrypt-slider {
    width: 100%;
    accent-color: var(--blue-600);
    cursor: pointer;
    height: 4px;
}
.bcrypt-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gray-400);
    margin-top: 2px;
}
.bcrypt-rounds-info {
    font-size: 12px;
    font-weight: 500;
    color: var(--blue-600);
    font-family: var(--font-mono);
}

/* Spinner */
.bcrypt-spinner {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--gray-500);
    padding: 8px 0;
}
.bcrypt-spinner i { font-size: 18px; color: var(--blue-600); }
.ti-spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Output blocks */
.bcrypt-result-block {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.bcrypt-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    border-bottom: 1px solid var(--gray-100);
    background: #fff;
    gap: 8px;
}
.bcrypt-result-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.bcrypt-salt-note { font-size: 11px; font-weight: 400; color: var(--gray-400); text-transform: none; }

.bcrypt-hash-output {
    display: block;
    padding: 10px 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--gray-900);
    word-break: break-all;
    line-height: 1.7;
    letter-spacing: 0.03em;
}
.bcrypt-salt-output { color: var(--blue-600); }

/* Hash anatomy diagram */
.bcrypt-hash-anatomy {
    margin-top: 12px;
    padding: 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
}
.bcrypt-anatomy-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.bcrypt-anatomy-row {
    display: flex;
    font-family: var(--font-mono);
    font-size: 12px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 8px;
}
.bcrypt-anatomy-part {
    padding: 5px 8px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.bcrypt-part-version { background: #FFF3CD; color: #5C3D00; }
.bcrypt-part-cost    { background: #D1ECF1; color: #0C5460; }
.bcrypt-part-salt    { background: #D4EDDA; color: #155724; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bcrypt-part-hash    { background: #F8D7DA; color: #721C24; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.bcrypt-anatomy-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11px;
    color: var(--gray-600);
}
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; }
.bcrypt-dot-version { background: #F0AD00; }
.bcrypt-dot-cost    { background: #17A2B8; }
.bcrypt-dot-salt    { background: #28A745; }
.bcrypt-dot-hash    { background: #DC3545; }

/* Verify result */
.bcrypt-result {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
}
.bcrypt-result i { font-size: 24px; flex-shrink: 0; }
.bcrypt-result strong { display: block; font-size: 15px; font-weight: 500; margin-bottom: 3px; }
.bcrypt-result p  { font-size: 13px; margin: 0; }

.bcrypt-match    { background: var(--green-50); border: 1px solid #B3D89B; color: var(--green-600); }
.bcrypt-match i  { color: var(--green-600); }
.bcrypt-no-match { background: var(--red-50);   border: 1px solid #F7C1C1; color: var(--red-600); }
.bcrypt-no-match i { color: var(--red-600); }

/* Info note */
.bcrypt-info-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--blue-50);
    border: 1px solid var(--blue-100);
    border-radius: var(--radius-md);
    font-size: 12px;
    color: var(--blue-800);
    line-height: 1.6;
}
.bcrypt-info-note i { font-size: 15px; flex-shrink: 0; margin-top: 1px; color: var(--blue-600); }
.bcrypt-info-note p { margin: 0; }

@media (max-width: 600px) {
    .bcrypt-anatomy-row { flex-wrap: wrap; }
}


/* ============================================================
   JPG to PDF Converter
   ============================================================ */

/* Two-column workspace */
.pdf-workspace {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 16px;
    margin-bottom: 20px;
    align-items: start;
}

.pdf-left  { display: flex; flex-direction: column; gap: 12px; }
.pdf-right { display: flex; flex-direction: column; gap: 12px; }

/* Drop zone */
.pdf-dropzone {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.pdf-dropzone:hover, .pdf-dropzone.drag-active {
    border-color: var(--blue-400);
    background: var(--blue-50);
}
.pdf-dropzone i { font-size: 40px; color: var(--gray-400); }
.pdf-dropzone:hover i, .pdf-dropzone.drag-active i { color: var(--blue-600); }
.pdf-drop-title { font-size: 15px; font-weight: 500; color: var(--gray-700); margin: 0; }
.pdf-drop-sub   { font-size: 12px; color: var(--gray-400); margin: 0; }

/* Thumbnail header */
.pdf-thumb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
}
.pdf-thumb-count { font-size: 13px; font-weight: 500; color: var(--gray-700); }
.pdf-thumb-hint  { font-size: 12px; color: var(--gray-400); display: flex; align-items: center; gap: 5px; }

/* Empty state */
.pdf-empty-state {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--gray-400);
}

/* Thumbnail grid */
.pdf-thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.pdf-thumb {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
    position: relative;
}
.pdf-thumb:hover { border-color: var(--blue-300); box-shadow: var(--shadow-sm); }

.pdf-thumb-img-wrap {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--gray-100);
}
.pdf-thumb-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pdf-thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition);
}
.pdf-thumb:hover .pdf-thumb-remove { opacity: 1; }
.pdf-thumb-remove:hover { background: var(--red-600); }

.pdf-thumb-footer {
    display: flex;
    align-items: center;
    gap: 0;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}
.pdf-thumb-name {
    flex: 1;
    padding: 4px 4px;
    font-size: 10px;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    min-width: 0;
}
.pdf-thumb-move {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--gray-400);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: color var(--transition), background var(--transition);
    border-radius: 0;
}
.pdf-thumb-move:hover:not(:disabled) { color: var(--blue-600); background: var(--blue-50); }
.pdf-thumb-move:disabled { opacity: 0.25; cursor: not-allowed; }

/* Options panel */
.pdf-options { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.pdf-opt-group { display: flex; flex-direction: column; gap: 5px; }
.pdf-opt-group label { font-size: 12px; font-weight: 500; color: var(--gray-600); }

/* Status */
.pdf-convert-status {
    font-size: 13px;
    color: var(--green-600);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}

/* accent-purple for icon */
.accent-purple { background: var(--purple-50); color: var(--purple-600); }

/* Responsive */
@media (max-width: 800px) {
    .pdf-workspace { grid-template-columns: 1fr; }
    .pdf-right { order: -1; }
}
@media (max-width: 480px) {
    .pdf-thumb-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
}


/* ============================================================
   Password Generator
   ============================================================ */

.pw-workspace {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    margin-bottom: 20px;
    align-items: start;
}
.pw-options-col { display: flex; flex-direction: column; gap: 12px; }
.pw-output-col  { display: flex; flex-direction: column; gap: 12px; }

/* Length slider row */
.pw-length-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 14px;
}
.pw-range-min, .pw-range-max {
    font-size: 12px;
    color: var(--gray-400);
    font-family: var(--font-mono);
    flex-shrink: 0;
}
.pw-length-badge {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--blue-600);
    min-width: 36px;
    text-align: right;
}

/* Character set checkboxes */
.pw-charset-list { padding: 6px 14px 14px; display: flex; flex-direction: column; gap: 2px; }
.pw-charset-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition);
}
.pw-charset-row:hover { background: var(--gray-50); }
.pw-charset-row--sep  { border-top: 1px solid var(--gray-100); margin-top: 6px; padding-top: 12px; }
.pw-charset-row input[type="checkbox"] { accent-color: var(--blue-600); flex-shrink: 0; }
.pw-charset-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pw-charset-name { font-size: 13px; color: var(--gray-800); font-weight: 500; }
.pw-charset-example {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--gray-400);
    background: none;
    padding: 0;
}

/* Custom symbols input */
.pw-custom-symbols {
    padding: 6px 10px 8px 34px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pw-custom-label  { font-size: 12px; font-weight: 500; color: var(--gray-600); }
.pw-custom-hint   { font-size: 11px; color: var(--gray-400); font-weight: 400; }

/* Strength bar */
.pw-strength-panel .panel-toolbar { gap: 8px; }
.pw-strength-label {
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}
.pw-entropy-label {
    font-size: 11px;
    color: var(--gray-400);
    margin-left: auto;
    white-space: nowrap;
}
.pw-strength-track {
    height: 6px;
    background: var(--gray-100);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 14px 14px;
}
.pw-strength-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease, background 0.3s ease;
    width: 0;
}
.strength-very-weak  { background: #DC3545; }
.strength-weak       { background: #FD7E14; }
.strength-fair       { background: #FFC107; }
.strength-strong     { background: #20C997; }
.strength-very-strong{ background: #28A745; }

/* Strength label colours */
.pw-strength-label:has(~ .strength-very-weak) { color: #DC3545; }

/* Password output list */
.pw-output-list {
    padding: 8px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 60px;
}
.pw-result-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}
.pw-result-row:hover { background: var(--blue-50); border-color: var(--blue-100); }
.pw-result-val {
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--gray-900);
    flex: 1;
    word-break: break-all;
    user-select: all;
}
.pw-copy-btn { flex-shrink: 0; }

/* Responsive */
@media (max-width: 700px) {
    .pw-workspace { grid-template-columns: 1fr; }
    .pw-result-val { font-size: 13px; }
}

/* Password Generator — quantity + generate row */
.pw-gen-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.pw-gen-qty {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 90px;
    flex-shrink: 0;
}
.pw-gen-qty-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pw-gen-btn { flex: 1; }


/* ============================================================
   Color Picker
   ============================================================ */

.cp-workspace {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    margin-bottom: 20px;
    align-items: start;
}
.cp-left  { display: flex; flex-direction: column; gap: 10px; }
.cp-right { display: flex; flex-direction: column; gap: 10px; }

/* Native picker + swatch */
.cp-picker-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
}
.cp-native-picker {
    width: 64px;
    height: 64px;
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.cp-swatch {
    flex: 1;
    height: 64px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: background 0.1s;
    user-select: all;
}

/* Value row (HEX) */
.cp-value-row {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 8px 14px 12px;
}
.cp-hash {
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--gray-400);
    padding-right: 4px;
    line-height: 1;
}
.cp-value-input {
    flex: 1;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    font-size: 14px;
    color: var(--gray-900);
    background: #fff;
    outline: none;
    transition: border-color var(--transition);
    width: 100%;
}
.cp-value-input:focus { border-color: var(--blue-400); }
.cp-value-input[readonly] { background: var(--gray-50); color: var(--gray-500); }
.cp-mono { font-family: var(--font-mono); }

/* Triple / quad rows (RGB, HSL, CMYK) */
.cp-triple-row, .cp-quad-row {
    display: grid;
    gap: 8px;
    padding: 8px 14px 12px;
}
.cp-triple-row { grid-template-columns: repeat(3, 1fr); }
.cp-quad-row   { grid-template-columns: repeat(4, 1fr); }
.cp-triple-field { display: flex; flex-direction: column; gap: 4px; }
.cp-triple-field label {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-400);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cp-triple-field .cp-value-input { text-align: center; padding: 6px 4px; }

/* CSS output textarea */
.cp-css-output {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.8;
    border: none;
    resize: none;
    background: var(--gray-50);
    color: var(--gray-900);
    outline: none;
    min-height: 90px;
}

/* Contrast checker */
.cp-contrast-wrap { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.cp-contrast-preview {
    padding: 16px 20px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 500;
    border: 1px solid var(--gray-200);
    line-height: 1.6;
    transition: background 0.1s, color 0.1s;
}
.cp-contrast-controls { display: flex; flex-direction: column; gap: 10px; }
.cp-contrast-field { display: flex; flex-direction: column; gap: 6px; }
.cp-contrast-field label { font-size: 12px; font-weight: 500; color: var(--gray-600); }
.cp-contrast-ratio-label { font-size: 13px; color: var(--gray-600); }
.cp-contrast-ratio-label strong { color: var(--gray-900); font-family: var(--font-mono); }

/* WCAG badges */
.cp-wcag-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.wcag-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.wcag-pass { background: var(--green-50);  color: var(--green-600); border: 1px solid #B3D89B; }
.wcag-fail { background: var(--red-50);    color: var(--red-600);   border: 1px solid #F7C1C1; }

/* Harmony select */
.cp-harmony-select { font-size: 12px; border: none; background: none; cursor: pointer; outline: none; color: var(--gray-600); }

/* Palette swatches */
.cp-palette {
    display: flex;
    padding: 14px;
    gap: 8px;
    flex-wrap: wrap;
}
.palette-swatch {
    flex: 1;
    min-width: 60px;
    height: 80px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 6px;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
    border: 1px solid rgba(0,0,0,0.08);
}
.palette-swatch:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.palette-hex { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.03em; }

/* Responsive */
@media (max-width: 800px) {
    .cp-workspace { grid-template-columns: 1fr; }
}


/* ============================================================
   Lorem Ipsum Generator
   ============================================================ */

.lorem-workspace {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    margin-bottom: 20px;
    align-items: start;
}
.lorem-controls { display: flex; flex-direction: column; gap: 10px; }

/* Type selector */
.lorem-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 10px;
}
.lorem-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 6px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 11px;
    color: var(--gray-600);
    text-align: center;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
    user-select: none;
}
.lorem-type-btn:has(input:checked) {
    border-color: var(--blue-600);
    background: var(--blue-50);
    color: var(--blue-600);
    font-weight: 500;
}
.lorem-type-btn i     { font-size: 20px; }
.lorem-type-btn input { display: none; }

/* Count hint */
.lorem-count-hint { font-size: 11px; color: var(--gray-400); margin-top: 4px; }

/* Options */
.lorem-options { padding: 6px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.lorem-check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition);
}
.lorem-check-row:hover { background: var(--gray-50); }
.lorem-check-row input[type="checkbox"] { accent-color: var(--blue-600); margin-top: 2px; flex-shrink: 0; }
.lorem-check-row > span  { display: flex; flex-direction: column; gap: 2px; }
.lorem-opt-name { font-size: 13px; color: var(--gray-800); font-weight: 500; }
.lorem-opt-hint { font-size: 11px; color: var(--gray-400); }

.lorem-html-options {
    padding: 4px 8px 4px 28px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.lorem-tag-label { font-size: 12px; font-weight: 500; color: var(--gray-600); }

/* Output textarea */
.lorem-output-col { min-width: 0; }
.lorem-output {
    width: 100%;
    min-height: 400px;
    padding: 14px;
    font-size: 14px;
    line-height: 1.75;
    font-family: var(--font);
    color: var(--gray-800);
    border: none;
    resize: vertical;
    background: var(--gray-50);
    outline: none;
}

/* Responsive */
@media (max-width: 700px) {
    .lorem-workspace { grid-template-columns: 1fr; }
}


/* ============================================================
   UUID Generator
   ============================================================ */

.uuid-workspace {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    margin-bottom: 20px;
    align-items: start;
}
.uuid-controls    { display: flex; flex-direction: column; gap: 10px; }
.uuid-output-col  { min-width: 0; }

/* Version list */
.uuid-version-list { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.uuid-ver-btn {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 8px 10px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.uuid-ver-btn:has(input:checked) {
    border-color: var(--blue-600);
    background: var(--blue-50);
}
.uuid-ver-btn input[type="radio"] { display: none; }
.uuid-ver-content { display: flex; align-items: center; gap: 10px; width: 100%; }
.uuid-ver-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    flex-shrink: 0;
}
.uuid-ver-btn:has(input:checked) .uuid-ver-badge {
    background: var(--blue-600);
    color: #fff;
}
.uuid-ver-info { display: flex; flex-direction: column; gap: 1px; }
.uuid-ver-info strong { font-size: 13px; font-weight: 500; color: var(--gray-900); }
.uuid-ver-info small  { font-size: 11px; color: var(--gray-400); }

/* Namespace fields */
.uuid-ns-fields { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.uuid-field { display: flex; flex-direction: column; gap: 5px; }
.uuid-field label { font-size: 12px; font-weight: 500; color: var(--gray-600); }

/* Format options */
.uuid-format-opts { padding: 6px 14px 10px; }

/* Output list */
.uuid-output-list {
    padding: 8px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 60px;
}
.uuid-result-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}
.uuid-result-row:hover { background: var(--blue-50); border-color: var(--blue-100); }
.uuid-result-val {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.03em;
    color: var(--gray-900);
    flex: 1;
    word-break: break-all;
    user-select: all;
}
.uuid-copy-btn { flex-shrink: 0; }

/* Responsive */
@media (max-width: 700px) {
    .uuid-workspace { grid-template-columns: 1fr; }
}


/* ============================================================
   JSON ↔ XML Converter — action bar extensions
   ============================================================ */

.conv-action-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.conv-dir-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.conv-dir-badge {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--blue-600);
    background: var(--blue-50);
    border: 1px solid var(--blue-200);
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}
.conv-options {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    flex-wrap: wrap;
}
.conv-option-label {
    font-size: 12px;
    color: var(--gray-500);
    white-space: nowrap;
}
.conv-select { width: auto; min-width: 110px; }
.conv-root-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.conv-root-input {
    width: 110px;
    padding: 6px 10px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-family: var(--font-mono);
    color: var(--gray-900);
    background: #fff;
    outline: none;
    transition: border-color var(--transition);
}
.conv-root-input:focus { border-color: var(--blue-400); }

/* Secondary button style */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: var(--blue-50);
    color: var(--blue-700);
    border: 1.5px solid var(--blue-400);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(59,130,246,0.15);
}
.btn-secondary:hover {
    background: var(--blue-100, #DBEAFE);
    border-color: var(--blue-600);
    box-shadow: 0 2px 6px rgba(59,130,246,0.25);
}
.btn-secondary:active { transform: translateY(1px); box-shadow: none; }

/* Code output (generic pre/code for converters) */
.code-output {
    margin: 0;
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.7;
    white-space: pre;
    overflow-x: auto;
    color: var(--gray-900);
}
.code-output code { font-family: inherit; }

@media (max-width: 700px) {
    .conv-action-bar { flex-direction: column; align-items: stretch; }
    .conv-dir-wrap   { justify-content: space-between; }
}


/* ============================================================
   Color Format Converter
   ============================================================ */

/* Input panel */
.cc-input-panel .panel-toolbar { border-bottom: 1px solid var(--gray-100); }
.cc-input-wrap {
    display: flex;
    gap: 10px;
    padding: 14px;
    align-items: center;
}
.cc-main-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: var(--font-mono);
    color: var(--gray-900);
    background: #fff;
    outline: none;
    transition: border-color var(--transition);
    min-width: 0;
}
.cc-main-input:focus { border-color: var(--blue-400); }

/* Example chips */
.cc-examples {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 14px 14px;
}
.cc-examples-label {
    font-size: 12px;
    color: var(--gray-400);
    flex-shrink: 0;
}
.cc-example-btn {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 3px 10px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    color: var(--gray-600);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
    white-space: nowrap;
}
.cc-example-btn:hover {
    background: var(--blue-50);
    border-color: var(--blue-300);
    color: var(--blue-700);
}

/* Results layout */
.cc-results-wrap { margin-top: 0; }
.cc-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
    align-items: start;
}
.cc-left  { display: flex; flex-direction: column; gap: 12px; }
.cc-right { display: flex; flex-direction: column; gap: 12px; }

/* Big swatch */
.cc-swatch-panel { overflow: hidden; }
.cc-big-swatch {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.cc-swatch-hex {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Format result rows */
.cc-rows { padding: 6px 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.cc-result-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}
.cc-result-row:hover { background: var(--gray-50); }
.cc-result-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: 72px;
    flex-shrink: 0;
}
.cc-result-val {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--gray-900);
    flex: 1;
    min-width: 0;
    word-break: break-all;
}
.cc-copy-btn { flex-shrink: 0; }

/* CSS vars textarea */
.cc-css-vars {
    width: 100%;
    min-height: 130px;
    padding: 12px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.8;
    border: none;
    background: var(--gray-50);
    color: var(--gray-900);
    resize: none;
    outline: none;
}

/* Reference card */
.cc-ref-card {}
.cc-ref-list { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.cc-ref-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cc-ref-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    width: 44px;
    flex-shrink: 0;
}
.cc-ref-ex {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--blue-600);
    background: var(--blue-50);
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}
.cc-ref-desc { font-size: 11px; color: var(--gray-400); }

/* Responsive */
@media (max-width: 700px) {
    .cc-layout { grid-template-columns: 1fr; }
    .cc-input-wrap { flex-direction: column; }
    .cc-main-input { width: 100%; }
}


/* ============================================================
   CSV Converters — options bar
   ============================================================ */

.csv-options-bar { margin-bottom: 0; }
.csv-opts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    padding: 10px 14px 14px;
}
.csv-opt-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.csv-opt-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
    white-space: nowrap;
}
.csv-opt-select { width: auto; min-width: 130px; }
.csv-opt-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gray-700);
    cursor: pointer;
    white-space: nowrap;
}
.csv-opt-check input[type="checkbox"] { accent-color: var(--blue-600); }


/* ============================================================
   Escape / Unescape tools — shared styles
   ============================================================ */

/* Mode selector */
.escape-options-bar { margin-bottom: 0; }
.escape-mode-row {
    display: flex;
    gap: 8px;
    padding: 10px 14px 14px;
    flex-wrap: wrap;
}
.escape-mode-btn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    flex: 1;
    min-width: 200px;
    transition: border-color var(--transition), background var(--transition);
}
.escape-mode-btn:has(input:checked) {
    border-color: var(--blue-500);
    background: var(--blue-50);
}
.escape-mode-btn input[type="radio"] { accent-color: var(--blue-600); margin-top: 3px; flex-shrink: 0; }
.escape-mode-btn > span { display: flex; flex-direction: column; gap: 3px; }
.escape-mode-btn strong { font-size: 13px; font-weight: 500; color: var(--gray-900); }
.escape-mode-btn small  { font-size: 12px; color: var(--gray-500); line-height: 1.5; }
.escape-mode-btn code {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--gray-100);
    padding: 1px 4px;
    border-radius: 3px;
    color: var(--gray-700);
}

/* Action bar with two buttons */
.escape-action-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.escape-action-divider {
    font-size: 12px;
    color: var(--gray-400);
    font-style: italic;
}

/* Reference table */
.escape-ref-panel { margin-top: 16px; }
.escape-ref-table-wrap { overflow-x: auto; }
.escape-ref-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.escape-ref-table th {
    text-align: left;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
}
.escape-ref-table td {
    padding: 7px 14px;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-700);
    vertical-align: middle;
}
.escape-ref-table tr:last-child td { border-bottom: none; }
.escape-ref-table tr:hover td { background: var(--gray-50); }
.escape-ref-table td:first-child {
    font-size: 16px;
    text-align: center;
    width: 60px;
}
.escape-ref-table code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--gray-100);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--blue-700);
}