.tool-container {
    background: #fff;
    border: var(--border-thick);
    padding: var(--space-6);
    margin-top: var(--space-6);
}

.tool-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.tool-form-group {
    margin-bottom: var(--space-4);
}

.tool-form-group label {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.tool-form-group input,
.tool-form-group select {
    width: 100%;
    padding: var(--space-3);
    font-family: var(--font-mono);
    border: var(--border-thin);
    font-size: 1rem;
}

.tool-form-group input:focus {
    outline: 2px solid var(--color-blueprint);
    outline-offset: 2px;
}

.tool-results {
    background: var(--color-paper);
    padding: var(--space-6);
    border: var(--border-thin);
}

.result-block {
    margin-bottom: var(--space-4);
}

.result-label {
    display: block;
    font-family: var(--font-display);
    color: var(--color-slate);
    text-transform: uppercase;
    font-size: 0.875rem;
    margin-bottom: var(--space-1);
}

.result-value {
    display: block;
    font-family: var(--font-mono);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-ink);
}

.result-value.success {
    color: #16A34A;
}

.result-value.danger {
    color: var(--color-alert);
}

noscript .js-only {
    display: none;
}

.noscript-fallback {
    padding: var(--space-4);
    background: #FEF2F2;
    border: 1px solid var(--color-alert);
    color: var(--color-alert);
    margin-bottom: var(--space-4);
    font-family: var(--font-display);
}

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