/* ═══════════════════════════════════════════════════════════════════
   TIER TOOLS - Shared styles for high-traffic utility tools
   (Tip / EMI / Compound Interest / Currency / Pet Age,
    Regex / Markdown / Text Diff / Cron / SQL Formatter, OCR)

   Namespacing: .tt-* classes only (so we never collide with the
   existing .ut-*, .cg-*, .ip- etc. tool families).
═══════════════════════════════════════════════════════════════════ */

.tt-form { display: grid; gap: 1.25rem; }

.tt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 640px) {
    .tt-grid-2, .tt-grid-3 { grid-template-columns: 1fr; }
}

.tt-field-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-weight: 600;
    font-size: .875rem;
    color: var(--color-text);
    margin-bottom: .375rem;
}
.tt-field-label .tt-field-hint {
    font-weight: 500;
    color: var(--color-text-muted);
    font-size: .8125rem;
}

.tt-input-affix {
    position: relative;
}
.tt-input-affix > .tt-affix {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-weight: 600;
    pointer-events: none;
    font-size: .9375rem;
}
.tt-input-affix > .form-control { padding-left: 30px; }

.tt-input-affix-right > .tt-affix {
    left: auto;
    right: 12px;
}
.tt-input-affix-right > .form-control { padding-left: .75rem; padding-right: 30px; }

/* Big result block - used by tip, EMI, currency, etc. */
.tt-result {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, #FFFFFF 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
}
.tt-result-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .375rem 0;
}
.tt-result-row + .tt-result-row {
    border-top: 1px dashed var(--color-border);
}
.tt-result-label {
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: .9375rem;
}
.tt-result-value {
    color: var(--color-text);
    font-weight: 700;
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
}
.tt-result-value.tt-hero {
    font-size: 2rem;
    color: var(--color-primary);
}

/* Stat pills */
.tt-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}
.tt-stat {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .875rem 1rem;
}
.tt-stat-label {
    font-size: .75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    margin-bottom: .25rem;
}
.tt-stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* Help text */
.tt-help {
    color: var(--color-text-muted);
    font-size: .875rem;
    margin: 0;
}

/* ─────────────────────────────────────────────
   TIP CALCULATOR
───────────────────────────────────────────── */
.tip-tip-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .375rem;
}
.tip-tip-pill {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    padding: .375rem .875rem;
    border-radius: var(--radius-full);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.tip-tip-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.tip-tip-pill.is-active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* ─────────────────────────────────────────────
   EMI / LOAN CALCULATOR
───────────────────────────────────────────── */
.emi-tenure-toggle {
    display: inline-flex;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 3px;
}
.emi-tenure-toggle button {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: .8125rem;
    padding: .375rem .875rem;
    border-radius: 7px;
    cursor: pointer;
}
.emi-tenure-toggle button.is-active {
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: var(--shadow-xs);
}

.emi-pie {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1rem;
}
.emi-pie-svg {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}
.emi-pie-legend {
    flex: 1;
    display: grid;
    gap: .5rem;
}
.emi-pie-legend-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9375rem;
}
.emi-pie-legend-item .tt-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
}

.emi-schedule-wrap {
    margin-top: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.emi-schedule-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-bg);
    padding: .625rem 1rem;
    font-weight: 600;
    cursor: pointer;
    border: 0;
    width: 100%;
    text-align: left;
    color: var(--color-text);
}
.emi-schedule-toggle .bi-chevron-down {
    transition: transform .25s;
}
.emi-schedule-toggle.is-open .bi-chevron-down {
    transform: rotate(180deg);
}
.emi-schedule-table {
    max-height: 380px;
    overflow-y: auto;
    background: var(--color-surface);
}
.emi-schedule-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}
.emi-schedule-table th,
.emi-schedule-table td {
    padding: .5rem .75rem;
    text-align: right;
    border-bottom: 1px solid var(--color-border);
}
.emi-schedule-table th:first-child,
.emi-schedule-table td:first-child {
    text-align: left;
}
.emi-schedule-table thead th {
    background: var(--color-bg);
    font-weight: 700;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
    position: sticky;
    top: 0;
}
.emi-schedule-table .emi-year-row td {
    background: var(--color-primary-light);
    font-weight: 700;
}

/* ─────────────────────────────────────────────
   COMPOUND INTEREST CALCULATOR
───────────────────────────────────────────── */
.ci-bar-chart {
    margin-top: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
}
.ci-bar-chart-svg {
    width: 100%;
    height: 220px;
    overflow: visible;
}
.ci-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .8125rem;
    margin-top: .5rem;
    color: var(--color-text-muted);
}
.ci-legend-item {
    display: flex;
    align-items: center;
    gap: .375rem;
}
.ci-legend-item .tt-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* ─────────────────────────────────────────────
   CURRENCY CONVERTER
───────────────────────────────────────────── */
.cc-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .75rem;
    align-items: end;
}
@media (max-width: 640px) {
    .cc-row { grid-template-columns: 1fr; }
}
.cc-swap-btn {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--color-primary);
    font-size: 1.25rem;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}
.cc-swap-btn:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    transform: rotate(180deg);
}
@media (max-width: 640px) {
    .cc-swap-btn { transform: rotate(90deg); margin: 0 auto; }
    .cc-swap-btn:hover { transform: rotate(270deg); }
}
.cc-result {
    margin-top: 1.25rem;
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, #FFFFFF 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.cc-result-amount {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.cc-result-rate {
    margin-top: .5rem;
    color: var(--color-text-muted);
    font-size: .875rem;
}
.cc-rate-meta {
    display: flex;
    justify-content: space-between;
    font-size: .8125rem;
    color: var(--color-text-muted);
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--color-border);
}
.cc-rate-meta a {
    color: var(--color-primary);
    text-decoration: none;
}
.cc-status {
    color: var(--color-text-muted);
    font-size: .8125rem;
    margin-top: .25rem;
}
.cc-status.is-error { color: #DC2626; }

/* ─────────────────────────────────────────────
   PET AGE CALCULATOR
───────────────────────────────────────────── */
.pet-species-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-bottom: 1.25rem;
}
.pet-species-card {
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 1rem;
    cursor: pointer;
    text-align: center;
    transition: var(--transition);
}
.pet-species-card:hover { border-color: var(--color-primary); }
.pet-species-card.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}
.pet-species-icon { font-size: 2rem; line-height: 1; margin-bottom: .25rem; }
.pet-species-label { font-weight: 600; font-size: .9375rem; }

.pet-result-hero {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #FFEDD5 0%, #FFF7ED 100%);
    border: 1px solid #FED7AA;
    border-radius: var(--radius-lg);
}
.pet-result-hero .pet-emoji { font-size: 2.5rem; margin-bottom: .25rem; }
.pet-result-age {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
}
.pet-result-age small {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-muted);
    display: block;
    margin-top: .25rem;
}
.pet-stage-bar {
    margin-top: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
}
.pet-stage-track {
    position: relative;
    height: 8px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    margin: 1rem 0 .25rem;
}
.pet-stage-fill {
    position: absolute;
    inset: 0;
    width: 0;
    background: linear-gradient(90deg, #10B981 0%, #F59E0B 60%, #EF4444 100%);
    border-radius: var(--radius-full);
    transition: width .35s;
}
.pet-stage-marker {
    position: absolute;
    top: -3px;
    width: 14px;
    height: 14px;
    background: var(--color-surface);
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    transform: translateX(-50%);
}
.pet-stage-labels {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    color: var(--color-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ─────────────────────────────────────────────
   REGEX TESTER
───────────────────────────────────────────── */
.rx-pattern-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .5rem;
    align-items: center;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .25rem .375rem .25rem .75rem;
    transition: var(--transition);
}
.rx-pattern-row:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.rx-pattern-row.is-error {
    border-color: #DC2626;
    box-shadow: 0 0 0 3px #FEE2E2;
}
.rx-slash {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--color-text-muted);
    font-size: 1.125rem;
    font-weight: 600;
}
.rx-pattern-input {
    border: 0;
    outline: none;
    background: transparent;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem;
    width: 100%;
    padding: .5rem 0;
    color: var(--color-text);
}
.rx-flags-input {
    border: 0;
    outline: none;
    background: var(--color-bg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9375rem;
    width: 60px;
    padding: .375rem .5rem;
    text-align: center;
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    font-weight: 600;
}

.rx-test-area {
    width: 100%;
    min-height: 180px;
    padding: .875rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9375rem;
    line-height: 1.6;
    resize: vertical;
}
.rx-test-area:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.rx-highlight-box {
    margin-top: .75rem;
    padding: .875rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9375rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 280px;
    overflow-y: auto;
}
.rx-match {
    background: #FEF3C7;
    border-radius: 3px;
    padding: 1px 2px;
    color: #92400E;
    font-weight: 600;
}
.rx-match-alt {
    background: #DBEAFE;
    color: #1E40AF;
}

.rx-error-msg {
    color: #DC2626;
    font-size: .8125rem;
    margin-top: .375rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.rx-summary {
    background: var(--color-primary);
    color: #fff;
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: var(--radius-full);
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.rx-matches-list {
    margin-top: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.rx-match-row {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    gap: 1rem;
    padding: .625rem 1rem;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    font-size: .875rem;
}
.rx-match-row:last-child { border-bottom: 0; }
.rx-match-row .rx-match-idx {
    color: var(--color-text-muted);
    font-size: .75rem;
    font-weight: 600;
}
.rx-match-row .rx-match-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--color-text);
    word-break: break-all;
}
.rx-match-row .rx-match-pos {
    color: var(--color-text-muted);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}
.rx-groups {
    margin-top: .25rem;
    padding-left: 1rem;
    border-left: 2px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: .8125rem;
}
.rx-groups code {
    background: var(--color-bg);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--color-text);
}

.rx-cheatsheet {
    margin-top: 1.25rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}
.rx-cheatsheet-title {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: .5rem;
}
.rx-cheatsheet-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}
.rx-cheatsheet-pill {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    padding: .25rem .625rem;
    border-radius: var(--radius-sm);
    font-size: .75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    cursor: pointer;
    transition: var(--transition);
}
.rx-cheatsheet-pill:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* ─────────────────────────────────────────────
   MARKDOWN EDITOR
───────────────────────────────────────────── */
.md-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: .375rem .5rem;
    border-bottom: 0;
}
.md-toolbar-btn {
    border: 0;
    background: transparent;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: var(--transition);
}
.md-toolbar-btn:hover {
    background: var(--color-surface);
    color: var(--color-primary);
}
.md-toolbar-divider {
    width: 1px;
    height: 22px;
    background: var(--color-border);
    margin: 5px 4px;
}
.md-toolbar-spacer { flex: 1; }
.md-toolbar-modes {
    display: inline-flex;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 2px;
}
.md-mode-btn {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: .75rem;
    padding: .25rem .625rem;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.md-mode-btn.is-active {
    background: var(--color-primary);
    color: #fff;
}

.md-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    min-height: 480px;
    overflow: hidden;
}
.md-split.md-only-edit { grid-template-columns: 1fr; }
.md-split.md-only-edit .md-preview { display: none; }
.md-split.md-only-preview { grid-template-columns: 1fr; }
.md-split.md-only-preview .md-editor { display: none; }
@media (max-width: 768px) {
    .md-split { grid-template-columns: 1fr; }
    .md-split:not(.md-only-edit):not(.md-only-preview) .md-preview {
        border-top: 1px solid var(--color-border);
        border-left: 0;
    }
}

.md-editor {
    border: 0;
    outline: none;
    padding: 1rem 1.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9375rem;
    line-height: 1.65;
    resize: none;
    background: var(--color-surface);
    color: var(--color-text);
    width: 100%;
    min-height: 480px;
}
.md-preview {
    border-left: 1px solid var(--color-border);
    padding: 1rem 1.5rem;
    overflow-y: auto;
    max-height: 600px;
    background: var(--color-surface);
}
.md-preview h1, .md-preview h2, .md-preview h3,
.md-preview h4, .md-preview h5, .md-preview h6 {
    margin-top: 1.25em;
    margin-bottom: .5em;
    font-weight: 700;
}
.md-preview h1 { font-size: 1.875rem; padding-bottom: .25rem; border-bottom: 1px solid var(--color-border); }
.md-preview h2 { font-size: 1.5rem; padding-bottom: .25rem; border-bottom: 1px solid var(--color-border); }
.md-preview h3 { font-size: 1.25rem; }
.md-preview h4 { font-size: 1.0625rem; }
.md-preview p { margin: 0 0 1em; }
.md-preview ul, .md-preview ol { margin: 0 0 1em; padding-left: 1.75em; }
.md-preview li { margin: .25em 0; }
.md-preview blockquote {
    border-left: 4px solid var(--color-primary);
    background: var(--color-primary-light);
    margin: 0 0 1em;
    padding: .5em 1em;
    color: var(--color-text);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.md-preview code {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875em;
    color: #BE185D;
}
.md-preview pre {
    background: #0F172A;
    color: #E2E8F0;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    overflow-x: auto;
    margin: 0 0 1em;
}
.md-preview pre code {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: .875rem;
}
.md-preview a { color: var(--color-primary); }
.md-preview img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.md-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1em;
}
.md-preview th, .md-preview td {
    border: 1px solid var(--color-border);
    padding: .5em .75em;
    text-align: left;
}
.md-preview th { background: var(--color-bg); font-weight: 700; }
.md-preview hr { border: 0; border-top: 1px solid var(--color-border); margin: 1.5em 0; }
.md-preview input[type="checkbox"] { margin-right: .375rem; }

.md-actions {
    display: flex;
    gap: .5rem;
    margin-top: .75rem;
    flex-wrap: wrap;
}
.md-stat {
    margin-left: auto;
    font-size: .8125rem;
    color: var(--color-text-muted);
    align-self: center;
}

/* ─────────────────────────────────────────────
   TEXT DIFF CHECKER
───────────────────────────────────────────── */
.diff-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 768px) {
    .diff-inputs { grid-template-columns: 1fr; }
}
.diff-input-block .form-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.diff-input-block textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875rem;
    min-height: 220px;
}

.diff-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    padding: .75rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin: 1rem 0;
}
.diff-mode-toggle {
    display: inline-flex;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 2px;
}
.diff-mode-toggle button {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: .8125rem;
    padding: .25rem .625rem;
    border-radius: 5px;
    cursor: pointer;
}
.diff-mode-toggle button.is-active {
    background: var(--color-primary);
    color: #fff;
}

.diff-summary {
    display: flex;
    gap: .75rem;
    margin-left: auto;
    font-size: .8125rem;
    font-weight: 600;
}
.diff-badge {
    padding: .25rem .625rem;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.diff-badge.diff-add { background: #DCFCE7; color: #15803D; }
.diff-badge.diff-rem { background: #FEE2E2; color: #B91C1C; }
.diff-badge.diff-eq  { background: var(--color-bg); color: var(--color-text-muted); }

.diff-output {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.diff-output table {
    width: 100%;
    border-collapse: collapse;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.6;
}
.diff-output td {
    padding: 2px 10px;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}
.diff-output td.diff-num {
    width: 36px;
    text-align: right;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
    user-select: none;
    font-size: .75rem;
}
.diff-output td.diff-text {
    white-space: pre-wrap;
    word-break: break-word;
}
.diff-row.diff-add td.diff-text { background: #DCFCE7; }
.diff-row.diff-add td.diff-num  { background: #BBF7D0; color: #15803D; }
.diff-row.diff-rem td.diff-text { background: #FEE2E2; }
.diff-row.diff-rem td.diff-num  { background: #FECACA; color: #B91C1C; }
.diff-row.diff-add td.diff-text::before { content: '+ '; color: #15803D; font-weight: 700; }
.diff-row.diff-rem td.diff-text::before { content: '− '; color: #B91C1C; font-weight: 700; }

.diff-inline-add { background: #BBF7D0; border-radius: 2px; padding: 0 2px; }
.diff-inline-rem { background: #FECACA; border-radius: 2px; padding: 0 2px; text-decoration: line-through; }

/* ─────────────────────────────────────────────
   CRON BUILDER (crontab.guru-style)

   Per-field colors threaded through hero cells,
   description spans, and bottom builder grid.
───────────────────────────────────────────── */
.cron-tool {
    --cron-min: #EF4444;
    --cron-min-bg: #FEE2E2;
    --cron-hour: #F59E0B;
    --cron-hour-bg: #FEF3C7;
    --cron-dom: #10B981;
    --cron-dom-bg: #D1FAE5;
    --cron-mon: #3B82F6;
    --cron-mon-bg: #DBEAFE;
    --cron-dow: #8B5CF6;
    --cron-dow-bg: #EDE9FE;
}

.cron-hero {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.25rem;
    box-shadow: var(--shadow-sm);
}

.cron-hero-cells {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .5rem;
    margin-bottom: 1rem;
}
@media (max-width: 540px) {
    .cron-hero-cells { gap: .25rem; }
}

.cron-cell {
    position: relative;
    text-align: center;
}
.cron-cell-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(1.25rem, 4vw, 2rem);
    font-weight: 700;
    width: 100%;
    height: 64px;
    border: 2px solid var(--cell-color, var(--color-border));
    background: var(--cell-bg, var(--color-bg));
    color: var(--cell-color, var(--color-text));
    border-radius: var(--radius-md);
    text-align: center;
    transition: var(--transition);
    padding: .25rem .375rem;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cron-cell-input:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--cell-bg, var(--color-primary-light));
    background: #fff;
}
.cron-cell-input.is-error {
    border-color: #DC2626 !important;
    background: #FEE2E2 !important;
    color: #B91C1C !important;
}
.cron-cell.cron-min  { --cell-color: var(--cron-min);  --cell-bg: var(--cron-min-bg);  }
.cron-cell.cron-hour { --cell-color: var(--cron-hour); --cell-bg: var(--cron-hour-bg); }
.cron-cell.cron-dom  { --cell-color: var(--cron-dom);  --cell-bg: var(--cron-dom-bg);  }
.cron-cell.cron-mon  { --cell-color: var(--cron-mon);  --cell-bg: var(--cron-mon-bg);  }
.cron-cell.cron-dow  { --cell-color: var(--cron-dow);  --cell-bg: var(--cron-dow-bg);  }

.cron-cell-label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    margin-top: .375rem;
    color: var(--cell-color, var(--color-text-muted));
}
.cron-cell-range {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .625rem;
    color: var(--color-text-muted);
    margin-top: 1px;
}

.cron-description {
    font-size: 1.25rem;
    line-height: 1.45;
    color: var(--color-text);
    text-align: center;
    margin: 1rem 0 .5rem;
    font-weight: 500;
}
.cron-description .ck {
    background: var(--ck-bg);
    color: var(--ck-fg);
    padding: 1px 8px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    transition: var(--transition);
    cursor: default;
}
.cron-description .ck-min  { --ck-fg: var(--cron-min);  --ck-bg: var(--cron-min-bg);  }
.cron-description .ck-hour { --ck-fg: var(--cron-hour); --ck-bg: var(--cron-hour-bg); }
.cron-description .ck-dom  { --ck-fg: var(--cron-dom);  --ck-bg: var(--cron-dom-bg);  }
.cron-description .ck-mon  { --ck-fg: var(--cron-mon);  --ck-bg: var(--cron-mon-bg);  }
.cron-description .ck-dow  { --ck-fg: var(--cron-dow);  --ck-bg: var(--cron-dow-bg);  }

.cron-tool.is-hover-min  .cron-description .ck-min,
.cron-tool.is-hover-hour .cron-description .ck-hour,
.cron-tool.is-hover-dom  .cron-description .ck-dom,
.cron-tool.is-hover-mon  .cron-description .ck-mon,
.cron-tool.is-hover-dow  .cron-description .ck-dow {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.cron-next-line {
    text-align: center;
    color: var(--color-text-muted);
    font-size: .9375rem;
    margin-top: .5rem;
}
.cron-next-line strong {
    color: var(--color-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.cron-actions {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.cron-action-btn {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    padding: .375rem .875rem;
    border-radius: var(--radius-sm);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    transition: var(--transition);
}
.cron-action-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.cron-section {
    margin-top: 1.25rem;
}
.cron-section-title {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: .5rem;
}

.cron-presets,
.cron-macros {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}
.cron-preset,
.cron-macro {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    padding: .3125rem .75rem;
    border-radius: var(--radius-sm);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.cron-preset:hover,
.cron-macro:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}
.cron-macro {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--color-bg);
}
.cron-macro.is-active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.cron-next-runs {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.cron-next-header {
    background: var(--color-bg);
    padding: .5rem 1rem;
    font-weight: 600;
    color: var(--color-text);
    font-size: .8125rem;
    border-bottom: 1px solid var(--color-border);
}
.cron-next-list {
    padding: .25rem .5rem;
    max-height: 220px;
    overflow-y: auto;
}
.cron-next-item {
    padding: .375rem .75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    color: var(--color-text);
    border-bottom: 1px dashed var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cron-next-item:last-child { border-bottom: 0; }
.cron-next-when {
    color: var(--color-text-muted);
    font-size: .75rem;
    font-family: var(--font);
}

.cron-error {
    margin-top: .75rem;
    background: #FEE2E2;
    border: 1px solid #FECACA;
    color: #B91C1C;
    padding: .625rem .875rem;
    border-radius: var(--radius-md);
    font-size: .8125rem;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.cron-help {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    font-size: .8125rem;
    color: var(--color-text-muted);
}
.cron-help code {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--color-text);
    font-weight: 600;
}
.cron-help-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem 1.5rem;
    margin-top: .75rem;
}
@media (max-width: 540px) { .cron-help-grid { grid-template-columns: 1fr; } }
.cron-help-grid > div { display: flex; gap: .5rem; align-items: baseline; }
.cron-help-grid code { flex-shrink: 0; min-width: 50px; text-align: center; }

/* ─────────────────────────────────────────────
   SQL FORMATTER
───────────────────────────────────────────── */
.sql-controls {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-bottom: .75rem;
}
.sql-controls .form-select { width: auto; }
.sql-textarea {
    width: 100%;
    min-height: 220px;
    padding: 1rem 1.25rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9375rem;
    line-height: 1.6;
    resize: vertical;
    background: var(--color-surface);
    color: var(--color-text);
}
.sql-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.sql-output {
    margin-top: 1rem;
    position: relative;
    background: #0F172A;
    color: #E2E8F0;
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9375rem;
    line-height: 1.65;
    overflow-x: auto;
    white-space: pre;
    min-height: 100px;
    max-height: 500px;
    overflow-y: auto;
}
.sql-output .sql-kw { color: #38BDF8; font-weight: 600; }
.sql-output .sql-fn { color: #C084FC; }
.sql-output .sql-str { color: #FCD34D; }
.sql-output .sql-num { color: #FB923C; }
.sql-output .sql-com { color: #64748B; font-style: italic; }
.sql-actions {
    position: absolute;
    top: .5rem;
    right: .75rem;
    display: flex;
    gap: .375rem;
}
.sql-actions button {
    background: rgba(255,255,255,.1);
    border: 0;
    color: #E2E8F0;
    padding: .25rem .625rem;
    border-radius: var(--radius-sm);
    font-size: .75rem;
    cursor: pointer;
}
.sql-actions button:hover { background: rgba(255,255,255,.2); }

.sql-error {
    margin-top: 1rem;
    background: #FEE2E2;
    border: 1px solid #FECACA;
    color: #B91C1C;
    padding: .75rem 1rem;
    border-radius: var(--radius-md);
    font-size: .875rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ─────────────────────────────────────────────
   IMAGE TO TEXT - OCR
───────────────────────────────────────────── */
.ocr-dropzone {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: var(--color-bg);
    cursor: pointer;
    transition: var(--transition);
}
.ocr-dropzone:hover,
.ocr-dropzone.is-dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}
.ocr-dropzone-icon {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: .5rem;
}
.ocr-dropzone-title {
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: .25rem;
}
.ocr-dropzone-hint {
    color: var(--color-text-muted);
    font-size: .8125rem;
}
.ocr-dropzone input[type="file"] { display: none; }

.ocr-preview {
    margin-top: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .75rem;
    background: var(--color-surface);
    text-align: center;
}
.ocr-preview img {
    max-width: 100%;
    max-height: 320px;
    border-radius: var(--radius-sm);
}
.ocr-preview-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8125rem;
    color: var(--color-text-muted);
    margin-top: .5rem;
    padding: 0 .5rem;
}

.ocr-progress {
    margin-top: 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
}
.ocr-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .375rem;
}
.ocr-progress-bar {
    height: 8px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.ocr-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: var(--radius-full);
    width: 0%;
    transition: width .25s;
}

.ocr-result {
    margin-top: 1.25rem;
}
.ocr-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}
.ocr-result-title {
    font-weight: 700;
    color: var(--color-text);
}
.ocr-result-text {
    width: 100%;
    min-height: 200px;
    padding: 1rem 1.25rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9375rem;
    line-height: 1.65;
    background: var(--color-surface);
    color: var(--color-text);
    resize: vertical;
}

/* ─────────────────────────────────────────────
   HTML PARSER (DOM tree + selector tester)
───────────────────────────────────────────── */
.hp-source {
    width: 100%;
    min-height: 180px;
    padding: 1rem 1.25rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875rem;
    line-height: 1.55;
    resize: vertical;
    background: var(--color-surface);
    color: var(--color-text);
}
.hp-source:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.hp-selector-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem;
    align-items: stretch;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .25rem .375rem .25rem .875rem;
    transition: var(--transition);
}
.hp-selector-bar:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.hp-selector-bar.is-error {
    border-color: #DC2626;
    box-shadow: 0 0 0 3px #FEE2E2;
}
.hp-selector-input {
    border: 0;
    outline: none;
    background: transparent;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem;
    width: 100%;
    padding: .5rem 0;
    color: var(--color-text);
}
.hp-selector-meta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .75rem;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    font-size: .8125rem;
    color: var(--color-text-muted);
    font-weight: 600;
}
.hp-selector-meta strong { color: var(--color-primary); font-variant-numeric: tabular-nums; }

.hp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}
@media (max-width: 900px) { .hp-grid { grid-template-columns: 1fr; } }

.hp-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.hp-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
}
.hp-panel-body {
    padding: .75rem 1rem;
    overflow: auto;
    max-height: 460px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.55;
}

.hp-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hp-tree ul {
    list-style: none;
    margin: 0;
    padding-left: 1.25rem;
    border-left: 1px dashed var(--color-border);
    margin-left: .375rem;
}
.hp-node {
    display: flex;
    align-items: flex-start;
    gap: .25rem;
    padding: 1px 4px;
    border-radius: 3px;
    cursor: default;
    transition: background .12s;
    flex-wrap: wrap;
}
.hp-node:hover { background: var(--color-bg); }
.hp-node.is-match {
    background: #FEF3C7;
}
.hp-node.is-match:hover { background: #FDE68A; }
.hp-toggle {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
    width: 14px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .625rem;
    flex-shrink: 0;
}
.hp-toggle.is-leaf { color: transparent; cursor: default; }
.hp-tag {
    color: #2563EB;
    font-weight: 600;
}
.hp-attr-name { color: #C026D3; }
.hp-attr-eq { color: var(--color-text-muted); }
.hp-attr-value { color: #16A34A; }
.hp-bracket { color: var(--color-text-muted); }
.hp-text {
    color: #475569;
    font-style: italic;
    background: var(--color-bg);
    border-radius: 3px;
    padding: 0 4px;
    margin-left: 4px;
}
.hp-comment { color: #94A3B8; }
.hp-collapsed > ul { display: none; }
.hp-collapsed .hp-toggle.bi-chevron-down { transform: rotate(-90deg); }
.hp-tree .hp-toggle.bi-chevron-down {
    transition: transform .15s;
    display: inline-block;
}

.hp-matches-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hp-match-item {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
    color: var(--color-text);
    word-break: break-all;
    white-space: pre-wrap;
}
.hp-match-item .hp-match-idx {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: .6875rem;
    font-weight: 700;
    margin-right: .375rem;
}
.hp-match-text {
    margin-top: .25rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.hp-empty {
    color: var(--color-text-muted);
    font-style: italic;
    padding: .75rem;
    text-align: center;
    font-family: var(--font);
    font-size: .875rem;
}

.hp-stat-row {
    display: flex;
    gap: .375rem;
    flex-wrap: wrap;
    margin-top: .75rem;
}
.hp-stat-pill {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: .75rem;
    padding: .25rem .625rem;
    border-radius: var(--radius-full);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.hp-stat-pill strong { color: var(--color-primary); font-variant-numeric: tabular-nums; }

.hp-cheats {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .5rem;
}
.hp-cheat {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
    padding: .25rem .5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.hp-cheat:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}

/* ─────────────────────────────────────────────
   HTML VALIDATOR
───────────────────────────────────────────── */
.hv-source {
    width: 100%;
    min-height: 220px;
    padding: 1rem 1.25rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875rem;
    line-height: 1.55;
    resize: vertical;
    background: var(--color-surface);
    color: var(--color-text);
    tab-size: 4;
}
.hv-source:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.hv-summary {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.hv-summary-card {
    flex: 1;
    min-width: 140px;
    padding: .875rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    text-align: center;
}
.hv-summary-card .hv-num {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.hv-summary-card .hv-cap {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-top: .25rem;
}
.hv-summary-card.hv-card-err  { background: #FEE2E2; border-color: #FECACA; }
.hv-summary-card.hv-card-err  .hv-num { color: #B91C1C; }
.hv-summary-card.hv-card-warn { background: #FEF3C7; border-color: #FDE68A; }
.hv-summary-card.hv-card-warn .hv-num { color: #B45309; }
.hv-summary-card.hv-card-info { background: var(--color-primary-light); border-color: #BFDBFE; }
.hv-summary-card.hv-card-info .hv-num { color: var(--color-primary); }
.hv-summary-card.hv-card-ok   { background: #DCFCE7; border-color: #BBF7D0; }
.hv-summary-card.hv-card-ok   .hv-num { color: #15803D; }

.hv-issues {
    margin-top: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.hv-issue {
    display: grid;
    grid-template-columns: 32px 64px 1fr;
    gap: .75rem;
    padding: .625rem .875rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: .875rem;
    align-items: start;
}
.hv-issue:last-child { border-bottom: 0; }
.hv-issue-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .8125rem;
    flex-shrink: 0;
}
.hv-issue.hv-error   { background: #FEF2F2; }
.hv-issue.hv-warning { background: #FFFBEB; }
.hv-issue.hv-info    { background: var(--color-primary-light); }
.hv-issue.hv-error   .hv-issue-icon { background: #DC2626; }
.hv-issue.hv-warning .hv-issue-icon { background: #F59E0B; }
.hv-issue.hv-info    .hv-issue-icon { background: var(--color-primary); }
.hv-issue-line {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--color-text-muted);
    font-size: .75rem;
    text-align: right;
    padding-top: 4px;
    font-variant-numeric: tabular-nums;
}
.hv-issue-msg { color: var(--color-text); line-height: 1.45; }
.hv-issue-detail { color: var(--color-text-muted); font-size: .8125rem; margin-top: .25rem; }
.hv-issue-detail code {
    background: rgba(0,0,0,.05);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
}

.hv-no-issues {
    margin-top: 1rem;
    background: #DCFCE7;
    border: 1px solid #BBF7D0;
    color: #15803D;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 600;
}

/* ─────────────────────────────────────────────
   HTML TO JSON
───────────────────────────────────────────── */
.hj-source {
    width: 100%;
    min-height: 180px;
    padding: 1rem 1.25rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875rem;
    line-height: 1.55;
    resize: vertical;
    background: var(--color-surface);
    color: var(--color-text);
}
.hj-source:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.hj-controls {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
    margin: .75rem 0;
}
.hj-output-wrap {
    position: relative;
    background: #0F172A;
    color: #E2E8F0;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.55;
    overflow: auto;
    max-height: 540px;
    white-space: pre;
}
.hj-output-wrap .hj-actions {
    position: absolute;
    top: .5rem;
    right: .75rem;
    display: flex;
    gap: .375rem;
}
.hj-output-wrap .hj-actions button {
    background: rgba(255,255,255,.1);
    border: 0;
    color: #E2E8F0;
    padding: .25rem .625rem;
    border-radius: var(--radius-sm);
    font-size: .75rem;
    cursor: pointer;
}
.hj-output-wrap .hj-actions button:hover { background: rgba(255,255,255,.2); }
.hj-key  { color: #38BDF8; }
.hj-str  { color: #FCD34D; }
.hj-num  { color: #FB923C; }
.hj-bool { color: #C084FC; }
.hj-null { color: #94A3B8; }

/* ─────────────────────────────────────────────
   TYPING SPEED TEST
───────────────────────────────────────────── */
.tt-typing { user-select: none; }
.tt-typing-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
.tt-typing-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.tt-typing-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.tt-typing-stat-label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    font-weight: 700;
}
.tt-typing-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.tt-typing-stat-value.is-good { color: #15803D; }
.tt-typing-stat-value.is-bad  { color: #B91C1C; }

.tt-typing-duration {
    display: inline-flex;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 3px;
}
.tt-typing-duration button {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: .8125rem;
    padding: .375rem .875rem;
    border-radius: 7px;
    cursor: pointer;
}
.tt-typing-duration button.is-active {
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: var(--shadow-xs);
}

.tt-typing-text {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.375rem;
    line-height: 1.7;
    min-height: 110px;
    max-height: 220px;
    overflow-y: auto;
    color: var(--color-text-muted);
    cursor: text;
    transition: var(--transition);
}
.tt-typing-text.is-focused {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.tt-typing-word {
    display: inline-block;
    margin-right: 8px;
    white-space: nowrap;
}
.tt-typing-char {
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
}
.tt-typing-char.is-correct { color: var(--color-text); }
.tt-typing-char.is-wrong   { color: #B91C1C; background: #FEE2E2; border-radius: 2px; }
.tt-typing-char.is-extra   { color: #7C2D12; background: #FED7AA; border-radius: 2px; }
.tt-typing-cursor {
    display: inline-block;
    width: 2px;
    background: var(--color-primary);
    animation: tt-typing-blink 1s infinite;
    margin: 0 -1px;
    vertical-align: middle;
    height: 1.4em;
}
@keyframes tt-typing-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.tt-typing-input {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.tt-typing-results {
    margin-top: 1rem;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, #FFFFFF 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
}
.tt-typing-results-wpm {
    font-size: 4rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
}
.tt-typing-results-wpm small {
    font-size: 1rem;
    color: var(--color-text-muted);
    font-weight: 500;
    display: block;
    margin-top: .25rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.tt-typing-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: .75rem;
    margin-top: 1.25rem;
}
.tt-typing-actions { margin-top: 1rem; display: flex; gap: .5rem; justify-content: center; }

/* ─────────────────────────────────────────────
   WHEEL OF NAMES
───────────────────────────────────────────── */
.won-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.5rem;
}
@media (max-width: 768px) { .won-grid { grid-template-columns: 1fr; } }

.won-sidebar {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.won-textarea {
    width: 100%;
    min-height: 280px;
    padding: .75rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: .9375rem;
    line-height: 1.5;
    resize: vertical;
    font-family: var(--font);
}
.won-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.won-options {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .75rem 1rem;
    display: grid;
    gap: .5rem;
}
.won-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
}

.won-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    position: relative;
}
.won-canvas-wrap {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / 1;
}
.won-canvas {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 12px 40px -8px rgba(15,23,42,.18);
    background: var(--color-surface);
    transition: transform 0s;
    will-change: transform;
}
.won-pointer {
    position: absolute;
    top: 50%;
    right: -4px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 18px 28px 18px 0;
    border-color: transparent var(--color-primary) transparent transparent;
    filter: drop-shadow(-2px 0 6px rgba(15,23,42,.2));
    z-index: 2;
}
.won-spin-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 6px solid #fff;
    background: var(--color-primary);
    color: #fff;
    font-weight: 800;
    font-size: 1.0625rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform .15s, background .15s;
    z-index: 3;
}
.won-spin-btn:hover { background: var(--color-primary-dark); transform: translate(-50%, -50%) scale(1.05); }
.won-spin-btn:active { transform: translate(-50%, -50%) scale(.95); }
.won-spin-btn:disabled { background: var(--color-text-muted); cursor: wait; }

.won-winner-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 1.5rem 2rem;
    text-align: center;
    z-index: 4;
    min-width: 280px;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
    pointer-events: none;
}
.won-winner-modal.is-show {
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}
.won-winner-label {
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .75rem;
    font-weight: 700;
}
.won-winner-name {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary);
    margin: .5rem 0;
    word-break: break-word;
}
.won-winner-actions {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin-top: 1rem;
}

.won-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--color-text);
    color: #fff;
    padding: .75rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: .875rem;
    box-shadow: var(--shadow-lg);
    transition: transform .25s;
    z-index: 9999;
}
.won-toast.is-show { transform: translateX(-50%) translateY(0); }

/* ─────────────────────────────────────────────
   SUBNET / CIDR CALCULATOR
───────────────────────────────────────────── */
.sn-input-row {
    display: grid;
    grid-template-columns: 1fr 110px;
    gap: .5rem;
    align-items: center;
}
.sn-input-row .form-control {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.125rem;
    text-align: center;
}
.sn-cidr-slider {
    margin-top: .75rem;
}
.sn-cidr-slider input { width: 100%; }
.sn-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-top: 1.25rem;
}
@media (max-width: 640px) { .sn-result-grid { grid-template-columns: 1fr; } }
.sn-result-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .5rem .875rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    gap: .75rem;
}
.sn-result-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
    font-weight: 700;
    flex-shrink: 0;
}
.sn-result-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--color-text);
    font-weight: 600;
    word-break: break-all;
    text-align: right;
}
.sn-binary {
    margin-top: 1rem;
    background: #0F172A;
    color: #38BDF8;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    overflow-x: auto;
}
.sn-binary-row { display: flex; gap: 1rem; align-items: center; padding: 2px 0; }
.sn-binary-row .sn-bin-label {
    color: #94A3B8;
    width: 110px;
    flex-shrink: 0;
    font-weight: 600;
}
.sn-binary .sn-bin-net  { color: #38BDF8; }
.sn-binary .sn-bin-host { color: #FCD34D; }
.sn-binary .sn-bin-sep  { color: #475569; }

.sn-class-pill {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: .75rem;
    font-weight: 700;
    margin-left: .5rem;
}

/* ─────────────────────────────────────────────
   SLEEP CYCLE CALCULATOR
───────────────────────────────────────────── */
.sc-mode-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-bottom: 1rem;
}
.sc-mode-card {
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 1rem;
    cursor: pointer;
    text-align: center;
    transition: var(--transition);
}
.sc-mode-card:hover { border-color: var(--color-primary); }
.sc-mode-card.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}
.sc-mode-icon { font-size: 1.75rem; line-height: 1; margin-bottom: .25rem; color: var(--color-primary); }
.sc-mode-label { font-weight: 600; font-size: .9375rem; }

.sc-time-input { width: 100%; max-width: 240px; font-size: 1.5rem; font-weight: 700; text-align: center; padding: .75rem; }

.sc-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .5rem;
    margin-top: 1rem;
}
.sc-time-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .875rem 1rem;
    text-align: center;
    transition: var(--transition);
}
.sc-time-card.is-best {
    background: linear-gradient(135deg, #DCFCE7 0%, #FFFFFF 100%);
    border-color: #BBF7D0;
}
.sc-time-card.is-warn {
    background: var(--color-bg);
    opacity: .75;
}
.sc-time-card-cycles {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
    font-weight: 700;
}
.sc-time-card-time {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    margin: .25rem 0;
}
.sc-time-card-meta {
    font-size: .75rem;
    color: var(--color-text-muted);
}
.sc-time-card.is-best .sc-time-card-time { color: #15803D; }

.sc-cycle-info {
    margin-top: 1rem;
    background: var(--color-primary-light);
    border: 1px solid #BFDBFE;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    font-size: .875rem;
    color: var(--color-text);
}

/* ─────────────────────────────────────────────
   AUDIO RECORDER
───────────────────────────────────────────── */
.ar-stage {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
}
.ar-visualizer {
    width: 100%;
    height: 120px;
    background: #0F172A;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    display: block;
}
.ar-timer {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.ar-status {
    color: var(--color-text-muted);
    font-size: .875rem;
    margin-top: .25rem;
    min-height: 1.2em;
}
.ar-status.is-recording {
    color: #DC2626;
    font-weight: 600;
}
.ar-status.is-recording::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #DC2626;
    border-radius: 50%;
    margin-right: 6px;
    animation: ar-pulse 1.2s infinite;
}
@keyframes ar-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.85); } }

.ar-controls {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.ar-btn-record {
    background: #DC2626;
    color: #fff;
    border: 0;
    padding: .625rem 1.25rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.ar-btn-record:hover { background: #B91C1C; }
.ar-btn-record:disabled { background: var(--color-text-muted); cursor: not-allowed; }
.ar-btn-stop {
    background: var(--color-text);
    color: #fff;
    border: 0;
    padding: .625rem 1.25rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
}

.ar-playback {
    margin-top: 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
}
.ar-playback audio { width: 100%; }
.ar-playback-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .5rem;
    font-size: .8125rem;
    color: var(--color-text-muted);
}
.ar-recordings {
    margin-top: 1rem;
}
.ar-recording-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .5rem;
    align-items: center;
    padding: .5rem .75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-top: .5rem;
}
.ar-recording-name { font-size: .875rem; color: var(--color-text); font-weight: 500; }
.ar-recording-meta { font-size: .75rem; color: var(--color-text-muted); }

/* ─────────────────────────────────────────────
   TEXT TO SPEECH
───────────────────────────────────────────── */
.tts-textarea {
    width: 100%;
    min-height: 160px;
    padding: 1rem 1.25rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    background: var(--color-surface);
    color: var(--color-text);
}
.tts-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.tts-controls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.tts-slider-label {
    display: flex;
    justify-content: space-between;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: .25rem;
}
.tts-slider-label span { color: var(--color-primary); font-variant-numeric: tabular-nums; }
.tts-buttons {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.tts-buttons button { flex: 1; min-width: 120px; }
.tts-status {
    margin-top: .5rem;
    color: var(--color-text-muted);
    font-size: .8125rem;
    min-height: 1.2em;
}

/* ─────────────────────────────────────────────
   SPEECH TO TEXT
───────────────────────────────────────────── */
.stt-mic-stage {
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.stt-mic-btn {
    background: var(--color-primary);
    color: #fff;
    border: 0;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 2.25rem;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
}
.stt-mic-btn:hover { background: var(--color-primary-dark); transform: scale(1.05); }
.stt-mic-btn.is-listening {
    background: #DC2626;
    animation: stt-pulse 1.4s infinite;
}
@keyframes stt-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
    70%  { box-shadow: 0 0 0 24px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.stt-status {
    margin-top: .75rem;
    color: var(--color-text-muted);
    font-size: .9375rem;
    font-weight: 500;
}
.stt-status.is-listening { color: #DC2626; font-weight: 600; }

.stt-transcript {
    margin-top: 1rem;
    width: 100%;
    min-height: 220px;
    padding: 1rem 1.25rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    line-height: 1.65;
    background: var(--color-surface);
    color: var(--color-text);
    resize: vertical;
}
.stt-interim { color: var(--color-text-muted); font-style: italic; }
.stt-unsupported {
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    color: #92400E;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    text-align: center;
}

/* ─────────────────────────────────────────────
   CSS SPECIFICITY CALCULATOR
───────────────────────────────────────────── */
.csp-input-row {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 .75rem;
    background: var(--color-surface);
    transition: var(--transition);
}
.csp-input-row:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.csp-input-row input {
    border: 0;
    outline: none;
    background: transparent;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.125rem;
    width: 100%;
    padding: .75rem 0;
    color: var(--color-text);
}
.csp-input-row .csp-clear {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0 .25rem;
}

.csp-result {
    margin-top: 1.25rem;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, #FFFFFF 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
}
.csp-score {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    text-align: center;
    margin-bottom: .75rem;
    letter-spacing: .1em;
    font-variant-numeric: tabular-nums;
}
.csp-breakdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    margin-top: 1rem;
}
.csp-bd {
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .75rem .5rem;
}
.csp-bd-num {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.csp-bd-num.is-hit { color: var(--color-primary); }
.csp-bd-label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
    font-weight: 700;
    margin-top: .25rem;
}

.csp-tokens {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9375rem;
}
.csp-token {
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--color-bg);
    color: var(--color-text-muted);
}
.csp-token.csp-t-id      { background: #FEE2E2; color: #B91C1C; }
.csp-token.csp-t-class   { background: #FEF3C7; color: #92400E; }
.csp-token.csp-t-element { background: #DCFCE7; color: #15803D; }
.csp-token.csp-t-pseudo  { background: #DBEAFE; color: #1E40AF; }

.csp-compare {
    margin-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1.25rem;
}
.csp-compare-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    margin-bottom: .75rem;
}
.csp-compare-result {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .75rem 1rem;
    font-size: .9375rem;
    color: var(--color-text);
    text-align: center;
}
.csp-compare-result strong { color: var(--color-primary); }

/* ─────────────────────────────────────────────
   WHATSAPP / MAILTO LINK GENERATORS
───────────────────────────────────────────── */
.lg-form { display: grid; gap: 1rem; }
.lg-output {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .75rem 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9375rem;
    word-break: break-all;
    color: var(--color-text);
    position: relative;
}
.lg-output a { color: var(--color-primary); text-decoration: none; }
.lg-output a:hover { text-decoration: underline; }
.lg-output-actions {
    display: flex;
    gap: .5rem;
    margin-top: .75rem;
    flex-wrap: wrap;
}
.lg-preview {
    margin-top: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.lg-preview-header {
    background: var(--color-bg);
    padding: .5rem 1rem;
    font-weight: 600;
    font-size: .8125rem;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.lg-preview-body { padding: 1rem 1.25rem; }
.lg-wa-bubble {
    background: #DCF8C6;
    border-radius: 12px 12px 12px 0;
    padding: .625rem .875rem;
    max-width: 88%;
    color: #111;
    font-size: .9375rem;
    line-height: 1.4;
    box-shadow: var(--shadow-xs);
    white-space: pre-wrap;
    word-wrap: break-word;
}
.lg-wa-bubble:empty::before { content: 'Your message preview will appear here.'; color: rgba(0,0,0,.4); font-style: italic; }
.lg-mail-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    font-size: .875rem;
    line-height: 1.55;
}
.lg-mail-card .lg-mail-row {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: .5rem;
    padding: 2px 0;
    border-bottom: 1px dashed var(--color-border);
}
.lg-mail-card .lg-mail-row:last-of-type { border-bottom: 0; }
.lg-mail-card .lg-mail-label { color: var(--color-text-muted); font-weight: 600; }
.lg-mail-card .lg-mail-body {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--color-border);
    white-space: pre-wrap;
    color: var(--color-text);
}

/* ─────────────────────────────────────────────
   TONE GENERATOR
───────────────────────────────────────────── */
.tg-stage {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
}
.tg-freq-display {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.tg-freq-display small {
    font-size: 1rem;
    color: var(--color-text-muted);
    font-weight: 500;
    display: block;
    margin-top: .25rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.tg-waveform-svg {
    width: 100%;
    max-width: 480px;
    height: 100px;
    margin: 1rem auto;
    display: block;
}
.tg-controls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.tg-wave-toggle {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .25rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 3px;
}
.tg-wave-toggle button {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: .8125rem;
    padding: .5rem .25rem;
    border-radius: 7px;
    cursor: pointer;
    text-transform: capitalize;
}
.tg-wave-toggle button.is-active {
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: var(--shadow-xs);
}
.tg-presets {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    justify-content: center;
    margin-top: 1rem;
}
.tg-preset {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    padding: .25rem .625rem;
    border-radius: var(--radius-sm);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    transition: var(--transition);
}
.tg-preset:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}
.tg-play-btn {
    background: var(--color-primary);
    color: #fff;
    border: 0;
    padding: .75rem 2rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 1rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.tg-play-btn:hover { background: var(--color-primary-dark); }
.tg-play-btn.is-playing { background: #DC2626; }
.tg-play-btn.is-playing:hover { background: #B91C1C; }

/* ─────────────────────────────────────────────
   METRONOME
───────────────────────────────────────────── */
.met-stage {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
}
.met-bpm-display {
    font-size: 5rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.met-bpm-display small {
    font-size: 1rem;
    color: var(--color-text-muted);
    font-weight: 500;
    display: block;
    margin-top: .25rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.met-beats {
    display: flex;
    gap: .375rem;
    justify-content: center;
    margin: 1rem 0;
    min-height: 32px;
}
.met-beat {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    transition: all .08s;
}
.met-beat.is-accent { border-color: var(--color-primary); }
.met-beat.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: scale(1.25);
    box-shadow: 0 0 0 4px var(--color-primary-light);
}
.met-beat.is-active.is-accent {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px #FFEDD5;
}

.met-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0;
    text-align: left;
}
@media (max-width: 540px) { .met-controls { grid-template-columns: 1fr; } }

.met-buttons {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.met-start-btn {
    background: var(--color-primary);
    color: #fff;
    border: 0;
    padding: .75rem 2rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    min-width: 140px;
}
.met-start-btn:hover { background: var(--color-primary-dark); }
.met-start-btn.is-playing { background: #DC2626; }
.met-tap-btn {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    padding: .75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
}
.met-tap-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.met-tap-btn:active { transform: scale(.95); }

/* ─────────────────────────────────────────────
   IMAGE TO ASCII
───────────────────────────────────────────── */
.ia-controls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}
.ia-output {
    margin-top: 1rem;
    background: #0F172A;
    color: #E2E8F0;
    border-radius: var(--radius-md);
    padding: 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .5rem;
    line-height: .65;
    overflow: auto;
    max-height: 600px;
    white-space: pre;
    letter-spacing: 0;
    position: relative;
}
.ia-output pre { margin: 0; font: inherit; color: inherit; }
.ia-output.is-color {
    background: #fff;
    color: #1E293B;
}
.ia-output.is-color pre { background: #fff; }
.ia-actions {
    position: absolute;
    top: .5rem;
    right: .75rem;
    display: flex;
    gap: .375rem;
}
.ia-actions button {
    background: rgba(255,255,255,.15);
    border: 0;
    color: #E2E8F0;
    padding: .25rem .625rem;
    border-radius: var(--radius-sm);
    font-size: .75rem;
    cursor: pointer;
    font-family: var(--font);
}
.ia-output.is-color .ia-actions button {
    background: rgba(0,0,0,.06);
    color: var(--color-text);
}
.ia-actions button:hover { background: rgba(255,255,255,.25); }
.ia-output.is-color .ia-actions button:hover { background: rgba(0,0,0,.1); }

/* ─────────────────────────────────────────────
   VIDEO TO GIF / GIF MAKER / FRAME EXTRACTOR
───────────────────────────────────────────── */
.vt-dropzone {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    background: var(--color-bg);
    cursor: pointer;
    transition: var(--transition);
}
.vt-dropzone:hover, .vt-dropzone.is-dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}
.vt-dropzone-icon {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: .5rem;
}
.vt-dropzone-title { font-weight: 600; font-size: 1.0625rem; }
.vt-dropzone-hint { color: var(--color-text-muted); font-size: .8125rem; margin-top: .25rem; }
.vt-dropzone input[type="file"] { display: none; }

.vt-video-wrap {
    margin-top: 1rem;
    background: #0F172A;
    border-radius: var(--radius-md);
    padding: .75rem;
    text-align: center;
}
.vt-video-wrap video, .vt-video-wrap img {
    max-width: 100%;
    max-height: 360px;
    border-radius: var(--radius-sm);
}
.vt-trim-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}
@media (max-width: 540px) { .vt-trim-row { grid-template-columns: 1fr; } }

.vt-progress {
    margin-top: 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
}
.vt-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .375rem;
}
.vt-progress-bar {
    height: 8px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.vt-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: var(--radius-full);
    width: 0%;
    transition: width .25s;
}

.vt-result {
    margin-top: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
}
.vt-result img { max-width: 100%; border-radius: var(--radius-sm); }
.vt-result-meta {
    display: flex;
    justify-content: space-between;
    margin-top: .75rem;
    font-size: .8125rem;
    color: var(--color-text-muted);
}

/* GIF Maker - image grid */
.gm-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .5rem;
    margin: 1rem 0;
}
.gm-image-card {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    cursor: grab;
}
.gm-image-card.is-dragging { opacity: .4; }
.gm-image-card img { width: 100%; height: 100%; object-fit: cover; }
.gm-image-idx {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0,0,0,.65);
    color: #fff;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: .6875rem;
    font-weight: 700;
}
.gm-image-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,.65);
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
}

/* Frame Extractor - frames grid */
.fe-frames {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .5rem;
    margin-top: 1rem;
}
.fe-frame {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg);
    text-align: center;
}
.fe-frame img { width: 100%; display: block; }
.fe-frame-meta {
    padding: .375rem;
    font-size: .75rem;
    color: var(--color-text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.fe-frame-meta a {
    color: var(--color-primary);
    text-decoration: none;
}

/* ─────────────────────────────────────────────
   TOURNAMENT BRACKET MAKER
───────────────────────────────────────────── */
.brk-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
}
.brk-stage {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    overflow-x: auto;
}
.brk-rounds {
    display: flex;
    gap: 1.5rem;
    min-width: max-content;
    align-items: stretch;
}
.brk-round {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-width: 180px;
}
.brk-round-title {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: .5rem;
}
.brk-match {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin: .375rem 0;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.brk-team {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    font-size: .875rem;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.brk-team:last-child { border-bottom: 0; }
.brk-team:hover:not(.is-bye) { background: var(--color-primary-light); }
.brk-team.is-winner {
    background: #DCFCE7;
    color: #15803D;
    font-weight: 700;
}
.brk-team.is-loser {
    color: var(--color-text-muted);
    text-decoration: line-through;
}
.brk-team.is-bye {
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-style: italic;
    cursor: not-allowed;
}
.brk-champion {
    background: linear-gradient(135deg, #FCD34D, #F97316);
    color: #fff;
    padding: 1rem;
    border-radius: var(--radius-md);
    text-align: center;
    margin: 0 auto;
    font-weight: 700;
    box-shadow: var(--shadow-md);
    align-self: center;
}
.brk-champion-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .9;
    margin-bottom: .25rem;
}
.brk-champion-name { font-size: 1.5rem; }

/* ─────────────────────────────────────────────
   MARKDOWN TABLE GENERATOR
───────────────────────────────────────────── */
.mdt-grid-controls {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
}
.mdt-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.mdt-builder {
    border-collapse: collapse;
    width: 100%;
    background: var(--color-surface);
}
.mdt-builder th, .mdt-builder td {
    border: 1px solid var(--color-border);
    padding: 0;
    min-width: 100px;
    vertical-align: middle;
}
.mdt-builder th {
    background: var(--color-bg);
    font-weight: 700;
}
.mdt-cell-input {
    border: 0;
    background: transparent;
    width: 100%;
    padding: .5rem .75rem;
    font-size: .875rem;
    color: var(--color-text);
}
.mdt-cell-input:focus {
    outline: none;
    background: var(--color-primary-light);
}
.mdt-align-toggle {
    display: flex;
    justify-content: center;
    background: var(--color-bg);
    padding: 2px;
    border-top: 1px solid var(--color-border);
}
.mdt-align-toggle button {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 3px;
    font-size: .75rem;
}
.mdt-align-toggle button.is-active {
    background: var(--color-primary);
    color: #fff;
}
.mdt-row-actions {
    width: 36px !important;
    min-width: 36px !important;
    text-align: center;
    background: var(--color-bg);
}
.mdt-row-actions button {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px;
}
.mdt-row-actions button:hover { color: #DC2626; }

.mdt-output {
    margin-top: 1rem;
    background: #0F172A;
    color: #E2E8F0;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.55;
    overflow-x: auto;
    white-space: pre;
    position: relative;
}
.mdt-output .ia-actions { top: .5rem; right: .75rem; }
.mdt-rendered {
    margin-top: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    overflow-x: auto;
}
.mdt-rendered table {
    border-collapse: collapse;
    width: 100%;
}
.mdt-rendered th, .mdt-rendered td {
    border: 1px solid var(--color-border);
    padding: .5em .75em;
    text-align: left;
}
.mdt-rendered th { background: var(--color-bg); font-weight: 700; }

/* ─────────────────────────────────────────────
   CAFFEINE / BAC CALCULATORS
───────────────────────────────────────────── */
.cf-presets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: .375rem;
    margin: .5rem 0 1rem;
}
.cf-preset {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    padding: .5rem .375rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
    transition: var(--transition);
}
.cf-preset:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}
.cf-preset-name { font-weight: 600; font-size: .8125rem; color: var(--color-text); }
.cf-preset-mg   { font-size: .6875rem; color: var(--color-text-muted); }

.cf-doses {
    margin-top: .5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.cf-dose {
    display: grid;
    grid-template-columns: 1fr 1fr 32px;
    gap: .5rem;
    padding: .5rem .75rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    align-items: center;
}
.cf-dose:last-child { border-bottom: 0; }
.cf-dose input { font-size: .875rem; padding: .25rem .5rem; }
.cf-dose .cf-dose-remove {
    border: 0;
    background: transparent;
    color: #DC2626;
    cursor: pointer;
}

.cf-chart-wrap {
    margin-top: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
}
.cf-chart-svg {
    width: 100%;
    height: 220px;
    display: block;
}
.cf-chart-line { fill: none; stroke: var(--color-primary); stroke-width: 2.5; }
.cf-chart-fill { fill: var(--color-primary-light); }
.cf-chart-axis { stroke: var(--color-border); stroke-width: 1; }
.cf-chart-axis-text { fill: var(--color-text-muted); font-size: 10px; font-family: var(--font); }
.cf-chart-threshold { stroke: #DC2626; stroke-dasharray: 4 4; stroke-width: 1; }
.cf-chart-threshold-text { fill: #DC2626; font-size: 10px; font-family: var(--font); }

.cf-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .5rem;
    margin-top: 1rem;
}
.cf-summary-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .875rem 1rem;
    text-align: center;
}
.cf-summary-card.is-warn  { background: #FEF3C7; border-color: #FDE68A; }
.cf-summary-card.is-error { background: #FEE2E2; border-color: #FECACA; }
.cf-summary-card.is-ok    { background: #DCFCE7; border-color: #BBF7D0; }
.cf-summary-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.cf-summary-label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-top: .25rem;
}

.cf-disclaimer {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .75rem 1rem;
    font-size: .75rem;
    color: var(--color-text-muted);
    margin-top: 1rem;
    line-height: 1.55;
}

/* ─────────────────────────────────────────────
   RECIPE SCALER
───────────────────────────────────────────── */
.rs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 768px) { .rs-grid { grid-template-columns: 1fr; } }

.rs-textarea {
    width: 100%;
    min-height: 320px;
    padding: 1rem 1.25rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: .9375rem;
    line-height: 1.7;
    resize: vertical;
    font-family: var(--font);
}
.rs-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.rs-output {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    line-height: 1.7;
    font-size: .9375rem;
    min-height: 320px;
    overflow-y: auto;
    max-height: 480px;
}
.rs-output .rs-amount {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.rs-controls {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .75rem;
    margin-bottom: 1rem;
    align-items: end;
}
@media (max-width: 540px) { .rs-controls { grid-template-columns: 1fr; } }
.rs-multiplier {
    background: var(--color-primary-light);
    border: 1px solid #BFDBFE;
    border-radius: var(--radius-md);
    padding: .5rem 1rem;
    font-weight: 600;
    color: var(--color-primary);
    text-align: center;
    font-size: .9375rem;
}

/* ─────────────────────────────────────────────
   SUDOKU GENERATOR
───────────────────────────────────────────── */
.sg-controls {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: end;
    margin-bottom: 1rem;
}
.sg-board-wrap {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}
.sg-board {
    display: grid;
    grid-template-columns: repeat(9, minmax(36px, 56px));
    border: 3px solid var(--color-text);
    background: var(--color-text);
    gap: 1px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.sg-cell {
    background: var(--color-surface);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(1rem, 4vw, 1.625rem);
    font-weight: 700;
    color: var(--color-text);
    user-select: none;
}
.sg-cell.sg-given { color: var(--color-primary); }
.sg-cell.sg-empty { color: var(--color-text-muted); }
.sg-cell.sg-solution { background: #FEF3C7; color: #B45309; }
/* Box borders (3x3) */
.sg-board > .sg-cell:nth-child(3n)              { box-shadow: 1px 0 0 var(--color-text); }
.sg-board > .sg-cell:nth-child(9n)              { box-shadow: none; }
.sg-board > .sg-cell:nth-child(n+19):nth-child(-n+27),
.sg-board > .sg-cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid var(--color-text); }

/* ─────────────────────────────────────────────
   WORD SEARCH GENERATOR
───────────────────────────────────────────── */
.ws-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 540px) { .ws-controls { grid-template-columns: 1fr; } }
.ws-words-area {
    width: 100%;
    min-height: 120px;
    padding: .75rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: .9375rem;
    line-height: 1.5;
    resize: vertical;
}
.ws-words-area:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.ws-stage {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}
@media (max-width: 768px) { .ws-stage { grid-template-columns: 1fr; } }

.ws-grid {
    display: grid;
    background: var(--color-surface);
    border: 2px solid var(--color-text);
    border-radius: var(--radius-sm);
    padding: 8px;
    gap: 1px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    user-select: none;
    box-shadow: var(--shadow-sm);
}
.ws-grid-cell {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(.75rem, 2.5vw, 1rem);
    font-weight: 700;
    color: var(--color-text);
    background: var(--color-bg);
    border-radius: 2px;
}
.ws-grid-cell.ws-found {
    background: #FEF3C7;
    color: #92400E;
}

.ws-word-list {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
}
.ws-word-list-title {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: .5rem;
}
.ws-word-item {
    padding: .25rem .5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9375rem;
    color: var(--color-text);
}
.ws-word-item.ws-w-found { color: #15803D; text-decoration: line-through; }

/* ─────────────────────────────────────────────
   MIND MAP MAKER
───────────────────────────────────────────── */
.mm-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1rem;
}
@media (max-width: 768px) { .mm-grid { grid-template-columns: 1fr; } }

.mm-input {
    width: 100%;
    min-height: 360px;
    padding: 1rem 1.25rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875rem;
    line-height: 1.6;
    resize: vertical;
}
.mm-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.mm-canvas {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    overflow: auto;
    min-height: 460px;
    position: relative;
}
.mm-svg {
    width: 100%;
    height: auto;
    display: block;
}
.mm-node-rect {
    fill: var(--color-surface);
    stroke: var(--color-border);
    stroke-width: 1.5;
    rx: 8;
    ry: 8;
}
.mm-node-text {
    font-family: var(--font);
    font-size: 13px;
    fill: var(--color-text);
    dominant-baseline: middle;
    text-anchor: middle;
    pointer-events: none;
}
.mm-node-root .mm-node-rect { fill: var(--color-primary); stroke: var(--color-primary); }
.mm-node-root .mm-node-text { fill: #fff; font-weight: 700; font-size: 15px; }
.mm-link {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 2;
}

.mm-actions {
    display: flex;
    gap: .5rem;
    margin-top: .75rem;
    flex-wrap: wrap;
}

/* ─────────────────────────────────────────────
   TAILWIND ↔ CSS CONVERTER
───────────────────────────────────────────── */
.tw-mode-toggle {
    display: inline-flex;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 3px;
    margin-bottom: 1rem;
}
.tw-mode-toggle button {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: .8125rem;
    padding: .5rem 1rem;
    border-radius: 7px;
    cursor: pointer;
}
.tw-mode-toggle button.is-active {
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: var(--shadow-xs);
}
.tw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 768px) { .tw-grid { grid-template-columns: 1fr; } }

.tw-textarea {
    width: 100%;
    min-height: 220px;
    padding: 1rem 1.25rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875rem;
    line-height: 1.6;
    resize: vertical;
}
.tw-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.tw-output {
    background: #0F172A;
    color: #E2E8F0;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875rem;
    line-height: 1.55;
    overflow: auto;
    min-height: 220px;
    max-height: 480px;
    white-space: pre;
    position: relative;
}
.tw-output .tw-class { color: #C084FC; }
.tw-output .tw-prop  { color: #38BDF8; }
.tw-output .tw-val   { color: #FCD34D; }
.tw-output .tw-warn  { color: #F87171; font-style: italic; }

/* ─────────────────────────────────────────────
   HTML TO JSX
───────────────────────────────────────────── */
.jsx-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 768px) { .jsx-grid { grid-template-columns: 1fr; } }
.jsx-textarea {
    width: 100%;
    min-height: 240px;
    padding: 1rem 1.25rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875rem;
    line-height: 1.6;
    resize: vertical;
}
.jsx-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.jsx-output {
    background: #0F172A;
    color: #E2E8F0;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875rem;
    line-height: 1.55;
    overflow: auto;
    min-height: 240px;
    max-height: 540px;
    white-space: pre;
    position: relative;
}
.jsx-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}

/* ─────────────────────────────────────────────
   YAML / TOML CONVERTER
───────────────────────────────────────────── */
.yt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 900px) { .yt-grid { grid-template-columns: 1fr; } }

.yt-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.yt-panel-header {
    background: var(--color-bg);
    padding: .5rem 1rem;
    font-weight: 700;
    font-size: .8125rem;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.yt-panel-header .yt-source-flag {
    font-size: .625rem;
    background: var(--color-primary);
    color: #fff;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.yt-textarea {
    border: 0;
    outline: none;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.55;
    padding: 1rem;
    min-height: 320px;
    resize: vertical;
    width: 100%;
}
.yt-textarea.is-error { background: #FEF2F2; }
.yt-error {
    background: #FEE2E2;
    color: #B91C1C;
    padding: .375rem .75rem;
    font-size: .75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    border-top: 1px solid #FECACA;
}

/* ─────────────────────────────────────────────
   MOCK JSON DATA GENERATOR
───────────────────────────────────────────── */
.mj-fields {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .5rem;
    margin-bottom: 1rem;
}
.mj-field {
    display: grid;
    grid-template-columns: 1fr 200px 32px;
    gap: .5rem;
    padding: .375rem;
    align-items: center;
}
.mj-field input, .mj-field select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: .25rem .5rem;
    font-size: .875rem;
    background: var(--color-surface);
}
.mj-field-remove {
    border: 0;
    background: transparent;
    color: #DC2626;
    cursor: pointer;
    font-size: 1rem;
}
.mj-controls {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
}
.mj-output {
    background: #0F172A;
    color: #E2E8F0;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.55;
    overflow: auto;
    max-height: 540px;
    white-space: pre;
    position: relative;
}

/* ─────────────────────────────────────────────
   HTTP STATUS CODE REFERENCE
───────────────────────────────────────────── */
.hsc-search {
    width: 100%;
    padding: .75rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    margin-bottom: 1rem;
    background: var(--color-surface);
}
.hsc-search:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.hsc-tabs {
    display: flex;
    gap: .25rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 3px;
}
.hsc-tab {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: .8125rem;
    padding: .5rem .875rem;
    border-radius: 7px;
    cursor: pointer;
    flex: 1;
    min-width: 90px;
}
.hsc-tab.is-active {
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
}
.hsc-tab.hsc-1xx.is-active { color: #6366F1; }
.hsc-tab.hsc-2xx.is-active { color: #15803D; }
.hsc-tab.hsc-3xx.is-active { color: #B45309; }
.hsc-tab.hsc-4xx.is-active { color: #DC2626; }
.hsc-tab.hsc-5xx.is-active { color: #BE185D; }
.hsc-list {
    display: grid;
    gap: .5rem;
}
.hsc-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .875rem 1rem;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: .75rem;
    align-items: start;
    cursor: pointer;
    transition: var(--transition);
}
.hsc-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-xs); }
.hsc-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
    line-height: 1;
}
.hsc-1xx .hsc-code { color: #6366F1; }
.hsc-2xx .hsc-code { color: #15803D; }
.hsc-3xx .hsc-code { color: #B45309; }
.hsc-4xx .hsc-code { color: #DC2626; }
.hsc-5xx .hsc-code { color: #BE185D; }
.hsc-name {
    font-weight: 700;
    color: var(--color-text);
    font-size: .9375rem;
}
.hsc-desc {
    color: var(--color-text-muted);
    font-size: .8125rem;
    margin-top: .25rem;
    line-height: 1.45;
}
.hsc-detail {
    margin-top: .375rem;
    padding-top: .375rem;
    border-top: 1px dashed var(--color-border);
    color: var(--color-text-muted);
    font-size: .75rem;
    display: none;
}
.hsc-item.is-open .hsc-detail { display: block; }

/* ─────────────────────────────────────────────
   BCRYPT HASH GENERATOR
───────────────────────────────────────────── */
.bc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 768px) { .bc-grid { grid-template-columns: 1fr; } }
.bc-output {
    background: #0F172A;
    color: #E2E8F0;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.6;
    word-break: break-all;
    min-height: 80px;
    position: relative;
}
.bc-verify-status {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: var(--radius-full);
    font-size: .8125rem;
    font-weight: 700;
    margin-top: .5rem;
}
.bc-verify-status.is-match { background: #DCFCE7; color: #15803D; }
.bc-verify-status.is-fail  { background: #FEE2E2; color: #B91C1C; }

/* ─────────────────────────────────────────────
   ROI CALCULATOR - reference template for the business-tools batch.
   Result tones + horizontal bar visualization.
───────────────────────────────────────────── */
.roi-positive { color: #15803D; }
.roi-negative { color: #B91C1C; }

.roi-verdict { align-items: flex-start; }
.roi-verdict .roi-note {
    font-weight: 400;
    font-size: .8125rem;
    color: var(--ink-2, #475569);
    margin-top: 2px;
    text-align: right;
    max-width: 320px;
}
.roi-verdict-good strong { color: #15803D; }
.roi-verdict-meh  strong { color: #B45309; }
.roi-verdict-bad  strong { color: #B91C1C; }

.roi-chart {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: var(--surface-1, #fff);
    border: 1px solid var(--hairline, #e2e8f0);
    border-radius: var(--radius-md, 10px);
    display: grid;
    gap: 12px;
}
.roi-chart-row {
    display: grid;
    grid-template-columns: 64px 1fr 120px;
    gap: 12px;
    align-items: center;
    font-size: 13px;
}
.roi-chart-label {
    color: var(--ink-3, #94a3b8);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px;
}
.roi-chart-bar {
    display: flex;
    height: 22px;
    background: var(--surface-2, #f1f5f9);
    border-radius: 6px;
    overflow: hidden;
}
.roi-bar-cost { background: linear-gradient(90deg, #94a3b8, #64748b); }
.roi-bar-gain { background: linear-gradient(90deg, #22c55e, #15803d); }
.roi-bar-loss { background: repeating-linear-gradient(45deg, #fecaca, #fecaca 6px, #fee2e2 6px, #fee2e2 12px); }
.roi-chart-val {
    text-align: right;
    font-family: var(--font-mono, ui-monospace);
    font-weight: 600;
    color: var(--ink, #0f172a);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
    .roi-chart-row { grid-template-columns: 56px 1fr 90px; gap: 8px; }
    .roi-chart-val { font-size: 12px; }
    .roi-verdict .roi-note { max-width: none; }
}

/* ─────────────────────────────────────────────
   MORTGAGE CALCULATOR - amortization mini-chart.
───────────────────────────────────────────── */
.mtg-chart {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: var(--surface-1, #fff);
    border: 1px solid var(--hairline, #e2e8f0);
    border-radius: var(--radius-md, 10px);
}
.mtg-chart-head {
    font-size: 12px;
    color: var(--ink-3, #94a3b8);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    margin-bottom: 8px;
}
.mtg-year-row {
    display: grid;
    grid-template-columns: 56px 1fr 110px;
    gap: 10px;
    align-items: center;
    padding: 4px 0;
    font-size: 12px;
}
.mtg-year-label {
    color: var(--ink-3, #94a3b8);
    font-family: var(--font-mono, ui-monospace);
}
.mtg-year-bar {
    display: block;
    height: 8px;
    background: var(--surface-2, #f1f5f9);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.mtg-bar-principal {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #5b67ff, #1F5BFF);
    border-radius: 4px;
}
.mtg-year-val {
    text-align: right;
    font-family: var(--font-mono, ui-monospace);
    font-variant-numeric: tabular-nums;
    color: var(--ink-2, #475569);
}

/* ─────────────────────────────────────────────
   NPV/IRR CALCULATOR - cash flow rows + table.
───────────────────────────────────────────── */
.ni-flows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 6px;
}
.ni-flow-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 6px;
    align-items: center;
}
.ni-flow-year {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3, #94a3b8);
    text-align: right;
}
.ni-flow-input { padding: .375rem .5rem; font-size: 14px; }
.ni-flows-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.ni-table {
    margin-top: 1rem;
    padding: 12px 14px;
    background: var(--surface-1, #fff);
    border: 1px solid var(--hairline, #e2e8f0);
    border-radius: var(--radius-md, 10px);
}
.ni-table-row {
    display: grid;
    grid-template-columns: 70px 1fr 1fr 1fr;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--hairline-soft, rgba(0,0,0,0.04));
}
.ni-table-row:last-child { border-bottom: 0; }
.ni-table-row > span:first-child { color: var(--ink-3, #94a3b8); font-family: var(--font-mono, ui-monospace); }
.ni-table-row > span:not(:first-child) { text-align: right; color: var(--ink, #0f172a); }
.ni-table-head {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px !important;
    color: var(--ink-3, #94a3b8) !important;
}
.ni-table-head > span { color: var(--ink-3, #94a3b8) !important; }
.ni-payback {
    background: linear-gradient(90deg, rgba(34,197,94,0.06), transparent);
    font-weight: 600;
}

/* ─────────────────────────────────────────────
   A/B TEST - paired visitor/conversion inputs.
───────────────────────────────────────────── */
.ab-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 480px) {
    .ab-pair { grid-template-columns: 1fr; }
    .ni-flows { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .mtg-year-row { grid-template-columns: 48px 1fr 80px; gap: 6px; font-size: 11px; }
}

/* ─────────────────────────────────────────────
   CONVERSION FUNNEL
───────────────────────────────────────────── */
.cf-steps { display: grid; gap: 8px; margin-top: 6px; }
.cf-step-row {
    display: grid; grid-template-columns: 1fr 140px; gap: 8px; align-items: center;
}
.cf-result-head, .cf-result-row {
    display: grid;
    grid-template-columns: 1.6fr 70px 80px 80px 80px 1fr;
    gap: 8px; padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--hairline, #e2e8f0);
    align-items: center;
}
.cf-result-head {
    font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 11px;
    color: var(--ink-3, #94a3b8);
}
.cf-result-row > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.cf-result-row > .cf-result-name { text-align: left; color: var(--ink, #0f172a); font-weight: 500; }
.cf-result-row > .cf-result-bar { padding-left: 8px; }
@media (max-width: 700px) {
    .cf-result-head, .cf-result-row { grid-template-columns: 1.2fr 60px 60px 60px 60px; }
    .cf-result-row > .cf-result-bar { display: none; }
    .cf-result-head > span:last-child { display: none; }
}

/* ─────────────────────────────────────────────
   OVERTIME PAY - daily inputs
───────────────────────────────────────────── */
.ot-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-top: 6px;
}
.ot-day { display: flex; flex-direction: column; }
.ot-day label { margin-bottom: 4px; font-size: 12px; }
@media (max-width: 700px) { .ot-days { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .ot-days { grid-template-columns: repeat(3, 1fr); } }

/* ─────────────────────────────────────────────
   TRIP COST SPLITTER
───────────────────────────────────────────── */
.ts-people { display: grid; gap: 6px; margin-bottom: 8px; }
.ts-person-row { display: grid; grid-template-columns: 1fr 40px; gap: 6px; align-items: center; }
.ts-expense-row {
    display: grid;
    grid-template-columns: 1.4fr 100px 1fr 1.8fr 40px;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--hairline, #e2e8f0);
    align-items: start;
}
.ts-exp-split { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-top: 6px; }
.ts-split-cb { font-size: 12px; color: var(--ink-2, #475569); cursor: pointer; }
.ts-settle-block { margin-top: 12px; padding: 12px 14px; background: var(--surface-1, #fff); border: 1px solid var(--hairline, #e2e8f0); border-radius: 10px; }
.ts-settle-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3, #94a3b8); font-weight: 600; margin-bottom: 6px; }
.ts-balance-row, .ts-transfer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0; font-size: 13px; font-variant-numeric: tabular-nums;
}
.ts-transfer { font-size: 14px; padding: 6px 0; border-bottom: 1px dashed var(--hairline, #e2e8f0); }
.ts-transfer:last-child { border-bottom: 0; }
@media (max-width: 700px) {
    .ts-expense-row { grid-template-columns: 1fr 80px 1fr 30px; }
    .ts-exp-split { grid-column: 1 / -1; }
}

/* ─────────────────────────────────────────────
   DOCUMENT GENERATORS - shared shell + print styles
───────────────────────────────────────────── */
.docgen-shell { gap: 1.5rem; }
.docgen-grid {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 900px) {
    .docgen-grid { grid-template-columns: 1fr; }
}
.docgen-form .docgen-section {
    background: var(--surface-1, #fff);
    border: 1px solid var(--hairline, #e2e8f0);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}
.docgen-form .docgen-logo-section { background: var(--surface-2, #f8fafc); }
.docgen-logo-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.docgen-logo-controls input[type="file"] { flex: 1 1 200px; min-width: 0; }
.docgen-logo-controls button[id$="-logo-clear"] {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.docgen-form h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-3, #94a3b8);
    margin: 0 0 10px 0;
    font-weight: 700;
}
.docgen-form label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3, #94a3b8);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 8px 0 4px 0;
}
.docgen-form input, .docgen-form select, .docgen-form textarea {
    margin-bottom: 8px;
    font-size: 14px;
}
.docgen-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.docgen-item-row {
    display: grid;
    grid-template-columns: 1.4fr 60px 80px 36px;
    gap: 6px;
    margin-bottom: 6px;
    align-items: center;
}
.docgen-toolbar {
    display: flex; justify-content: flex-end;
    margin-bottom: 12px;
}
.docgen-preview-wrap { min-width: 0; }
.docgen-preview {
    background: #fff;
    border: 1px solid var(--hairline, #e2e8f0);
    border-radius: 10px;
    padding: 32px 40px;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04);
    min-height: 500px;
}
.docgen-doc { font-size: 14px; line-height: 1.55; color: #0f172a; }
.docgen-doc-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
    color: #0f172a;
}
.docgen-doc-sub { color: #475569; font-size: 13px; line-height: 1.45; }
.docgen-doc-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 24px; padding-bottom: 16px;
    border-bottom: 2px solid #0f172a;
}
.docgen-doc-meta {
    text-align: right; font-size: 13px; color: #475569;
}
.docgen-doc-customer { margin-bottom: 16px; font-size: 14px; }
.docgen-doc-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    font-size: 13px;
}
.docgen-doc-table th, .docgen-doc-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8f0;
}
.docgen-doc-table th {
    background: #f8fafc;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
}
.docgen-doc-table th.text-end, .docgen-doc-table td.text-end { text-align: right; }
.docgen-doc-totals {
    display: grid;
    gap: 6px;
    max-width: 320px;
    margin-left: auto;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.docgen-doc-totals > div { display: flex; justify-content: space-between; padding: 4px 0; }
.docgen-doc-grand {
    border-top: 2px solid #0f172a;
    padding-top: 8px !important;
    font-size: 17px;
    font-weight: 700;
}
.docgen-doc-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    font-size: 13px;
    color: #475569;
}
.docgen-doc-legal h4 {
    font-size: 14px;
    font-weight: 700;
    margin: 18px 0 6px 0;
    color: #0f172a;
}
.docgen-doc-legal p { margin: 0 0 10px 0; }
.docgen-doc-legal .docgen-doc-callout {
    background: #f8fafc;
    border-left: 3px solid #0f172a;
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 13px;
}
.docgen-doc-callout > div { padding: 2px 0; }
.docgen-sign-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
    font-size: 13px;
}
.docgen-sign-line { margin-bottom: 6px; color: #94a3b8; font-family: ui-monospace, monospace; }
.docgen-doc-letter { font-size: 15px; line-height: 1.7; }
.docgen-doc-letter-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 28px; font-size: 13px;
}
.docgen-doc-letter p { margin: 0 0 12px 0; }
.docgen-doc-letter ul { margin: 12px 0; padding-left: 24px; }
.docgen-doc-letter li { margin-bottom: 8px; }

/* Print: hide the form and toolbar, show only the doc preview at full width. */
@media print {
    body { background: #fff !important; }
    .docgen-hide-on-print,
    .kx-tool-topbar, .kx-tool-shell-card-head, .kx-tool-shell-card-result,
    .kx-tool-related, .kx-footer, .kx-header,
    nav, header, footer { display: none !important; }
    .docgen-grid { display: block; }
    .docgen-preview {
        border: none;
        padding: 0;
        box-shadow: none;
        min-height: 0;
    }
    .docgen-doc {
        max-width: 7.5in;
        margin: 0 auto;
    }
}