.app-container {
    max-width: 960px;
}

.navbar.navbar-controlviz {
    background-color: #e67e22 !important;
}

.navbar.navbar-controlviz .navbar-brand,
.navbar.navbar-controlviz .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.navbar.navbar-controlviz .nav-link.active {
    color: #fff !important;
    font-weight: 600;
}

.navbar-brand-controlviz {
    font-weight: 700;
    font-size: 1.4rem;
}

.app-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.syntax-hint {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9rem;
    color: #6c757d;
}

.tf-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 1.1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tf-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(44, 130, 201, 0.25);
}

.tf-input.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.2);
    animation: shake 0.3s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

#nyquist-container,
#bode-container {
    margin-bottom: 2rem;
}

.theme-dark {
    background-color: #1a1a2e;
    color: #e0e0e0;
    min-height: 100vh;
}

.theme-dark .text-muted {
    color: #aaa !important;
}

.theme-dark .syntax-hint {
    color: #888;
}

.theme-dark .tf-input {
    background: #2a2a3e;
    color: #e0e0e0;
    border-color: #444;
}

.theme-dark .tf-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(230, 126, 34, 0.25);
}

.theme-dark .accordion-button {
    background-color: #2a2a3e;
    color: #e0e0e0;
}

.theme-dark .accordion-button:not(.collapsed) {
    background-color: #333348;
    color: #e0e0e0;
}

.theme-dark .accordion-body {
    background-color: #222236;
}

.theme-dark .form-control {
    background-color: #2a2a3e;
    color: #e0e0e0;
    border-color: #444;
}

.theme-dark .form-check-label {
    color: #e0e0e0;
}

.theme-dark a {
    color: #6eb5ff;
}

.theme-dark h2,
.theme-dark h4 {
    text-align: left;
}