:root {
    --gold-accent: #EAD151;
    --green-accent: #198754;
    --red-errors-delete: #dc3545;
    --border-bottom: #e0e0e0;
    --neutral-grey-boxes: #555;
}

.n-rec-panel {
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 6px;
    overflow: hidden;
    width: 240px;
    flex-shrink: 0;
}
.n-rec-panel-header {
    background: var(--gold-accent);
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border-bottom);
}
.n-rec-panel-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.n-rec-extended {
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
    color: var(--neutral-grey-boxes);
    background: #f0f7f0;
    border-bottom: 1px solid var(--border-bottom);
}
.n-rec-list {
    max-height: 50vh;
    overflow-y: auto;
}
.n-rec-item {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border-bottom);
    font-size: 0.75rem;
    line-height: 1.3;
}
.n-rec-item:last-child {
    border-bottom: none;
}
.n-rec-zone {
    display: block;
    font-weight: 600;
    color: var(--neutral-grey-boxes);
    font-size: 0.7rem;
    margin-bottom: 0.1rem;
}
.n-rec-value {
    display: block;
    color: var(--green-accent);
    font-weight: 700;
    font-size: 0.9rem;
}
.n-rec-date-picker {
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
    font-family: monospace;
    border: 1px solid #aaa;
    border-radius: 4px;
    background: #fff;
    color: #000;
}
.n-rec-date-picker-error {
    border-color: var(--red-errors-delete);
    background: #fdecea;
    box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.2);
}
.n-rec-empty {
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
    color: var(--neutral-grey-boxes);
    font-style: italic;
}
.n-rec-table {
    width: 100%;
}
.n-rec-table th,
.n-rec-table td {
    padding: 0.25rem 0.4rem;
    font-size: 0.75rem;
}
.n-rec-table-zone {
    font-weight: 600;
    color: var(--neutral-grey-boxes);
    text-align: left;
}
.n-rec-table-best,
.n-rec-table-original,
.n-rec-table-value {
    font-weight: 700;
    color: var(--green-accent);
    text-align: right;
}
.n-rec-table-best,
.n-rec-table-original {
    color: #000;
}
.graph-row {
    display: flex;
    gap: 1rem;
}
.graph-row #graph-container {
    flex: 1;
    min-width: 0;
}

.sims-layout {
    display: flex;
    gap: 1rem;
}
.unit-toggle-group {
    vertical-align: middle;
}
.sims-main {
    flex: 1;
    min-width: 0;
}
.sims-sidebar {
    width: 260px;
    flex-shrink: 0;
}
.thread-registry-title {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.thread-list {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #fff;
}
.thread-empty {
    padding: 0.75rem;
    color: #888;
    font-size: 0.8rem;
    text-align: center;
}
.thread-panel {
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 6px;
    overflow: hidden;
}
.thread-panel-header {
    background: var(--gold-accent);
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border-bottom);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.thread-panel-chevron {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--neutral-grey-boxes);
    transition: transform 0.2s ease;
}
.thread-panel-header.collapsed .thread-panel-chevron {
    transform: rotate(-90deg);
}
.thread-panel-body.collapsed {
    display: none;
}
.thread-panel-header.collapsed {
    border-bottom: none;
}
.thread-panel-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.field-card-header {
    background: var(--gold-accent);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-bottom);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.field-card-chevron {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--neutral-grey-boxes);
    transition: transform 0.2s ease;
}
.field-card-header.collapsed .field-card-chevron {
    transform: rotate(-90deg);
}
.field-card-body.collapsed {
    display: none;
}
.field-card-header.collapsed {
    border-bottom: none;
}
.field-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #000;
}

/* Gold card headers for N-Tune result cards */
#replicate-card .card-header,
#aggregate-card .card-header,
#yellowness-card .card-header {
    background: var(--gold-accent);
}

/* Constrain init and yellowness cards to their content width so they
   don't stretch the full row when narrow (Q6). */
#ntune-init-card,
#yellowness-card {
    width: fit-content;
    max-width: 100%;
}

.thread-item {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border-bottom);
    font-size: 0.75rem;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.thread-item:last-child {
    border-bottom: none;
}
.thread-item.thread-done {
    border-left: 3px solid var(--green-accent);
}
.thread-item.thread-running {
    border-left: 3px solid var(--gold-accent);
}
.thread-item.thread-error {
    border-left: 3px solid var(--red-errors-delete);
}
.thread-item.thread-clickable {
    cursor: pointer;
}
.thread-item.thread-clickable:hover {
    background: #f0f7f0;
}
.thread-item.thread-selected {
    background: #f0f7f0;
}
.thread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 3px;
    flex-shrink: 0;
}
.thread-running .thread-dot {
    background: var(--gold-accent);
}
.thread-done .thread-dot {
    background: var(--green-accent);
}
.thread-error .thread-dot {
    background: var(--red-errors-delete);
}
.thread-info {
    min-width: 0;
    flex: 1;
}
.thread-top {
    margin-bottom: 2px;
}
.thread-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.thread-running .thread-label {
    color: var(--gold-accent);
}
.thread-done .thread-label {
    color: var(--green-accent);
}
.thread-error .thread-label {
    color: var(--red-errors-delete);
}
.thread-details {
    color: var(--neutral-grey-boxes);
    font-size: 0.7rem;
    word-break: break-word;
}
.thread-delete-btn {
    background: none;
    border: none;
    color: var(--red-errors-delete);
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0 0.3rem;
    margin-left: auto;
    line-height: 1;
    opacity: 0.4;
    transition: opacity 0.2s;
}
.thread-delete-btn:hover {
    opacity: 1;
}
.thread-delete-btn.confirm {
    opacity: 1;
    background: var(--red-errors-delete);
    color: #000;
    border-radius: 3px;
    padding: 0.1rem 0.4rem;
}
.thread-stop-btn {
    background: none;
    border: none;
    color: var(--gold-accent);
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0 0.3rem;
    margin-left: auto;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.thread-stop-btn:hover {
    opacity: 1;
}
.thread-stop-btn.confirm {
    opacity: 1;
    background: var(--gold-accent);
    color: #000;
    border-radius: 3px;
    padding: 0.1rem 0.4rem;
}
.thread-extend-btn {
    background: none;
    border: none;
    color: var(--green-accent);
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0 0.3rem;
    margin-left: auto;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.thread-extend-btn:hover {
    opacity: 1;
}
.thread-extend-btn.confirm {
    opacity: 1;
    background: var(--green-accent);
    color: #000;
    border-radius: 3px;
    padding: 0.1rem 0.4rem;
}
/* The row itself stretches full width */
.button-row {
    display: flex;
    justify-content: space-evenly;  
    margin: 1rem 15;
}

/* Basic button look */
.btn {
    padding: 0.6rem 1.2rem;
    border: 2px solid var(--neutral-grey-boxes);
    border-radius: 4px;
    background-color: #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
}


/* Radio button alignment across groups */
.radio-all-groups {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.radio-group-wrapper {
    display: block;
    margin-bottom: 0.25rem;
}

.radio-group-label {
    display: block;
    padding: 0.125rem 0.5rem;
    font-weight: 600;
    color: #333;
}

.radio-group-buttons {
    display: block;
    margin: 0;
}

.radio-item {
    display: inline-block;
    margin-bottom: 0;
}

.radio-label {
    display: inline-block;
    width: 160px;
    padding: 0.375rem 0.25rem;
    font-size: 0.8rem;
    text-align: center;
    white-space: nowrap;
}

.radio-other .radio-label {
    width: auto;
    min-width: 160px;
    padding: 0.375rem 0.5rem;
}

.radio-other .radio-label .form-control {
    width: 130px;
    max-width: 100%;
    font-size: 0.8rem;
    padding: 0.0625rem 0.25rem;
    line-height: 1;
    height: auto;
    min-height: 0;
    vertical-align: middle;
    border-width: 1px;
}

/* Default state - green for unselected - override Bootstrap */
.radio-group-buttons .btn-check + .radio-label {
    background-color: #ffffff !important;
    border-color: var(--green-accent) !important;
    color: #000000 !important;
    border: 2px solid;

}

.radio-group-buttons .btn-check + .radio-label:hover {
    background-color: #ffffff !important;
    border-color: #198754 !important;
}

/* Selected state - golden */
.radio-group-buttons .btn-check:checked + .radio-label {
    background-color: var(--gold-accent) !important;
    border-color: var(--green-accent) !important;
    color: #000 !important;
    border: 2px solid;
}

/* Body background color */
body {
    background-color: #d6d2d2 !important;
}

/* NTune progress bar */
#ntune-progress-card .progress {
    height: 1.5rem;
}

/* Queue status alert */
#queue-status {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

/* Loss chart container */
#loss-chart-container {
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 6px;
    padding: 1rem;
}

/* NTune params (reuses n-rec-panel styles with minor additions) */
.ntune-param-key {
    display: block;
    font-weight: 600;
    color: var(--neutral-grey-boxes);
    font-size: 0.7rem;
    margin-bottom: 0.1rem;
}

.ntune-param-value {
    display: block;
    color: #0d6efd;
    font-weight: 700;
    font-size: 0.9rem;
}

/* Method radio buttons (horizontal, not the full radio-group component) */
.method-radio-group {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

/* Override Bootstrap btn-outline-primary to match gold/green scheme */
.btn-outline-primary {
    background-color: #ffffff !important;
    border-color: var(--green-accent) !important;
    color: #000 !important;
    border-width: 2px;
}

.btn-outline-primary:hover {
    background-color: #f0f7f0 !important;
    border-color: var(--green-accent) !important;
    color: #000 !important;
}

.btn-outline-primary:active {
    background-color: var(--gold-accent) !important;
    border-color: var(--green-accent) !important;
    color: #000 !important;
}

.sim-mode-group .btn-check:checked + .btn-outline-primary {
    background-color: var(--gold-accent) !important;
    border-color: var(--green-accent) !important;
    color: #000 !important;
    border-width: 2px;
}

/* Override Bootstrap btn-primary (Run Simulation button) */
.btn-primary {
    background-color: var(--gold-accent) !important;
    border-color: var(--green-accent) !important;
    color: #000 !important;
    border-width: 2px;
}

.btn-primary:hover {
    background-color: var(--gold-accent) !important;
    border-color: var(--green-accent) !important;
    color: #000 !important;
}

.btn-primary:active {
    background-color: var(--gold-accent) !important;
    border-color: var(--green-accent) !important;
    color: #000 !important;
}

.btn-primary:focus {
    background-color: var(--gold-accent) !important;
    border-color: var(--green-accent) !important;
    color: #000 !important;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
}

/* Thread item iteration text */
.thread-iterations {
    font-size: 0.65rem;
    color: #888;
}

/* Queued state */
.thread-item.thread-queued {
    border-left: 3px solid #0dcaf0;
}

.thread-queued .thread-dot {
    background: #0dcaf0;
}

.thread-queued .thread-label {
    color: #087990;
}

/* NTune method badge */
.ntune-method-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    background: #e9ecef;
    color: #495057;
    margin-left: 0.3rem;
}

/* NTune thread group headers */
#thread-registry .thread-panel-header {
    background: #f5f0e0;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border-bottom);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
#thread-registry .thread-panel-header > span:first-child {
    flex: 1;
}
#thread-registry .thread-panel-header.collapsed {
    border-bottom: 1px solid var(--border-bottom);
}
#thread-registry .thread-panel-body {
    display: block;
}
#thread-registry .thread-panel-body.collapsed {
    display: none;
}

/* Compare button inside group headers */
.thread-group-compare-btn {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    border: 1px solid #b0a89a;
    border-radius: 0.25rem;
    background: #fff;
    color: var(--neutral-grey-boxes);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.thread-group-compare-btn:hover:not(:disabled) {
    background: #f0ead6;
    color: #000;
}
.thread-group-compare-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Params comparison table */
.params-comparison-table {
    font-size: 0.75rem;
    margin-top: 0.5rem;
}
.params-comparison-table th {
    background: #f5f0e0;
    font-weight: 600;
    white-space: nowrap;
}
.params-comparison-table td {
    white-space: nowrap;
    text-align: center;
}
.params-comparison-table td:first-child {
    text-align: left;
    font-weight: 600;
}

/* Navbar header — banner background */
.navbar {
    position: relative;
    min-height: 80px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background-image: url("../images/multi-machine image.png");
    background-repeat: repeat-x;
    background-size: auto 80px;
}
.navbar .container-fluid {
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    padding: 0.25rem 0.75rem;
}
.navbar-brand {
    font-size: 2.2rem;
    font-weight: 900 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    color: #fff !important;
}
.nav-link {
    color: #fff !important;
    font-size: 1.7rem;
    font-weight: 800 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* Page margins */
body {
    margin: 0;
    padding: 0;
}
.page-content {
    padding: 0 1.5rem;
}

/* Themed horizontal rule */
.hr-gold {
    border: 0;
    height: 2px;
    background: linear-gradient(to right, #b6a034, var(--green-accent));
    margin: 1.5rem 0;
}

/* Inline form error styling — Bootstrap invalid-feedback with d-block
   forces visibility even when .is-invalid isn't on a sibling input.
   !important ensures these win over Bootstrap's default .invalid-feedback
   which sets display:none and relies on .is-invalid siblings. */
.invalid-feedback.d-block {
    display: block !important;
    color: var(--red-errors-delete) !important;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Highlight checkbox groups with is-invalid children */
.zone-checkbox-group .form-check-input.is-invalid {
    border-color: var(--bs-form-invalid-border-color, var(--red-errors-delete));
}

/* ==========================================================================
   User zone — standalone design for the investor-facing hub and auth pages.
   Scoped under .user-zone / .hub-* / .auth-* so the tool site (base.html)
   is unaffected.
   ========================================================================== */

.user-zone {
    background: #0f1c14;
    color: #f4f4f2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--bs-body-font-family, system-ui, sans-serif);
}

/* Header */
.user-header {
    background: #0a130d;
    border-bottom: 1px solid rgba(234, 209, 81, 0.25);
}
.user-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.9rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.user-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.user-brand-logo {
    height: 34px;
    width: 34px;
    object-fit: contain;
}
.user-brand-name {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fff;
}
.user-logout-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #f4f4f2;
    border-radius: 6px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.user-logout-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--gold-accent);
}

/* Main content */
.user-main {
    flex: 1 1 auto;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.75rem;
}

/* Footer */
.user-footer {
    text-align: center;
    padding: 1rem;
    font-size: 0.8rem;
    color: rgba(244, 244, 242, 0.5);
    border-top: 1px solid rgba(234, 209, 81, 0.15);
}

/* Hub layout */
.hub-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(380px, 1.6fr) 240px;
    gap: 1.5rem;
    align-items: stretch;
}
@media (max-width: 1200px) {
    .hub-layout {
        grid-template-columns: 1fr 1.6fr;
    }
    .hub-sidebar {
        grid-column: 1 / -1;
    }
}
@media (max-width: 992px) {
    .hub-layout {
        grid-template-columns: 1fr;
    }
}
.hub-heading {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
    color: #16261c;
}
.hub-subheading {
    font-size: 1rem;
    color: rgba(22, 38, 28, 0.7);
    margin-bottom: 1.75rem;
}

/* Hub buttons */
.hub-button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 576px) {
    .hub-button-grid {
        grid-template-columns: 1fr;
    }
}
.hub-button {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.4rem 1.3rem;
    background: #16261c;
    border: 1px solid #000;
    border-left: 4px solid #000;
    border-radius: 10px;
    text-decoration: none;
    color: #f4f4f2;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.hub-button:hover {
    background: #1d3326;
    border-color: #000;
    transform: translateY(-2px);
    color: #fff;
}
.hub-button-title {
    font-size: 1.15rem;
    font-weight: 700;
}
.hub-button-desc {
    font-size: 0.82rem;
    color: rgba(244, 244, 242, 0.6);
}

/* Hub map panel */
.hub-map-panel {
    display: flex;
    flex-direction: column;
    background: #16261c;
    border: 1px solid rgba(234, 209, 81, 0.25);
    border-radius: 10px;
    overflow: hidden;
    min-height: 520px;
}
.hub-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.2rem;
    background: rgba(234, 209, 81, 0.12);
    border-bottom: 1px solid rgba(234, 209, 81, 0.25);
}
.hub-map-title {
    font-weight: 700;
    font-size: 1rem;
}
.hub-map-count {
    background: var(--gold-accent);
    color: #0f1c14;
    border-radius: 999px;
    padding: 0.1rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 700;
}
.hub-map-container {
    flex: 1 1 auto;
    position: relative;
    min-height: 460px;
}
.hub-map-container > div {
    width: 100%;
}
.hub-map-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 460px;
    color: rgba(244, 244, 242, 0.5);
}

/* Hub field-list sidebar (reuses .thread-panel styles) */
.hub-sidebar {
    align-self: start;
}
.hub-sidebar .thread-list {
    max-height: 430px;
    overflow-y: auto;
}

/* ==========================================================================
   Field Management page — drawing widget, search, and form controls.
   Reuses .hub-* layout and .thread-* panel styles.
   ========================================================================== */

.fm-search-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.fm-search-btn {
    background: #16261c;
    border: 1px solid #000;
    border-radius: 6px;
    color: #f4f4f2;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.fm-search-btn:hover {
    background: #1d3326;
}

.fm-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.fm-control-btn {
    flex: 1;
    background: transparent;
    border: 1px solid rgba(22, 38, 28, 0.4);
    border-radius: 6px;
    color: #16261c;
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.fm-control-btn:hover {
    background: rgba(22, 38, 28, 0.08);
    border-color: #16261c;
}

.fm-field-form {
    margin-bottom: 1.5rem;
}
.fm-form-row {
    margin-bottom: 0.85rem;
}
.fm-form-row .form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #16261c;
    margin-bottom: 0.3rem;
}
.fm-submit-btn {
    width: 100%;
    padding: 0.7rem 1rem;
    background: #16261c;
    color: #f4f4f2;
    border: 1px solid #000;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
.fm-submit-btn:hover {
    background: #1d3326;
    transform: translateY(-1px);
}

.fm-field-list-panel {
    margin-top: 1.5rem;
}
.fm-field-list-panel .thread-list {
    max-height: 300px;
    overflow-y: auto;
}

/* A-B line compass widget — gold/black, consistent with the form */
.fm-compass {
    width: 120px;
    margin: 0 auto 0.35rem;
    user-select: none;
    touch-action: none;
}
.fm-compass svg {
    display: block;
    width: 100%;
    cursor: grab;
}
.fm-compass svg:active {
    cursor: grabbing;
}
.fm-compass-ring {
    fill: rgba(234, 209, 81, 0.12);
    stroke: #16261c;
    stroke-width: 2;
}
.fm-compass-n,
.fm-compass-s,
.fm-compass-e,
.fm-compass-w {
    font-size: 11px;
    font-weight: 700;
    fill: #16261c;
}
.fm-compass-needle {
    stroke: var(--gold-accent);
    stroke-width: 4;
    stroke-linecap: round;
}
.fm-compass-needle-g {
    transition: transform 0.05s linear;
}
.fm-compass-hub {
    fill: #16261c;
}
.fm-compass-readout {
    display: block;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #16261c;
}

/* Auth (login / logout) */
.auth-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 220px);
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: #16261c;
    border: 1px solid rgba(234, 209, 81, 0.3);
    border-radius: 12px;
    padding: 2.25rem 2rem;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}
.auth-brand {
    text-align: center;
    margin-bottom: 1.75rem;
}
.auth-logo {
    height: 52px;
    width: 52px;
    object-fit: contain;
    margin-bottom: 0.75rem;
}
.auth-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.25rem;
}
.auth-subtitle {
    font-size: 0.9rem;
    color: rgba(244, 244, 242, 0.6);
    margin: 0;
}
.auth-error {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid var(--red-errors-delete);
    color: #ffb3b8;
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.auth-field {
    margin-bottom: 1.1rem;
}
.auth-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(244, 244, 242, 0.75);
    margin-bottom: 0.35rem;
}
.auth-input {
    width: 100%;
    background: #0f1c14;
    border: 1px solid rgba(234, 209, 81, 0.3);
    border-radius: 6px;
    padding: 0.65rem 0.8rem;
    color: #f4f4f2;
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-input:focus {
    outline: none;
    border-color: var(--gold-accent);
    box-shadow: 0 0 0 3px rgba(234, 209, 81, 0.2);
}
.auth-submit {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.7rem 1rem;
    background: var(--gold-accent);
    color: #0f1c14;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.auth-submit:hover {
    filter: brightness(1.08);
    color: #0f1c14;
    transform: translateY(-1px);
}

/* ==========================================================================
   Smart Plots page — gold sliders with tick markers.
   Text is black for legibility on the light grey page background.
   Matches the field-management control aesthetic (no card chrome).
   ========================================================================== */

.sp-slider-group {
    margin-bottom: 0.4rem;
}
.sp-slider-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 0.1rem;
}
.sp-slider-unit {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 0.4rem;
}

/* Slider + tick container. The gold track is drawn on the wrap's
   ::before (bottom layer), tick strokes sit above it (.sp-ticks,
   z-index 1), and the input itself is transparent but stacked above
   the ticks (z-index 2) so the thumb paints IN FRONT of the marks. */
.sp-slider-wrap {
    position: relative;
    margin-top: 0.35rem;
    /* stroke (14px) + gap (2px) + label (~12px), minus track (8px) */
    margin-bottom: 20px;
}
.sp-slider-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    border-radius: 4px;
    background: var(--gold-accent);
    border: 1px solid rgba(0, 0, 0, 0.35);
}
/* The input paints only the thumb — track/background transparent so
   the wrap's ::before gold track shows through. z-index 2 stacks the
   input above the ticks overlay (z-index 1). */
.sp-slider {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 8px;
    background: transparent;
    outline: none;
    cursor: pointer;
    margin: 0;
    position: relative;
    z-index: 2;
}
/* Track pseudo-element must stay transparent (the wrap draws it). */
.sp-slider::-webkit-slider-runnable-track {
    height: 8px;
    background: transparent;
}
.sp-slider::-moz-range-track {
    height: 8px;
    background: transparent;
}

/* Tick strokes: dark vertical marks crossing the 8px gold track and
   extending 6px below it. JS positions each stroke's center via
   left:px + translateX(-50%). z-index 1: above the wrap's ::before
   track but below the input (z-index 2) so the thumb paints in front. */
.sp-ticks {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    /* Track (8px) + stroke below (6px) + label row (14px) */
    height: 28px;
    overflow: visible;
    z-index: 1;
}
.sp-tick {
    position: absolute;
    top: 0;
    width: 2px;
    height: 14px;   /* 8px across the track + 6px below */
    transform: translateX(-50%);
    background: #16261c;
}

/* Numbers under the ticks — black, centered under each stroke. */
.sp-tick-label {
    position: absolute;
    top: 16px;
    transform: translateX(-50%);
    font-size: 0.72rem;
    font-weight: 600;
    color: #16261c;
    white-space: nowrap;
    line-height: 1;
}
.sp-tick-label-active {
    color: #000;
    font-weight: 800;
    text-decoration: underline;
}

/* Smart plots field multi-select: gold checkboxes in the field list */
.sp-field-checkbox {
    accent-color: var(--gold-accent);
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}
.sp-selected-count {
    font-size: 0.7rem;
    font-weight: 700;
    color: #16261c;
    background: var(--gold-accent);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    margin-left: auto;
    margin-right: 0.4rem;
    white-space: nowrap;
}

/* Smart plots generation results panel */
.sp-results-panel {
    margin-top: 1rem;
    border-top: 2px solid rgba(22, 38, 28, 0.25);
    padding-top: 0.75rem;
}
.sp-results-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #16261c;
    margin-bottom: 0.4rem;
}
.sp-result-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(22, 38, 28, 0.1);
}
.sp-result-name {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 600;
    color: #16261c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-result-btn {
    background: #16261c;
    border: 1px solid #000;
    border-radius: 6px;
    color: #f4f4f2;
    padding: 0.25rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.sp-result-btn:hover {
    background: #1d3326;
}
.sp-result-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.sp-result-save {
    background: var(--gold-accent);
    color: #0f1c14;
}
.sp-result-save:hover {
    filter: brightness(1.08);
    background: var(--gold-accent);
}

/* Gold thumb with black ring — the visible "marker" the user drags.
   Paints above the ticks because the input is z-index 2. */
.sp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--gold-accent);
    border: 2px solid #000;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    margin-top: -6px;
    cursor: grab;
    transition: transform 0.1s ease;
}
.sp-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
}
.sp-slider::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--gold-accent);
    border: 2px solid #000;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    cursor: grab;
    transition: transform 0.1s ease;
}
.sp-slider::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
}
.sp-slider:focus-visible {
    box-shadow: 0 0 0 3px rgba(234, 209, 81, 0.45);
}

/* Generate button — gold primary, matches fm-submit-btn proportions */
.sp-generate-btn {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.7rem 1rem;
    background: var(--gold-accent);
    color: #0f1c14;
    border: 1px solid #000;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.sp-generate-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.sp-generate-btn:active {
    transform: translateY(0);
}
.sp-generate-btn:disabled {
    filter: grayscale(0.6);
    cursor: not-allowed;
    transform: none;
}

/* ==========================================================================
   Smart-plot N-Tune setup page — field list + zone initialization form.
   ========================================================================== */

/* Two-column layout variant: wider form panel (no map).
   .has-sidebar is toggled from JS when the results thread panel is
   visible — adds the 240px third grid column. */
.nsp-layout {
    grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.8fr);
}
.nsp-layout.has-sidebar {
    grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.8fr) 240px;
}

/* Below-chart result columns (N-Tune): Best params | Original params
   | N recommendations, side by side under the chart card — always
   horizontal, never stacked. */
.nsp-result-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: start;
}
/* Panels fill their grid tracks — not the hardcoded 240px sidebar
   width from .n-rec-panel. */
.nsp-result-columns .n-rec-panel {
    width: auto;
}
/* Sidebar column applies at ALL widths — the hub's ≤1200px media
   query spans .hub-sidebar full-width (below the content), which is
   wrong for the results layout. */
.nsp-layout.has-sidebar .hub-sidebar {
    grid-column: auto;
}
/* N-Sim full-width N-rec strip (below the bare chart): the base
   .n-rec-panel is a 240px sidebar — the strip spans the panel. */
#nsim-results .n-rec-panel {
    width: 100%;
    flex-shrink: 1;
    margin-top: 1rem;
}

.nsp-form-panel {
    min-height: 520px;
}
.nsp-form-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1 1 auto;
}
.nsp-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 460px;
    color: rgba(22, 38, 28, 0.6);
    font-size: 0.95rem;
}
.nsp-form-panel .nsp-empty {
    background: #fff;
}

/* Status chips on the field list items */
.nsp-chip {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    background: rgba(22, 38, 28, 0.1);
    color: #16261c;
    margin-left: 0.4rem;
    white-space: nowrap;
}
.nsp-chip-ok {
    background: var(--green-accent);
    color: #fff;
}
.thread-sub {
    display: block;
    font-size: 0.72rem;
    color: rgba(22, 38, 28, 0.6);
    margin-top: 0.1rem;
}

/* Form cards on the light panel */
.nsp-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 0.9rem 1rem 1rem;
    margin-bottom: 1rem;
}
.nsp-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #16261c;
    margin-bottom: 0.6rem;
}
.nsp-rate-table {
    margin-bottom: 0;
}
.nsp-rate-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(22, 38, 28, 0.6);
}
.nsp-zone-name {
    font-weight: 700;
    color: #16261c;
    white-space: nowrap;
}
.nsp-rate-input {
    max-width: 130px;
}
.nsp-card .form-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #16261c;
    margin-bottom: 0.25rem;
}

/* Result banner */
.nsp-result {
    margin-top: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
}
.nsp-result a {
    text-decoration: underline;
}
.nsp-result-ok {
    background: rgba(25, 135, 84, 0.12);
    color: #0f5132;
    border: 1px solid rgba(25, 135, 84, 0.4);
}
.nsp-result-err {
    background: rgba(220, 53, 69, 0.1);
    color: #842029;
    border: 1px solid rgba(220, 53, 69, 0.4);
}

/* Yellowness upload + detection summary */
.nsp-hint {
    font-size: 0.78rem;
    color: rgba(22, 38, 28, 0.6);
    margin-bottom: 0.5rem;
}
.nsp-upload-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.nsp-upload-row .form-control {
    flex: 1;
}
.nsp-upload-btn {
    background: var(--gold-accent);
    color: #0f1c14;
    border: 1px solid #000;
    border-radius: 6px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.nsp-upload-btn:hover {
    filter: brightness(1.08);
}
.nsp-upload-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.nsp-detect {
    margin-top: 0.75rem;
}
.nsp-detect-date {
    font-size: 0.78rem;
    font-weight: 600;
    color: #16261c;
    margin-bottom: 0.4rem;
}
.nsp-detect-group {
    font-size: 0.75rem;
    font-weight: 700;
    color: #16261c;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.4rem;
}
.nsp-detect-group.nsp-detect-empty {
    color: #b45309;
}
.nsp-detect-table {
    width: 100%;
    font-size: 0.78rem;
    border-collapse: collapse;
}
.nsp-detect-table td {
    padding: 0.15rem 0.4rem;
    border-bottom: 1px solid rgba(22, 38, 28, 0.08);
    color: rgba(22, 38, 28, 0.8);
}
.nsp-detect-table td:first-child {
    font-weight: 700;
    color: #16261c;
    width: 45%;
}
.nsp-detect-outside {
    color: #b45309;
    font-weight: 600;
}

/* Progress rows */
.nsp-progress-wrap {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.nsp-progress-row {
    font-size: 0.8rem;
}
.nsp-progress-label {
    display: inline-block;
    min-width: 90px;
    font-weight: 700;
    color: #16261c;
}
.nsp-progress-status {
    display: inline-block;
    color: rgba(22, 38, 28, 0.65);
    margin-left: 0.5rem;
    font-size: 0.75rem;
}
.nsp-progress {
    height: 0.6rem;
    background: rgba(22, 38, 28, 0.12);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.2rem;
}
.nsp-progress-bar {
    height: 100%;
    background: var(--gold-accent);
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* Result cards */
.nsp-result-card {
    border-left: 4px solid var(--gold-accent);
}
.nsp-stat-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.nsp-stat-tile {
    flex: 1;
    background: rgba(234, 209, 81, 0.1);
    border-bottom: 3px solid var(--gold-accent);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    display: flex;
    flex-direction: column;
}
.nsp-stat-tile.nsp-stat-original {
    background: rgba(22, 38, 28, 0.05);
    border-bottom-color: #16261c;
}
.nsp-stat-num {
    font-size: 1.4rem;
    font-weight: 800;
    color: #16261c;
    line-height: 1.2;
}
.nsp-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(22, 38, 28, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.nsp-chart {
    margin-top: 0.5rem;
}
.nsp-chart svg {
    max-width: 100%;
    height: auto;
}

/* Automatic starter note in the Applications card */
.nsp-auto-note {
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-style: italic;
}