/**
 * Tool Hub Theme - Tool Workspace UI Layer
 * ---------------------------------------------------------------------------
 * The interactive tool engines in assets/js/tool-modules.js are written in
 * Bootstrap 5 and Tailwind utility markup, but the theme ships neither
 * framework. This file supplies that entire vocabulary - scoped to the tool
 * workspace only - and re-maps it onto one coherent design language so every
 * tool page looks like part of the same product.
 *
 * Load order: after assets/css/main.css (see tool_hub_theme_scripts()).
 * Scope:      .tool-app / .tp-workspace-card / .tp-results-card
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
.tool-app,
.tp-workspace-card,
.tp-results-card {
    --tu-white: #ffffff;
    --tu-canvas: #ffffff;
    --tu-sunken: #f8fafc;
    --tu-muted-fill: #f1f5f9;
    --tu-border: #e2e8f0;
    --tu-border-strong: #cbd5e1;

    --tu-ink: #0f172a;
    --tu-body: #334155;
    --tu-muted: #64748b;
    --tu-faint: #94a3b8;

    --tu-primary: #2563eb;
    --tu-primary-dark: #1d4ed8;
    --tu-primary-soft: #eff6ff;
    --tu-primary-border: #bfdbfe;

    --tu-success: #059669;
    --tu-success-soft: #ecfdf5;
    --tu-warning: #b45309;
    --tu-warning-soft: #fffbeb;
    --tu-danger: #dc2626;
    --tu-danger-soft: #fef2f2;
    --tu-info: #0891b2;
    --tu-info-soft: #ecfeff;

    --tu-radius-xs: 8px;
    --tu-radius-sm: 10px;
    --tu-radius: 12px;
    --tu-radius-lg: 16px;
    --tu-radius-xl: 20px;
    --tu-radius-pill: 999px;

    --tu-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --tu-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --tu-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.06);
    --tu-shadow-lg: 0 12px 30px -8px rgba(15, 23, 42, 0.12);

    --tu-ring: 0 0 0 4px rgba(37, 99, 235, 0.14);
    --tu-transition: 0.16s ease;
}

/* ==========================================================================
   2. Workspace shell
   ========================================================================== */
.tp-workspace-card {
    position: relative;
    overflow: visible;
}

.tp-workspace-card > .tool-app,
.tool-app {
    color: var(--tu-body);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
}

.tool-app #tool-app-workspace,
.tool-app .tool-converter-body {
    display: block;
    width: 100%;
    min-width: 0;
}

/* Every direct block the engines render gets sane vertical rhythm. */
.tool-app .tool-converter-body > * + * {
    margin-top: 0;
}

/* Headings inside engines - consistent scale, no inherited dark colors. */
.tool-app h1,
.tool-app h2,
.tool-app h3,
.tool-app h4,
.tool-app h5,
.tool-app h6 {
    font-family: var(--font-heading);
    color: var(--tu-ink) !important;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0 0 10px;
    font-weight: 700;
}

.tool-app h1 { font-size: 30px; }
.tool-app h2 { font-size: 24px; }
.tool-app h3 { font-size: 20px; }
.tool-app h4 { font-size: 17px; }
.tool-app h5 { font-size: 15.5px; }
.tool-app h6 { font-size: 14px; }

.tool-app p {
    color: var(--tu-body);
    margin: 0 0 10px;
}

.tool-app p:last-child,
.tool-app ul:last-child,
.tool-app ol:last-child {
    margin-bottom: 0;
}

.tool-app ul,
.tool-app ol {
    margin: 0 0 10px;
    padding-left: 20px;
}

.tool-app li {
    color: var(--tu-body);
    margin-bottom: 4px;
}

.tool-app a {
    color: var(--tu-primary);
    text-decoration: none;
    font-weight: 600;
}

.tool-app a:hover {
    color: var(--tu-primary-dark);
    text-decoration: underline;
}

.tool-app hr,
.tool-app .border-top {
    border: 0;
    border-top: 1px solid var(--tu-border);
    margin: 18px 0;
}

/* Code / monospace output blocks used by text and developer tools */
.tool-app pre,
.tool-app code,
.tool-app .font-monospace,
.tool-app .font-mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.tool-app pre {
    background: var(--tu-sunken);
    border: 1px solid var(--tu-border);
    border-radius: var(--tu-radius);
    padding: 16px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--tu-ink);
    overflow: auto;
    max-height: 460px;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

/* ==========================================================================
   3. Buttons - one size ladder, one radius, one focus ring
   ========================================================================== */
.tool-app .btn,
.tool-app .btn-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--tu-radius);
    background: var(--tu-muted-fill);
    color: var(--tu-body);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--tu-transition), border-color var(--tu-transition),
        color var(--tu-transition), box-shadow var(--tu-transition), transform var(--tu-transition);
    box-shadow: none !important;
    transform: none;
}

.tool-app .btn:hover {
    background: #e8eef6;
    color: var(--tu-ink);
    border-color: var(--tu-border-strong);
    transform: none;
}

.tool-app .btn:active {
    transform: translateY(1px);
}

.tool-app .btn:focus-visible {
    outline: none;
    box-shadow: var(--tu-ring) !important;
}

.tool-app .btn:disabled,
.tool-app .btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* Solid variants */
.tool-app .btn-primary,
.tool-app .btn-danger,
.tool-app .btn-success,
.tool-app .btn-warning,
.tool-app .btn-info,
.tool-app .btn-dark,
.tool-app .btn-light {
    color: #ffffff !important;
    border-color: transparent !important;
}

.tool-app .btn-primary {
    background: var(--tu-primary) !important;
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.55) !important;
}
.tool-app .btn-primary:hover {
    background: var(--tu-primary-dark) !important;
}

.tool-app .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow: 0 6px 16px -6px rgba(220, 38, 38, 0.5) !important;
}
.tool-app .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
}

.tool-app .btn-success {
    background: var(--tu-success) !important;
}
.tool-app .btn-success:hover {
    background: #047857 !important;
}

.tool-app .btn-warning {
    background: var(--tu-warning) !important;
}
.tool-app .btn-warning:hover {
    background: #92400e !important;
}

.tool-app .btn-info {
    background: var(--tu-info) !important;
}
.tool-app .btn-info:hover {
    background: #0e7490 !important;
}

.tool-app .btn-dark {
    background: var(--tu-ink) !important;
}
.tool-app .btn-dark:hover {
    background: #1e293b !important;
}

.tool-app .btn-light,
.tool-app .btn-white {
    background: #ffffff !important;
    color: var(--tu-ink) !important;
    border-color: var(--tu-border) !important;
}
.tool-app .btn-light:hover,
.tool-app .btn-white:hover {
    background: var(--tu-sunken) !important;
    border-color: var(--tu-border-strong) !important;
}

/* Outline / ghost variants share one visual treatment */
.tool-app .btn-outline-primary,
.tool-app .btn-outline-secondary,
.tool-app .btn-outline-success,
.tool-app .btn-outline-danger,
.tool-app .btn-outline-warning,
.tool-app .btn-outline-info,
.tool-app .btn-outline-dark,
.tool-app .btn-outline-light {
    background: #ffffff !important;
    border: 1px solid var(--tu-border) !important;
    color: var(--tu-body) !important;
}

.tool-app .btn-outline-primary {
    color: var(--tu-primary) !important;
    border-color: var(--tu-primary-border) !important;
    background: var(--tu-primary-soft) !important;
}
.tool-app .btn-outline-primary:hover {
    background: #dbeafe !important;
    border-color: var(--tu-primary) !important;
    color: var(--tu-primary-dark) !important;
}

.tool-app .btn-outline-secondary:hover,
.tool-app .btn-outline-dark:hover,
.tool-app .btn-outline-light:hover {
    background: var(--tu-sunken) !important;
    border-color: var(--tu-border-strong) !important;
    color: var(--tu-ink) !important;
}

.tool-app .btn-outline-success {
    color: var(--tu-success) !important;
    border-color: #a7f3d0 !important;
    background: var(--tu-success-soft) !important;
}
.tool-app .btn-outline-success:hover {
    background: #d1fae5 !important;
}

.tool-app .btn-outline-danger {
    color: var(--tu-danger) !important;
    border-color: #fecaca !important;
    background: var(--tu-danger-soft) !important;
}
.tool-app .btn-outline-danger:hover {
    background: #fee2e2 !important;
}

.tool-app .btn-outline-warning {
    color: var(--tu-warning) !important;
    border-color: #fde68a !important;
    background: var(--tu-warning-soft) !important;
}

.tool-app .btn-outline-info {
    color: var(--tu-info) !important;
    border-color: #a5f3fc !important;
    background: var(--tu-info-soft) !important;
}

/* Size ladder */
.tool-app .btn-lg {
    min-height: 50px;
    padding: 0 24px;
    font-size: 15px;
    border-radius: var(--tu-radius);
}

.tool-app .btn-sm {
    min-height: 34px;
    padding: 0 13px;
    font-size: 12.5px;
    gap: 6px;
    border-radius: var(--tu-radius-sm);
}

.tool-app .btn-xs {
    min-height: 28px;
    padding: 0 10px;
    font-size: 11.5px;
    gap: 5px;
    border-radius: var(--tu-radius-xs);
}

.tool-app .btn-block,
.tool-app .w-100.btn {
    width: 100%;
}

/* Button groups read as one segmented control */
.tool-app .btn-group {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border-radius: var(--tu-radius);
    overflow: hidden;
    border: 1px solid var(--tu-border);
    background: #ffffff;
}

.tool-app .btn-group > .btn {
    border-radius: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--tu-border) !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: var(--tu-body) !important;
}

.tool-app .btn-group > .btn:last-child {
    border-right: 0 !important;
}

.tool-app .btn-group > .btn:hover {
    background: var(--tu-sunken) !important;
    color: var(--tu-ink) !important;
}

.tool-app .btn-group-sm > .btn {
    min-height: 34px;
    padding: 0 12px;
    font-size: 12.5px;
}

/* Close button (toasts, dismissible panels) */
.tool-app .btn-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tu-muted);
    font-size: 0;
    cursor: pointer;
    position: relative;
}

.tool-app .btn-close::before {
    content: "\f00d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    color: currentColor;
}

.tool-app .btn-close:hover {
    background: var(--tu-muted-fill);
    color: var(--tu-ink);
}

.tool-app .btn-close-white {
    color: #ffffff;
}

/* ==========================================================================
   4. Form controls
   ========================================================================== */
.tool-app .form-label,
.tool-app label.form-label {
    display: block;
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--tu-ink);
    letter-spacing: 0.01em;
}

.tool-app .form-label i,
.tool-app .form-label .fas,
.tool-app .form-label .far {
    color: var(--tu-primary);
    margin-right: 2px;
}

.tool-app .form-control,
.tool-app .form-select,
.tool-app textarea.form-control,
.tool-app input[type="text"],
.tool-app input[type="number"],
.tool-app input[type="email"],
.tool-app input[type="url"],
.tool-app input[type="search"],
.tool-app input[type="password"],
.tool-app input[type="date"],
.tool-app input[type="time"],
.tool-app select,
.tool-app textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius-sm);
    background: #ffffff !important;
    color: var(--tu-ink) !important;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    box-shadow: none;
    transition: border-color var(--tu-transition), box-shadow var(--tu-transition);
    -webkit-appearance: none;
    appearance: none;
}

.tool-app textarea,
.tool-app textarea.form-control {
    min-height: 132px;
    resize: vertical;
    font-weight: 500;
    line-height: 1.65;
}

.tool-app select,
.tool-app .form-select {
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M8 11.5 3.5 7l1.06-1.06L8 9.38l3.44-3.44L12.5 7 8 11.5Z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    cursor: pointer;
}

.tool-app .form-control::placeholder,
.tool-app textarea::placeholder,
.tool-app input::placeholder {
    color: var(--tu-faint) !important;
    font-weight: 500;
    opacity: 1;
}

.tool-app .form-control:hover,
.tool-app .form-select:hover,
.tool-app input:hover,
.tool-app select:hover,
.tool-app textarea:hover {
    border-color: var(--tu-border-strong) !important;
}

.tool-app .form-control:focus,
.tool-app .form-select:focus,
.tool-app input:focus,
.tool-app select:focus,
.tool-app textarea:focus {
    outline: none !important;
    border-color: var(--tu-primary) !important;
    box-shadow: var(--tu-ring) !important;
    background: #ffffff !important;
    color: var(--tu-ink) !important;
}

/* Number inputs: hide native spinners for a calmer look */
.tool-app input[type="number"]::-webkit-outer-spin-button,
.tool-app input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.tool-app input[type="number"] {
    -moz-appearance: textfield;
}

.tool-app .form-control-sm,
.tool-app .form-select-sm {
    min-height: 38px;
    padding: 8px 11px;
    font-size: 12.5px;
    border-radius: var(--tu-radius-xs);
}

.tool-app .form-control-lg,
.tool-app .form-select-lg {
    min-height: 52px;
    padding: 13px 16px;
    font-size: 15px;
    border-radius: var(--tu-radius);
}

.tool-app .form-text,
.tool-app .form-text.text-white-50,
.tool-app .form-text.text-muted {
    display: block;
    margin: 6px 0 0;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--tu-muted) !important;
}

/* Input groups: prefix/suffix chips fused to the field */
.tool-app .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    border-radius: var(--tu-radius-sm);
    overflow: hidden;
}

.tool-app .input-group > .input-group-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 42px;
    padding: 0 12px;
    border: 1px solid var(--tu-border) !important;
    background: var(--tu-muted-fill) !important;
    color: var(--tu-muted) !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.tool-app .input-group > .input-group-text + .form-control,
.tool-app .input-group > .input-group-text + input,
.tool-app .input-group > .input-group-text + select {
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.tool-app .input-group > .form-control + .input-group-text,
.tool-app .input-group > input + .input-group-text,
.tool-app .input-group > select + .input-group-text {
    border-left: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.tool-app .input-group > .form-control:first-child,
.tool-app .input-group > input:first-child,
.tool-app .input-group > select:first-child {
    border-top-left-radius: var(--tu-radius-sm) !important;
    border-bottom-left-radius: var(--tu-radius-sm) !important;
}

.tool-app .input-group > .form-control:last-child,
.tool-app .input-group > input:last-child,
.tool-app .input-group > select:last-child {
    border-top-right-radius: var(--tu-radius-sm) !important;
    border-bottom-right-radius: var(--tu-radius-sm) !important;
}

.tool-app .input-group > .form-control:not(:first-child),
.tool-app .input-group > input:not(:first-child) {
    border-left: 0 !important;
}

.tool-app .input-group-sm > .form-control,
.tool-app .input-group-sm > input,
.tool-app .input-group-sm > .input-group-text {
    min-height: 38px;
    font-size: 12.5px;
}

.tool-app .input-group-lg > .form-control,
.tool-app .input-group-lg > .input-group-text {
    min-height: 52px;
    font-size: 15px;
}

/* Checkboxes / switches / ranges */
.tool-app .form-check {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-left: 0;
    margin-bottom: 8px;
    min-height: 24px;
}

.tool-app .form-check-input,
.tool-app input[type="checkbox"],
.tool-app input[type="radio"] {
    width: 17px;
    height: 17px;
    min-height: 17px;
    margin: 0;
    padding: 0;
    flex: 0 0 17px;
    border: 1.5px solid var(--tu-border-strong) !important;
    border-radius: 5px;
    background: #ffffff !important;
    accent-color: var(--tu-primary);
    cursor: pointer;
    -webkit-appearance: auto;
    appearance: auto;
}

.tool-app input[type="radio"] {
    border-radius: 50%;
}

.tool-app .form-check-input:checked,
.tool-app input[type="checkbox"]:checked {
    background-color: var(--tu-primary) !important;
    border-color: var(--tu-primary) !important;
}

.tool-app .form-check-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--tu-body);
    cursor: pointer;
}

.tool-app input[type="range"],
.tool-app .form-range {
    width: 100%;
    height: 6px;
    min-height: 6px;
    padding: 0;
    border: 0 !important;
    border-radius: 999px;
    background: var(--tu-muted-fill) !important;
    accent-color: var(--tu-primary);
    cursor: pointer;
}

/* File inputs inherit the dropzone look of the theme */
.tool-app input[type="file"] {
    padding: 10px;
    background: var(--tu-sunken) !important;
    font-size: 13px;
    cursor: pointer;
}

.tool-app input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: 1px solid var(--tu-border);
    border-radius: var(--tu-radius-xs);
    background: #ffffff;
    color: var(--tu-ink);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.tool-app .invalid-feedback,
.tool-app .valid-feedback {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 600;
}

.tool-app .invalid-feedback { color: var(--tu-danger); }
.tool-app .valid-feedback { color: var(--tu-success); }
/* ==========================================================================
   5. Cards & panels
   ========================================================================== */
.tool-app .card {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius-lg) !important;
    color: var(--tu-body) !important;
    box-shadow: var(--tu-shadow-sm) !important;
    padding: 0;
    overflow: hidden;
    position: relative;
    transform: none !important;
}

.tool-app .card > .card-body {
    padding: 22px;
}

.tool-app .card-header,
.tool-app .card-footer {
    padding: 15px 22px;
    background: var(--tu-sunken) !important;
    border-bottom: 1px solid var(--tu-border);
    border-top: 0;
    color: var(--tu-ink);
}

.tool-app .card-footer {
    border-bottom: 0;
    border-top: 1px solid var(--tu-border);
}

.tool-app .card-title {
    margin: 0 0 6px;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--tu-ink) !important;
}

.tool-app .card-subtitle {
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tu-muted) !important;
}

.tool-app .card-text {
    font-size: 13px;
    color: var(--tu-body) !important;
}

/* Neutralise decorative gradients the engines inline. Result tiles keep a
   crisp white surface with an accent rail instead of a rainbow of gradients. */
.tool-app .card[style*="gradient"],
.tool-app .card[style*="background:#0"],
.tool-app .card[style*="background: #0"],
.tool-app .card[style*="background:linear-gradient"],
.tool-app .card[style*="background: linear-gradient"] {
    background: #ffffff !important;
    background-image: none !important;
    color: var(--tu-ink) !important;
    border: 1px solid var(--tu-border) !important;
}

.tool-app .card[style*="gradient"]::before,
.tool-app .card[style*="linear-gradient"]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--tu-primary);
}

/* Soft tinted panels (callouts, notes, helper boxes) */
.tool-app .alert {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--tu-border);
    border-radius: var(--tu-radius);
    background: var(--tu-sunken);
    color: var(--tu-body);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.tool-app .alert-primary {
    background: var(--tu-primary-soft);
    border-color: var(--tu-primary-border);
    color: #1e40af;
}

.tool-app .alert-success {
    background: var(--tu-success-soft);
    border-color: #a7f3d0;
    color: #065f46;
}

.tool-app .alert-warning {
    background: var(--tu-warning-soft);
    border-color: #fde68a;
    color: #92400e;
}

.tool-app .alert-danger {
    background: var(--tu-danger-soft);
    border-color: #fecaca;
    color: #991b1b;
}

.tool-app .alert-info {
    background: var(--tu-info-soft);
    border-color: #a5f3fc;
    color: #155e75;
}

/* ==========================================================================
   6. Badges & pills
   ========================================================================== */
.tool-app .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--tu-radius-pill);
    background: var(--tu-muted-fill) !important;
    color: var(--tu-body) !important;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
}

.tool-app .badge.fs-6,
.tool-app .badge.fs-5 {
    font-size: 11.5px !important;
    padding: 5px 12px;
}

.tool-app .badge.bg-primary { background: var(--tu-primary-soft) !important; color: var(--tu-primary) !important; }
.tool-app .badge.bg-success { background: var(--tu-success-soft) !important; color: var(--tu-success) !important; }
.tool-app .badge.bg-danger { background: var(--tu-danger-soft) !important; color: var(--tu-danger) !important; }
.tool-app .badge.bg-warning { background: var(--tu-warning-soft) !important; color: var(--tu-warning) !important; }
.tool-app .badge.bg-info { background: var(--tu-info-soft) !important; color: var(--tu-info) !important; }
.tool-app .badge.bg-dark { background: var(--tu-muted-fill) !important; color: var(--tu-ink) !important; }
.tool-app .badge.bg-light { background: var(--tu-sunken) !important; color: var(--tu-muted) !important; }
.tool-app .badge.bg-white { background: #ffffff !important; color: var(--tu-body) !important; }

/* Subtle tinted badges used heavily by the metric dashboards */
.tool-app .badge.bg-success-subtle,
.tool-app .badge[class*="text-success"] { background: var(--tu-success-soft) !important; color: var(--tu-success) !important; }
.tool-app .badge.bg-danger-subtle,
.tool-app .badge[class*="text-danger"] { background: var(--tu-danger-soft) !important; color: var(--tu-danger) !important; }
.tool-app .badge.bg-warning-subtle,
.tool-app .badge[class*="text-warning"] { background: var(--tu-warning-soft) !important; color: var(--tu-warning) !important; }
.tool-app .badge.bg-primary-subtle,
.tool-app .badge[class*="text-primary"] { background: var(--tu-primary-soft) !important; color: var(--tu-primary) !important; }
.tool-app .badge.bg-secondary-subtle { background: var(--tu-muted-fill) !important; color: var(--tu-body) !important; }

/* ==========================================================================
   7. Tables
   ========================================================================== */
.tool-app .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--tu-radius);
}

.tool-app table,
.tool-app .table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
    background: #ffffff !important;
    color: var(--tu-body) !important;
    font-size: 13px;
    border: 1px solid var(--tu-border);
    border-radius: var(--tu-radius);
    overflow: hidden;
}

.tool-app .table > :not(caption) > * > * {
    padding: 11px 13px;
    border-bottom: 1px solid var(--tu-border);
    vertical-align: middle;
    background: transparent !important;
    color: inherit;
    box-shadow: none !important;
}

.tool-app .table thead th,
.tool-app .table > thead > tr > th {
    background: var(--tu-sunken) !important;
    color: var(--tu-muted) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--tu-border) !important;
}

.tool-app .table tbody tr:last-child > * {
    border-bottom: 0;
}

.tool-app .table tbody tr:hover > * {
    background: var(--tu-sunken) !important;
}

.tool-app .table-bordered > :not(caption) > * > * {
    border: 1px solid var(--tu-border);
}

.tool-app .table-sm > :not(caption) > * > * {
    padding: 8px 10px;
    font-size: 12.5px;
}

.tool-app .table > tbody > tr > td,
.tool-app .table > tbody > tr > th {
    color: var(--tu-body) !important;
}

.tool-app .table-dark,
.tool-app .table-dark > thead > tr > th {
    background: var(--tu-sunken) !important;
    color: var(--tu-muted) !important;
    border-color: var(--tu-border) !important;
}

.tool-app .table-striped tbody tr:nth-of-type(odd) > * {
    background: #fcfdff !important;
}

/* ==========================================================================
   8. Navigation: pills, tabs, segmented buttons
   ========================================================================== */
.tool-app .nav,
.tool-app .nav-pills,
.tool-app .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px;
    padding: 5px;
    list-style: none;
    background: var(--tu-sunken) !important;
    border: 1px solid var(--tu-border);
    border-radius: var(--tu-radius);
}

.tool-app .nav-tabs {
    background: transparent !important;
    border: 0;
    border-bottom: 1px solid var(--tu-border);
    border-radius: 0;
    padding: 0;
    gap: 4px;
}

.tool-app .nav-item {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tool-app .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 15px;
    border: 1px solid transparent;
    border-radius: var(--tu-radius-sm);
    background: transparent !important;
    color: var(--tu-muted) !important;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--tu-transition);
    flex: 1 1 auto;
}

.tool-app .nav-link:hover {
    background: #ffffff !important;
    color: var(--tu-ink) !important;
}

.tool-app .nav-pills .nav-link.active,
.tool-app .nav-link.active,
.tool-app .nav-tabs .nav-link.active {
    background: #ffffff !important;
    color: var(--tu-primary) !important;
    border-color: var(--tu-border) !important;
    box-shadow: var(--tu-shadow-xs);
}

.tool-app .nav-tabs .nav-link {
    flex: 0 0 auto;
    border-radius: var(--tu-radius-sm) var(--tu-radius-sm) 0 0;
}

.tool-app .nav-tabs .nav-link.active {
    border-color: var(--tu-border) var(--tu-border) #ffffff !important;
}

.tool-app .nav-fill > .nav-item,
.tool-app .nav-fill .nav-link {
    flex: 1 1 0;
}

.tool-app .tab-content > .tab-pane {
    display: none;
}

.tool-app .tab-content > .active {
    display: block;
}

.tool-app .list-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.tool-app .list-group-item {
    padding: 13px 15px;
    border: 1px solid var(--tu-border);
    border-radius: var(--tu-radius-sm);
    background: #ffffff;
    color: var(--tu-body);
    font-size: 13px;
}

/* ==========================================================================
   9. Feedback: toast, progress, spinner
   ========================================================================== */
.tool-app .toast {
    display: block;
    min-width: 260px;
    max-width: 360px;
    padding: 0;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius);
    background: #ffffff !important;
    color: var(--tu-ink) !important;
    box-shadow: var(--tu-shadow-lg) !important;
    overflow: hidden;
}

.tool-app .toast-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--tu-sunken);
    border-bottom: 1px solid var(--tu-border);
    font-size: 12px;
    font-weight: 700;
}

.tool-app .toast-body {
    padding: 13px 15px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--tu-body);
}

.tool-app .progress {
    display: flex;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--tu-muted-fill);
}

.tool-app .progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 999px;
    background: var(--tu-primary);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    transition: width 0.3s ease;
}

.tool-app .spinner-border,
.tool-app .spinner-grow {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 2.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: tu-spin 0.7s linear infinite;
    vertical-align: -0.125em;
}

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

/* ==========================================================================
   10. Utility components used by calculators
   ========================================================================== */
.tool-app .tp-result-tile,
.tool-app .metric-tile {
    background: #ffffff;
    border: 1px solid var(--tu-border);
    border-radius: var(--tu-radius);
    padding: 16px;
}

.tool-app .tp-stat-value {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--tu-ink);
    line-height: 1.15;
}

.tool-app .tp-stat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tu-muted);
}

/* Scrollbars inside scrollable outputs */
.tool-app ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.tool-app ::-webkit-scrollbar-track {
    background: transparent;
}

.tool-app ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
    border: 3px solid #ffffff;
}

.tool-app ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Print-friendly output */
@media print {
    .tool-app .btn,
    .tool-app .nav {
        display: none !important;
    }
}
/* ==========================================================================
   11. Grid system (Bootstrap compatible, all breakpoints)
   ========================================================================== */
.tool-app .row,
.tool-app .g-0,
.tool-app .g-1,
.tool-app .g-2,
.tool-app .g-3,
.tool-app .g-4,
.tool-app .g-5 {
    display: flex !important;
    flex-wrap: wrap !important;
    --tu-gutter: 24px;
    margin-left: calc(var(--tu-gutter) / -2);
    margin-right: calc(var(--tu-gutter) / -2);
}

.tool-app .g-0 { --tu-gutter: 0px; }
.tool-app .g-1 { --tu-gutter: 8px; }
.tool-app .g-2 { --tu-gutter: 16px; }
.tool-app .g-3 { --tu-gutter: 24px; }
.tool-app .g-4 { --tu-gutter: 32px; }
.tool-app .g-5 { --tu-gutter: 40px; }

.tool-app .row > *,
.tool-app [class*="col-"] {
    padding-left: calc(var(--tu-gutter, 24px) / 2);
    padding-right: calc(var(--tu-gutter, 24px) / 2);
    box-sizing: border-box;
    min-width: 0;
}

.tool-app .row > *,
.tool-app .row > [class*="col-"] {
    flex: 0 0 auto;
    width: 100%;
}

.tool-app .col { flex: 1 0 0% !important; width: auto !important; }
.tool-app .col-auto { flex: 0 0 auto !important; width: auto !important; }

.tool-app .col-1 { flex: 0 0 auto !important; width: 8.333333% !important; }
.tool-app .col-2 { flex: 0 0 auto !important; width: 16.666667% !important; }
.tool-app .col-3 { flex: 0 0 auto !important; width: 25% !important; }
.tool-app .col-4 { flex: 0 0 auto !important; width: 33.333333% !important; }
.tool-app .col-5 { flex: 0 0 auto !important; width: 41.666667% !important; }
.tool-app .col-6 { flex: 0 0 auto !important; width: 50% !important; }
.tool-app .col-7 { flex: 0 0 auto !important; width: 58.333333% !important; }
.tool-app .col-8 { flex: 0 0 auto !important; width: 66.666667% !important; }
.tool-app .col-9 { flex: 0 0 auto !important; width: 75% !important; }
.tool-app .col-10 { flex: 0 0 auto !important; width: 83.333333% !important; }
.tool-app .col-11 { flex: 0 0 auto !important; width: 91.666667% !important; }
.tool-app .col-12 { flex: 0 0 auto !important; width: 100% !important; }

@media (min-width: 576px) {
    .tool-app .col-sm-1 { flex: 0 0 auto !important; width: 8.333333% !important; }
    .tool-app .col-sm-2 { flex: 0 0 auto !important; width: 16.666667% !important; }
    .tool-app .col-sm-3 { flex: 0 0 auto !important; width: 25% !important; }
    .tool-app .col-sm-4 { flex: 0 0 auto !important; width: 33.333333% !important; }
    .tool-app .col-sm-5 { flex: 0 0 auto !important; width: 41.666667% !important; }
    .tool-app .col-sm-6 { flex: 0 0 auto !important; width: 50% !important; }
    .tool-app .col-sm-7 { flex: 0 0 auto !important; width: 58.333333% !important; }
    .tool-app .col-sm-8 { flex: 0 0 auto !important; width: 66.666667% !important; }
    .tool-app .col-sm-9 { flex: 0 0 auto !important; width: 75% !important; }
    .tool-app .col-sm-10 { flex: 0 0 auto !important; width: 83.333333% !important; }
    .tool-app .col-sm-11 { flex: 0 0 auto !important; width: 91.666667% !important; }
    .tool-app .col-sm-12 { flex: 0 0 auto !important; width: 100% !important; }
}

@media (min-width: 768px) {
    .tool-app .col-md-1 { flex: 0 0 auto !important; width: 8.333333% !important; }
    .tool-app .col-md-2 { flex: 0 0 auto !important; width: 16.666667% !important; }
    .tool-app .col-md-3 { flex: 0 0 auto !important; width: 25% !important; }
    .tool-app .col-md-4 { flex: 0 0 auto !important; width: 33.333333% !important; }
    .tool-app .col-md-5 { flex: 0 0 auto !important; width: 41.666667% !important; }
    .tool-app .col-md-6 { flex: 0 0 auto !important; width: 50% !important; }
    .tool-app .col-md-7 { flex: 0 0 auto !important; width: 58.333333% !important; }
    .tool-app .col-md-8 { flex: 0 0 auto !important; width: 66.666667% !important; }
    .tool-app .col-md-9 { flex: 0 0 auto !important; width: 75% !important; }
    .tool-app .col-md-10 { flex: 0 0 auto !important; width: 83.333333% !important; }
    .tool-app .col-md-11 { flex: 0 0 auto !important; width: 91.666667% !important; }
    .tool-app .col-md-12 { flex: 0 0 auto !important; width: 100% !important; }
}

@media (min-width: 992px) {
    .tool-app .col-lg-1 { flex: 0 0 auto !important; width: 8.333333% !important; }
    .tool-app .col-lg-2 { flex: 0 0 auto !important; width: 16.666667% !important; }
    .tool-app .col-lg-3 { flex: 0 0 auto !important; width: 25% !important; }
    .tool-app .col-lg-4 { flex: 0 0 auto !important; width: 33.333333% !important; }
    .tool-app .col-lg-5 { flex: 0 0 auto !important; width: 41.666667% !important; }
    .tool-app .col-lg-6 { flex: 0 0 auto !important; width: 50% !important; }
    .tool-app .col-lg-7 { flex: 0 0 auto !important; width: 58.333333% !important; }
    .tool-app .col-lg-8 { flex: 0 0 auto !important; width: 66.666667% !important; }
    .tool-app .col-lg-9 { flex: 0 0 auto !important; width: 75% !important; }
    .tool-app .col-lg-10 { flex: 0 0 auto !important; width: 83.333333% !important; }
    .tool-app .col-lg-11 { flex: 0 0 auto !important; width: 91.666667% !important; }
    .tool-app .col-lg-12 { flex: 0 0 auto !important; width: 100% !important; }
}

@media (min-width: 1200px) {
    .tool-app .col-xl-1 { flex: 0 0 auto !important; width: 8.333333% !important; }
    .tool-app .col-xl-2 { flex: 0 0 auto !important; width: 16.666667% !important; }
    .tool-app .col-xl-3 { flex: 0 0 auto !important; width: 25% !important; }
    .tool-app .col-xl-4 { flex: 0 0 auto !important; width: 33.333333% !important; }
    .tool-app .col-xl-5 { flex: 0 0 auto !important; width: 41.666667% !important; }
    .tool-app .col-xl-6 { flex: 0 0 auto !important; width: 50% !important; }
    .tool-app .col-xl-7 { flex: 0 0 auto !important; width: 58.333333% !important; }
    .tool-app .col-xl-8 { flex: 0 0 auto !important; width: 66.666667% !important; }
    .tool-app .col-xl-9 { flex: 0 0 auto !important; width: 75% !important; }
    .tool-app .col-xl-10 { flex: 0 0 auto !important; width: 83.333333% !important; }
    .tool-app .col-xl-12 { flex: 0 0 auto !important; width: 100% !important; }
}

/* Full-width stacking on phones - prevents the classic horizontal bleed */
@media (max-width: 767px) {
    .tool-app .row > [class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    .tool-app .row > .col-auto {
        width: auto !important;
        flex: 0 0 auto !important;
    }
}

/* ==========================================================================
   12. Display & flexbox
   ========================================================================== */
.tool-app .d-none { display: none !important; }
.tool-app .d-block { display: block !important; }
.tool-app .d-inline { display: inline !important; }
.tool-app .d-inline-block { display: inline-block !important; }
.tool-app .d-flex { display: flex !important; }
.tool-app .d-inline-flex { display: inline-flex !important; }
.tool-app .d-grid { display: grid !important; }
.tool-app .d-table { display: table !important; }
.tool-app .d-table-cell { display: table-cell !important; }
.tool-app .d-contents { display: contents !important; }

@media (min-width: 576px) {
    .tool-app .d-sm-none { display: none !important; }
    .tool-app .d-sm-block { display: block !important; }
    .tool-app .d-sm-flex { display: flex !important; }
}
@media (min-width: 768px) {
    .tool-app .d-md-none { display: none !important; }
    .tool-app .d-md-block { display: block !important; }
    .tool-app .d-md-flex { display: flex !important; }
    .tool-app .d-md-inline-block { display: inline-block !important; }
}
@media (min-width: 992px) {
    .tool-app .d-lg-none { display: none !important; }
    .tool-app .d-lg-block { display: block !important; }
    .tool-app .d-lg-flex { display: flex !important; }
}

/* Tailwind display aliases */
.tool-app .flex { display: flex !important; }
.tool-app .inline-flex { display: inline-flex !important; }
.tool-app .grid { display: grid !important; }
.tool-app .block { display: block !important; }
.tool-app .inline-block { display: inline-block !important; }
.tool-app .hidden { display: none !important; }
.tool-app .relative { position: relative !important; }
.tool-app .absolute { position: absolute !important; }
.tool-app .fixed { position: fixed !important; }
.tool-app .sticky { position: sticky !important; }

.tool-app .flex-row { flex-direction: row !important; }
.tool-app .flex-row-reverse { flex-direction: row-reverse !important; }
.tool-app .flex-column,
.tool-app .flex-col { flex-direction: column !important; }
.tool-app .flex-column-reverse { flex-direction: column-reverse !important; }
.tool-app .flex-wrap { flex-wrap: wrap !important; }
.tool-app .flex-nowrap { flex-wrap: nowrap !important; }
.tool-app .flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

.tool-app .flex-fill { flex: 1 1 auto !important; }
.tool-app .flex-grow-0 { flex-grow: 0 !important; }
.tool-app .flex-grow-1,
.tool-app .grow { flex-grow: 1 !important; }
.tool-app .flex-shrink-0,
.tool-app .shrink-0 { flex-shrink: 0 !important; }
.tool-app .flex-shrink-1 { flex-shrink: 1 !important; }
.tool-app .flex-1 { flex: 1 1 0% !important; }
.tool-app .flex-none { flex: none !important; }

.tool-app .justify-content-start,
.tool-app .justify-start { justify-content: flex-start !important; }
.tool-app .justify-content-end,
.tool-app .justify-end { justify-content: flex-end !important; }
.tool-app .justify-content-center,
.tool-app .justify-center { justify-content: center !important; }
.tool-app .justify-content-between,
.tool-app .justify-between { justify-content: space-between !important; }
.tool-app .justify-content-around,
.tool-app .justify-around { justify-content: space-around !important; }
.tool-app .justify-content-evenly,
.tool-app .justify-evenly { justify-content: space-evenly !important; }

.tool-app .align-items-start,
.tool-app .items-start { align-items: flex-start !important; }
.tool-app .align-items-center,
.tool-app .items-center { align-items: center !important; }
.tool-app .align-items-end,
.tool-app .items-end { align-items: flex-end !important; }
.tool-app .align-items-baseline,
.tool-app .items-baseline { align-items: baseline !important; }
.tool-app .align-items-stretch,
.tool-app .items-stretch { align-items: stretch !important; }

.tool-app .align-self-start,
.tool-app .self-start { align-self: flex-start !important; }
.tool-app .align-self-center,
.tool-app .self-center { align-self: center !important; }
.tool-app .align-self-end,
.tool-app .self-end { align-self: flex-end !important; }
.tool-app .align-self-stretch,
.tool-app .self-stretch { align-self: stretch !important; }

.tool-app .align-content-start { align-content: flex-start !important; }
.tool-app .align-content-center { align-content: center !important; }
.tool-app .align-content-end { align-content: flex-end !important; }
.tool-app .align-content-between { align-content: space-between !important; }

.tool-app .align-middle { vertical-align: middle !important; }
.tool-app .align-top { vertical-align: top !important; }
.tool-app .align-bottom { vertical-align: bottom !important; }
.tool-app .align-text-bottom { vertical-align: text-bottom !important; }

/* ==========================================================================
   13. Spacing scale (Bootstrap 0-5 + Tailwind 0-12, incl. half steps)
   ========================================================================== */
.tool-app .m-0 { margin: 0 !important; }
.tool-app .m-1 { margin: 4px !important; }
.tool-app .m-2 { margin: 8px !important; }
.tool-app .m-3 { margin: 16px !important; }
.tool-app .m-4 { margin: 24px !important; }
.tool-app .m-5 { margin: 48px !important; }
.tool-app .m-auto { margin: auto !important; }

.tool-app .mt-0 { margin-top: 0 !important; }
.tool-app .mt-1 { margin-top: 4px !important; }
.tool-app .mt-2 { margin-top: 8px !important; }
.tool-app .mt-3 { margin-top: 16px !important; }
.tool-app .mt-4 { margin-top: 24px !important; }
.tool-app .mt-5 { margin-top: 48px !important; }

.tool-app .mb-0 { margin-bottom: 0 !important; }
.tool-app .mb-1 { margin-bottom: 4px !important; }
.tool-app .mb-2 { margin-bottom: 8px !important; }
.tool-app .mb-3 { margin-bottom: 16px !important; }
.tool-app .mb-4 { margin-bottom: 24px !important; }
.tool-app .mb-5 { margin-bottom: 48px !important; }

.tool-app .ms-0 { margin-left: 0 !important; }
.tool-app .ms-1 { margin-left: 4px !important; }
.tool-app .ms-2 { margin-left: 8px !important; }
.tool-app .ms-3 { margin-left: 16px !important; }
.tool-app .ms-auto { margin-left: auto !important; }

.tool-app .me-0 { margin-right: 0 !important; }
.tool-app .me-1 { margin-right: 4px !important; }
.tool-app .me-2 { margin-right: 8px !important; }
.tool-app .me-3 { margin-right: 16px !important; }
.tool-app .me-4 { margin-right: 24px !important; }
.tool-app .me-auto { margin-right: auto !important; }

.tool-app .mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.tool-app .mx-1 { margin-left: 4px !important; margin-right: 4px !important; }
.tool-app .mx-2 { margin-left: 8px !important; margin-right: 8px !important; }
.tool-app .mx-3 { margin-left: 16px !important; margin-right: 16px !important; }
.tool-app .mx-auto { margin-left: auto !important; margin-right: auto !important; }

.tool-app .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.tool-app .my-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
.tool-app .my-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
.tool-app .my-3 { margin-top: 16px !important; margin-bottom: 16px !important; }
.tool-app .my-4 { margin-top: 24px !important; margin-bottom: 24px !important; }

.tool-app .p-0 { padding: 0 !important; }
.tool-app .p-1 { padding: 4px !important; }
.tool-app .p-2 { padding: 8px !important; }
.tool-app .p-3 { padding: 16px !important; }
.tool-app .p-4 { padding: 24px !important; }
.tool-app .p-5 { padding: 40px !important; }

.tool-app .pt-0 { padding-top: 0 !important; }
.tool-app .pt-1 { padding-top: 4px !important; }
.tool-app .pt-2 { padding-top: 8px !important; }
.tool-app .pt-3 { padding-top: 16px !important; }
.tool-app .pt-4 { padding-top: 24px !important; }
.tool-app .pt-5 { padding-top: 40px !important; }

.tool-app .pb-0 { padding-bottom: 0 !important; }
.tool-app .pb-1 { padding-bottom: 4px !important; }
.tool-app .pb-2 { padding-bottom: 8px !important; }
.tool-app .pb-3 { padding-bottom: 16px !important; }
.tool-app .pb-4 { padding-bottom: 24px !important; }
.tool-app .pb-5 { padding-bottom: 40px !important; }

.tool-app .ps-0 { padding-left: 0 !important; }
.tool-app .ps-1 { padding-left: 4px !important; }
.tool-app .ps-2 { padding-left: 8px !important; }
.tool-app .ps-3 { padding-left: 16px !important; }
.tool-app .ps-4 { padding-left: 24px !important; }

.tool-app .pe-0 { padding-right: 0 !important; }
.tool-app .pe-1 { padding-right: 4px !important; }
.tool-app .pe-2 { padding-right: 8px !important; }
.tool-app .pe-3 { padding-right: 16px !important; }
.tool-app .pe-4 { padding-right: 24px !important; }

.tool-app .px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.tool-app .px-1 { padding-left: 4px !important; padding-right: 4px !important; }
.tool-app .px-2 { padding-left: 8px !important; padding-right: 8px !important; }
.tool-app .px-3 { padding-left: 16px !important; padding-right: 16px !important; }
.tool-app .px-4 { padding-left: 24px !important; padding-right: 24px !important; }
.tool-app .px-5 { padding-left: 32px !important; padding-right: 32px !important; }

.tool-app .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.tool-app .py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
.tool-app .py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.tool-app .py-3 { padding-top: 16px !important; padding-bottom: 16px !important; }
.tool-app .py-4 { padding-top: 24px !important; padding-bottom: 24px !important; }
.tool-app .py-5 { padding-top: 32px !important; padding-bottom: 32px !important; }

/* Tailwind fractional steps */
.tool-app .mt-0\.5 { margin-top: 2px !important; }
.tool-app .mt-1\.5 { margin-top: 6px !important; }
.tool-app .mb-0\.5 { margin-bottom: 2px !important; }
.tool-app .mb-1\.5 { margin-bottom: 6px !important; }
.tool-app .p-0\.5 { padding: 2px !important; }
.tool-app .p-1\.5 { padding: 6px !important; }
.tool-app .p-2\.5 { padding: 10px !important; }
.tool-app .p-3\.5 { padding: 14px !important; }
.tool-app .px-2\.5 { padding-left: 10px !important; padding-right: 10px !important; }
.tool-app .py-1\.5 { padding-top: 6px !important; padding-bottom: 6px !important; }
.tool-app .py-2\.5 { padding-top: 10px !important; padding-bottom: 10px !important; }
.tool-app .gap-0\.5 { gap: 2px !important; }
.tool-app .gap-1\.5 { gap: 6px !important; }
.tool-app .gap-2\.5 { gap: 10px !important; }

/* Responsive spacing used by dashboards */
@media (min-width: 768px) {
    .tool-app .p-md-0 { padding: 0 !important; }
    .tool-app .p-md-2 { padding: 8px !important; }
    .tool-app .p-md-3 { padding: 16px !important; }
    .tool-app .p-md-4 { padding: 24px !important; }
    .tool-app .p-md-5 { padding: 40px !important; }
    .tool-app .px-md-4 { padding-left: 24px !important; padding-right: 24px !important; }
    .tool-app .py-md-4 { padding-top: 24px !important; padding-bottom: 24px !important; }
    .tool-app .mb-md-0 { margin-bottom: 0 !important; }
    .tool-app .mb-md-3 { margin-bottom: 16px !important; }
    .tool-app .mt-md-0 { margin-top: 0 !important; }
    .tool-app .justify-content-md-end { justify-content: flex-end !important; }
    .tool-app .text-md-start { text-align: left !important; }
    .tool-app .text-md-end { text-align: right !important; }
}

/* ==========================================================================
   14. Gaps
   ========================================================================== */
.tool-app .gap-0 { gap: 0 !important; }
.tool-app .gap-1 { gap: 4px !important; }
.tool-app .gap-2 { gap: 8px !important; }
.tool-app .gap-3 { gap: 16px !important; }
.tool-app .gap-4 { gap: 24px !important; }
.tool-app .gap-5 { gap: 32px !important; }
.tool-app .gap-6 { gap: 40px !important; }
.tool-app .gap-8 { gap: 48px !important; }

.tool-app .gap-x-2 { column-gap: 8px !important; }
.tool-app .gap-x-3 { column-gap: 16px !important; }
.tool-app .gap-y-2 { row-gap: 8px !important; }
.tool-app .gap-y-3 { row-gap: 16px !important; }

/* ==========================================================================
   15. Typography
   ========================================================================== */
.tool-app .small { font-size: 12.5px !important; }
.tool-app .text-xs { font-size: 11.5px !important; line-height: 1.5 !important; }
.tool-app .text-sm { font-size: 13px !important; line-height: 1.55 !important; }
.tool-app .text-base { font-size: 14px !important; }
.tool-app .text-lg { font-size: 16px !important; }
.tool-app .text-xl { font-size: 18px !important; }
.tool-app .text-2xl { font-size: 22px !important; }
.tool-app .text-3xl { font-size: 26px !important; }
.tool-app .text-\[9px\] { font-size: 9px !important; }
.tool-app .text-\[10px\] { font-size: 10px !important; line-height: 1.5 !important; }
.tool-app .text-\[11px\] { font-size: 11px !important; line-height: 1.5 !important; }
.tool-app .text-\[12px\] { font-size: 12px !important; }
.tool-app .text-\[13px\] { font-size: 13px !important; }

.tool-app .fs-1 { font-size: 2.5rem !important; line-height: 1.2 !important; }
.tool-app .fs-2 { font-size: 2rem !important; line-height: 1.25 !important; }
.tool-app .fs-3 { font-size: 1.75rem !important; line-height: 1.3 !important; }
.tool-app .fs-4 { font-size: 1.5rem !important; line-height: 1.35 !important; }
.tool-app .fs-5 { font-size: 1.25rem !important; line-height: 1.4 !important; }
.tool-app .fs-6 { font-size: 1rem !important; line-height: 1.5 !important; }

.tool-app .fw-light { font-weight: 300 !important; }
.tool-app .fw-normal,
.tool-app .font-normal { font-weight: 400 !important; }
.tool-app .fw-medium,
.tool-app .font-medium { font-weight: 500 !important; }
.tool-app .fw-semibold,
.tool-app .font-semibold { font-weight: 600 !important; }
.tool-app .fw-bold,
.tool-app .font-bold,
.tool-app .font-weight-bold { font-weight: 700 !important; }
.tool-app .fw-bolder,
.tool-app .font-extrabold { font-weight: 800 !important; }
.tool-app .font-black { font-weight: 900 !important; }
.tool-app .fst-italic,
.tool-app .italic { font-style: italic !important; }
.tool-app .font-monospace { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; }

.tool-app .lh-1 { line-height: 1 !important; }
.tool-app .lh-sm { line-height: 1.35 !important; }
.tool-app .lh-base { line-height: 1.6 !important; }
.tool-app .lh-lg { line-height: 1.85 !important; }
.tool-app .leading-tight { line-height: 1.25 !important; }
.tool-app .leading-snug { line-height: 1.375 !important; }
.tool-app .leading-normal { line-height: 1.6 !important; }
.tool-app .leading-relaxed { line-height: 1.75 !important; }

.tool-app .text-start { text-align: left !important; }
.tool-app .text-center { text-align: center !important; }
.tool-app .text-end { text-align: right !important; }
.tool-app .text-justify { text-align: justify !important; }
.tool-app .text-left { text-align: left !important; }
.tool-app .text-right { text-align: right !important; }

.tool-app .text-lowercase,
.tool-app .lowercase { text-transform: lowercase !important; }
.tool-app .text-uppercase,
.tool-app .uppercase { text-transform: uppercase !important; }
.tool-app .text-capitalize,
.tool-app .capitalize { text-transform: capitalize !important; }
.tool-app .normal-case { text-transform: none !important; }

.tool-app .text-nowrap,
.tool-app .whitespace-nowrap { white-space: nowrap !important; }
.tool-app .text-wrap { white-space: normal !important; }
.tool-app .text-break,
.tool-app .break-all { word-break: break-word !important; overflow-wrap: anywhere !important; }
.tool-app .text-truncate,
.tool-app .truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.tool-app .text-decoration-none { text-decoration: none !important; }
.tool-app .text-decoration-underline { text-decoration: underline !important; }
.tool-app .text-decoration-line-through { text-decoration: line-through !important; }
.tool-app .tracking-tight { letter-spacing: -0.02em !important; }
.tool-app .tracking-wide { letter-spacing: 0.03em !important; }
.tool-app .tracking-wider { letter-spacing: 0.06em !important; }
.tool-app .tracking-widest { letter-spacing: 0.12em !important; }

/* ==========================================================================
   16. Sizing
   ========================================================================== */
.tool-app .w-25 { width: 25% !important; }
.tool-app .w-50 { width: 50% !important; }
.tool-app .w-75 { width: 75% !important; }
.tool-app .w-100,
.tool-app .w-full { width: 100% !important; }
.tool-app .w-auto { width: auto !important; }
.tool-app .h-25 { height: 25% !important; }
.tool-app .h-50 { height: 50% !important; }
.tool-app .h-75 { height: 75% !important; }
.tool-app .h-100,
.tool-app .h-full { height: 100% !important; }
.tool-app .h-auto { height: auto !important; }
.tool-app .mw-100 { max-width: 100% !important; }
.tool-app .mh-100 { max-height: 100% !important; }
.tool-app .min-w-0 { min-width: 0 !important; }
.tool-app .min-w-\[130px\] { min-width: 130px !important; }
.tool-app .min-w-\[140px\] { min-width: 140px !important; }
.tool-app .max-w-6xl { max-width: 72rem !important; }
.tool-app .max-w-7xl { max-width: 80rem !important; }
.tool-app .max-h-56 { max-height: 14rem !important; }
.tool-app .min-vh-100 { min-height: 100vh !important; }

.tool-app .w-2 { width: 8px !important; }
.tool-app .h-2 { height: 8px !important; }
.tool-app .w-2\.5 { width: 10px !important; }
.tool-app .h-2\.5 { height: 10px !important; }
.tool-app .w-3 { width: 12px !important; }
.tool-app .h-3 { height: 12px !important; }
.tool-app .w-4 { width: 16px !important; }
.tool-app .h-4 { height: 16px !important; }
.tool-app .w-8 { width: 32px !important; }
.tool-app .h-8 { height: 32px !important; }
.tool-app .w-16 { width: 64px !important; }
.tool-app .h-16 { height: 64px !important; }
.tool-app .w-24 { width: 96px !important; }
.tool-app .w-28 { width: 112px !important; }
.tool-app .w-36 { width: 144px !important; }
.tool-app .h-36 { height: 144px !important; }
.tool-app .w-48 { width: 192px !important; }
.tool-app .h-48 { height: 192px !important; }

/* ==========================================================================
   17. Colors - mapped onto the single palette so every tool matches
   ========================================================================== */
.tool-app .text-dark,
.tool-app .text-slate-900,
.tool-app .text-slate-800,
.tool-app .text-body { color: var(--tu-ink) !important; }

.tool-app .text-slate-700,
.tool-app .text-secondary { color: var(--tu-body) !important; }

.tool-app .text-muted,
.tool-app .text-slate-600,
.tool-app .text-slate-500 { color: var(--tu-muted) !important; }

.tool-app .text-slate-400,
.tool-app .text-light { color: var(--tu-faint) !important; }

.tool-app .text-white,
.tool-app .text-white-50,
.tool-app .text-white\/50,
.tool-app .text-white\/60,
.tool-app .text-white\/70 { color: var(--tu-ink) !important; }

.tool-app .text-black-50 { color: var(--tu-muted) !important; }
.tool-app .text-black { color: var(--tu-ink) !important; }

.tool-app .text-primary,
.tool-app .text-blue-500,
.tool-app .text-blue-600,
.tool-app .text-indigo-600 { color: var(--tu-primary) !important; }

.tool-app .text-success,
.tool-app .text-emerald-500,
.tool-app .text-emerald-600,
.tool-app .text-emerald-700,
.tool-app .text-green-600 { color: var(--tu-success) !important; }

.tool-app .text-danger,
.tool-app .text-rose-500,
.tool-app .text-rose-600,
.tool-app .text-rose-700,
.tool-app .text-red-600 { color: var(--tu-danger) !important; }

.tool-app .text-warning,
.tool-app .text-amber-500,
.tool-app .text-amber-600,
.tool-app .text-amber-700,
.tool-app .text-yellow-600 { color: var(--tu-warning) !important; }

.tool-app .text-info,
.tool-app .text-cyan-600,
.tool-app .text-cyan-700,
.tool-app .text-sky-600 { color: var(--tu-info) !important; }

.tool-app .text-purple-500,
.tool-app .text-purple-600,
.tool-app .text-purple-700,
.tool-app .text-violet-600,
.tool-app .text-indigo-500,
.tool-app .text-fuchsia-600 { color: #7c3aed !important; }

/* Backgrounds */
.tool-app .bg-white,
.tool-app .bg-white\/5,
.tool-app .bg-white\/10,
.tool-app .bg-white\/20,
.tool-app .bg-white\/80 { background-color: #ffffff !important; }

.tool-app .bg-light,
.tool-app .bg-slate-50,
.tool-app .bg-gray-50,
.tool-app .bg-slate-100,
.tool-app .bg-slate-100\/80 { background-color: var(--tu-sunken) !important; }

.tool-app .bg-slate-200 { background-color: var(--tu-muted-fill) !important; }

.tool-app .bg-dark,
.tool-app .bg-black,
.tool-app .bg-slate-700,
.tool-app .bg-slate-800,
.tool-app .bg-slate-900,
.tool-app .bg-gray-900 { background-color: var(--tu-sunken) !important; }

.tool-app .bg-primary,
.tool-app .bg-blue-600,
.tool-app .bg-blue-700 { background-color: var(--tu-primary-soft) !important; color: var(--tu-primary) !important; }

.tool-app .bg-success,
.tool-app .bg-emerald-50,
.tool-app .bg-emerald-600,
.tool-app .bg-emerald-700 { background-color: var(--tu-success-soft) !important; }

.tool-app .bg-danger,
.tool-app .bg-rose-50,
.tool-app .bg-red-50 { background-color: var(--tu-danger-soft) !important; }

.tool-app .bg-warning,
.tool-app .bg-amber-50 { background-color: var(--tu-warning-soft) !important; }

.tool-app .bg-info,
.tool-app .bg-cyan-50,
.tool-app .bg-sky-50 { background-color: var(--tu-info-soft) !important; }

.tool-app .bg-purple-50,
.tool-app .bg-violet-50,
.tool-app .bg-indigo-50 { background-color: #f5f3ff !important; }

.tool-app .bg-gradient-to-r,
.tool-app .bg-gradient-to-br,
.tool-app .bg-gradient-to-b,
.tool-app .bg-gradient-to-l { background-image: none !important; background-color: #ffffff !important; }

.tool-app .bg-opacity-10,
.tool-app .bg-opacity-25,
.tool-app .bg-opacity-50 { opacity: 1; }

/* Gradient color stops: flatten to the neutral surface */
.tool-app .from-slate-900,
.tool-app .from-slate-800,
.tool-app .from-blue-50,
.tool-app .to-slate-900,
.tool-app .to-slate-950,
.tool-app .to-slate-800\/80,
.tool-app .to-indigo-50,
.tool-app .via-indigo-950 {
    --tu-unused: 1;
}

/* ==========================================================================
   18. Borders, radius, shadows, opacity
   ========================================================================== */
.tool-app .border { border: 1px solid var(--tu-border) !important; }
.tool-app .border-0 { border: 0 !important; }
.tool-app .border-2 { border-width: 2px !important; border-style: solid !important; border-color: var(--tu-border) !important; }
.tool-app .border-4 { border-width: 4px !important; border-style: solid !important; border-color: var(--tu-border) !important; }

.tool-app .border-top { border: 0 !important; border-top: 1px solid var(--tu-border) !important; }
.tool-app .border-bottom { border: 0 !important; border-bottom: 1px solid var(--tu-border) !important; }
.tool-app .border-start { border: 0 !important; border-left: 1px solid var(--tu-border) !important; }
.tool-app .border-end { border: 0 !important; border-right: 1px solid var(--tu-border) !important; }
.tool-app .border-top-0 { border-top: 0 !important; }
.tool-app .border-bottom-0 { border-bottom: 0 !important; }
.tool-app .border-start-0 { border-left: 0 !important; }
.tool-app .border-end-0 { border-right: 0 !important; }

.tool-app .border-secondary { border-color: var(--tu-border) !important; }
.tool-app .border-white,
.tool-app .border-white\/10,
.tool-app .border-white\/20 { border-color: var(--tu-border) !important; }
.tool-app .border-slate-200,
.tool-app .border-slate-200\/80,
.tool-app .border-slate-300 { border-color: var(--tu-border) !important; }
.tool-app .border-slate-700,
.tool-app .border-slate-700\/80 { border-color: var(--tu-border) !important; }
.tool-app .border-primary { border-color: var(--tu-primary-border) !important; }
.tool-app .border-success { border-color: #a7f3d0 !important; }
.tool-app .border-danger { border-color: #fecaca !important; }
.tool-app .border-warning { border-color: #fde68a !important; }
.tool-app .border-info { border-color: #a5f3fc !important; }
.tool-app .border-indigo-500\/40,
.tool-app .border-emerald-500\/40,
.tool-app .border-amber-500\/40,
.tool-app .border-orange-500\/40 { border-color: var(--tu-border) !important; }

.tool-app .rounded-0 { border-radius: 0 !important; }
.tool-app .rounded-1 { border-radius: 6px !important; }
.tool-app .rounded,
.tool-app .rounded-2 { border-radius: var(--tu-radius-xs) !important; }
.tool-app .rounded-3,
.tool-app .rounded-lg { border-radius: var(--tu-radius) !important; }
.tool-app .rounded-4,
.tool-app .rounded-xl { border-radius: var(--tu-radius-lg) !important; }
.tool-app .rounded-5,
.tool-app .rounded-2xl,
.tool-app .rounded-3xl { border-radius: var(--tu-radius-xl) !important; }
.tool-app .rounded-circle { border-radius: 50% !important; }
.tool-app .rounded-pill,
.tool-app .rounded-full { border-radius: var(--tu-radius-pill) !important; }

.tool-app .shadow-none { box-shadow: none !important; }
.tool-app .shadow-xs,
.tool-app .shadow-sm { box-shadow: var(--tu-shadow-sm) !important; }
.tool-app .shadow,
.tool-app .shadow-md { box-shadow: var(--tu-shadow-md) !important; }
.tool-app .shadow-lg { box-shadow: var(--tu-shadow-lg) !important; }

.tool-app .opacity-0 { opacity: 0 !important; }
.tool-app .opacity-10 { opacity: 0.1 !important; }
.tool-app .opacity-25 { opacity: 0.25 !important; }
.tool-app .opacity-40 { opacity: 0.4 !important; }
.tool-app .opacity-50 { opacity: 0.5 !important; }
.tool-app .opacity-75 { opacity: 0.75 !important; }
.tool-app .opacity-100 { opacity: 1 !important; }

/* ==========================================================================
   19. Positioning, overflow, misc
   ========================================================================== */
.tool-app .position-static { position: static !important; }
.tool-app .position-relative { position: relative !important; }
.tool-app .position-absolute { position: absolute !important; }
.tool-app .position-fixed { position: fixed !important; }
.tool-app .position-sticky { position: sticky !important; }

.tool-app .top-0 { top: 0 !important; }
.tool-app .top-50 { top: 50% !important; }
.tool-app .top-100 { top: 100% !important; }
.tool-app .bottom-0 { bottom: 0 !important; }
.tool-app .start-0,
.tool-app .left-0 { left: 0 !important; }
.tool-app .start-50,
.tool-app .left-1\/2 { left: 50% !important; }
.tool-app .end-0,
.tool-app .right-0 { right: 0 !important; }
.tool-app .top-1\/2 { top: 50% !important; }
.tool-app .left-3 { left: 12px !important; }
.tool-app .left-3\.5 { left: 14px !important; }
.tool-app .right-3 { right: 12px !important; }
.tool-app .inset-y-0 { top: 0 !important; bottom: 0 !important; }
.tool-app .-translate-y-1\/2 { transform: translateY(-50%) !important; }
.tool-app .-translate-x-1\/2 { transform: translateX(-50%) !important; }
.tool-app .translate-middle {
    transform: translate(-50%, -50%) !important;
}

.tool-app .overflow-hidden { overflow: hidden !important; }
.tool-app .overflow-auto { overflow: auto !important; }
.tool-app .overflow-x-auto { overflow-x: auto !important; }
.tool-app .overflow-y-auto { overflow-y: auto !important; }
.tool-app .overflow-visible { overflow: visible !important; }

.tool-app .z-0 { z-index: 0 !important; }
.tool-app .z-1 { z-index: 1 !important; }
.tool-app .z-2 { z-index: 2 !important; }
.tool-app .z-3 { z-index: 3 !important; }
.tool-app .z-10 { z-index: 10 !important; }
.tool-app .z-20 { z-index: 20 !important; }
.tool-app .z-50 { z-index: 50 !important; }

.tool-app .float-start { float: left !important; }
.tool-app .float-end { float: right !important; }
.tool-app .float-none { float: none !important; }
.tool-app .visible { visibility: visible !important; }
.tool-app .invisible { visibility: hidden !important; }
.tool-app .cursor-pointer { cursor: pointer !important; }
.tool-app .cursor-not-allowed { cursor: not-allowed !important; }
.tool-app .select-none { user-select: none !important; }
.tool-app .pointer-events-none { pointer-events: none !important; }
.tool-app .sr-only,
.tool-app .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.tool-app .clearfix::after { content: ""; display: table; clear: both; }
.tool-app .object-cover { object-fit: cover !important; }
.tool-app .object-contain { object-fit: contain !important; }

/* Space-between stacked children helper */
.tool-app .space-y-0\.5 > * + * { margin-top: 2px !important; }
.tool-app .space-y-1 > * + * { margin-top: 4px !important; }
.tool-app .space-y-1\.5 > * + * { margin-top: 6px !important; }
.tool-app .space-y-2 > * + * { margin-top: 8px !important; }
.tool-app .space-y-2\.5 > * + * { margin-top: 10px !important; }
.tool-app .space-y-3 > * + * { margin-top: 12px !important; }
.tool-app .space-y-4 > * + * { margin-top: 16px !important; }

/* ==========================================================================
   20. Responsive safety net
   ========================================================================== */
.tool-app img,
.tool-app svg,
.tool-app canvas,
.tool-app video {
    max-width: 100%;
    height: auto;
}

.tool-app .table-responsive,
.tool-app table {
    max-width: 100%;
}

@media (max-width: 575px) {
    /* Buttons may grow to fill a stacked form row, but never a keypad or a
       segmented control - those keep their intrinsic width. */
    .tool-app .d-grid > .btn,
    .tool-app .w-100.btn {
        width: 100%;
    }
    .tool-app .btn {
        max-width: 100%;
    }
    .tool-app .card > .card-body {
        padding: 16px;
    }
    .tool-app h1 { font-size: 24px; }
    .tool-app h2 { font-size: 21px; }
    .tool-app h3 { font-size: 18px; }
    .tool-app .display-5,
    .tool-app .fs-1,
    .tool-app .fs-2 { font-size: 1.85rem !important; }
}

@media (max-width: 991px) {
    .tool-app .nav-link {
        flex: 0 0 auto;
    }
}
/* ==========================================================================
   21. Structural normalisation
   The workspace card is the one and only frame. An engine's own root card
   must not draw a second border or a second padding ring inside it.
   ========================================================================== */
.tool-app .tool-converter-body > .card,
.tool-app .tool-converter-body > .card.mb-4,
.tool-app .tool-converter-body > #results-dashboard > .card {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.tool-app .tool-converter-body > .card > .card-body,
.tool-app .tool-converter-body > .card > .card-body.p-4,
.tool-app .tool-converter-body > .card > .card-body.p-md-5 {
    padding: 0 !important;
}

/* Result cards keep their own surface, but never their own frame colour. */
.tool-app #results-dashboard .card,
.tool-app .row > .col-lg-3 > .card,
.tool-app .row > .col-lg-4 > .card,
.tool-app .row > .col-md-3 > .card,
.tool-app .row > .col-md-4 > .card,
.tool-app .row > .col-sm-6 > .card {
    background: #ffffff !important;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius-lg) !important;
    box-shadow: var(--tu-shadow-sm) !important;
}

/* Metric values stay crisp even when the engine used display-5/display-6. */
.tool-app .display-4 { font-size: 2.6rem !important; font-weight: 800 !important; line-height: 1.15 !important; }
.tool-app .display-5 { font-size: 2.1rem !important; font-weight: 800 !important; line-height: 1.15 !important; }
.tool-app .display-6 { font-size: 1.75rem !important; font-weight: 800 !important; line-height: 1.2 !important; }

/* Toasts: engines show them with jQuery fadeIn, so only reveal on demand. */
.tool-app .toast {
    visibility: hidden;
}

.tool-app .toast.show,
.tool-app .toast[style*="display"] {
    visibility: visible;
}

.tool-app .toast.hide {
    visibility: hidden;
}

/* Form panels used as "controls area" should read as one inset block */
.tool-app .p-3.rounded-3[class*="border"],
.tool-app .p-4.rounded-3[class*="border"] {
    background: var(--tu-sunken) !important;
    border: 1px solid var(--tu-border) !important;
}

/* A native select is sized by its longest option unless it is told otherwise.
   Without this the whole workspace expands on narrow screens. */
.tool-app .form-select,
.tool-app select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Column children may never force the grid wider than its container. */
.tool-app .row > [class*="col-"],
.tool-app .row > * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Tables never inherit a plain white-on-white header */
.tool-app .table-responsive {
    border: 1px solid var(--tu-border);
    background: #ffffff;
}

.tool-app .table-responsive > .table {
    border: 0;
    border-radius: 0;
}

/* Long unbroken strings (URLs, hashes, base64) must not blow out the layout */
.tool-app .tool-converter-body,
.tool-app .card-body,
.tool-app td,
.tool-app .form-control {
    overflow-wrap: anywhere;
}

.tool-app pre,
.tool-app textarea {
    overflow-wrap: normal;
}
/* ==========================================================================
   21b. Tablet & mobile column layout
   At <=992px .tp-tool-layout switches to flex-direction: column. Because it
   also sets align-items: flex-start, every column sized itself to its LONGEST
   content line - one long <select> option was enough to push the workspace
   (and the whole page) far wider than the viewport. That is the layout break
   users see on phones. Columns must span the container instead.
   ========================================================================== */
@media (max-width: 992px) {
    .tp-tool-layout {
        align-items: stretch;
    }

    .tp-tool-layout > .tp-tool-workspace-col,
    .tp-tool-layout > .tp-tool-sidebar-col {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   22. Modal, dropdown, collapse (Bootstrap components the engines use)
   ========================================================================== */
.tool-app .modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1055;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.tool-app .modal.show {
    display: block;
}

.tool-app .modal-dialog {
    position: relative;
    width: auto;
    max-width: 620px;
    margin: 7vh auto;
    padding: 0 16px;
}

.tool-app .modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 14vh);
}

.tool-app .modal-content {
    background: #ffffff;
    border: 1px solid var(--tu-border);
    border-radius: var(--tu-radius-xl);
    box-shadow: var(--tu-shadow-lg);
    overflow: hidden;
    color: var(--tu-body);
}

.tool-app .modal-header,
.tool-app .modal-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tu-border);
}

.tool-app .modal-footer {
    justify-content: flex-end;
    border-bottom: 0;
    border-top: 1px solid var(--tu-border);
    flex-wrap: wrap;
}

.tool-app .modal-header .modal-title,
.tool-app .modal-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
    color: var(--tu-ink);
}

.tool-app .modal-header .btn-close {
    margin-left: auto;
}

.tool-app .modal-body {
    padding: 20px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--tu-body);
    max-height: 70vh;
    overflow-y: auto;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
}

.modal-backdrop.fade {
    opacity: 1;
}

body.modal-open {
    overflow: hidden;
}

/* Dropdowns */
.tool-app .dropdown {
    position: relative;
    display: inline-block;
}

.tool-app .dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1040;
    min-width: 190px;
    padding: 6px;
    margin: 0;
    background: #ffffff;
    border: 1px solid var(--tu-border);
    border-radius: var(--tu-radius);
    box-shadow: var(--tu-shadow-md);
    list-style: none;
}

.tool-app .dropdown-menu.show {
    display: block;
}

.tool-app .dropdown-menu-end {
    left: auto;
    right: 0;
}

.tool-app .dropdown-item {
    display: block;
    padding: 9px 12px;
    border-radius: var(--tu-radius-xs);
    color: var(--tu-body);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.tool-app .dropdown-item:hover,
.tool-app .dropdown-item:focus {
    background: var(--tu-sunken);
    color: var(--tu-ink);
    text-decoration: none;
}

.tool-app .dropdown-divider {
    height: 1px;
    margin: 6px 4px;
    background: var(--tu-border);
}

/* Collapse */
.tool-app .collapse:not(.show) {
    display: none;
}

.tool-app .collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.2s ease;
}

/* Accordion */
.tool-app .accordion-item {
    border: 1px solid var(--tu-border);
    border-radius: var(--tu-radius);
    margin-bottom: 10px;
    overflow: hidden;
    background: #ffffff;
}

.tool-app .accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    background: #ffffff;
    color: var(--tu-ink);
    font-size: 13.5px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.tool-app .accordion-button::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    color: var(--tu-muted);
    transition: transform 0.2s ease;
}

.tool-app .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}

.tool-app .accordion-body {
    padding: 0 16px 16px;
    font-size: 13px;
    color: var(--tu-body);
    border-top: 1px solid var(--tu-border);
    padding-top: 14px;
}
/* ==========================================================================
   23. Final consistency pass
   ========================================================================== */

/* One primary action colour across every tool. Engines used btn-danger as the
   main CTA in most calculators; that reads as an error state. Solid actions
   are the theme blue, destructive outline buttons stay red. */
.tool-app .btn-danger {
    background: var(--tu-primary) !important;
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.5) !important;
}
.tool-app .btn-danger:hover {
    background: var(--tu-primary-dark) !important;
}

/* Secondary text inside formerly-dark tiles must read as secondary. */
.tool-app .text-white-50,
.tool-app .text-white\/50,
.tool-app .text-white\/60,
.tool-app .text-white\/70 {
    color: var(--tu-muted) !important;
}

/* Tables: never let a wide data table push past the workspace. */
.tool-app table {
    table-layout: auto;
    max-width: 100%;
}

.tool-app table th,
.tool-app table td {
    white-space: normal;
    overflow-wrap: anywhere;
}

.tool-app .table-responsive {
    width: 100%;
    max-width: 100%;
}

/* Long select/option labels must not widen a column. */
.tool-app select,
.tool-app .form-select {
    max-width: 100%;
}

/* An engine's hero heading is the loudest element - keep it uniform. */
.tool-app .tool-converter-body > .card h2,
.tool-app #tool-app-workspace > .card h2 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 10px 0 6px;
}

.tool-app .tool-converter-body > .card h2 + p,
.tool-app #tool-app-workspace > .card h2 + p {
    font-size: 14px;
    color: var(--tu-muted) !important;
    max-width: 74ch;
}

/* Pills used as view switchers (engines style them as .nav-pills) */
.tool-app .nav-pills .nav-link.active {
    background: #ffffff !important;
    color: var(--tu-primary) !important;
}

/* Numeric result emphasis */
.tool-app .fs-1,
.tool-app .fs-2,
.tool-app .display-4,
.tool-app .display-5,
.tool-app .display-6 {
    font-family: var(--font-heading);
    letter-spacing: -0.03em;
    color: var(--tu-ink) !important;
}

/* A card that contains another card should not stack two shadows */
.tool-app .card .card {
    box-shadow: none !important;
}

/* Results dashboard: consistent vertical rhythm between tiles and detail */
.tool-app #results-dashboard > .row:last-child,
.tool-app #results-dashboard > div:last-child {
    margin-bottom: 0 !important;
}

/* Icon-only helpers the engines place next to labels */
.tool-app .fas,
.tool-app .far,
.tool-app .fab {
    line-height: 1;
}
/* ==========================================================================
   24. Control geometry lock
   Modules decorate inputs with their own utilities (rounded-xl, bg-slate-50,
   text-sm...). The result was 4 different radii and 2 different fills in the
   same form. These rules make every field in every tool identical.
   ========================================================================== */
.tool-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not(.form-control-sm):not(.form-control-lg):not(.input-sm),
.tool-app select:not(.form-select-sm):not(.form-select-lg),
.tool-app .form-control:not(.form-control-sm):not(.form-control-lg),
.tool-app .form-select:not(.form-select-sm):not(.form-select-lg) {
    min-height: 44px;
    border-radius: var(--tu-radius-sm) !important;
    background-color: #ffffff !important;
    color: var(--tu-ink) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border: 1px solid var(--tu-border) !important;
}

.tool-app textarea,
.tool-app textarea.form-control {
    border-radius: var(--tu-radius-sm) !important;
    background-color: #ffffff !important;
    color: var(--tu-ink) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    border: 1px solid var(--tu-border) !important;
}

/* Small / large stay in the ladder, but on the same palette */
.tool-app .form-control-sm,
.tool-app .form-select-sm,
.tool-app .input-group-sm > .form-control,
.tool-app .input-group-sm > input {
    min-height: 38px;
    border-radius: var(--tu-radius-xs) !important;
    background-color: #ffffff !important;
    color: var(--tu-ink) !important;
    font-size: 13px !important;
    border: 1px solid var(--tu-border) !important;
}

.tool-app .form-control-lg,
.tool-app .form-select-lg {
    min-height: 52px;
    border-radius: var(--tu-radius) !important;
    background-color: #ffffff !important;
    font-size: 15px !important;
    border: 1px solid var(--tu-border) !important;
}

/* Selects keep the chevron after the lock above */
.tool-app select,
.tool-app .form-select {
    padding-right: 38px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M8 11.5 3.5 7l1.06-1.06L8 9.38l3.44-3.44L12.5 7 8 11.5Z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
}

/* Labels always share one rhythm */
.tool-app .form-label,
.tool-app label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--tu-ink);
    margin-bottom: 6px;
}

.tool-app .form-text {
    font-size: 11.5px;
    color: var(--tu-muted) !important;
    margin-top: 6px;
}

/* Bare buttons (chips, toggles, keypads) at least share typography */
.tool-app button,
.tool-app [role="button"] {
    font-family: var(--font-sans);
    font-weight: 600;
    cursor: pointer;
}

/* Icon-only round buttons keep their shape */
.tool-app button.rounded-circle,
.tool-app .btn.rounded-circle {
    border-radius: 50% !important;
    padding: 0 !important;
    width: 38px;
    min-height: 38px;
}
/* ==========================================================================
   25. Tailwind colour utilities - generated mapping
   Generated by the Tool UI generator from the classes the engines actually
   use. Every shade lands on the theme palette so a dark-theme module can no
   longer paint light text on the light workspace.
   ========================================================================== */
.tool-app .bg-slate-50 { background-color: var(--tu-sunken) !important; }
.tool-app .bg-slate-100 { background-color: var(--tu-sunken) !important; }
.tool-app .border-slate-100 { border-color: var(--tu-border) !important; }
.tool-app .bg-slate-100\/80 { background-color: var(--tu-sunken) !important; }
.tool-app .text-slate-200 { color: var(--tu-faint) !important; }
.tool-app .bg-slate-200 { background-color: var(--tu-sunken) !important; }
.tool-app .border-slate-200 { border-color: var(--tu-border) !important; }
.tool-app .border-slate-200\/60 { border-color: var(--tu-border) !important; }
.tool-app .border-slate-200\/80 { border-color: var(--tu-border) !important; }
.tool-app .text-slate-300 { color: var(--tu-muted) !important; }
.tool-app .border-slate-300 { border-color: var(--tu-border) !important; }
.tool-app .text-slate-400 { color: var(--tu-muted) !important; }
.tool-app .bg-slate-400 { background-color: var(--tu-sunken) !important; }
.tool-app .text-slate-500 { color: var(--tu-body) !important; }
.tool-app .text-slate-600 { color: var(--tu-body) !important; }
.tool-app .border-slate-600 { border-color: var(--tu-border) !important; }
.tool-app .text-slate-700 { color: var(--tu-ink) !important; }
.tool-app .bg-slate-700 { background-color: var(--tu-sunken) !important; }
.tool-app .border-slate-700 { border-color: var(--tu-border) !important; }
.tool-app .border-slate-700\/60 { border-color: var(--tu-border) !important; }
.tool-app .bg-slate-700\/80 { background-color: var(--tu-sunken) !important; }
.tool-app .text-slate-800 { color: var(--tu-ink) !important; }
.tool-app .bg-slate-800 { background-color: var(--tu-sunken) !important; }
.tool-app .border-slate-800 { border-color: var(--tu-border) !important; }
.tool-app .text-slate-900 { color: var(--tu-ink) !important; }
.tool-app .bg-slate-900 { background-color: var(--tu-sunken) !important; }
.tool-app .bg-slate-900\/90 { background-color: var(--tu-sunken) !important; }
.tool-app .text-slate-950 { color: var(--tu-ink) !important; }
.tool-app .bg-slate-950 { background-color: var(--tu-sunken) !important; }
.tool-app .bg-blue-50 { background-color: var(--tu-primary-soft) !important; }
.tool-app .bg-blue-50\/70 { background-color: var(--tu-primary-soft) !important; }
.tool-app .text-blue-100 { color: var(--tu-primary) !important; }
.tool-app .bg-blue-100 { background-color: var(--tu-primary-soft) !important; }
.tool-app .border-blue-100 { border-color: var(--tu-primary-border) !important; }
.tool-app .text-blue-200 { color: var(--tu-primary) !important; }
.tool-app .border-blue-200\/60 { border-color: var(--tu-primary-border) !important; }
.tool-app .text-blue-200\/70 { color: var(--tu-primary) !important; }
.tool-app .text-blue-200\/80 { color: var(--tu-primary) !important; }
.tool-app .text-blue-300 { color: var(--tu-primary) !important; }
.tool-app .text-blue-400 { color: var(--tu-primary) !important; }
.tool-app .bg-blue-400 { background-color: var(--tu-primary-soft) !important; }
.tool-app .text-blue-500 { color: var(--tu-primary) !important; }
.tool-app .bg-blue-500 { background-color: var(--tu-primary-soft) !important; }
.tool-app .text-blue-600 { color: var(--tu-primary) !important; }
.tool-app .bg-blue-600 { background-color: var(--tu-primary-soft) !important; }
.tool-app .border-blue-600 { border-color: var(--tu-primary-border) !important; }
.tool-app .text-blue-700 { color: var(--tu-primary-dark) !important; }
.tool-app .text-blue-800 { color: var(--tu-primary-dark) !important; }
.tool-app .text-blue-900 { color: var(--tu-primary-dark) !important; }
.tool-app .bg-blue-900 { background-color: var(--tu-primary-border) !important; }
.tool-app .bg-indigo-50 { background-color: #eef2ff !important; }
.tool-app .bg-indigo-50\/60 { background-color: #eef2ff !important; }
.tool-app .text-indigo-100 { color: #4f46e5 !important; }
.tool-app .bg-indigo-100 { background-color: #eef2ff !important; }
.tool-app .border-indigo-100 { border-color: #c7d2fe !important; }
.tool-app .text-indigo-200 { color: #4f46e5 !important; }
.tool-app .border-indigo-200 { border-color: #c7d2fe !important; }
.tool-app .text-indigo-200\/70 { color: #4f46e5 !important; }
.tool-app .text-indigo-300 { color: #4f46e5 !important; }
.tool-app .text-indigo-400 { color: #4f46e5 !important; }
.tool-app .bg-indigo-400 { background-color: #eef2ff !important; }
.tool-app .text-indigo-500 { color: #4f46e5 !important; }
.tool-app .bg-indigo-500 { background-color: #eef2ff !important; }
.tool-app .border-indigo-500 { border-color: #c7d2fe !important; }
.tool-app .text-indigo-600 { color: #4f46e5 !important; }
.tool-app .bg-indigo-600 { background-color: #eef2ff !important; }
.tool-app .text-indigo-700 { color: #4338ca !important; }
.tool-app .bg-indigo-700\/60 { background-color: #c7d2fe !important; }
.tool-app .text-indigo-900 { color: #4338ca !important; }
.tool-app .bg-indigo-900\/60 { background-color: #c7d2fe !important; }
.tool-app .text-indigo-950 { color: #4338ca !important; }
.tool-app .bg-violet-50 { background-color: #f5f3ff !important; }
.tool-app .bg-violet-50\/60 { background-color: #f5f3ff !important; }
.tool-app .bg-violet-100 { background-color: #f5f3ff !important; }
.tool-app .border-violet-100 { border-color: #ddd6fe !important; }
.tool-app .text-violet-200\/70 { color: #7c3aed !important; }
.tool-app .text-violet-300 { color: #7c3aed !important; }
.tool-app .text-violet-400 { color: #7c3aed !important; }
.tool-app .text-violet-600 { color: #7c3aed !important; }
.tool-app .bg-violet-600 { background-color: #f5f3ff !important; }
.tool-app .text-violet-700 { color: #6d28d9 !important; }
.tool-app .text-violet-800 { color: #6d28d9 !important; }
.tool-app .text-violet-900 { color: #6d28d9 !important; }
.tool-app .bg-purple-50 { background-color: #faf5ff !important; }
.tool-app .bg-purple-100 { background-color: #faf5ff !important; }
.tool-app .border-purple-200 { border-color: #e9d5ff !important; }
.tool-app .text-purple-300 { color: #7c3aed !important; }
.tool-app .text-purple-400 { color: #7c3aed !important; }
.tool-app .bg-purple-400 { background-color: #faf5ff !important; }
.tool-app .text-purple-500 { color: #7c3aed !important; }
.tool-app .text-purple-600 { color: #7c3aed !important; }
.tool-app .text-purple-700 { color: #6d28d9 !important; }
.tool-app .text-purple-800 { color: #6d28d9 !important; }
.tool-app .bg-rose-50 { background-color: var(--tu-danger-soft) !important; }
.tool-app .bg-rose-50\/70 { background-color: var(--tu-danger-soft) !important; }
.tool-app .bg-rose-100 { background-color: var(--tu-danger-soft) !important; }
.tool-app .border-rose-100 { border-color: #fecaca !important; }
.tool-app .border-rose-200 { border-color: #fecaca !important; }
.tool-app .text-rose-200\/70 { color: var(--tu-danger) !important; }
.tool-app .text-rose-200\/80 { color: var(--tu-danger) !important; }
.tool-app .text-rose-300 { color: var(--tu-danger) !important; }
.tool-app .text-rose-400 { color: var(--tu-danger) !important; }
.tool-app .text-rose-500 { color: var(--tu-danger) !important; }
.tool-app .text-rose-600 { color: var(--tu-danger) !important; }
.tool-app .bg-rose-600 { background-color: var(--tu-danger-soft) !important; }
.tool-app .bg-rose-600\/80 { background-color: var(--tu-danger-soft) !important; }
.tool-app .text-rose-700 { color: #b91c1c !important; }
.tool-app .text-rose-800 { color: #b91c1c !important; }
.tool-app .text-rose-900 { color: #b91c1c !important; }
.tool-app .bg-orange-50 { background-color: var(--tu-warning-soft) !important; }
.tool-app .bg-orange-50\/60 { background-color: var(--tu-warning-soft) !important; }
.tool-app .text-orange-100 { color: #c2410c !important; }
.tool-app .bg-orange-100 { background-color: var(--tu-warning-soft) !important; }
.tool-app .border-orange-100 { border-color: #fed7aa !important; }
.tool-app .text-orange-200 { color: #c2410c !important; }
.tool-app .border-orange-200 { border-color: #fed7aa !important; }
.tool-app .text-orange-300 { color: #c2410c !important; }
.tool-app .text-orange-500 { color: #c2410c !important; }
.tool-app .text-orange-600 { color: #c2410c !important; }
.tool-app .bg-orange-600 { background-color: var(--tu-warning-soft) !important; }
.tool-app .text-orange-700 { color: #9a3412 !important; }
.tool-app .bg-orange-800\/60 { background-color: #fed7aa !important; }
.tool-app .bg-amber-50 { background-color: var(--tu-warning-soft) !important; }
.tool-app .bg-amber-50\/60 { background-color: var(--tu-warning-soft) !important; }
.tool-app .text-amber-100 { color: var(--tu-warning) !important; }
.tool-app .border-amber-100 { border-color: #fde68a !important; }
.tool-app .text-amber-200 { color: var(--tu-warning) !important; }
.tool-app .border-amber-200 { border-color: #fde68a !important; }
.tool-app .bg-amber-200\/60 { background-color: var(--tu-warning-soft) !important; }
.tool-app .text-amber-300 { color: var(--tu-warning) !important; }
.tool-app .border-amber-300 { border-color: #fde68a !important; }
.tool-app .text-amber-400 { color: var(--tu-warning) !important; }
.tool-app .bg-amber-400 { background-color: var(--tu-warning-soft) !important; }
.tool-app .text-amber-500 { color: var(--tu-warning) !important; }
.tool-app .bg-amber-500 { background-color: var(--tu-warning-soft) !important; }
.tool-app .border-amber-500 { border-color: #fde68a !important; }
.tool-app .text-amber-600 { color: var(--tu-warning) !important; }
.tool-app .bg-amber-600 { background-color: var(--tu-warning-soft) !important; }
.tool-app .text-amber-700 { color: #92400e !important; }
.tool-app .text-amber-800 { color: #92400e !important; }
.tool-app .bg-amber-800\/60 { background-color: #fde68a !important; }
.tool-app .text-amber-900 { color: #92400e !important; }
.tool-app .text-yellow-300 { color: var(--tu-warning) !important; }
.tool-app .bg-emerald-50 { background-color: var(--tu-success-soft) !important; }
.tool-app .bg-emerald-50\/80 { background-color: var(--tu-success-soft) !important; }
.tool-app .text-emerald-100 { color: var(--tu-success) !important; }
.tool-app .bg-emerald-100 { background-color: var(--tu-success-soft) !important; }
.tool-app .border-emerald-100 { border-color: #a7f3d0 !important; }
.tool-app .text-emerald-200 { color: var(--tu-success) !important; }
.tool-app .border-emerald-200 { border-color: #a7f3d0 !important; }
.tool-app .text-emerald-200\/70 { color: var(--tu-success) !important; }
.tool-app .text-emerald-200\/80 { color: var(--tu-success) !important; }
.tool-app .text-emerald-300 { color: var(--tu-success) !important; }
.tool-app .text-emerald-400 { color: var(--tu-success) !important; }
.tool-app .bg-emerald-400 { background-color: var(--tu-success-soft) !important; }
.tool-app .text-emerald-500 { color: var(--tu-success) !important; }
.tool-app .bg-emerald-500 { background-color: var(--tu-success-soft) !important; }
.tool-app .text-emerald-600 { color: var(--tu-success) !important; }
.tool-app .bg-emerald-600 { background-color: var(--tu-success-soft) !important; }
.tool-app .border-emerald-600 { border-color: #a7f3d0 !important; }
.tool-app .text-emerald-700 { color: #047857 !important; }
.tool-app .text-emerald-800 { color: #047857 !important; }
.tool-app .bg-emerald-800 { background-color: #a7f3d0 !important; }
.tool-app .bg-emerald-800\/60 { background-color: #a7f3d0 !important; }
.tool-app .text-emerald-900 { color: #047857 !important; }
.tool-app .bg-teal-50 { background-color: #f0fdfa !important; }
.tool-app .bg-teal-50\/80 { background-color: #f0fdfa !important; }
.tool-app .text-teal-100 { color: #0f766e !important; }
.tool-app .bg-teal-100 { background-color: #f0fdfa !important; }
.tool-app .border-teal-200 { border-color: #99f6e4 !important; }
.tool-app .text-teal-200\/70 { color: #0f766e !important; }
.tool-app .text-teal-300 { color: #0f766e !important; }
.tool-app .text-teal-400 { color: #0f766e !important; }
.tool-app .text-teal-500 { color: #0f766e !important; }
.tool-app .bg-teal-500 { background-color: #f0fdfa !important; }
.tool-app .text-teal-600 { color: #0f766e !important; }
.tool-app .bg-teal-600 { background-color: #f0fdfa !important; }
.tool-app .text-teal-700 { color: #115e59 !important; }
.tool-app .text-teal-800 { color: #115e59 !important; }
.tool-app .bg-cyan-50 { background-color: var(--tu-info-soft) !important; }
.tool-app .text-cyan-300 { color: var(--tu-info) !important; }
.tool-app .text-cyan-400 { color: var(--tu-info) !important; }
.tool-app .bg-cyan-400 { background-color: var(--tu-info-soft) !important; }
.tool-app .bg-cyan-500 { background-color: var(--tu-info-soft) !important; }
.tool-app .text-cyan-600 { color: var(--tu-info) !important; }
.tool-app .text-cyan-700 { color: #0e7490 !important; }
.tool-app .text-sky-300 { color: #0284c7 !important; }
.tool-app .text-sky-400 { color: #0284c7 !important; }
.tool-app .bg-sky-400 { background-color: var(--tu-info-soft) !important; }
.tool-app .bg-black\/30 { background-color: var(--tu-sunken) !important; }
.tool-app .bg-black\/40 { background-color: var(--tu-sunken) !important; }
/* ==========================================================================
   26. Legacy gradient heroes - unified
   Generated by the Tool UI generator. Modules authored for a dark theme
   used gradients as heroes and CTAs. Structure is preserved; colour is
   re-mapped so every tool presents the same surface and the same CTA.
   ========================================================================== */
.tool-app .profit-btn-primary {
    background: var(--tu-primary) !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.5) !important;
}
.tool-app .profit-btn-primary:hover {
    background: var(--tu-primary-dark) !important;
}
.tool-app .bep-btn-primary {
    background: var(--tu-primary) !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.5) !important;
}
.tool-app .bep-btn-primary:hover {
    background: var(--tu-primary-dark) !important;
}
.tool-app .stax-btn-primary {
    background: var(--tu-primary) !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.5) !important;
}
.tool-app .stax-btn-primary:hover {
    background: var(--tu-primary-dark) !important;
}
.tool-app .mkup-btn-primary {
    background: var(--tu-primary) !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.5) !important;
}
.tool-app .mkup-btn-primary:hover {
    background: var(--tu-primary-dark) !important;
}
.tool-app .disc-btn-primary {
    background: var(--tu-primary) !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.5) !important;
}
.tool-app .disc-btn-primary:hover {
    background: var(--tu-primary-dark) !important;
}
.tool-app .vat-btn-primary {
    background: var(--tu-primary) !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.5) !important;
}
.tool-app .vat-btn-primary:hover {
    background: var(--tu-primary-dark) !important;
}
.tool-app .stat-hero-stddev {
    background: var(--tu-sunken) !important;
    background-image: none !important;
    border: 1px solid var(--tu-border) !important;
    box-shadow: none !important;
    color: var(--tu-body) !important;
}
.tool-app .stat-hero-stddev .text-white, .tool-app .stat-hero-stddev h1, .tool-app .stat-hero-stddev h2, .tool-app .stat-hero-stddev h3, .tool-app .stat-hero-stddev h4, .tool-app .stat-hero-stddev h5 {
    color: var(--tu-ink) !important;
}
.tool-app .stat-hero-var {
    background: var(--tu-sunken) !important;
    background-image: none !important;
    border: 1px solid var(--tu-border) !important;
    box-shadow: none !important;
    color: var(--tu-body) !important;
}
.tool-app .stat-hero-var .text-white, .tool-app .stat-hero-var h1, .tool-app .stat-hero-var h2, .tool-app .stat-hero-var h3, .tool-app .stat-hero-var h4, .tool-app .stat-hero-var h5 {
    color: var(--tu-ink) !important;
}
.tool-app .prob-hero-and {
    background: var(--tu-sunken) !important;
    background-image: none !important;
    border: 1px solid var(--tu-border) !important;
    box-shadow: none !important;
    color: var(--tu-body) !important;
}
.tool-app .prob-hero-and .text-white, .tool-app .prob-hero-and h1, .tool-app .prob-hero-and h2, .tool-app .prob-hero-and h3, .tool-app .prob-hero-and h4, .tool-app .prob-hero-and h5 {
    color: var(--tu-ink) !important;
}
.tool-app .prob-hero-or {
    background: var(--tu-sunken) !important;
    background-image: none !important;
    border: 1px solid var(--tu-border) !important;
    box-shadow: none !important;
    color: var(--tu-body) !important;
}
.tool-app .prob-hero-or .text-white, .tool-app .prob-hero-or h1, .tool-app .prob-hero-or h2, .tool-app .prob-hero-or h3, .tool-app .prob-hero-or h4, .tool-app .prob-hero-or h5 {
    color: var(--tu-ink) !important;
}
.tool-app .ssize-hero-primary {
    background: var(--tu-sunken) !important;
    background-image: none !important;
    border: 1px solid var(--tu-border) !important;
    box-shadow: none !important;
    color: var(--tu-body) !important;
}
.tool-app .ssize-hero-primary .text-white, .tool-app .ssize-hero-primary h1, .tool-app .ssize-hero-primary h2, .tool-app .ssize-hero-primary h3, .tool-app .ssize-hero-primary h4, .tool-app .ssize-hero-primary h5 {
    color: var(--tu-ink) !important;
}
.tool-app .ssize-hero-secondary {
    background: var(--tu-sunken) !important;
    background-image: none !important;
    border: 1px solid var(--tu-border) !important;
    box-shadow: none !important;
    color: var(--tu-body) !important;
}
.tool-app .ssize-hero-secondary .text-white, .tool-app .ssize-hero-secondary h1, .tool-app .ssize-hero-secondary h2, .tool-app .ssize-hero-secondary h3, .tool-app .ssize-hero-secondary h4, .tool-app .ssize-hero-secondary h5 {
    color: var(--tu-ink) !important;
}
.tool-app .moe-hero-primary {
    background: var(--tu-sunken) !important;
    background-image: none !important;
    border: 1px solid var(--tu-border) !important;
    box-shadow: none !important;
    color: var(--tu-body) !important;
}
.tool-app .moe-hero-primary .text-white, .tool-app .moe-hero-primary h1, .tool-app .moe-hero-primary h2, .tool-app .moe-hero-primary h3, .tool-app .moe-hero-primary h4, .tool-app .moe-hero-primary h5 {
    color: var(--tu-ink) !important;
}
.tool-app .moe-hero-secondary {
    background: var(--tu-sunken) !important;
    background-image: none !important;
    border: 1px solid var(--tu-border) !important;
    box-shadow: none !important;
    color: var(--tu-body) !important;
}
.tool-app .moe-hero-secondary .text-white, .tool-app .moe-hero-secondary h1, .tool-app .moe-hero-secondary h2, .tool-app .moe-hero-secondary h3, .tool-app .moe-hero-secondary h4, .tool-app .moe-hero-secondary h5 {
    color: var(--tu-ink) !important;
}
.tool-app .fuel-hero-primary {
    background: var(--tu-sunken) !important;
    background-image: none !important;
    border: 1px solid var(--tu-border) !important;
    box-shadow: none !important;
    color: var(--tu-body) !important;
}
.tool-app .fuel-hero-primary .text-white, .tool-app .fuel-hero-primary h1, .tool-app .fuel-hero-primary h2, .tool-app .fuel-hero-primary h3, .tool-app .fuel-hero-primary h4, .tool-app .fuel-hero-primary h5 {
    color: var(--tu-ink) !important;
}
.tool-app .fuel-hero-secondary {
    background: var(--tu-sunken) !important;
    background-image: none !important;
    border: 1px solid var(--tu-border) !important;
    box-shadow: none !important;
    color: var(--tu-body) !important;
}
.tool-app .fuel-hero-secondary .text-white, .tool-app .fuel-hero-secondary h1, .tool-app .fuel-hero-secondary h2, .tool-app .fuel-hero-secondary h3, .tool-app .fuel-hero-secondary h4, .tool-app .fuel-hero-secondary h5 {
    color: var(--tu-ink) !important;
}
.tool-app .ratio-hero-main {
    background: var(--tu-sunken) !important;
    background-image: none !important;
    border: 1px solid var(--tu-border) !important;
    box-shadow: none !important;
    color: var(--tu-body) !important;
}
.tool-app .ratio-hero-main .text-white, .tool-app .ratio-hero-main h1, .tool-app .ratio-hero-main h2, .tool-app .ratio-hero-main h3, .tool-app .ratio-hero-main h4, .tool-app .ratio-hero-main h5 {
    color: var(--tu-ink) !important;
}
.tool-app .mmm-hero-mean {
    background: var(--tu-sunken) !important;
    background-image: none !important;
    border: 1px solid var(--tu-border) !important;
    box-shadow: none !important;
    color: var(--tu-body) !important;
}
.tool-app .mmm-hero-mean .text-white, .tool-app .mmm-hero-mean h1, .tool-app .mmm-hero-mean h2, .tool-app .mmm-hero-mean h3, .tool-app .mmm-hero-mean h4, .tool-app .mmm-hero-mean h5 {
    color: var(--tu-ink) !important;
}
.tool-app .mmm-hero-median {
    background: var(--tu-sunken) !important;
    background-image: none !important;
    border: 1px solid var(--tu-border) !important;
    box-shadow: none !important;
    color: var(--tu-body) !important;
}
.tool-app .mmm-hero-median .text-white, .tool-app .mmm-hero-median h1, .tool-app .mmm-hero-median h2, .tool-app .mmm-hero-median h3, .tool-app .mmm-hero-median h4, .tool-app .mmm-hero-median h5 {
    color: var(--tu-ink) !important;
}
.tool-app .mmm-hero-mode {
    background: var(--tu-sunken) !important;
    background-image: none !important;
    border: 1px solid var(--tu-border) !important;
    box-shadow: none !important;
    color: var(--tu-body) !important;
}
.tool-app .mmm-hero-mode .text-white, .tool-app .mmm-hero-mode h1, .tool-app .mmm-hero-mode h2, .tool-app .mmm-hero-mode h3, .tool-app .mmm-hero-mode h4, .tool-app .mmm-hero-mode h5 {
    color: var(--tu-ink) !important;
}
.tool-app .pace-hero-primary {
    background: var(--tu-sunken) !important;
    background-image: none !important;
    border: 1px solid var(--tu-border) !important;
    box-shadow: none !important;
    color: var(--tu-body) !important;
}
.tool-app .pace-hero-primary .text-white, .tool-app .pace-hero-primary h1, .tool-app .pace-hero-primary h2, .tool-app .pace-hero-primary h3, .tool-app .pace-hero-primary h4, .tool-app .pace-hero-primary h5 {
    color: var(--tu-ink) !important;
}
.tool-app .pace-hero-secondary {
    background: var(--tu-sunken) !important;
    background-image: none !important;
    border: 1px solid var(--tu-border) !important;
    box-shadow: none !important;
    color: var(--tu-body) !important;
}
.tool-app .pace-hero-secondary .text-white, .tool-app .pace-hero-secondary h1, .tool-app .pace-hero-secondary h2, .tool-app .pace-hero-secondary h3, .tool-app .pace-hero-secondary h4, .tool-app .pace-hero-secondary h5 {
    color: var(--tu-ink) !important;
}
/* ==========================================================================
   27. Flattened heroes - readable text
   Generated by the Tool UI generator. These panels used to be dark, so
   main.css paints their text white. Now that the surface is the workspace
   colour, the text has to follow it - headings ink, detail muted, formulas
   in a white code chip.
   ========================================================================== */
.tool-app .stat-hero-stddev span,
.tool-app .stat-hero-stddev div,
.tool-app .stat-hero-stddev p,
.tool-app .stat-hero-stddev small,
.tool-app .stat-hero-stddev strong,
.tool-app .stat-hero-stddev b,
.tool-app .stat-hero-stddev em,
.tool-app .stat-hero-stddev i,
.tool-app .stat-hero-stddev u,
.tool-app .stat-hero-stddev mark,
.tool-app .stat-hero-stddev cite,
.tool-app .stat-hero-stddev label,
.tool-app .stat-hero-stddev li,
.tool-app .stat-hero-stddev td,
.tool-app .stat-hero-stddev th,
.tool-app .stat-hero-stddev dl,
.tool-app .stat-hero-stddev dt,
.tool-app .stat-hero-stddev dd,
.tool-app .stat-hero-stddev output,
.tool-app .stat-hero-stddev time,
.tool-app .stat-hero-stddev h1,
.tool-app .stat-hero-stddev h2,
.tool-app .stat-hero-stddev h3,
.tool-app .stat-hero-stddev h4,
.tool-app .stat-hero-stddev h5,
.tool-app .stat-hero-stddev h6,
.tool-app .stat-hero-stddev a {
    color: var(--tu-ink) !important;
}
.tool-app .stat-hero-stddev small,
.tool-app .stat-hero-stddev .small,
.tool-app .stat-hero-stddev .text-muted,
.tool-app .stat-hero-stddev .text-white-50,
.tool-app .stat-hero-stddev .text-secondary,
.tool-app .stat-hero-stddev .text-slate-400,
.tool-app .stat-hero-stddev .text-slate-500,
.tool-app .stat-hero-stddev .text-xs {
    color: var(--tu-muted) !important;
}
.tool-app .stat-hero-stddev code,
.tool-app .stat-hero-stddev pre,
.tool-app .stat-hero-stddev samp,
.tool-app .stat-hero-stddev kbd,
.tool-app .stat-hero-stddev tt {
    background: #ffffff !important;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius-xs) !important;
    padding: 2px 7px !important;
    color: var(--tu-ink) !important;
    font-size: 12.5px !important;
}
.tool-app .stat-hero-stddev .text-primary, .tool-app .stat-hero-stddev .text-blue-600 { color: var(--tu-primary) !important; }
.tool-app .stat-hero-stddev .text-success, .tool-app .stat-hero-stddev .text-emerald-600 { color: var(--tu-success) !important; }
.tool-app .stat-hero-stddev .text-danger { color: var(--tu-danger) !important; }
.tool-app .stat-hero-var span,
.tool-app .stat-hero-var div,
.tool-app .stat-hero-var p,
.tool-app .stat-hero-var small,
.tool-app .stat-hero-var strong,
.tool-app .stat-hero-var b,
.tool-app .stat-hero-var em,
.tool-app .stat-hero-var i,
.tool-app .stat-hero-var u,
.tool-app .stat-hero-var mark,
.tool-app .stat-hero-var cite,
.tool-app .stat-hero-var label,
.tool-app .stat-hero-var li,
.tool-app .stat-hero-var td,
.tool-app .stat-hero-var th,
.tool-app .stat-hero-var dl,
.tool-app .stat-hero-var dt,
.tool-app .stat-hero-var dd,
.tool-app .stat-hero-var output,
.tool-app .stat-hero-var time,
.tool-app .stat-hero-var h1,
.tool-app .stat-hero-var h2,
.tool-app .stat-hero-var h3,
.tool-app .stat-hero-var h4,
.tool-app .stat-hero-var h5,
.tool-app .stat-hero-var h6,
.tool-app .stat-hero-var a {
    color: var(--tu-ink) !important;
}
.tool-app .stat-hero-var small,
.tool-app .stat-hero-var .small,
.tool-app .stat-hero-var .text-muted,
.tool-app .stat-hero-var .text-white-50,
.tool-app .stat-hero-var .text-secondary,
.tool-app .stat-hero-var .text-slate-400,
.tool-app .stat-hero-var .text-slate-500,
.tool-app .stat-hero-var .text-xs {
    color: var(--tu-muted) !important;
}
.tool-app .stat-hero-var code,
.tool-app .stat-hero-var pre,
.tool-app .stat-hero-var samp,
.tool-app .stat-hero-var kbd,
.tool-app .stat-hero-var tt {
    background: #ffffff !important;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius-xs) !important;
    padding: 2px 7px !important;
    color: var(--tu-ink) !important;
    font-size: 12.5px !important;
}
.tool-app .stat-hero-var .text-primary, .tool-app .stat-hero-var .text-blue-600 { color: var(--tu-primary) !important; }
.tool-app .stat-hero-var .text-success, .tool-app .stat-hero-var .text-emerald-600 { color: var(--tu-success) !important; }
.tool-app .stat-hero-var .text-danger { color: var(--tu-danger) !important; }
.tool-app .prob-hero-and span,
.tool-app .prob-hero-and div,
.tool-app .prob-hero-and p,
.tool-app .prob-hero-and small,
.tool-app .prob-hero-and strong,
.tool-app .prob-hero-and b,
.tool-app .prob-hero-and em,
.tool-app .prob-hero-and i,
.tool-app .prob-hero-and u,
.tool-app .prob-hero-and mark,
.tool-app .prob-hero-and cite,
.tool-app .prob-hero-and label,
.tool-app .prob-hero-and li,
.tool-app .prob-hero-and td,
.tool-app .prob-hero-and th,
.tool-app .prob-hero-and dl,
.tool-app .prob-hero-and dt,
.tool-app .prob-hero-and dd,
.tool-app .prob-hero-and output,
.tool-app .prob-hero-and time,
.tool-app .prob-hero-and h1,
.tool-app .prob-hero-and h2,
.tool-app .prob-hero-and h3,
.tool-app .prob-hero-and h4,
.tool-app .prob-hero-and h5,
.tool-app .prob-hero-and h6,
.tool-app .prob-hero-and a {
    color: var(--tu-ink) !important;
}
.tool-app .prob-hero-and small,
.tool-app .prob-hero-and .small,
.tool-app .prob-hero-and .text-muted,
.tool-app .prob-hero-and .text-white-50,
.tool-app .prob-hero-and .text-secondary,
.tool-app .prob-hero-and .text-slate-400,
.tool-app .prob-hero-and .text-slate-500,
.tool-app .prob-hero-and .text-xs {
    color: var(--tu-muted) !important;
}
.tool-app .prob-hero-and code,
.tool-app .prob-hero-and pre,
.tool-app .prob-hero-and samp,
.tool-app .prob-hero-and kbd,
.tool-app .prob-hero-and tt {
    background: #ffffff !important;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius-xs) !important;
    padding: 2px 7px !important;
    color: var(--tu-ink) !important;
    font-size: 12.5px !important;
}
.tool-app .prob-hero-and .text-primary, .tool-app .prob-hero-and .text-blue-600 { color: var(--tu-primary) !important; }
.tool-app .prob-hero-and .text-success, .tool-app .prob-hero-and .text-emerald-600 { color: var(--tu-success) !important; }
.tool-app .prob-hero-and .text-danger { color: var(--tu-danger) !important; }
.tool-app .prob-hero-or span,
.tool-app .prob-hero-or div,
.tool-app .prob-hero-or p,
.tool-app .prob-hero-or small,
.tool-app .prob-hero-or strong,
.tool-app .prob-hero-or b,
.tool-app .prob-hero-or em,
.tool-app .prob-hero-or i,
.tool-app .prob-hero-or u,
.tool-app .prob-hero-or mark,
.tool-app .prob-hero-or cite,
.tool-app .prob-hero-or label,
.tool-app .prob-hero-or li,
.tool-app .prob-hero-or td,
.tool-app .prob-hero-or th,
.tool-app .prob-hero-or dl,
.tool-app .prob-hero-or dt,
.tool-app .prob-hero-or dd,
.tool-app .prob-hero-or output,
.tool-app .prob-hero-or time,
.tool-app .prob-hero-or h1,
.tool-app .prob-hero-or h2,
.tool-app .prob-hero-or h3,
.tool-app .prob-hero-or h4,
.tool-app .prob-hero-or h5,
.tool-app .prob-hero-or h6,
.tool-app .prob-hero-or a {
    color: var(--tu-ink) !important;
}
.tool-app .prob-hero-or small,
.tool-app .prob-hero-or .small,
.tool-app .prob-hero-or .text-muted,
.tool-app .prob-hero-or .text-white-50,
.tool-app .prob-hero-or .text-secondary,
.tool-app .prob-hero-or .text-slate-400,
.tool-app .prob-hero-or .text-slate-500,
.tool-app .prob-hero-or .text-xs {
    color: var(--tu-muted) !important;
}
.tool-app .prob-hero-or code,
.tool-app .prob-hero-or pre,
.tool-app .prob-hero-or samp,
.tool-app .prob-hero-or kbd,
.tool-app .prob-hero-or tt {
    background: #ffffff !important;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius-xs) !important;
    padding: 2px 7px !important;
    color: var(--tu-ink) !important;
    font-size: 12.5px !important;
}
.tool-app .prob-hero-or .text-primary, .tool-app .prob-hero-or .text-blue-600 { color: var(--tu-primary) !important; }
.tool-app .prob-hero-or .text-success, .tool-app .prob-hero-or .text-emerald-600 { color: var(--tu-success) !important; }
.tool-app .prob-hero-or .text-danger { color: var(--tu-danger) !important; }
.tool-app .ssize-hero-primary span,
.tool-app .ssize-hero-primary div,
.tool-app .ssize-hero-primary p,
.tool-app .ssize-hero-primary small,
.tool-app .ssize-hero-primary strong,
.tool-app .ssize-hero-primary b,
.tool-app .ssize-hero-primary em,
.tool-app .ssize-hero-primary i,
.tool-app .ssize-hero-primary u,
.tool-app .ssize-hero-primary mark,
.tool-app .ssize-hero-primary cite,
.tool-app .ssize-hero-primary label,
.tool-app .ssize-hero-primary li,
.tool-app .ssize-hero-primary td,
.tool-app .ssize-hero-primary th,
.tool-app .ssize-hero-primary dl,
.tool-app .ssize-hero-primary dt,
.tool-app .ssize-hero-primary dd,
.tool-app .ssize-hero-primary output,
.tool-app .ssize-hero-primary time,
.tool-app .ssize-hero-primary h1,
.tool-app .ssize-hero-primary h2,
.tool-app .ssize-hero-primary h3,
.tool-app .ssize-hero-primary h4,
.tool-app .ssize-hero-primary h5,
.tool-app .ssize-hero-primary h6,
.tool-app .ssize-hero-primary a {
    color: var(--tu-ink) !important;
}
.tool-app .ssize-hero-primary small,
.tool-app .ssize-hero-primary .small,
.tool-app .ssize-hero-primary .text-muted,
.tool-app .ssize-hero-primary .text-white-50,
.tool-app .ssize-hero-primary .text-secondary,
.tool-app .ssize-hero-primary .text-slate-400,
.tool-app .ssize-hero-primary .text-slate-500,
.tool-app .ssize-hero-primary .text-xs {
    color: var(--tu-muted) !important;
}
.tool-app .ssize-hero-primary code,
.tool-app .ssize-hero-primary pre,
.tool-app .ssize-hero-primary samp,
.tool-app .ssize-hero-primary kbd,
.tool-app .ssize-hero-primary tt {
    background: #ffffff !important;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius-xs) !important;
    padding: 2px 7px !important;
    color: var(--tu-ink) !important;
    font-size: 12.5px !important;
}
.tool-app .ssize-hero-primary .text-primary, .tool-app .ssize-hero-primary .text-blue-600 { color: var(--tu-primary) !important; }
.tool-app .ssize-hero-primary .text-success, .tool-app .ssize-hero-primary .text-emerald-600 { color: var(--tu-success) !important; }
.tool-app .ssize-hero-primary .text-danger { color: var(--tu-danger) !important; }
.tool-app .ssize-hero-secondary span,
.tool-app .ssize-hero-secondary div,
.tool-app .ssize-hero-secondary p,
.tool-app .ssize-hero-secondary small,
.tool-app .ssize-hero-secondary strong,
.tool-app .ssize-hero-secondary b,
.tool-app .ssize-hero-secondary em,
.tool-app .ssize-hero-secondary i,
.tool-app .ssize-hero-secondary u,
.tool-app .ssize-hero-secondary mark,
.tool-app .ssize-hero-secondary cite,
.tool-app .ssize-hero-secondary label,
.tool-app .ssize-hero-secondary li,
.tool-app .ssize-hero-secondary td,
.tool-app .ssize-hero-secondary th,
.tool-app .ssize-hero-secondary dl,
.tool-app .ssize-hero-secondary dt,
.tool-app .ssize-hero-secondary dd,
.tool-app .ssize-hero-secondary output,
.tool-app .ssize-hero-secondary time,
.tool-app .ssize-hero-secondary h1,
.tool-app .ssize-hero-secondary h2,
.tool-app .ssize-hero-secondary h3,
.tool-app .ssize-hero-secondary h4,
.tool-app .ssize-hero-secondary h5,
.tool-app .ssize-hero-secondary h6,
.tool-app .ssize-hero-secondary a {
    color: var(--tu-ink) !important;
}
.tool-app .ssize-hero-secondary small,
.tool-app .ssize-hero-secondary .small,
.tool-app .ssize-hero-secondary .text-muted,
.tool-app .ssize-hero-secondary .text-white-50,
.tool-app .ssize-hero-secondary .text-secondary,
.tool-app .ssize-hero-secondary .text-slate-400,
.tool-app .ssize-hero-secondary .text-slate-500,
.tool-app .ssize-hero-secondary .text-xs {
    color: var(--tu-muted) !important;
}
.tool-app .ssize-hero-secondary code,
.tool-app .ssize-hero-secondary pre,
.tool-app .ssize-hero-secondary samp,
.tool-app .ssize-hero-secondary kbd,
.tool-app .ssize-hero-secondary tt {
    background: #ffffff !important;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius-xs) !important;
    padding: 2px 7px !important;
    color: var(--tu-ink) !important;
    font-size: 12.5px !important;
}
.tool-app .ssize-hero-secondary .text-primary, .tool-app .ssize-hero-secondary .text-blue-600 { color: var(--tu-primary) !important; }
.tool-app .ssize-hero-secondary .text-success, .tool-app .ssize-hero-secondary .text-emerald-600 { color: var(--tu-success) !important; }
.tool-app .ssize-hero-secondary .text-danger { color: var(--tu-danger) !important; }
.tool-app .moe-hero-primary span,
.tool-app .moe-hero-primary div,
.tool-app .moe-hero-primary p,
.tool-app .moe-hero-primary small,
.tool-app .moe-hero-primary strong,
.tool-app .moe-hero-primary b,
.tool-app .moe-hero-primary em,
.tool-app .moe-hero-primary i,
.tool-app .moe-hero-primary u,
.tool-app .moe-hero-primary mark,
.tool-app .moe-hero-primary cite,
.tool-app .moe-hero-primary label,
.tool-app .moe-hero-primary li,
.tool-app .moe-hero-primary td,
.tool-app .moe-hero-primary th,
.tool-app .moe-hero-primary dl,
.tool-app .moe-hero-primary dt,
.tool-app .moe-hero-primary dd,
.tool-app .moe-hero-primary output,
.tool-app .moe-hero-primary time,
.tool-app .moe-hero-primary h1,
.tool-app .moe-hero-primary h2,
.tool-app .moe-hero-primary h3,
.tool-app .moe-hero-primary h4,
.tool-app .moe-hero-primary h5,
.tool-app .moe-hero-primary h6,
.tool-app .moe-hero-primary a {
    color: var(--tu-ink) !important;
}
.tool-app .moe-hero-primary small,
.tool-app .moe-hero-primary .small,
.tool-app .moe-hero-primary .text-muted,
.tool-app .moe-hero-primary .text-white-50,
.tool-app .moe-hero-primary .text-secondary,
.tool-app .moe-hero-primary .text-slate-400,
.tool-app .moe-hero-primary .text-slate-500,
.tool-app .moe-hero-primary .text-xs {
    color: var(--tu-muted) !important;
}
.tool-app .moe-hero-primary code,
.tool-app .moe-hero-primary pre,
.tool-app .moe-hero-primary samp,
.tool-app .moe-hero-primary kbd,
.tool-app .moe-hero-primary tt {
    background: #ffffff !important;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius-xs) !important;
    padding: 2px 7px !important;
    color: var(--tu-ink) !important;
    font-size: 12.5px !important;
}
.tool-app .moe-hero-primary .text-primary, .tool-app .moe-hero-primary .text-blue-600 { color: var(--tu-primary) !important; }
.tool-app .moe-hero-primary .text-success, .tool-app .moe-hero-primary .text-emerald-600 { color: var(--tu-success) !important; }
.tool-app .moe-hero-primary .text-danger { color: var(--tu-danger) !important; }
.tool-app .moe-hero-secondary span,
.tool-app .moe-hero-secondary div,
.tool-app .moe-hero-secondary p,
.tool-app .moe-hero-secondary small,
.tool-app .moe-hero-secondary strong,
.tool-app .moe-hero-secondary b,
.tool-app .moe-hero-secondary em,
.tool-app .moe-hero-secondary i,
.tool-app .moe-hero-secondary u,
.tool-app .moe-hero-secondary mark,
.tool-app .moe-hero-secondary cite,
.tool-app .moe-hero-secondary label,
.tool-app .moe-hero-secondary li,
.tool-app .moe-hero-secondary td,
.tool-app .moe-hero-secondary th,
.tool-app .moe-hero-secondary dl,
.tool-app .moe-hero-secondary dt,
.tool-app .moe-hero-secondary dd,
.tool-app .moe-hero-secondary output,
.tool-app .moe-hero-secondary time,
.tool-app .moe-hero-secondary h1,
.tool-app .moe-hero-secondary h2,
.tool-app .moe-hero-secondary h3,
.tool-app .moe-hero-secondary h4,
.tool-app .moe-hero-secondary h5,
.tool-app .moe-hero-secondary h6,
.tool-app .moe-hero-secondary a {
    color: var(--tu-ink) !important;
}
.tool-app .moe-hero-secondary small,
.tool-app .moe-hero-secondary .small,
.tool-app .moe-hero-secondary .text-muted,
.tool-app .moe-hero-secondary .text-white-50,
.tool-app .moe-hero-secondary .text-secondary,
.tool-app .moe-hero-secondary .text-slate-400,
.tool-app .moe-hero-secondary .text-slate-500,
.tool-app .moe-hero-secondary .text-xs {
    color: var(--tu-muted) !important;
}
.tool-app .moe-hero-secondary code,
.tool-app .moe-hero-secondary pre,
.tool-app .moe-hero-secondary samp,
.tool-app .moe-hero-secondary kbd,
.tool-app .moe-hero-secondary tt {
    background: #ffffff !important;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius-xs) !important;
    padding: 2px 7px !important;
    color: var(--tu-ink) !important;
    font-size: 12.5px !important;
}
.tool-app .moe-hero-secondary .text-primary, .tool-app .moe-hero-secondary .text-blue-600 { color: var(--tu-primary) !important; }
.tool-app .moe-hero-secondary .text-success, .tool-app .moe-hero-secondary .text-emerald-600 { color: var(--tu-success) !important; }
.tool-app .moe-hero-secondary .text-danger { color: var(--tu-danger) !important; }
.tool-app .fuel-hero-primary span,
.tool-app .fuel-hero-primary div,
.tool-app .fuel-hero-primary p,
.tool-app .fuel-hero-primary small,
.tool-app .fuel-hero-primary strong,
.tool-app .fuel-hero-primary b,
.tool-app .fuel-hero-primary em,
.tool-app .fuel-hero-primary i,
.tool-app .fuel-hero-primary u,
.tool-app .fuel-hero-primary mark,
.tool-app .fuel-hero-primary cite,
.tool-app .fuel-hero-primary label,
.tool-app .fuel-hero-primary li,
.tool-app .fuel-hero-primary td,
.tool-app .fuel-hero-primary th,
.tool-app .fuel-hero-primary dl,
.tool-app .fuel-hero-primary dt,
.tool-app .fuel-hero-primary dd,
.tool-app .fuel-hero-primary output,
.tool-app .fuel-hero-primary time,
.tool-app .fuel-hero-primary h1,
.tool-app .fuel-hero-primary h2,
.tool-app .fuel-hero-primary h3,
.tool-app .fuel-hero-primary h4,
.tool-app .fuel-hero-primary h5,
.tool-app .fuel-hero-primary h6,
.tool-app .fuel-hero-primary a {
    color: var(--tu-ink) !important;
}
.tool-app .fuel-hero-primary small,
.tool-app .fuel-hero-primary .small,
.tool-app .fuel-hero-primary .text-muted,
.tool-app .fuel-hero-primary .text-white-50,
.tool-app .fuel-hero-primary .text-secondary,
.tool-app .fuel-hero-primary .text-slate-400,
.tool-app .fuel-hero-primary .text-slate-500,
.tool-app .fuel-hero-primary .text-xs {
    color: var(--tu-muted) !important;
}
.tool-app .fuel-hero-primary code,
.tool-app .fuel-hero-primary pre,
.tool-app .fuel-hero-primary samp,
.tool-app .fuel-hero-primary kbd,
.tool-app .fuel-hero-primary tt {
    background: #ffffff !important;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius-xs) !important;
    padding: 2px 7px !important;
    color: var(--tu-ink) !important;
    font-size: 12.5px !important;
}
.tool-app .fuel-hero-primary .text-primary, .tool-app .fuel-hero-primary .text-blue-600 { color: var(--tu-primary) !important; }
.tool-app .fuel-hero-primary .text-success, .tool-app .fuel-hero-primary .text-emerald-600 { color: var(--tu-success) !important; }
.tool-app .fuel-hero-primary .text-danger { color: var(--tu-danger) !important; }
.tool-app .fuel-hero-secondary span,
.tool-app .fuel-hero-secondary div,
.tool-app .fuel-hero-secondary p,
.tool-app .fuel-hero-secondary small,
.tool-app .fuel-hero-secondary strong,
.tool-app .fuel-hero-secondary b,
.tool-app .fuel-hero-secondary em,
.tool-app .fuel-hero-secondary i,
.tool-app .fuel-hero-secondary u,
.tool-app .fuel-hero-secondary mark,
.tool-app .fuel-hero-secondary cite,
.tool-app .fuel-hero-secondary label,
.tool-app .fuel-hero-secondary li,
.tool-app .fuel-hero-secondary td,
.tool-app .fuel-hero-secondary th,
.tool-app .fuel-hero-secondary dl,
.tool-app .fuel-hero-secondary dt,
.tool-app .fuel-hero-secondary dd,
.tool-app .fuel-hero-secondary output,
.tool-app .fuel-hero-secondary time,
.tool-app .fuel-hero-secondary h1,
.tool-app .fuel-hero-secondary h2,
.tool-app .fuel-hero-secondary h3,
.tool-app .fuel-hero-secondary h4,
.tool-app .fuel-hero-secondary h5,
.tool-app .fuel-hero-secondary h6,
.tool-app .fuel-hero-secondary a {
    color: var(--tu-ink) !important;
}
.tool-app .fuel-hero-secondary small,
.tool-app .fuel-hero-secondary .small,
.tool-app .fuel-hero-secondary .text-muted,
.tool-app .fuel-hero-secondary .text-white-50,
.tool-app .fuel-hero-secondary .text-secondary,
.tool-app .fuel-hero-secondary .text-slate-400,
.tool-app .fuel-hero-secondary .text-slate-500,
.tool-app .fuel-hero-secondary .text-xs {
    color: var(--tu-muted) !important;
}
.tool-app .fuel-hero-secondary code,
.tool-app .fuel-hero-secondary pre,
.tool-app .fuel-hero-secondary samp,
.tool-app .fuel-hero-secondary kbd,
.tool-app .fuel-hero-secondary tt {
    background: #ffffff !important;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius-xs) !important;
    padding: 2px 7px !important;
    color: var(--tu-ink) !important;
    font-size: 12.5px !important;
}
.tool-app .fuel-hero-secondary .text-primary, .tool-app .fuel-hero-secondary .text-blue-600 { color: var(--tu-primary) !important; }
.tool-app .fuel-hero-secondary .text-success, .tool-app .fuel-hero-secondary .text-emerald-600 { color: var(--tu-success) !important; }
.tool-app .fuel-hero-secondary .text-danger { color: var(--tu-danger) !important; }
.tool-app .ratio-hero-main span,
.tool-app .ratio-hero-main div,
.tool-app .ratio-hero-main p,
.tool-app .ratio-hero-main small,
.tool-app .ratio-hero-main strong,
.tool-app .ratio-hero-main b,
.tool-app .ratio-hero-main em,
.tool-app .ratio-hero-main i,
.tool-app .ratio-hero-main u,
.tool-app .ratio-hero-main mark,
.tool-app .ratio-hero-main cite,
.tool-app .ratio-hero-main label,
.tool-app .ratio-hero-main li,
.tool-app .ratio-hero-main td,
.tool-app .ratio-hero-main th,
.tool-app .ratio-hero-main dl,
.tool-app .ratio-hero-main dt,
.tool-app .ratio-hero-main dd,
.tool-app .ratio-hero-main output,
.tool-app .ratio-hero-main time,
.tool-app .ratio-hero-main h1,
.tool-app .ratio-hero-main h2,
.tool-app .ratio-hero-main h3,
.tool-app .ratio-hero-main h4,
.tool-app .ratio-hero-main h5,
.tool-app .ratio-hero-main h6,
.tool-app .ratio-hero-main a {
    color: var(--tu-ink) !important;
}
.tool-app .ratio-hero-main small,
.tool-app .ratio-hero-main .small,
.tool-app .ratio-hero-main .text-muted,
.tool-app .ratio-hero-main .text-white-50,
.tool-app .ratio-hero-main .text-secondary,
.tool-app .ratio-hero-main .text-slate-400,
.tool-app .ratio-hero-main .text-slate-500,
.tool-app .ratio-hero-main .text-xs {
    color: var(--tu-muted) !important;
}
.tool-app .ratio-hero-main code,
.tool-app .ratio-hero-main pre,
.tool-app .ratio-hero-main samp,
.tool-app .ratio-hero-main kbd,
.tool-app .ratio-hero-main tt {
    background: #ffffff !important;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius-xs) !important;
    padding: 2px 7px !important;
    color: var(--tu-ink) !important;
    font-size: 12.5px !important;
}
.tool-app .ratio-hero-main .text-primary, .tool-app .ratio-hero-main .text-blue-600 { color: var(--tu-primary) !important; }
.tool-app .ratio-hero-main .text-success, .tool-app .ratio-hero-main .text-emerald-600 { color: var(--tu-success) !important; }
.tool-app .ratio-hero-main .text-danger { color: var(--tu-danger) !important; }
.tool-app .mmm-hero-mean span,
.tool-app .mmm-hero-mean div,
.tool-app .mmm-hero-mean p,
.tool-app .mmm-hero-mean small,
.tool-app .mmm-hero-mean strong,
.tool-app .mmm-hero-mean b,
.tool-app .mmm-hero-mean em,
.tool-app .mmm-hero-mean i,
.tool-app .mmm-hero-mean u,
.tool-app .mmm-hero-mean mark,
.tool-app .mmm-hero-mean cite,
.tool-app .mmm-hero-mean label,
.tool-app .mmm-hero-mean li,
.tool-app .mmm-hero-mean td,
.tool-app .mmm-hero-mean th,
.tool-app .mmm-hero-mean dl,
.tool-app .mmm-hero-mean dt,
.tool-app .mmm-hero-mean dd,
.tool-app .mmm-hero-mean output,
.tool-app .mmm-hero-mean time,
.tool-app .mmm-hero-mean h1,
.tool-app .mmm-hero-mean h2,
.tool-app .mmm-hero-mean h3,
.tool-app .mmm-hero-mean h4,
.tool-app .mmm-hero-mean h5,
.tool-app .mmm-hero-mean h6,
.tool-app .mmm-hero-mean a {
    color: var(--tu-ink) !important;
}
.tool-app .mmm-hero-mean small,
.tool-app .mmm-hero-mean .small,
.tool-app .mmm-hero-mean .text-muted,
.tool-app .mmm-hero-mean .text-white-50,
.tool-app .mmm-hero-mean .text-secondary,
.tool-app .mmm-hero-mean .text-slate-400,
.tool-app .mmm-hero-mean .text-slate-500,
.tool-app .mmm-hero-mean .text-xs {
    color: var(--tu-muted) !important;
}
.tool-app .mmm-hero-mean code,
.tool-app .mmm-hero-mean pre,
.tool-app .mmm-hero-mean samp,
.tool-app .mmm-hero-mean kbd,
.tool-app .mmm-hero-mean tt {
    background: #ffffff !important;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius-xs) !important;
    padding: 2px 7px !important;
    color: var(--tu-ink) !important;
    font-size: 12.5px !important;
}
.tool-app .mmm-hero-mean .text-primary, .tool-app .mmm-hero-mean .text-blue-600 { color: var(--tu-primary) !important; }
.tool-app .mmm-hero-mean .text-success, .tool-app .mmm-hero-mean .text-emerald-600 { color: var(--tu-success) !important; }
.tool-app .mmm-hero-mean .text-danger { color: var(--tu-danger) !important; }
.tool-app .mmm-hero-median span,
.tool-app .mmm-hero-median div,
.tool-app .mmm-hero-median p,
.tool-app .mmm-hero-median small,
.tool-app .mmm-hero-median strong,
.tool-app .mmm-hero-median b,
.tool-app .mmm-hero-median em,
.tool-app .mmm-hero-median i,
.tool-app .mmm-hero-median u,
.tool-app .mmm-hero-median mark,
.tool-app .mmm-hero-median cite,
.tool-app .mmm-hero-median label,
.tool-app .mmm-hero-median li,
.tool-app .mmm-hero-median td,
.tool-app .mmm-hero-median th,
.tool-app .mmm-hero-median dl,
.tool-app .mmm-hero-median dt,
.tool-app .mmm-hero-median dd,
.tool-app .mmm-hero-median output,
.tool-app .mmm-hero-median time,
.tool-app .mmm-hero-median h1,
.tool-app .mmm-hero-median h2,
.tool-app .mmm-hero-median h3,
.tool-app .mmm-hero-median h4,
.tool-app .mmm-hero-median h5,
.tool-app .mmm-hero-median h6,
.tool-app .mmm-hero-median a {
    color: var(--tu-ink) !important;
}
.tool-app .mmm-hero-median small,
.tool-app .mmm-hero-median .small,
.tool-app .mmm-hero-median .text-muted,
.tool-app .mmm-hero-median .text-white-50,
.tool-app .mmm-hero-median .text-secondary,
.tool-app .mmm-hero-median .text-slate-400,
.tool-app .mmm-hero-median .text-slate-500,
.tool-app .mmm-hero-median .text-xs {
    color: var(--tu-muted) !important;
}
.tool-app .mmm-hero-median code,
.tool-app .mmm-hero-median pre,
.tool-app .mmm-hero-median samp,
.tool-app .mmm-hero-median kbd,
.tool-app .mmm-hero-median tt {
    background: #ffffff !important;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius-xs) !important;
    padding: 2px 7px !important;
    color: var(--tu-ink) !important;
    font-size: 12.5px !important;
}
.tool-app .mmm-hero-median .text-primary, .tool-app .mmm-hero-median .text-blue-600 { color: var(--tu-primary) !important; }
.tool-app .mmm-hero-median .text-success, .tool-app .mmm-hero-median .text-emerald-600 { color: var(--tu-success) !important; }
.tool-app .mmm-hero-median .text-danger { color: var(--tu-danger) !important; }
.tool-app .mmm-hero-mode span,
.tool-app .mmm-hero-mode div,
.tool-app .mmm-hero-mode p,
.tool-app .mmm-hero-mode small,
.tool-app .mmm-hero-mode strong,
.tool-app .mmm-hero-mode b,
.tool-app .mmm-hero-mode em,
.tool-app .mmm-hero-mode i,
.tool-app .mmm-hero-mode u,
.tool-app .mmm-hero-mode mark,
.tool-app .mmm-hero-mode cite,
.tool-app .mmm-hero-mode label,
.tool-app .mmm-hero-mode li,
.tool-app .mmm-hero-mode td,
.tool-app .mmm-hero-mode th,
.tool-app .mmm-hero-mode dl,
.tool-app .mmm-hero-mode dt,
.tool-app .mmm-hero-mode dd,
.tool-app .mmm-hero-mode output,
.tool-app .mmm-hero-mode time,
.tool-app .mmm-hero-mode h1,
.tool-app .mmm-hero-mode h2,
.tool-app .mmm-hero-mode h3,
.tool-app .mmm-hero-mode h4,
.tool-app .mmm-hero-mode h5,
.tool-app .mmm-hero-mode h6,
.tool-app .mmm-hero-mode a {
    color: var(--tu-ink) !important;
}
.tool-app .mmm-hero-mode small,
.tool-app .mmm-hero-mode .small,
.tool-app .mmm-hero-mode .text-muted,
.tool-app .mmm-hero-mode .text-white-50,
.tool-app .mmm-hero-mode .text-secondary,
.tool-app .mmm-hero-mode .text-slate-400,
.tool-app .mmm-hero-mode .text-slate-500,
.tool-app .mmm-hero-mode .text-xs {
    color: var(--tu-muted) !important;
}
.tool-app .mmm-hero-mode code,
.tool-app .mmm-hero-mode pre,
.tool-app .mmm-hero-mode samp,
.tool-app .mmm-hero-mode kbd,
.tool-app .mmm-hero-mode tt {
    background: #ffffff !important;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius-xs) !important;
    padding: 2px 7px !important;
    color: var(--tu-ink) !important;
    font-size: 12.5px !important;
}
.tool-app .mmm-hero-mode .text-primary, .tool-app .mmm-hero-mode .text-blue-600 { color: var(--tu-primary) !important; }
.tool-app .mmm-hero-mode .text-success, .tool-app .mmm-hero-mode .text-emerald-600 { color: var(--tu-success) !important; }
.tool-app .mmm-hero-mode .text-danger { color: var(--tu-danger) !important; }
.tool-app .pace-hero-primary span,
.tool-app .pace-hero-primary div,
.tool-app .pace-hero-primary p,
.tool-app .pace-hero-primary small,
.tool-app .pace-hero-primary strong,
.tool-app .pace-hero-primary b,
.tool-app .pace-hero-primary em,
.tool-app .pace-hero-primary i,
.tool-app .pace-hero-primary u,
.tool-app .pace-hero-primary mark,
.tool-app .pace-hero-primary cite,
.tool-app .pace-hero-primary label,
.tool-app .pace-hero-primary li,
.tool-app .pace-hero-primary td,
.tool-app .pace-hero-primary th,
.tool-app .pace-hero-primary dl,
.tool-app .pace-hero-primary dt,
.tool-app .pace-hero-primary dd,
.tool-app .pace-hero-primary output,
.tool-app .pace-hero-primary time,
.tool-app .pace-hero-primary h1,
.tool-app .pace-hero-primary h2,
.tool-app .pace-hero-primary h3,
.tool-app .pace-hero-primary h4,
.tool-app .pace-hero-primary h5,
.tool-app .pace-hero-primary h6,
.tool-app .pace-hero-primary a {
    color: var(--tu-ink) !important;
}
.tool-app .pace-hero-primary small,
.tool-app .pace-hero-primary .small,
.tool-app .pace-hero-primary .text-muted,
.tool-app .pace-hero-primary .text-white-50,
.tool-app .pace-hero-primary .text-secondary,
.tool-app .pace-hero-primary .text-slate-400,
.tool-app .pace-hero-primary .text-slate-500,
.tool-app .pace-hero-primary .text-xs {
    color: var(--tu-muted) !important;
}
.tool-app .pace-hero-primary code,
.tool-app .pace-hero-primary pre,
.tool-app .pace-hero-primary samp,
.tool-app .pace-hero-primary kbd,
.tool-app .pace-hero-primary tt {
    background: #ffffff !important;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius-xs) !important;
    padding: 2px 7px !important;
    color: var(--tu-ink) !important;
    font-size: 12.5px !important;
}
.tool-app .pace-hero-primary .text-primary, .tool-app .pace-hero-primary .text-blue-600 { color: var(--tu-primary) !important; }
.tool-app .pace-hero-primary .text-success, .tool-app .pace-hero-primary .text-emerald-600 { color: var(--tu-success) !important; }
.tool-app .pace-hero-primary .text-danger { color: var(--tu-danger) !important; }
.tool-app .pace-hero-secondary span,
.tool-app .pace-hero-secondary div,
.tool-app .pace-hero-secondary p,
.tool-app .pace-hero-secondary small,
.tool-app .pace-hero-secondary strong,
.tool-app .pace-hero-secondary b,
.tool-app .pace-hero-secondary em,
.tool-app .pace-hero-secondary i,
.tool-app .pace-hero-secondary u,
.tool-app .pace-hero-secondary mark,
.tool-app .pace-hero-secondary cite,
.tool-app .pace-hero-secondary label,
.tool-app .pace-hero-secondary li,
.tool-app .pace-hero-secondary td,
.tool-app .pace-hero-secondary th,
.tool-app .pace-hero-secondary dl,
.tool-app .pace-hero-secondary dt,
.tool-app .pace-hero-secondary dd,
.tool-app .pace-hero-secondary output,
.tool-app .pace-hero-secondary time,
.tool-app .pace-hero-secondary h1,
.tool-app .pace-hero-secondary h2,
.tool-app .pace-hero-secondary h3,
.tool-app .pace-hero-secondary h4,
.tool-app .pace-hero-secondary h5,
.tool-app .pace-hero-secondary h6,
.tool-app .pace-hero-secondary a {
    color: var(--tu-ink) !important;
}
.tool-app .pace-hero-secondary small,
.tool-app .pace-hero-secondary .small,
.tool-app .pace-hero-secondary .text-muted,
.tool-app .pace-hero-secondary .text-white-50,
.tool-app .pace-hero-secondary .text-secondary,
.tool-app .pace-hero-secondary .text-slate-400,
.tool-app .pace-hero-secondary .text-slate-500,
.tool-app .pace-hero-secondary .text-xs {
    color: var(--tu-muted) !important;
}
.tool-app .pace-hero-secondary code,
.tool-app .pace-hero-secondary pre,
.tool-app .pace-hero-secondary samp,
.tool-app .pace-hero-secondary kbd,
.tool-app .pace-hero-secondary tt {
    background: #ffffff !important;
    border: 1px solid var(--tu-border) !important;
    border-radius: var(--tu-radius-xs) !important;
    padding: 2px 7px !important;
    color: var(--tu-ink) !important;
    font-size: 12.5px !important;
}
.tool-app .pace-hero-secondary .text-primary, .tool-app .pace-hero-secondary .text-blue-600 { color: var(--tu-primary) !important; }
.tool-app .pace-hero-secondary .text-success, .tool-app .pace-hero-secondary .text-emerald-600 { color: var(--tu-success) !important; }
.tool-app .pace-hero-secondary .text-danger { color: var(--tu-danger) !important; }

/* ==========================================================================
   ENHANCED SELECT & DROPDOWN PADDING & TRUNCATION FIXES
   Prevents option text clipping and ensures readable dropdown options across all tools.
   ========================================================================== */
.tool-app select,
.tool-app .form-select,
.tool-app .form-select-sm,
.tool-app .form-select-lg {
    min-width: 0 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding-left: 10px !important;
    padding-right: 26px !important;
    background-position: right 8px center !important;
    background-size: 12px !important;
    font-size: 13px !important;
}

/* Ensure options inside selects render fully without truncation */
.tool-app select option,
.tool-app .form-select option {
    font-size: 13.5px !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    padding: 8px 12px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* If two selects sit side-by-side in a tight sidebar (col-6 inside col-lg-4/5), stack them nicely on small widths */
@media (max-width: 1199px) {
    .tool-app .col-lg-4 .row.g-2 > .col-6,
    .tool-app .col-lg-4 .row.g-3 > .col-6,
    .tool-app .col-lg-5 .row.g-2 > .col-6,
    .tool-app .col-lg-5 .row.g-3 > .col-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px;
    }
}

/* ==========================================================================
   HEADER STICKY & SIDEBAR OVERLAP FIXES
   Ensures sticky topbar and category strip always remain above scrolling content,
   and prevents sidebars from sliding under or through sticky navigation bars.
   ========================================================================== */
.site-header.topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.foc-sub-strip {
    position: sticky !important;
    top: 61px !important; /* Positions cleanly under the main topbar */
    z-index: 9990 !important;
    background: #f8fafc !important;
}

/* Adjust sticky sidebars so they stick below both header bars instead of scrolling under them */
.tp-tool-sidebar-col,
.tp-cat-sidebar {
    position: sticky !important;
    top: 118px !important; /* 61px topbar + 38px strip + 19px spacing */
    z-index: 10 !important;
}

/* Ensure tool app containers and cards stay below the header stacking context */
.tp-workspace-card,
.tool-studio-card,
.tp-tool-page,
.tool-app {
    position: relative;
    z-index: 1;
}