:root {
    /* ==========================================================================
       Unified Border Radius System (Tiered Semantic Scale)
       ========================================================================== */
    --radius-3xl:   28px;
    --radius-2xl:   20px;
    --radius-xl:    14px;
    --radius-lg:    10px;
    --radius-md:    6px;
    --radius-sm:    4px;
    --radius-xs:    2px;
    --radius-full:  9999px;

    /* Semantic Slate Palette Fallbacks */
    --color-slate-900: #0f172a;
    --color-slate-800: #1e293b;
    --color-slate-700: #334155;
    --color-slate-600: #475569;
    --color-slate-500: #64748b;
    --color-slate-400: #94a3b8;
    --color-slate-300: #cbd5e1;
    --color-slate-200: #e2e8f0;
    --color-slate-100: #f1f5f9;
    --color-slate-50:  #f8fafc;

    /* ==========================================================================
       Technical Form Feedback & Advisory Design Tokens
       ========================================================================== */
    --feedback-note-bg:         #f8fafc;
    --feedback-note-border:     #e2e8f0;
    --feedback-note-accent:     #64748b;
    --feedback-note-text:       #475569;
    --feedback-note-icon:       #64748b;

    --feedback-warning-bg:      #fffbeb;
    --feedback-warning-border:  #fde68a;
    --feedback-warning-accent:  #d97706;
    --feedback-warning-text:    #92400e;
    --feedback-warning-icon:    #d97706;

    --feedback-error-bg:        #fffbfa;
    --feedback-error-border:    #fecaca;
    --feedback-error-accent:    #dc2626;
    --feedback-error-text:      #991b1b;
    --feedback-error-icon:      #dc2626;
}

/* Specific Project Layout Styles mapped to brownUI variables */
        
.project-sidebar {
            width: 360px; background-color: var(--color-gray-900); color: var(--color-gray-50);
            display: flex; flex-direction: column;
            border-right: 1px solid rgba(255,255,255,0.1); flex-shrink: 0;
        }
        
        .project-main {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

        /* Mobile Sidebar toggle */
        @media (max-width: 991px) {
            .project-sidebar {
                position: fixed;
                left: 0;
                top: 3.5rem;
                bottom: 0;
                width: 360px;
                flex-direction: column;
                transform: translateX(-100%);
                transition: transform 0.3s;
                z-index: 40;
                border-right: 1px solid rgba(255,255,255,0.1);
            }
            .project-sidebar.show {
                transform: translateX(0);
            }
            #sidebar-overlay {
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,0.5);
                z-index: 30;
                display: none;
            }
            #sidebar-overlay.show {
                display: block;
            }
        }

        /* Service Nav Buttons - Sleek minimal styling */
        .nav-btn {
            width: auto; display: flex; align-items: center; gap: 8px; padding: 12px 10px;
            font-size: 0.85rem; font-family: var(--font-tech); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
            border-radius: var(--radius-sm); border: none; background: transparent; color: var(--color-gray-500); cursor: pointer;
            transition: all 0.2s; text-align: left;
            position: relative;
        }
        .nav-btn .material-symbols-outlined {
            font-size: 1.25rem;
        }
        .nav-btn:hover { background: rgba(176, 106, 65, 0.04); color: var(--color-primary); }
        .nav-btn.active { 
            background: rgba(176, 106, 65, 0.08); 
            color: var(--color-primary) !important; 
        }
        .nav-btn.active::before {
            content: '';
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: 0;
            height: 2px;
            background-color: var(--color-primary);
            border-radius: 1px;
        }

        /* Views */
        .view-section { display: none; width: 100%; max-width: 100%; margin: 0 auto; animation: fadeIn 0.3s ease-in-out; }
        .view-section.active { display: block; }
        
        .mfg-estimator-section { display: none; height: 100%; flex-direction: column; overflow: hidden; padding-bottom: 2rem; }
        .mfg-estimator-section.active { display: flex !important; }
        
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        :root {
            --form-rail-width: 225px;
        }

        /* Static RFQ Form Grid (Used in DesignRFQ.html) */
        .form-grid {
            display: grid;
            grid-template-columns: var(--form-rail-width, 210px) 1fr;
            gap: 0;
            align-items: center;
            min-height: calc(var(--control-height, 2.25em) + 0.8em);
            margin-bottom: 0;
            transition: background-color 0.15s ease;
        }
        .form-grid:hover {
            background-color: var(--form-row-hover, rgba(176, 106, 65, 0.035));
        }
        @media (max-width: 768px) {
            .form-grid { grid-template-columns: 1fr; gap: 0.5rem; }
        }

        .form-label {
            width: auto;
            min-width: 0;
            background-color: transparent;
            color: var(--form-rail-text, #334155);
            font-family: var(--font-mono, 'Source Code Pro', monospace);
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            padding: 0.4em 1rem 0.4em 0.75em;
            display: flex;
            align-items: center;
            margin: 0;
            box-sizing: border-box;
        }

        .form-input-container {
            flex: 1;
            padding: 0.4em 0.85em;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        .file-list { 
            margin-top: 0.5rem; 
            display: flex; 
            flex-direction: column; 
            gap: 6px; 
            width: 100%;
        }
        .file-item {
            display: flex; 
            justify-content: space-between; 
            align-items: center;
            background: #fafaf9; 
            padding: 8px 12px; 
            border-radius: var(--radius-flush-2, 4px);
            font-size: 0.8125rem; 
            border: 1px solid #e7e5e4;
            transition: all 0.15s ease;
        }
        .file-item:hover {
            border-color: rgba(176, 106, 65, 0.3);
            background: #ffffff;
        }
        .file-item .remove-file { 
            color: var(--color-danger, #dc2626); 
            cursor: pointer; 
            opacity: 0.7; 
            font-size: 1.1rem;
            transition: opacity 0.15s ease;
        }
        .file-item .remove-file:hover { 
            opacity: 1; 
        }

        .footer-note-box {
            background: var(--color-gray-50); 
            border: 1px solid var(--color-gray-200);
            border-radius: var(--radius-sm); 
            padding: 16px; 
            margin-top: 2rem;
            font-size: 0.85rem; 
            color: var(--color-gray-600);
        }

        /* --- Unified Tactical Dropzone --- */
        .mfg-dropzone,
        .hud-dropzone {
            border: 1px dashed var(--input-border, #cbd5e1);
            background: #ffffff;
            border-radius: var(--radius-flush-2, 4px);
            transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
            display: flex;
            align-items: center;
        }
        .mfg-dropzone:hover, 
        .mfg-dropzone.dragover,
        .hud-dropzone:hover,
        .hud-dropzone.dragover {
            border-color: var(--color-primary, #b06a41);
            background: rgba(176, 106, 65, 0.04);
            box-shadow: 0 0 0 3px rgba(176, 106, 65, 0.1);
        }
        .mfg-dropzone--compact,
        .hud-dropzone--compact {
            padding: 0.45rem 0.85rem;
            text-align: left;
            min-height: 38px;
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            box-sizing: border-box;
        }
        .hud-dropzone-icon {
            font-size: 1.25rem;
            color: var(--color-primary, #b06a41);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .hud-dropzone-label {
            flex: 1;
            font-family: 'Source Sans Pro', var(--font-sans), sans-serif;
            font-size: 0.8125rem;
            font-weight: 500;
            color: #475569;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .mfg-dropzone--large {
            padding: 2rem;
            text-align: center;
            justify-content: center;
            border-width: 2px;
        }

        
        /* Footer Alert */
        .footer-note-box {
            background: var(--color-gray-50); border: 1px solid var(--color-gray-200);
            border-radius: var(--radius-sm); padding: 16px; margin-top: 2rem;
            font-size: 0.85rem; color: var(--color-gray-600);
        }

        /* Dynamic Manufacturing Styles */
        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }
        

        
        .sticky-sub-header {
            position: sticky;
            top: -1rem;
            z-index: 10;
            background: var(--color-gray-50);
            padding: 1rem;
            margin: -1rem -1rem 1.5rem -1rem;
            border-bottom: 1px solid var(--color-gray-200);
        }

        /* Polished HUD Chassis */
        .hud-chassis {
            background-color: #ffffff;
            border: 1px solid rgba(176, 106, 65, 0.3); /* thin brand-brown soft outline */
            border-radius: var(--radius-md);
            box-shadow: 0 4px 20px rgba(0,0,0,0.03);
            position: relative;
            padding: 2.5rem;
            margin-top: 1rem;
        }


        
        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }
        
        .pulse-copper,
        .pulse-cyan {
            background-color: var(--color-primary, #b06a41);
            box-shadow: 0 0 0 0 rgba(176, 106, 65, 0.7);
            animation: pulse-copper-anim 2s infinite cubic-bezier(0.66, 0, 0, 1);
        }
        @keyframes pulse-copper-anim {
            to { box-shadow: 0 0 0 10px rgba(176, 106, 65, 0); }
        }
        @keyframes pulse-cyan-anim {
            to { box-shadow: 0 0 0 10px rgba(176, 106, 65, 0); }
        }
        
        .pulse-green {
            background-color: var(--color-success);
            box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.7);
            animation: pulse-green-anim 2s infinite cubic-bezier(0.66, 0, 0, 1);
        }
        @keyframes pulse-green-anim {
            to { box-shadow: 0 0 0 10px rgba(5, 150, 105, 0); }
        }

        /* Configured Form Chassis */
        .hud-chassis.floating-card.is-configured {
            border-color: var(--color-success) !important;
            box-shadow: 
                0 4px 8px rgba(0,0,0,0.03),
                0 12px 24px rgba(5, 150, 105, 0.04),
                0 32px 64px rgba(5, 150, 105, 0.08) !important;
        }






        .hud-input {
            background: #ffffff !important;
            border: 1px solid #cbd5e1 !important;
            border-radius: var(--radius-flush-2, 4px) !important;
            box-shadow: 
                inset 0 1.5px 3px rgba(0, 0, 0, 0.05),
                0 1px 0 rgba(255, 255, 255, 0.9) !important;
            color: #1e293b !important;
            padding: 8px 12px;
            font-family: 'Source Sans Pro', var(--font-sans), sans-serif !important;
            font-size: 0.8125rem !important;
            font-weight: 500 !important;
            letter-spacing: 0.01em !important;
            box-sizing: border-box;
            transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }
        
        input.hud-input,
        select.hud-input {
            height: 34px !important;
            padding: 0 12px !important;
        }

        textarea.hud-input {
            padding: 10px 12px !important;
            line-height: 1.5 !important;
        }

        .hud-input::placeholder {
            color: var(--color-gray-400, #a1a1aa) !important;
            font-weight: 400 !important;
        }
        
        input[type="number"].hud-input {
            font-family: var(--font-mono, monospace) !important;
            font-variant-numeric: tabular-nums;
            font-weight: 700 !important;
        }
        
        .hud-input:focus,
        .form-grid textarea:focus,
        .form-grid input:focus,
        .form-grid select:focus {
            background-color: #ffffff !important;
            border-color: var(--color-primary, #b06a41) !important;
            box-shadow: 0 0 0 3px rgba(176, 106, 65, 0.14), inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
            outline: none !important;
        }
        
        .hud-input.error-field,
        .hud-input.is-invalid,
        .hud-input.invalid,
        .is-invalid,
        .invalid {
            border-color: var(--color-danger, #dc2626) !important;
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18), inset 0 1px 2px rgba(220, 38, 38, 0.05) !important;
            background-color: #fffbfa !important;
        }


        /* --- Ultra-Premium Manufacturing Property Grid --- */
        .mfg-panel {
            border: 1px solid rgba(176, 106, 65, 0.2);
            border-radius: var(--radius-md);
            margin-bottom: 1rem;
            overflow: hidden;
            background: #ffffff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.02);
        }
        .mfg-panel-header {
            background: rgba(176, 106, 65, 0.08);
            padding: 12px 16px;
            border-bottom: 1px solid rgba(176, 106, 65, 0.15);
            border-left: 3px solid var(--color-primary);
            font-family: var(--font-tech);
            font-weight: 700;
            font-size: 0.95rem;
            line-height: 1;
            color: var(--color-primary-dark);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        


        /* --- Contextual Button States --- */
        #btn-mfg-next.btn--brown {
            background-color: var(--color-primary);
            border-color: var(--color-primary);
            color: white;
        }
        #btn-mfg-next.btn--brown:hover {
            background-color: var(--color-primary-dark);
        }
        
        #btn-mfg-next.btn--green {
            background-color: var(--color-success);
            border-color: var(--color-success);
            color: white;
        }
        #btn-mfg-next.btn--green:hover {
            filter: brightness(0.9);
        }

        /* --- Auto-Jump & Focus Animations --- */
        .mfg-slide-transition {
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
        }

        @keyframes input-alert-pulse {
            0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); border-color: var(--color-gray-300); }
            50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); border-color: var(--color-danger); }
            100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); border-color: var(--color-gray-300); }
        }
        
        .alert-pulse {
            animation: input-alert-pulse 1.5s ease-out 2;
        }

        .mfg-dropzone.error-field {
            border-color: var(--color-danger);
            background: rgba(220, 38, 38, 0.05);
        }

/* ==========================================================================
   UI/UX Refactor & Micro-interactions
   ========================================================================== */

/* Shared Sidebar Nav Link */
.sidebar-nav-link {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: none;
    text-decoration: none;
    background: transparent;
}
a.sidebar-nav-link {
    color: inherit;
}

/* Form Micro-interactions */
.hud-input {
    transition: all 0.25s ease;
}



/* ==========================================================================
   Manufacturing Top Navigation Bar Redesign (Premium & Clean)
   ========================================================================== */

/* The Tab Container/Button */
.nav-tab {
    position: relative;
    padding: 16px 12px !important;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent !important;
    color: var(--color-gray-400) !important;
    font-family: var(--font-tech);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Icon inside Tab */
.nav-tab .tab-status-icon {
    font-size: 1rem;
    transition: all 0.3s ease;
}

/* Hover State */
.nav-tab:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.4);
    color: var(--color-gray-600) !important;
}

.nav-tab:hover:not(.active) .tab-status-icon {
    color: var(--color-gray-600);
}

/* Active State */
.nav-tab.active {
    background-color: rgba(176, 106, 65, 0.08) !important; /* Faint primary background */
    border-bottom: 2px solid var(--color-primary) !important; /* Primary brown bottom border */
    color: var(--color-primary) !important;
}
/* We don't override .tab-status-icon color here, so the HTML class (text-danger/success) applies. */

/* Error State Override */
.nav-tab.error {
    color: var(--color-danger) !important;
    border-bottom: 2px solid var(--color-danger) !important;
    background-color: rgba(220, 38, 38, 0.04) !important;
}
.nav-tab.error .tab-status-icon {
    color: var(--color-danger) !important;
}

/* Design Rules Conflict styling */
.mfg-spec-btn.conflict-error {
    border-color: var(--color-danger) !important;
    background-color: rgba(239, 68, 68, 0.05) !important;
    color: var(--color-danger) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}
.mfg-inline-error {
    animation: fadeIn 0.2s ease-in-out;
}

/* Styles for aria-disabled="true" buttons */
.btn[aria-disabled="true"], .btn.btn--inactive[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed !important;
    box-shadow: none;
    filter: grayscale(1) brightness(0.8);
    pointer-events: auto !important; /* Ensure click events are still registered */
}

/* Styles for the Ready state button */
.btn.btn--ready {
    background-color: transparent !important;
    border: 2px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    font-weight: 700;
    transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
}
.btn.btn--ready:hover {
    background-color: var(--color-primary) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(176, 106, 65, 0.2);
}

/* Dynamic Validation Tooltip */
.mfg-validation-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(4px);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.2);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mfg-validation-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(17, 24, 39, 0.95) transparent transparent transparent;
}

.mfg-validation-tooltip.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}



/* ==========================================================================
   GLOBAL NAV-CARDS-STACK SCHEMA (LIGHT-THEME HUD STANDARD)
   ========================================================================== */
.nav-cards-stack,
.nav-card-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
}

.nav-card,
.nav-card.service-tab {
    background-color: #ffffff !important;
    border: 1px solid #e7e5e4 !important;
    border-radius: 8px !important;
    padding: 0.95rem 1.15rem !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.9rem !important;
    cursor: pointer !important;
    text-decoration: none !important;
    user-select: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    position: relative !important;
    overflow: hidden !important;
}

.nav-card:hover {
    background-color: #fafaf9 !important;
    border-color: rgba(176, 106, 65, 0.35) !important;
    box-shadow: 0 3px 10px rgba(176, 106, 65, 0.08) !important;
    transform: translateY(-1px) !important;
}

.nav-card .nav-card-icon-box {
    width: 42px !important;
    height: 42px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.nav-card .nav-card-icon-box svg,
.nav-card .nav-card-icon-box .material-symbols-outlined {
    width: 22px !important;
    height: 22px !important;
    font-size: 1.35rem !important;
    color: inherit !important;
}

.nav-card:hover .nav-card-icon-box {
    background-color: rgba(176, 106, 65, 0.08) !important;
    border-color: rgba(176, 106, 65, 0.25) !important;
    color: var(--color-primary, #b06a41) !important;
}

.nav-card.active,
.nav-card.service-tab.active {
    background-color: #f7f2ec !important;
    border: 1.5px solid rgba(176, 106, 65, 0.32) !important;
    box-shadow: 0 2px 8px rgba(176, 106, 65, 0.08) !important;
    transform: none !important;
}

.nav-card.active .nav-card-icon-box {
    background-color: #f0e6dc !important;
    border: 1px solid rgba(176, 106, 65, 0.25) !important;
    color: var(--color-primary, #b06a41) !important;
    box-shadow: none !important;
}

.nav-card.active .nav-card-icon-box svg,
.nav-card.active .nav-card-icon-box .material-symbols-outlined {
    color: var(--color-primary, #b06a41) !important;
}

.nav-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.nav-card-title-group {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.nav-card-icon {
    font-size: 1.35rem !important;
    color: #64748b !important;
    transition: color 0.3s ease !important;
}

.nav-card.active .nav-card-icon {
    color: var(--color-primary, #b06a41) !important;
}

.nav-card-title {
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #1e293b !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    transition: color 0.2s ease !important;
}

.nav-card.active .nav-card-title,
.nav-card.active .nav-card-title span {
    color: var(--color-primary-dark, #8d512f) !important;
    font-weight: 800 !important;
}


@media (min-width: 992px) {
    .estimator-sidebar {
        background-color: transparent !important;
        border-right: none !important;
    }
}

/* ==========================================================================
   MULTI-PLANE SPATIAL ELEVATION & BRAND DESIGN SYSTEM TOKENS
   ========================================================================== */

:root {
    /* Estimator Color Tokens */
    --color-dock-bg: #f5f0e8;
    --color-dock-border: rgba(176, 106, 65, 0.22);
    --color-card-border: rgba(176, 106, 65, 0.16);
    --color-monolith-bg: #141416;
    --color-monolith-border: rgba(255, 255, 255, 0.08);
    --color-heading-espresso: #2c2a29;
    --color-body-charcoal: #3f3d3a;
    --color-text-stone: #44403c;
    --color-stone-muted: #8c8782;
    --color-stone-light: #a8a29e;
    
    /* Compound Elevation Shadows */
    --shadow-card-copper: 0 14px 34px -4px rgba(176, 106, 65, 0.13), 0 0 0 1px rgba(176, 106, 65, 0.08), 0 3px 10px rgba(0, 0, 0, 0.04);
    --shadow-monolith: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 20px 40px -12px rgba(0, 0, 0, 0.42), 0 6px 16px -4px rgba(0, 0, 0, 0.25);
    --shadow-active-copper-card: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 24px -4px rgba(176, 106, 65, 0.35), 0 2px 6px rgba(176, 106, 65, 0.15);
}

/* Reusable Semantic Summary Component Classes (Deduplicated Architecture) */
.sticky-line-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0.5rem !important;
}
.sticky-line-label {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    font-family: var(--font-sans), sans-serif !important;
}
.sticky-line-val {
    font-family: var(--font-mono, monospace) !important;
    font-feature-settings: "tnum" !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
}
.sticky-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin: 0.75rem 0 0.85rem 0 !important;
}
.sticky-total-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin-bottom: 0.35rem !important;
}
.sticky-total-label {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #e2e8f0 !important;
    font-family: var(--font-tech), sans-serif !important;
}
.sticky-quote-badge {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: rgba(176, 106, 65, 0.07) !important;
    padding: 0.65rem 0.9rem !important;
    border-radius: var(--radius-flush-3, 6px) !important;
    border: 1px solid rgba(176, 106, 65, 0.22) !important;
    margin-top: 0.65rem !important;
    margin-bottom: 0.25rem !important;
}
.sticky-quote-label {
    font-family: var(--font-tech), sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #cbd5e1 !important;
}
.sticky-quote-val {
    font-family: var(--font-mono, monospace) !important;
    color: var(--color-primary, #b06a41) !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}
.sticky-disclaimer-box {
    padding: 0.55rem 0.75rem !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: var(--radius-xs, 4px) !important;
    border-left: 2.5px solid var(--color-primary, #b06a41) !important;
}
.sticky-disclaimer-text {
    margin: 0 !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 0.68rem !important;
    line-height: 1.4 !important;
    color: #94a3b8 !important;
}
.sticky-disclaimer-icon {
    font-size: 0.85rem !important;
    vertical-align: text-top !important;
    margin-right: 3px !important;
    color: var(--color-primary, #b06a41) !important;
}

/* Depth Layer 4: Sovereign Global Header (Highest Z-Perspective) */
#pcbsage-global-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: rgba(250, 247, 242, 0.88) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.25s ease;
}

/* Estimators Redesign Custom Styles */
body.estimator-page,
.grid-bg {
    background-color: #faf7f2 !important;
    background-image: linear-gradient(rgba(176, 106, 65, 0.055) 1px, transparent 1px), 
                      linear-gradient(90deg, rgba(176, 106, 65, 0.055) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
}

/* Depth Layer 2: Main Workspace Form Card (Signature Copper Border-Cast Shadow) */
.floating-card,
.hud-chassis {
    position: relative !important;
    z-index: 10 !important;
    border: 1px solid rgba(176, 106, 65, 0.18) !important; /* Subtle warm copper perimeter rim */
    border-radius: var(--radius-flush-6) !important;
    box-shadow: var(--shadow-card-copper) !important;
    background: #ffffff !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.preset-btn {
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 0.75rem !important;
    font-family: 'Source Sans Pro', var(--font-sans), sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.015em !important;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-flush-2) !important;
    background: #ffffff;
    color: var(--color-gray-700);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.preset-btn:hover:not(.disabled) {
    border-color: var(--color-gray-400);
    background-color: var(--color-gray-50);
}

.preset-btn.active {
    background-color: #b06a41 !important;
    border-color: #b06a41 !important;
    color: #ffffff !important;
}

.form-sublabel {
    font-family: var(--font-tech);
    font-size: 0.7rem;
    color: var(--color-gray-500);
    text-transform: none;
    font-weight: normal;
    margin-top: 4px;
    letter-spacing: 0.02em;
    line-height: 1.25;
}

/* Technical Form Grid Architecture (Pure White Body + Locked Property Rail) */
.mfg-estimator-section .card__body {
    padding: 1.25rem 1.75rem !important;
    background-color: #ffffff !important;
}

.mfg-estimator-section .form-grid {
    display: grid !important;
    grid-template-columns: var(--form-rail-width, 210px) 1fr !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 0.4rem 0 !important;
    margin: 0 !important;
    border-bottom: none !important;
    gap: 1.25rem !important;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease !important;
}

.mfg-estimator-section .form-grid:hover {
    background-color: var(--form-row-hover, rgba(176, 106, 65, 0.03)) !important;
}

.mfg-estimator-section .form-grid[style*="display: none"],
.mfg-estimator-section .form-grid.d-none {
    display: none !important;
}

.mfg-estimator-section .form-grid:last-child {
    border-bottom: none !important;
}

.mfg-estimator-section .form-grid .form-label {
    width: var(--form-rail-width, 210px) !important;
    min-width: var(--form-rail-width, 210px) !important;
    max-width: var(--form-rail-width, 210px) !important;
    flex: 0 0 var(--form-rail-width, 210px) !important;
    background-color: transparent !important;
    border-right: none !important;
    font-family: var(--font-tech), sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--color-gray-700, #3f3f46) !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.mfg-estimator-section .form-grid .form-input-container {
    flex: 1 1 auto !important;
    width: auto !important;
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .mfg-estimator-section .card__body {
        padding: 1rem 1rem !important;
    }
    .mfg-estimator-section .form-grid {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        padding: 0.75rem 0 !important;
    }
    .mfg-estimator-section .form-grid .form-label,
    .mfg-label {
        width: 100% !important;
        min-width: auto !important;
        max-width: none !important;
    }
}

/* Disciplined Dark Copper Mandatory Asterisk */
.form-label .text-danger,
.text-danger {
    color: #b06a41 !important;
}

/* Heading Icon Box Style to match reference design */
.heading-icon-box {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(176, 106, 65, 0.08) !important;
    border: 1px solid rgba(176, 106, 65, 0.22) !important;
    border-radius: 6px;
    flex-shrink: 0;
    padding-top: 4px;
}
.heading-icon-box .material-symbols-outlined {
    color: #b06a41 !important;
    font-size: 1.45rem !important;
}
.heading-icon-box svg {
    color: #b06a41 !important;
}

/* Monospace Section Headers & Subtitles */
.mfg-estimator-section h2 {
    font-family: var(--font-tech) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 !important;
}

.mfg-estimator-section p {
    font-family: var(--font-tech) !important;
    font-weight: 400 !important;
    font-size: 0.8rem !important;
    color: var(--color-gray-500) !important;
    margin: 4px 0 0 0 !important;
    letter-spacing: 0.01em !important;
}

/* Specification View Button */
.btn-specs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-tech);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    border: 1px solid var(--color-gray-200);
    border-radius: 6px;
    background-color: var(--color-white, #ffffff);
    color: #262626;
    padding: 6px 14px;
    text-decoration: none;
    transition: all 0.2s ease;
    height: 34px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-specs .material-symbols-outlined,
.btn-specs svg {
    color: var(--color-primary, #b06a41) !important;
    font-size: 1.05rem !important;
}
.btn-specs:hover {
    border-color: var(--color-primary);
    background-color: rgba(176, 106, 65, 0.03);
}

/* Sidebar Navigation Card Status Badges */
.badge-status {
    font-family: var(--font-tech);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 10px;
    border-radius: 9999px;
    line-height: 1.5;
}

.badge-status.active {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.15);
}

.badge-status.select {
    background-color: #f4f4f5;
    color: #71717a !important;
    border: 1px solid #e4e4e7;
}

.nav-card .badge-status.active { display: none; }
.nav-card .badge-status.select { display: inline-block; }
.nav-card.active .badge-status.active { display: inline-block; }
.nav-card.active .badge-status.select { display: none; }

.nav-card-desc {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin: 0;
    line-height: 1.35;
    font-weight: 500;
    font-family: var(--font-sans);
}

.nav-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-gray-150, #f0f0f0);
}

.nav-card.active .nav-card-tags {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.nav-card.active .nav-card-tag.rush {
    background-color: rgba(6, 182, 212, 0.15) !important;
    color: #22d3ee !important;
    border-color: rgba(6, 182, 212, 0.25) !important;
}

.nav-card-tag {
    font-family: var(--font-tech);
    font-size: 0.65rem;
    font-weight: 600;
    background-color: var(--color-gray-100);
    color: var(--color-gray-600);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--color-gray-200);
}

.nav-card.active .nav-card-tag {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--color-gray-300);
    border-color: rgba(255, 255, 255, 0.1);
}

.nav-card-tag.rush {
    background-color: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.nav-card.active .nav-card-tag.rush {
    background-color: rgba(245, 158, 11, 0.15);
    color: #eab308;
    border-color: rgba(245, 158, 11, 0.2);
}

/* ==========================================================================
   ALIGNING TOP BASELINES ACROSS ALL THREE COLUMNS (ESTIMATOR PAGE)
   ========================================================================== */

/* 1. Common Grid Alignment Horizon */
.estimator-layout-grid {
    display: grid !important;
    grid-template-columns: repeat(24, 1fr) !important;
    gap: 1.25rem !important;
    width: 100% !important;
    align-items: start !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 2. Normalize Outer Column Margins, Padding & Sticky Horizons */
.estimator-sidebar-col,
.estimator-main-col,
.estimator-sticky-col {
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    box-sizing: border-box !important;
    align-self: start !important;
}

/* Pin Left Navigation (Column A) */
.estimator-sidebar-col {
    grid-column: span 4 !important;
    position: sticky !important;
    top: 5rem !important; /* Clears floating header */
    height: fit-content !important;
    z-index: 15 !important;
}

.estimator-layout-grid .project-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
}

/* Depth Layer 2: Left Navigation Chassis (Milled Optical Dock Bay) */
@media (min-width: 992px) {
    .estimator-sidebar {
        background-color: rgba(247, 244, 237, 0.85) !important; /* Milled translucent alabaster */
        backdrop-filter: blur(12px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
        border: 1px solid rgba(176, 106, 65, 0.2) !important;
        border-radius: var(--radius-flush-6) !important;
        padding: 5px !important;
        margin: 0 !important;
        margin-top: 0 !important;
        height: fit-content !important;
        box-sizing: border-box !important;
        box-shadow: 
            inset 0 2px 5px rgba(0, 0, 0, 0.05),
            inset 0 1px 2px rgba(176, 106, 65, 0.06),
            0 4px 14px rgba(0, 0, 0, 0.02) !important;
    }
}
@media (max-width: 991px) {
    .estimator-sidebar {
        background-color: rgba(247, 244, 237, 0.85) !important;
        backdrop-filter: blur(12px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
        border: 1px solid rgba(176, 106, 65, 0.2) !important;
        border-radius: var(--radius-flush-6) !important;
        padding: 5px !important;
        margin: 0 !important;
        margin-top: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Column B - Main Workspace Forms (14 Columns) */
.estimator-main-col {
    grid-column: span 14 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Pin Live Pricing Summary & Specs Button (Column C) */
.estimator-sticky-col {
    grid-column: span 6 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    position: sticky !important;
    top: 5rem !important; /* Clears floating header */
    height: fit-content !important;
    z-index: 20 !important;
}

/* Zero Margin Baseline Normalization on all child cards */
.mfg-estimator-section,
.mfg-estimator-section form,
.mfg-estimator-section .hud-chassis,
.mfg-estimator-sticky,
.mfg-estimator-sticky .card {
    margin-top: 0 !important;
    box-sizing: border-box !important;
}

/* Depth Layer 3: Sticky Project Estimate Card (Exclusive Floating Dark Monolith) */
.mfg-estimator-sticky {
    display: none;
    flex-direction: column;
}
.mfg-estimator-sticky.active {
    display: flex !important;
}

.mfg-estimator-sticky .card {
    position: relative !important;
    z-index: 20 !important;
    background: linear-gradient(180deg, #18181b 0%, #111113 100%) !important;
    border: none !important;
    border-radius: 0 !important;
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px) !important;
    -webkit-clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.55)) !important;
    transition: filter 0.3s ease, transform 0.3s ease !important;
    overflow: hidden !important;
}

/* Responsive Overrides (Stacked Layout for Tablets & Mobile) */
@media (max-width: 1024px) {
    .estimator-layout-grid {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding-bottom: 2rem;
    }
    
    .estimator-sidebar-col, 
    .estimator-main-col, 
    .estimator-sticky-col {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        top: auto !important;
    }
}

/* ==========================================================================
   REFRACTIVE OPTICAL GLASS & TACTILE COPPER NAVIGATION SYSTEM
   ========================================================================== */

.nav-card-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

/* Resting Inactive Glass Module */
.nav-card {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(10px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
    border: 1px solid rgba(223, 218, 208, 0.8) !important;
    border-radius: var(--radius-flush-4) !important;
    padding: 0 14px !important;
    cursor: pointer;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    height: 76px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 2px 5px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.nav-card:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(176, 106, 65, 0.4) !important;
    transform: translateY(-1.5px);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 6px 16px -2px rgba(176, 106, 65, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

/* Active Navigation Card: Refractive Light Glass Prism */
.nav-card.active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(253, 249, 244, 0.94) 100%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1.5px solid var(--color-primary, #b06a41) !important;
    padding: 0 14px !important;
    transform: none !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(176, 106, 65, 0.05),
        0 8px 22px -4px rgba(176, 106, 65, 0.18),
        0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

/* Tactile Sunk-Well Icon Housing */
.nav-card-icon-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: var(--radius-flush-3, 4px) !important;
    background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.8), rgba(240, 235, 226, 0.6) 80%) !important;
    border: 1px solid rgba(210, 202, 190, 0.7) !important;
    color: #8c8782 !important;
    flex-shrink: 0 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 
        inset 0 1.5px 3px rgba(0, 0, 0, 0.04),
        0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.nav-card-icon-box .material-symbols-outlined,
.nav-card-icon-box svg {
    font-size: 22px !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
}

.nav-card:hover .nav-card-icon-box {
    border-color: rgba(176, 106, 65, 0.35) !important;
    color: var(--color-primary, #b06a41) !important;
    background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 1), rgba(245, 232, 222, 0.7) 80%) !important;
    box-shadow: 
        inset 0 1.5px 3px rgba(176, 106, 65, 0.08),
        0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Active State Icon Housing */
.nav-card.active .nav-card-icon-box {
    background: radial-gradient(circle at 50% 35%, rgba(248, 232, 220, 0.95), rgba(235, 208, 188, 0.85) 80%) !important;
    border: 1px solid rgba(176, 106, 65, 0.4) !important;
    color: var(--color-primary, #b06a41) !important;
    box-shadow: 
        inset 0 1.5px 3px rgba(176, 106, 65, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6),
        0 1px 0 rgba(255, 255, 255, 1) !important;
}

.nav-card.active .nav-card-icon-box svg {
    color: var(--color-primary, #b06a41) !important;
}



/* Title Typography (Clean Two-Word Structure) */
.nav-card-title {
    font-size: 1.05rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.03em !important;
    font-weight: 700 !important;
    margin: 0 !important;
    font-family: var(--font-tech) !important;
    text-transform: uppercase !important;
    color: #4a453f !important; /* Neutral warm slate */
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    transition: color 0.2s ease !important;
}

.nav-card-title span {
    font-size: 1.05rem !important;
    line-height: 1.15 !important;
    display: block !important;
    color: inherit !important;
}



/* Light Theme Hover & Active State Typography */
.nav-card:hover .nav-card-title,
.nav-card:hover .nav-card-title span {
    color: var(--color-primary, #b06a41) !important;
}

.nav-card.active .nav-card-title,
.nav-card.active .nav-card-title span {
    color: var(--color-primary, #b06a41) !important; 
    font-weight: 800 !important;
}

/* ==========================================================================
   STICKY SUMMARY SOLUTIONS PREVIEW VARIANTS
   ========================================================================== */

/* ==========================================================================
   UNIFIED GLOBAL STICKY SUMMARY TERMINAL SYSTEM (.hud-summary-sticky)
   Obsidian Monolith with 14px Notched Chamfers (No Outer Bezel Wrapper)
   ========================================================================== */
.hud-summary-sticky,
.mfg-estimator-sticky {
    position: relative !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    width: 100% !important;
    flex-shrink: 0 !important;
}

.hud-summary-sticky .card,
.mfg-estimator-sticky .card {
    position: relative !important;
    z-index: 20 !important;
    background: linear-gradient(180deg, #18181b 0%, #111113 100%) !important;
    border: none !important;
    border-radius: 0 !important;
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px) !important;
    -webkit-clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.55)) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    flex: none !important;
    width: 100% !important;
}

.hud-summary-sticky .card__header,
.mfg-estimator-sticky .card__header {
    background: #1f1f23 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0.6rem 1rem !important;
    min-height: 42px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

.hud-summary-sticky .card__body,
.mfg-estimator-sticky .card__body {
    background: transparent !important;
    flex: none !important;
    padding: 0.85rem 1rem !important;
}

.hud-summary-sticky .card__footer,
.mfg-estimator-sticky .card__footer {
    background: #1f1f23 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0.75rem 1rem !important;
    flex-shrink: 0 !important;
}

.hud-summary-sticky .card__title,
.sticky-summary--copper-bronze .card__title,
.mfg-estimator-sticky .card__title {
    color: #a8a29e !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
}

/* Accordion Item Rows - Tier 1 Primary Categories */
.hud-summary-sticky .hud-accordion-item,
.sticky-summary--copper-bronze .hud-accordion-item {
    background: transparent !important;
    border-bottom: none !important;
    padding: 3px 0 !important;
    margin-bottom: 0 !important;
}

.hud-summary-sticky .hud-accordion-item:last-child,
.sticky-summary--copper-bronze .hud-accordion-item:last-child {
    border-bottom: none !important;
}

.hud-summary-sticky .hud-accordion-item > div:first-child,
.sticky-summary--copper-bronze .hud-accordion-item > div:first-child {
    color: #94a3b8 !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

.hud-summary-sticky .hud-accordion-item .accordion-icon,
.sticky-summary--copper-bronze .hud-accordion-item .accordion-icon {
    font-size: 0.95rem !important;
    color: var(--color-primary, #b06a41) !important;
    transition: transform 0.2s ease !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

.hud-summary-sticky .hud-accordion-item .text-primary,
.sticky-summary--copper-bronze .hud-accordion-item .text-primary {
    color: #f8fafc !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.02em !important;
}

/* Tier 4: Recessed Inset Child Drawer (Subdued Regular/Medium) */
.hud-summary-sticky .hud-accordion-content,
.sticky-summary--copper-bronze .hud-accordion-content {
    display: none !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border-left: 2px solid var(--color-primary, #b06a41) !important;
    border-radius: var(--radius-flush-2, 4px) !important;
    padding: 6px 10px !important;
    margin-top: 5px !important;
    color: #64748b !important;
    font-size: 0.68rem !important;
    font-weight: 400 !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
}

.hud-summary-sticky .hud-accordion-content.expanded,
.sticky-summary--copper-bronze .hud-accordion-content.expanded,
.hud-summary-sticky .hud-accordion-content.open,
.sticky-summary--copper-bronze .hud-accordion-content.open {
    display: flex !important;
}

.hud-summary-sticky .hud-accordion-content span:first-child,
.sticky-summary--copper-bronze .hud-accordion-content span:first-child {
    color: #64748b !important;
    font-size: 0.68rem !important;
    font-weight: 400 !important;
}

.hud-summary-sticky .hud-accordion-content span:last-child,
.sticky-summary--copper-bronze .hud-accordion-content span:last-child {
    color: #f8fafc !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
}

/* Tier 3: Secondary Breakdown Section (Freight, Taxable, GST) */
.hud-summary-sticky .summary-section,
.sticky-summary--copper-bronze .summary-section {
    border-bottom: none !important;
    padding: 0 !important;
}

.hud-summary-sticky .summary-section span:first-child,
.sticky-summary--copper-bronze .summary-section span:first-child {
    color: #94a3b8 !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
}

.hud-summary-sticky .summary-section span:last-child,
.sticky-summary--copper-bronze .summary-section span:last-child {
    color: #f8fafc !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
}

/* Tier 0: Final Hero Total Order Box */
.hud-summary-sticky .summary-totals,
.sticky-summary--copper-bronze .summary-totals {
    background: rgba(176, 106, 65, 0.1) !important;
    border-top: 1px solid rgba(176, 106, 65, 0.3) !important;
    border-bottom: 1px solid rgba(176, 106, 65, 0.3) !important;
    padding: 10px 14px !important;
    margin: 10px -16px 0 -16px !important;
}

.hud-summary-sticky .summary-totals .uppercase,
.sticky-summary--copper-bronze .summary-totals .uppercase {
    color: #cbd5e1 !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

.hud-summary-sticky .summary-totals #sum-grand-total,
.sticky-summary--copper-bronze .summary-totals #sum-grand-total {
    color: var(--color-primary, #b06a41) !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 0 12px rgba(176, 106, 65, 0.4) !important;
}

/* Quote Per Piece Inset Well Badge */
.sticky-quote-badge {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(176, 106, 65, 0.28) !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
    margin-top: 10px !important;
    margin-bottom: 2px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.35) !important;
}

.sticky-quote-label {
    color: #cbd5e1 !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.sticky-quote-val {
    color: var(--color-primary, #b06a41) !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 0 10px rgba(176, 106, 65, 0.35) !important;
}

/* Estimator & Manufacturing Flat Line Items */
.sticky-line-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 0 !important;
}

.sticky-line-label {
    color: #94a3b8 !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.sticky-line-val {
    color: #ffffff !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

.sticky-divider {
    height: 1px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    margin: 8px 0 !important;
}

.sticky-total-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 0 6px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    margin-top: 6px !important;
}

.sticky-total-label {
    color: #ffffff !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* Secondary Action Button (Save Draft) */
.btn-secondary-action {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(176, 106, 65, 0.35) !important;
    color: #f5d0b5 !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    height: 38px !important;
    border-radius: 0 !important;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px) !important;
    -webkit-clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.btn-secondary-action .material-symbols-outlined {
    font-size: 1.1rem !important;
    color: inherit !important;
    transition: transform 0.2s ease !important;
}

.btn-secondary-action:hover {
    background: rgba(176, 106, 65, 0.15) !important;
    border-color: var(--color-primary, #b06a41) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(176, 106, 65, 0.25) !important;
}

.btn-secondary-action:hover .material-symbols-outlined {
    transform: scale(1.08) !important;
}

/* Unified Engineered Specs Button (Card Header) */
.btn-specs {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: var(--radius-flush-3) !important;
    background-color: #ffffff !important;
    border: 1px solid #dfdbd2 !important;
    color: #3f3d3a !important;
    font-family: var(--font-tech) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.btn-specs .material-symbols-outlined {
    font-size: 15px !important;
    color: var(--color-primary, #b06a41) !important;
    transition: transform 0.2s ease !important;
}

.btn-specs:hover {
    background-color: rgba(176, 106, 65, 0.08) !important;
    border-color: var(--color-primary, #b06a41) !important;
    color: var(--color-primary, #b06a41) !important;
    box-shadow: 0 2px 8px rgba(176, 106, 65, 0.15) !important;
    transform: translateY(-1px) !important;
}

.btn-specs:hover .material-symbols-outlined {
    transform: translate(1px, -1px) !important;
}

/* Calibrated Heading Icon Box for Form Cards */
.heading-icon-box {
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(176, 106, 65, 0.08) !important;
    border: 1px solid rgba(176, 106, 65, 0.18) !important;
    border-radius: var(--radius-flush-2) !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

.heading-icon-box svg {
    color: var(--color-primary, #b06a41) !important;
    width: 20px !important;
    height: 20px !important;
}

/* Modular Typographic Scale (1.200 Minor Third Ratio) */
.estimator-form-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    font-family: var(--font-tech) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    color: #2c2a29 !important; /* Warm Espresso Slate */
    margin: 0 !important;
}

.estimator-form-subtitle {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    font-family: var(--font-tech) !important;
    color: #8c8782 !important; /* Warm Muted Stone */
    letter-spacing: 0.02em !important;
    margin: 2px 0 0 0 !important;
}

.btn-primary-action {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    font-family: var(--font-tech) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    height: 42px !important;
    padding: 0 1.25rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-flush-3) !important;
}

.estimator-live-total {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    font-family: var(--font-mono) !important;
    color: var(--color-primary, #b06a41) !important;
}

.mfg-estimator-sticky .card__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 42px !important;
    padding: 0 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
}

.summary-live-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 8px !important;
    border-radius: 9999px !important;
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    font-size: 0.65rem !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-weight: 700 !important;
    color: #34d399 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
}

.summary-live-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.9) !important;
    animation: livePulse 2s infinite ease-in-out;
}

@keyframes livePulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.45;
        transform: scale(0.85);
    }
}

.mfg-estimator-sticky .card__title {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    color: #a8a29e !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    text-transform: none !important;
}

.hud-summary-sticky .btn-primary-action,
.mfg-pricing-card .btn-primary-action,
.mfg-estimator-sticky .btn-primary-action {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #c47a50 0%, #b06a41 50%, #96532d 100%) !important;
    color: #ffffff !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.875rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    height: 44px !important;
    width: 100% !important;
    padding: 0 1.5rem !important;
    border: none !important;
    border-radius: 0 !important;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
    -webkit-clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px rgba(176, 106, 65, 0.35) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease, opacity 0.3s ease !important;
}

/* Metallic Light Reflection Sweep */
.hud-summary-sticky .btn-primary-action::before,
.mfg-pricing-card .btn-primary-action::before,
.mfg-estimator-sticky .btn-primary-action::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -150% !important;
    width: 80% !important;
    height: 200% !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%) !important;
    transform: rotate(25deg) !important;
    pointer-events: none !important;
    transition: none !important;
}

.hud-summary-sticky .btn-primary-action:hover::before,
.mfg-pricing-card .btn-primary-action:hover::before,
.mfg-estimator-sticky .btn-primary-action:hover::before {
    left: 200% !important;
    transition: left 0.65s cubic-bezier(0.2, 0, 0, 1) !important;
}

.hud-summary-sticky .btn-primary-action:hover,
.mfg-pricing-card .btn-primary-action:hover,
.mfg-estimator-sticky .btn-primary-action:hover {
    background: linear-gradient(135deg, #d4875b 0%, #be764c 50%, #a25c34 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 20px rgba(176, 106, 65, 0.55) !important;
    transform: translateY(-1px) !important;
}

.hud-summary-sticky .btn-primary-action:active,
.mfg-pricing-card .btn-primary-action:active,
.mfg-estimator-sticky .btn-primary-action:active {
    background: linear-gradient(135deg, #a35b32 0%, #884824 100%) !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(176, 106, 65, 0.25) !important;
    transform: translateY(1px) scale(0.99) !important;
}

/* --- Tri-State CTA Machine States --- */
/* State 1: Active Copper Review / Order Trigger */
.hud-summary-sticky .btn-primary-action,
.hud-summary-sticky .btn-primary-action.btn--ready,
.hud-summary-sticky .btn-primary-action.btn--inactive,
.hud-summary-sticky .btn-primary-action.is-ready,
.hud-summary-sticky .btn-primary-action.is-disabled,
.mfg-pricing-card .btn-primary-action.btn--ready,
.mfg-pricing-card .btn-primary-action.is-ready,
.mfg-estimator-sticky .btn-primary-action {
    background: linear-gradient(135deg, #c47a50 0%, #b06a41 50%, #96532d 100%) !important;
    color: #ffffff !important;
    opacity: 1 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px rgba(176, 106, 65, 0.35) !important;
    cursor: pointer !important;
}

.hud-summary-sticky .btn-primary-action:hover,
.mfg-pricing-card .btn-primary-action.btn--ready:hover,
.mfg-estimator-sticky .btn-primary-action:hover {
    background: linear-gradient(135deg, #d4875b 0%, #be764c 50%, #a25c34 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 20px rgba(176, 106, 65, 0.55) !important;
    transform: translateY(-1px) !important;
}

/* State 3: Complete / Final Cart & Order Trigger */
.hud-summary-sticky .btn-primary-action.btn--primary,
.hud-summary-sticky .btn-primary-action.btn--green,
.hud-summary-sticky .btn-primary-action.is-complete,
.mfg-pricing-card .btn-primary-action.btn--primary,
.mfg-pricing-card .btn-primary-action.btn--green,
.mfg-pricing-card .btn-primary-action.is-complete {
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 16px rgba(16, 185, 129, 0.45) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}
.hud-summary-sticky .btn-primary-action.btn--primary:hover,
.hud-summary-sticky .btn-primary-action.btn--green:hover,
.mfg-pricing-card .btn-primary-action.btn--primary:hover,
.mfg-pricing-card .btn-primary-action.btn--green:hover {
    background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #059669 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 22px rgba(16, 185, 129, 0.6) !important;
    transform: translateY(-1px) !important;
}

/* Clean Industrial Numeric Inputs (Hide Browser Stepper Arrows) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

input[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

/* Standardize all single numeric input fields in form grids and dynamic containers */
.form-grid input[type="number"],
.mfg-row input[type="number"],
.mfg-sub-row input[type="number"],
.mfg-value > input[type="number"] {
    width: 150px !important;
    min-width: 150px;
    max-width: 150px;
    box-sizing: border-box;
}

/* Paired dimension & grid inputs (Length x Breadth, Cols x Rows) */
.form-grid .d-flex input[type="number"],
.mfg-row .d-flex input[type="number"],
.mfg-sub-row .d-flex input[type="number"] {
    width: 150px !important;
    min-width: 150px;
    max-width: 150px;
    box-sizing: border-box;
}

/* Intrinsic, content-adaptive width for select dropdowns across all technical forms */
.form-grid select,
.mfg-row select,
.mfg-sub-row select,
.mfg-value select,
.mfg-spec-select {
    width: auto !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 80px;
    box-sizing: border-box;
    display: inline-flex !important;
    vertical-align: middle;
}

/* Compact Dimension Group with Embedded Unit Badges */
.mfg-dimension-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
}

.mfg-unit-input-wrapper {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 150px !important;
}

/* Tactile Inset Ingestion Wells for All Inputs & Textareas */
.mfg-unit-input-wrapper input[type="number"],
.form-grid input[type="number"],
.form-grid input[type="text"],
.form-grid textarea,
.form-grid select:not(.mfg-spec-select),
.hud-input {
    background: var(--input-bg, #ffffff);
    border: 1px solid var(--input-border, #cbd5e1);
    border-radius: var(--radius-flush-2, 4px);
    box-shadow: var(--input-shadow-inset);
    color: var(--input-text, #1e293b);
    box-sizing: border-box;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Numeric Dimension Stepper Wells */
.mfg-unit-input-wrapper input[type="number"],
.form-grid input[type="number"] {
    width: var(--input-hud-number-width, 150px);
    min-width: var(--input-hud-number-width, 150px);
    max-width: var(--input-hud-number-width, 150px);
    padding-right: 32px;
    padding-left: 12px;
    height: 32px;
    font-family: var(--font-mono, monospace);
    font-size: 0.8125rem;
    font-weight: 700;
}

/* Text Inputs & Selects */
.form-grid input[type="text"],
.form-grid select:not(.mfg-spec-select) {
    height: 34px;
    padding: 0 12px;
    font-family: 'Source Sans Pro', var(--font-sans), sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Multi-Line Textareas */
.form-grid textarea {
    padding: 10px 12px;
    font-family: 'Source Sans Pro', var(--font-sans), sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    resize: vertical;
}

/* Full Width Utility */
.form-grid input[type="text"].w-full,
.form-grid textarea.w-full,
.form-grid select.w-full,
.hud-input.w-full {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.mfg-unit-input-wrapper input[type="number"]:focus,
.form-grid input[type="number"]:focus,
.form-grid input[type="text"]:focus,
.form-grid textarea:focus,
.form-grid select:focus,
textarea.form-control:focus,
textarea.hud-input:focus,
.hud-input:focus {
    background-color: var(--input-bg, #ffffff);
    border-color: var(--input-focus-border, #b06a41);
    box-shadow: var(--input-focus-ring);
    outline: none;
}

.mfg-unit-badge {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    font-weight: 700;
    color: #8c8782;
    pointer-events: none;
    user-select: none;
    text-transform: lowercase;
}

.mfg-dimension-sep {
    font-size: 0.9rem;
    font-weight: 700;
    color: #a8a29e;
    user-select: none;
    line-height: 1;
}

/* Progressive Disclosure: Advanced Specifications Accordion in Estimator */
.mfg-advanced-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    margin: 0.65rem 0 0.4rem 0;
    background: #fcfaf7;
    border: 1px solid #e8e4dc;
    border-radius: var(--radius-flush-3, 6px);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}
.mfg-advanced-toggle:hover {
    background: #f5f1ea;
    border-color: #dcd6cb;
}
.mfg-advanced-toggle.is-open {
    background: rgba(176, 106, 65, 0.06);
    border-color: rgba(176, 106, 65, 0.25);
}
.mfg-advanced-toggle.is-open .mfg-advanced-icon,
.mfg-advanced-toggle.is-open .mfg-advanced-title {
    color: var(--color-primary, #b06a41) !important;
}
.mfg-advanced-icon {
    font-size: 1.1rem;
    color: #8c8782;
    transition: color 0.2s ease;
}
.mfg-advanced-title {
    font-family: var(--font-tech, sans-serif);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #44403c;
    transition: color 0.2s ease;
}
.mfg-advanced-badge {
    font-family: var(--font-mono, monospace);
    font-size: 0.675rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    background: #ebe6dc;
    color: #5a5755;
    transition: all 0.2s ease;
}
.mfg-advanced-toggle.is-open .mfg-advanced-badge {
    background: rgba(176, 106, 65, 0.15);
    color: var(--color-primary, #b06a41);
}
.mfg-advanced-chevron {
    font-size: 1.25rem;
    color: #8c8782;
    transition: transform 0.25s ease;
}
.mfg-advanced-toggle.is-open .mfg-advanced-chevron {
    transform: rotate(180deg);
    color: var(--color-primary, #b06a41);
}
.mfg-advanced-content {
    animation: fadeIn 0.2s ease;
}

/* ==========================================================================
   DESIGN & FIRMWARE RFQ PAGE LAYOUT (4 COLS SIDEBAR + 20 COLS WORKSPACE)
   ========================================================================== */
.design-layout-grid {
    display: grid !important;
    grid-template-columns: repeat(24, 1fr) !important;
    gap: 1.25rem !important;
    align-items: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.design-sidebar-col {
    grid-column: span 4 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    position: sticky !important;
    top: 5rem !important;
    height: fit-content !important;
    z-index: 10 !important;
}

.design-main-col {
    grid-column: span 20 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    position: relative !important;
    z-index: 10 !important;
    min-width: 0 !important;
}

/* Design & Firmware Tab View Visibility Engine */
.design-view-section {
    display: none !important;
}

.design-view-section.active {
    display: flex !important;
}

@media (max-width: 1024px) {
    .design-layout-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding-bottom: 2rem !important;
    }
    .design-sidebar-col,
    .design-main-col {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        top: auto !important;
    }
}

/* Turnkey Process Flow Pipeline (Section 2) */
.turnkey-hud-process-container {
    margin-top: 2rem;
    padding: 1.75rem 2rem;
    background: #ffffff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-flush-6, 10px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.turnkey-hud-preheading {
    font-family: var(--font-tech, monospace);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary, #b06a41);
    margin-bottom: 0.35rem;
    text-align: center !important;
}

.turnkey-hud-heading {
    font-family: var(--font-tech, monospace);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-gray-900);
    margin: 0 0 1.5rem 0;
    text-align: center !important;
}

.turnkey-hud-process-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

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

.process-hud-card {
    background: #ffffff !important;
    border: 1px solid rgba(176, 106, 65, 0.16) !important;
    border-radius: var(--radius-flush-4, 6px);
    padding: 0.75rem 1.65rem 1.35rem 1.65rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(176, 106, 65, 0.04) !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-hud-card:hover {
    background: #ffffff !important;
    border-color: rgba(176, 106, 65, 0.4) !important;
    box-shadow: 0 10px 28px -4px rgba(176, 106, 65, 0.14) !important;
    transform: translateY(-2px);
}

.process-hud-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    margin-bottom: 0.85rem;
}

.process-hud-step-num {
    font-family: var(--font-tech, monospace);
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--color-primary, #b06a41);
    background: rgba(176, 106, 65, 0.09);
    border: 1px solid rgba(176, 106, 65, 0.18);
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}

.process-hud-icon-box {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: var(--radius-flush-4, 6px);
    border-bottom-left-radius: var(--radius-flush-3, 6px);
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(176, 106, 65, 0.07) 80%) !important;
    border-left: 1px solid rgba(176, 106, 65, 0.18) !important;
    border-bottom: 1px solid rgba(176, 106, 65, 0.18) !important;
    border-top: none !important;
    border-right: none !important;
    color: var(--color-primary, #b06a41);
    margin-top: -0.75rem;
    margin-right: -1.65rem;
}

.process-hud-icon-box .material-symbols-outlined {
    font-size: 2rem !important;
}

.process-hud-title {
    font-family: var(--font-tech, monospace);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-gray-900);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.process-hud-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #334155 !important;
    margin: 0;
}

/* ==========================================================================
   ELEVATED INDUSTRIAL HUD FORM CHASSIS & INGESTION WELLS
   ========================================================================== */
.design-main-col .hud-chassis,
.estimator-main-col .hud-chassis {
    background: #ffffff !important;
    border: 1px solid rgba(176, 106, 65, 0.18) !important;
    border-radius: var(--radius-flush-6, 10px) !important;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.04),
        0 1px 3px rgba(176, 106, 65, 0.06) !important;
    overflow: hidden !important;
}

/* Header Bar Accent */
.design-main-col .card__header,
.estimator-main-col .card__header {
    background: rgba(176, 106, 65, 0.04) !important;
    border-bottom: 1px solid rgba(176, 106, 65, 0.16) !important;
    padding: 0.85rem 1.25rem !important;
}

/* Header Icon Box Lens */
.design-main-col .heading-icon-box,
.estimator-main-col .heading-icon-box {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-flush-3, 4px) !important;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(176, 106, 65, 0.08) 80%) !important;
    border: 1px solid rgba(176, 106, 65, 0.22) !important;
    color: var(--color-primary, #b06a41) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 6px rgba(176, 106, 65, 0.08) !important;
}

/* Form Labels & Rows */
.design-main-col .form-label,
.estimator-main-col .form-label {
    color: #1e293b !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

.design-main-col .form-grid {
    border-bottom: none !important;
}

/* Inset Ingestion Text Inputs & Textareas */
.design-main-col input[type="text"],
.design-main-col input[type="email"],
.design-main-col textarea,
.design-main-col select,
.estimator-main-col input,
.estimator-main-col select,
.estimator-main-col textarea {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: var(--radius-flush-2, 4px) !important;
    box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.04) !important;
    color: #0f172a !important;
    font-size: 0.875rem !important;
    padding: 8px 12px !important;
    transition: all 0.2s ease !important;
}

.design-main-col input:focus:not(.is-invalid):not(.invalid),
.design-main-col textarea:focus:not(.is-invalid):not(.invalid),
.design-main-col select:focus:not(.is-invalid):not(.invalid),
.estimator-main-col input:focus:not(.is-invalid):not(.invalid),
.estimator-main-col select:focus:not(.is-invalid):not(.invalid),
.estimator-main-col textarea:focus:not(.is-invalid):not(.invalid) {
    border-color: var(--color-primary, #b06a41) !important;
    box-shadow: 0 0 0 3px rgba(176, 106, 65, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    outline: none !important;
}

/* Invalid focus priority override */
.design-main-col input.is-invalid,
.design-main-col textarea.is-invalid,
.design-main-col select.is-invalid,
.estimator-main-col input.is-invalid,
.estimator-main-col select.is-invalid,
.estimator-main-col textarea.is-invalid,
.design-main-col input.is-invalid:focus,
.design-main-col textarea.is-invalid:focus,
.design-main-col select.is-invalid:focus,
.estimator-main-col input.is-invalid:focus,
.estimator-main-col select.is-invalid:focus,
.estimator-main-col textarea.is-invalid:focus,
.hud-input.is-invalid,
.hud-input.is-invalid:focus {
    border-color: var(--color-danger, #dc2626) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22), inset 0 1px 2px rgba(220, 38, 38, 0.05) !important;
    background-color: #fffbfa !important;
    outline: none !important;
}

/* Form Footer Bar & Chamfered Action Button */
.design-main-col .card__footer,
.estimator-main-col .card__footer {
    background: rgba(176, 106, 65, 0.03) !important;
    border-top: 1px solid rgba(176, 106, 65, 0.16) !important;
    padding: 0.85rem 1.75rem !important;
}

.design-main-col .hud-btn-primary,
.estimator-main-col .hud-btn-primary {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #c47a50 0%, #b06a41 50%, #96532d 100%) !important;
    color: #ffffff !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.875rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    height: 44px !important;
    padding: 0 2rem !important;
    border: none !important;
    border-radius: 0 !important;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
    -webkit-clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px rgba(176, 106, 65, 0.35) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease !important;
}

/* ==========================================================================
   EXPANDED TECHNICAL FORM PRIMITIVES (SUB-CARDS, CHOICE TILES, DISABLED STATES)
   ========================================================================== */

/* 2. Interactive Scope Choice & Selection Card Primitive */
.hud-choice-card {
    background: #ffffff !important;
    border: 1px solid rgba(176, 106, 65, 0.18) !important;
    border-radius: var(--radius-flush-4, 6px) !important;
    padding: 1rem 1.25rem !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.hud-choice-card:hover {
    background: #fafaf9 !important;
    border-color: rgba(176, 106, 65, 0.35) !important;
    box-shadow: 0 4px 14px rgba(176, 106, 65, 0.08) !important;
}

.hud-choice-card.is-selected,
.hud-choice-card.active {
    background: rgba(176, 106, 65, 0.04) !important;
    border: 1.5px solid var(--color-primary, #b06a41) !important;
    box-shadow: 0 4px 16px rgba(176, 106, 65, 0.12) !important;
}

/* 3. Disabled & Inactive Form Field & Row States */
.hud-main-col input:disabled,
.hud-main-col select:disabled,
.hud-main-col textarea:disabled,
.design-main-col input:disabled,
.design-main-col select:disabled,
.design-main-col textarea:disabled,
.estimator-main-col input:disabled,
.estimator-main-col select:disabled,
.estimator-main-col textarea:disabled {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

.hud-form-row.is-disabled,
.form-grid.is-disabled {
    opacity: 0.55 !important;
    pointer-events: none !important;
}

.hud-form-row.is-disabled .hud-form-label,
.form-grid.is-disabled .form-label {
    color: #94a3b8 !important;
}

.hud-form-label.is-optional::after,
.form-label.is-optional::after {
    content: " (Optional)";
    color: #94a3b8;
    font-weight: 500;
    font-size: 0.75rem;
}

/* 4. Conditional & Relational Form View Primitives */
.hud-conditional-block.is-hidden,
[data-show-if].is-hidden {
    display: none !important;
    opacity: 0 !important;
}

.hud-conditional-block.is-visible,
[data-show-if].is-visible {
    display: block !important;
    opacity: 1 !important;
    animation: hudFadeIn 0.25s ease-in-out !important;
}

.hud-drawer-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    background: #fafaf9 !important;
    border: 1px solid rgba(176, 106, 65, 0.16) !important;
    border-radius: var(--radius-flush-3, 4px) !important;
    cursor: pointer !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 8px 0 !important;
}

.hud-drawer-content {
    background: #fafaf9 !important;
    border-left: 2.5px solid var(--color-primary, #b06a41) !important;
    border-radius: 0 0 var(--radius-flush-3, 4px) var(--radius-flush-3, 4px) !important;
    padding: 10px 14px !important;
    overflow: hidden !important;
    transition: all 0.25s ease-out !important;
}

.hud-drawer-badge,
.hud-dependency-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(176, 106, 65, 0.08) !important;
    border: 1px solid rgba(176, 106, 65, 0.2) !important;
    color: var(--color-primary, #b06a41) !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    padding: 2px 6px !important;
    border-radius: var(--radius-flush-2, 2px) !important;
}

.hud-drawer-icon {
    font-size: 1.1rem !important;
    color: var(--color-primary, #b06a41) !important;
}

.hud-drawer-chevron {
    font-size: 1.25rem !important;
    color: var(--color-gray-500, #737373) !important;
    transition: transform 0.2s ease !important;
}

.is-open .hud-drawer-chevron,
.hud-drawer-toggle.is-open .hud-drawer-chevron {
    transform: rotate(180deg) !important;
}

/* 5. Hybrid Spec Radio + Overflow Dropdown Group Primitive */
.hud-spec-hybrid-group {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

/* ==========================================================================
   CANONICAL TECHNICAL FORM FEEDBACK & ADVISORY MESSAGE SYSTEM
   ========================================================================== */

/* 1. Full-Width / Section-Level Feedback Banners */
.hud-feedback-banner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: var(--radius-flush-3, 4px) !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin: 8px 0 !important;
    box-sizing: border-box !important;
    animation: hudFadeIn 0.2s ease-in-out !important;
}

.hud-feedback-banner .hud-feedback-icon,
.hud-feedback-banner .material-symbols-outlined {
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    margin-top: 1px !important;
}

/* 1a. Note Banner (Neutral Slate) */
.hud-feedback-banner--note,
.hud-feedback-note--banner {
    background: var(--feedback-note-bg, #f8fafc) !important;
    border: 1px solid var(--feedback-note-border, #e2e8f0) !important;
    border-left: 3.5px solid var(--feedback-note-accent, #64748b) !important;
    color: var(--feedback-note-text, #475569) !important;
}
.hud-feedback-banner--note .hud-feedback-icon,
.hud-feedback-banner--note .material-symbols-outlined {
    color: var(--feedback-note-icon, #64748b) !important;
}

/* 1b. Warning Banner (Industrial Amber) */
.hud-feedback-banner--warning,
.hud-form-validation-alert {
    background: var(--feedback-warning-bg, #fffbeb) !important;
    border: 1px solid var(--feedback-warning-border, #fde68a) !important;
    border-left: 3.5px solid var(--feedback-warning-accent, #d97706) !important;
    color: var(--feedback-warning-text, #92400e) !important;
    font-weight: 600 !important;
}
.hud-feedback-banner--warning .hud-feedback-icon,
.hud-feedback-banner--warning .material-symbols-outlined,
.hud-form-validation-alert .material-symbols-outlined {
    color: var(--feedback-warning-icon, #d97706) !important;
}

/* 1c. Error Banner (Industrial Crimson) */
.hud-feedback-banner--error {
    background: var(--feedback-error-bg, #fffbfa) !important;
    border: 1px solid var(--feedback-error-border, #fecaca) !important;
    border-left: 3.5px solid var(--feedback-error-accent, #dc2626) !important;
    color: var(--feedback-error-text, #991b1b) !important;
    font-weight: 600 !important;
}
.hud-feedback-banner--error .hud-feedback-icon,
.hud-feedback-banner--error .material-symbols-outlined {
    color: var(--feedback-error-icon, #dc2626) !important;
}

/* 2. Compact Form Card Notes (Positioned Below Controls/Checkboxes) */
.hud-form-note,
.hud-feedback-note {
    background: var(--feedback-note-bg, #f8fafc) !important;
    border: 1px solid var(--feedback-note-border, #e2e8f0) !important;
    border-left: 3px solid var(--feedback-note-accent, #64748b) !important;
    border-radius: var(--radius-flush-2, 2px) !important;
    padding: 5px 9px !important;
    color: var(--feedback-note-text, #475569) !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.74rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    margin-top: 4px !important;
    margin-bottom: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: fit-content !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    animation: hudFadeIn 0.2s ease-in-out !important;
}

.hud-form-note.w-full,
.hud-feedback-note.w-full,
.hud-feedback-inline.w-full {
    width: 100% !important;
}

.hud-form-note .hud-form-note-icon,
.hud-form-note .material-symbols-outlined,
.hud-feedback-note .hud-feedback-icon,
.hud-feedback-note .material-symbols-outlined {
    font-size: 0.92rem !important;
    color: var(--feedback-note-icon, #64748b) !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

/* 2a. Card Note (Neutral Slate - Default) */
.hud-form-note--note,
.hud-feedback-note--note {
    background: var(--feedback-note-bg, #f8fafc) !important;
    border-color: var(--feedback-note-border, #e2e8f0) !important;
    border-left-color: var(--feedback-note-accent, #64748b) !important;
    color: var(--feedback-note-text, #475569) !important;
}
.hud-form-note--note .hud-form-note-icon,
.hud-form-note--note .material-symbols-outlined,
.hud-feedback-note--note .hud-feedback-icon,
.hud-feedback-note--note .material-symbols-outlined {
    color: var(--feedback-note-icon, #64748b) !important;
}

/* 2b. Card Note (Industrial Amber - Warning) */
.hud-form-note--warning,
.hud-feedback-note--warning {
    background: var(--feedback-warning-bg, #fffbeb) !important;
    border-color: var(--feedback-warning-border, #fde68a) !important;
    border-left-color: var(--feedback-warning-accent, #d97706) !important;
    color: var(--feedback-warning-text, #92400e) !important;
}
.hud-form-note--warning .hud-form-note-icon,
.hud-form-note--warning .material-symbols-outlined,
.hud-feedback-note--warning .hud-feedback-icon,
.hud-feedback-note--warning .material-symbols-outlined {
    color: var(--feedback-warning-icon, #d97706) !important;
}

/* 2c. Card Note (Industrial Crimson - Error) */
.hud-form-note--error,
.hud-feedback-note--error {
    background: var(--feedback-error-bg, #fffbfa) !important;
    border-color: var(--feedback-error-border, #fecaca) !important;
    border-left-color: var(--feedback-error-accent, #dc2626) !important;
    color: var(--feedback-error-text, #991b1b) !important;
}
.hud-form-note--error .hud-form-note-icon,
.hud-form-note--error .material-symbols-outlined,
.hud-feedback-note--error .hud-feedback-icon,
.hud-feedback-note--error .material-symbols-outlined {
    color: var(--feedback-error-icon, #dc2626) !important;
}

/* 3. Inline Micro Feedback Badges & Dynamic Conflict Blocks */
.hud-feedback-inline,
.hud-inline-error,
.hud-inline-warning {
    background: var(--feedback-warning-bg, #fffbeb) !important;
    border: 1px solid var(--feedback-warning-border, #fde68a) !important;
    border-left: 3px solid var(--feedback-warning-accent, #d97706) !important;
    border-radius: var(--radius-flush-2, 2px) !important;
    padding: 5px 9px !important;
    color: var(--feedback-warning-text, #92400e) !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.74rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    margin-top: 4px !important;
    margin-bottom: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: fit-content !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    animation: hudFadeIn 0.2s ease-in-out !important;
}

.hud-feedback-inline .material-symbols-outlined,
.hud-inline-error .material-symbols-outlined,
.hud-inline-warning .material-symbols-outlined {
    font-size: 0.92rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    color: var(--feedback-warning-icon, #d97706) !important;
}

/* 3a. Inline Note Variant */
.hud-feedback-inline--note {
    background: var(--feedback-note-bg, #f8fafc) !important;
    border-color: var(--feedback-note-border, #e2e8f0) !important;
    border-left-color: var(--feedback-note-accent, #64748b) !important;
    color: var(--feedback-note-text, #475569) !important;
}
.hud-feedback-inline--note .material-symbols-outlined {
    color: var(--feedback-note-icon, #64748b) !important;
}

/* 3b. Inline Warning Variant */
.hud-feedback-inline--warning {
    background: var(--feedback-warning-bg, #fffbeb) !important;
    border-color: var(--feedback-warning-border, #fde68a) !important;
    border-left-color: var(--feedback-warning-accent, #d97706) !important;
    color: var(--feedback-warning-text, #92400e) !important;
}
.hud-feedback-inline--warning .material-symbols-outlined {
    color: var(--feedback-warning-icon, #d97706) !important;
}

/* 3c. Inline Error Variant */
.hud-feedback-inline--error {
    background: var(--feedback-error-bg, #fffbfa) !important;
    border-color: var(--feedback-error-border, #fecaca) !important;
    border-left-color: var(--feedback-error-accent, #dc2626) !important;
    color: var(--feedback-error-text, #991b1b) !important;
}
.hud-feedback-inline--error .material-symbols-outlined {
    color: var(--feedback-error-icon, #dc2626) !important;
}

/* Universal Visibility Rules for Feedback Elements */
.hud-feedback-banner.d-none,
.hud-feedback-banner.is-hidden,
.hud-feedback-banner[style*="display: none"],
.hud-feedback-banner[style*="display:none"],
.hud-form-note.d-none,
.hud-form-note.is-hidden,
.hud-form-note[style*="display: none"],
.hud-form-note[style*="display:none"],
.hud-feedback-note.d-none,
.hud-feedback-note.is-hidden,
.hud-feedback-note[style*="display: none"],
.hud-feedback-note[style*="display:none"],
.hud-feedback-inline.d-none,
.hud-feedback-inline.is-hidden,
.hud-feedback-inline[style*="display: none"],
.hud-feedback-inline[style*="display:none"] {
    display: none !important;
}

/* Color Swatch Badge Primitive */
.hud-color-swatch {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    margin-right: 6px !important;
    display: inline-block !important;
}

/* Precision Numeric Input Well & Unit Badge Primitives (13ch Character Width) */
.hud-numeric-well {
    width: 13ch !important;
    min-width: 13ch !important;
    max-width: 13ch !important;
    height: var(--control-height, 2.25em) !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

.hud-numeric-well input[type="number"],
.hud-numeric-well input[type="text"] {
    width: 100% !important;
    height: 100% !important;
    padding-left: 10px !important;
    padding-right: 2.6em !important;
    font-family: var(--font-mono, 'Source Code Pro', monospace) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: var(--radius-flush-2, 4px) !important;
    box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.04) !important;
    -moz-appearance: textfield !important;
}

.hud-numeric-well input[type="number"]::-webkit-outer-spin-button,
.hud-numeric-well input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.hud-numeric-well input:focus {
    border-color: var(--color-primary, #b06a41) !important;
    box-shadow: 0 0 0 3px rgba(176, 106, 65, 0.14), inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    outline: none !important;
}

.hud-unit-badge {
    position: absolute !important;
    right: 0.6em !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: var(--font-mono, 'Source Code Pro', monospace) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #8c8782 !important;
    pointer-events: none !important;
    user-select: none !important;
    text-transform: lowercase !important;
}

.hud-dimension-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.hud-dimension-separator {
    font-family: var(--font-mono, 'Source Code Pro', monospace) !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    font-size: 0.85rem !important;
    user-select: none !important;
}

/* Modular Sub-Panel Architecture */
.hud-form-panel,
.hud-form-subcard {
    border: 1px solid rgba(176, 106, 65, 0.2) !important;
    border-radius: var(--radius-flush-4, 6px) !important;
    margin-bottom: 1.25rem !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}

.hud-panel-header,
.hud-subcard-header {
    background: rgba(176, 106, 65, 0.08) !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid rgba(176, 106, 65, 0.15) !important;
    border-left: 3.5px solid var(--color-primary, #b06a41) !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    color: var(--color-primary-dark, #8d512f) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.hud-subcard-title,
.hud-panel-header > span:first-child {
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--color-primary-dark, #8d512f) !important;
    margin: 0 !important;
}

/* Indented Sub-Rows & Macro-Branching Containers */
.hud-sub-row {
    display: none;
    grid-template-columns: calc(var(--form-rail-width, 220px) - 0.3rem - 3px) 1fr !important;
    gap: 0 !important;
    align-items: center !important;
    min-height: calc(var(--control-height, 2.25em) + 0.8em) !important;
    border-left: 3px solid rgba(176, 106, 65, 0.3) !important;
    border-bottom: 1px solid var(--form-rail-border, #f0f0f0) !important;
    background: rgba(176, 106, 65, 0.02) !important;
    padding-left: 0.3rem !important;
    transition: all 0.25s ease !important;
}

.hud-sub-row.expanded,
.hud-sub-row.is-open {
    display: grid !important;
    animation: hudSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes hudSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.hud-branch-group {
    transition: opacity 0.2s ease !important;
}

/* ==========================================================================
   CANONICAL HUD SPEC BUTTON & CHIP PRIMITIVES (.hud-spec-btn)
   ========================================================================== */
.hud-spec-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: var(--control-height, 28px) !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: var(--radius-flush-2, 4px) !important;
    color: #334155 !important;
    font-family: 'Source Sans Pro', var(--font-sans), sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    user-select: none !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin: 0 !important;
}

.hud-spec-btn:hover {
    border-color: rgba(176, 106, 65, 0.5) !important;
    background: #fafaf9 !important;
    color: var(--color-primary, #b06a41) !important;
}

.hud-spec-btn.active,
.hud-spec-btn.active-state,
.hud-spec-btn.is-selected,
.hud-spec-btn:has(input:checked) {
    background-color: rgba(176, 106, 65, 0.12) !important;
    border: 1.5px solid var(--color-primary, #b06a41) !important;
    color: var(--color-primary, #b06a41) !important;
    font-weight: 700 !important;
    box-shadow: inset 0 1px 2px rgba(176, 106, 65, 0.1), 0 1px 3px rgba(176, 106, 65, 0.15) !important;
}

.hud-spec-btn.conflict-error {
    border-color: var(--color-danger, #dc2626) !important;
    background-color: rgba(220, 38, 38, 0.08) !important;
    color: var(--color-danger, #dc2626) !important;
}

.hud-spec-btn.is-disabled,
.hud-spec-btn.disabled,
.hud-spec-btn:disabled,
[data-conflict-disabled] {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    background: var(--color-gray-50, #fafafa) !important;
    border-color: #e2e8f0 !important;
    border-style: dashed !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

/* Dropdown Variant of Spec Button */
select.hud-spec-btn,
select.hud-spec-select {
    padding: 0 22px 0 10px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23b06a41%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 8px auto !important;
}

select.hud-spec-btn:focus,
select.hud-spec-select:focus {
    outline: none !important;
    border-color: var(--color-primary, #b06a41) !important;
}

.hud-form-row.is-disabled,
.form-grid.is-disabled {
    opacity: 0.4 !important;
    pointer-events: none !important;
    filter: grayscale(100%) !important;
}

/* Micro-Validation Engine & Floating Tooltips */
.hud-inline-error {
    color: #d97706 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: 0.5rem !important;
}

.hud-validation-tooltip {
    position: absolute !important;
    z-index: 100 !important;
    background: #1e293b !important;
    color: #f8fafc !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    pointer-events: none !important;
    animation: fadeInTooltip 0.2s ease-out !important;
}

@keyframes fadeInTooltip {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scope Selection Multi-Checkbox Cards */
.hud-scope-card {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: var(--radius-flush-4, 6px) !important;
    padding: 12px 16px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.hud-scope-card:hover {
    border-color: rgba(176, 106, 65, 0.4) !important;
    background: #fafaf9 !important;
}

.hud-scope-card.active,
.hud-scope-card:has(input:checked) {
    border-color: var(--color-primary, #b06a41) !important;
    background: rgba(176, 106, 65, 0.03) !important;
}

.custom-checkbox {
    width: 20px !important;
    height: 20px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    transition: all 0.15s ease !important;
}

.custom-checkbox.checked,
input:checked + .custom-checkbox,
.custom-checkbox:has(input:checked) {
    background: var(--color-primary, #b06a41) !important;
    border-color: var(--color-primary, #b06a41) !important;
    color: #ffffff !important;
}

/* Step 6 Read-Only Technical Verification Matrix */
.hud-summary-section {
    background: #ffffff !important;
    border-radius: var(--radius-flush-4, 6px) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}

.hud-summary-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 7.5px 16px !important;
    background: rgba(0, 0, 0, 0.02) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.hud-summary-matrix {
    display: grid !important;
    grid-template-columns: minmax(130px, auto) 1fr minmax(130px, auto) 1fr !important;
    width: 100% !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.hud-summary-matrix tbody,
.hud-summary-matrix tr {
    display: contents !important;
}

.hud-summary-label {
    padding: 8px 14px !important;
    font-family: var(--font-mono, 'Source Code Pro', monospace) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    background: #fafaf9 !important;
}

.hud-summary-value {
    padding: 8px 14px !important;
    font-family: var(--font-sans), sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.hud-summary-matrix tr:nth-child(odd) .hud-summary-value {
    border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
}

@media (max-width: 900px) {
    .hud-summary-matrix {
        grid-template-columns: minmax(120px, auto) 1fr !important;
    }
}

/* Standardized Ingestion Dropzone Well Primitives */
.hud-dropzone {
    background: #fafaf9 !important;
    border: 1.5px dashed rgba(176, 106, 65, 0.35) !important;
    border-radius: var(--radius-flush-3, 4px) !important;
    padding: 0.6rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.hud-dropzone:hover {
    background: #ffffff !important;
    border-color: var(--color-primary, #b06a41) !important;
}

.hud-dropzone-icon {
    font-size: 1.2rem !important;
    color: var(--color-primary, #b06a41) !important;
}

.hud-dropzone-label {
    font-size: 0.825rem !important;
    font-weight: 500 !important;
    color: #334155 !important;
    flex: 1 !important;
}

/* ==========================================================================
   MULTI-STEP WORKFLOW CHASSIS MODIFIER VARIANT (.hud-chassis--multistep / .card-multistep)
   ========================================================================== */
.hud-chassis--multistep,
.hud-card--multistep,
.card-multistep {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Multi-Step Interactive Header Stepper */
.hud-chassis--multistep .hud-stepper-header,
.hud-card--multistep .hud-stepper-header,
/* Multi-Step Stepper Navigation Header (Machined Bezel Tint) */
.hud-chassis--multistep .hud-stepper-header,
.hud-card--multistep .hud-stepper-header,
.card-multistep .hud-stepper-header,
.hud-chassis--multistep nav.nav-tab-container,
.hud-card--multistep nav.nav-tab-container,
.card-multistep nav.nav-tab-container {
    flex-shrink: 0 !important;
    height: 44px !important;
    background: #f6f4ee !important; /* Precision Warm Stone Bezel */
    border-bottom: 1px solid rgba(176, 106, 65, 0.2) !important;
    display: flex !important;
}

.hud-chassis--multistep .hud-step-tab,
.hud-card--multistep .hud-step-tab,
.card-multistep .hud-step-tab,
.hud-chassis--multistep .nav-tab,
.hud-card--multistep .nav-tab,
.card-multistep .nav-tab {
    flex: 1 !important;
    text-align: center !important;
    border-radius: 0 !important;
    padding: 0.75rem 0.5rem !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #78716c !important;
    border: none !important;
    border-right: 1px solid rgba(176, 106, 65, 0.1) !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.hud-chassis--multistep .nav-tab:last-child,
.card-multistep .nav-tab:last-child {
    border-right: none !important;
}

.hud-chassis--multistep .nav-tab:hover,
.card-multistep .nav-tab:hover {
    background: rgba(176, 106, 65, 0.06) !important;
    color: var(--color-primary, #b06a41) !important;
}

.hud-chassis--multistep .hud-step-tab.active,
.hud-card--multistep .hud-step-tab.active,
.card-multistep .hud-step-tab.active,
.hud-chassis--multistep .nav-tab.active,
.hud-card--multistep .nav-tab.active,
.card-multistep .nav-tab.active {
    color: var(--color-primary, #b06a41) !important;
    background: #ffffff !important; /* Active Tab Paper Lift */
    box-shadow: inset 0 -2.5px 0 var(--color-primary, #b06a41) !important;
}

/* Multi-Step Scrollable Body (Reclaimed Usable Screen Real Estate) */
.hud-chassis--multistep .hud-scroll-body,
.hud-card--multistep .hud-scroll-body,
.card-multistep .hud-scroll-body,
.hud-chassis--multistep #mfg-dynamic-container,
.hud-card--multistep #mfg-dynamic-container,
.card-multistep #mfg-dynamic-container,
#mfg-dynamic-container {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    background-color: #ffffff !important;
    padding: 1.15rem 1.35rem !important; /* Tightened from 28px to maximize field width */
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Step 5 Virtual Layer Inspection Full-Height Viewer Card */
.hud-viewer-container {
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.hud-viewer-panel {
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 0 !important;
}

.hud-viewer-canvas-card {
    flex: 1 1 0% !important;
    min-height: 380px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 12px 16px 16px 16px !important;
    background: #0f172a !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Multi-Step Dual-Sided Footer Stepper (Machined Bezel Tint & Permanently Pinned Sticky Lock) */
.hud-chassis--multistep .hud-stepper-footer,
.hud-card--multistep .hud-stepper-footer,
.card-multistep .hud-stepper-footer,
.hud-stepper-footer {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 10 !important;
    background: #f6f4ee !important; /* Precision Warm Stone Bezel */
    border-top: 1px solid rgba(176, 106, 65, 0.2) !important;
    padding: 0 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.hud-stepper-footer .btn {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    width: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    border-radius: var(--radius-flush-2, 2px) !important;
}

.hud-stepper-footer .btn .material-symbols-outlined {
    font-size: 0.95rem !important;
    line-height: 1 !important;
}

.hud-stepper-footer #mfg-step-indicator {
    font-size: 0.7rem !important;
    letter-spacing: 0.04em !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.hud-stepper-footer #mfg-autosave-status {
    font-size: 0.68rem !important;
    line-height: 1 !important;
    gap: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.hud-stepper-footer #mfg-autosave-status .material-symbols-outlined {
    font-size: 0.85rem !important;
    line-height: 1 !important;
}

.hud-stepper-footer #footer-error-text {
    font-size: 0.68rem !important;
    line-height: 1 !important;
}

/* ==========================================================================
   UNBOXED FULL-WIDTH CATEGORY BANDS (ZERO BOX-IN-BOX CLUTTER)
   ========================================================================== */
.hud-form-panel {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 1.75rem 0 !important;
    width: 100% !important;
}

.hud-form-panel:last-child {
    margin-bottom: 0 !important;
}

.hud-panel-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0.45rem 0.75rem !important;
    margin-bottom: 0.25rem !important;
    background: #fbf9f5 !important; /* Subtle warm stone band */
    border: none !important;
    border-top: 1px solid rgba(176, 106, 65, 0.12) !important;
    border-bottom: 1px solid rgba(176, 106, 65, 0.18) !important;
    border-left: 3.5px solid var(--color-primary, #b06a41) !important;
    border-radius: var(--radius-flush-2, 2px) !important;
    box-sizing: border-box !important;
}

.hud-panel-header .hud-panel-title,
.hud-panel-header > span:first-child,
.hud-panel-header h3 {
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--color-primary-dark, #8f4d24) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.hud-panel-header .ml-auto {
    margin-left: auto !important;
}

.hud-panel-header::before {
    display: none !important;
}

/* ==========================================================================
   24-COLUMN FULL-HEIGHT WORKSPACE INTEGRATION (SYMMETRIC PADDING & GAP LOCK)
   ========================================================================== */
.grid-24.h-full,
.grid-24.flex-1 {
    display: grid !important;
    grid-template-columns: repeat(24, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 0.65rem 0.75rem !important; /* Tightened from 20px to 12px for max width */
    gap: 0.85rem !important; /* Consistent grid gap */
}

.grid-24 > .col-18,
.grid-24 > section {
    height: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.grid-24 > .col-6,
.grid-24 > aside,
#main-right-section {
    height: auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: flex-start !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hud-summary-sticky,
.sticky-summary--copper-bronze {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    height: auto !important;
    flex: none !important;
    align-self: flex-start !important;
}

.hud-chassis,
.hud-chassis.hud-chassis--multistep,
.card-multistep {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 0% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* ==========================================================================
   UNIVERSAL TOP-ANCHORING BASELINE SYSTEM (PROPORTIONAL RHYTHM & UNIFIED LEFT AXIS)
   ========================================================================== */
.hud-form-row {
    display: grid !important;
    grid-template-columns: var(--form-rail-width, 225px) 1fr !important;
    align-items: start !important;
    padding: 4px 0 !important;
    margin-bottom: 0.35rem !important;
    border-bottom: none !important;
}

.hud-form-label {
    width: 100% !important;
    min-height: 34px !important;
    padding: 6px 12px 6px 12px !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.78rem !important; /* 12.5px calibrated monospace scale */
    font-weight: 600 !important;
    letter-spacing: 0.025em !important; /* Optimal monospace micro-tracking */
    color: #334155 !important;
    line-height: 1.35 !important;
    display: flex !important;
    align-items: flex-start !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.hud-form-label.is-required::after {
    content: " *" !important;
    color: var(--color-danger, #dc2626) !important;
    font-weight: 700 !important;
}

.hud-form-value {
    min-height: 34px !important;
    padding: 2px 12px 2px 12px !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

.hud-sub-row,
.hud-form-row.is-subrow,
.hud-form-row.hud-sub-row {
    display: grid;
    grid-template-columns: var(--form-rail-width, 225px) 1fr !important;
    align-items: start !important;
    padding: 4px 0 !important;
    margin-bottom: 0.35rem !important;
    border-bottom: none !important;
    background: transparent !important;
}

.hud-sub-row[style*="display: none"],
.hud-sub-row[style*="display:none"],
.hud-sub-row.d-none,
.hud-sub-row.is-hidden,
.hud-form-row[style*="display: none"],
.hud-form-row[style*="display:none"],
.hud-form-row.d-none,
.hud-form-row.is-hidden,
.hud-branch-group.d-none,
.hud-branch-group.is-hidden {
    display: none !important;
}

.hud-sub-row .hud-form-label,
.hud-form-row.is-subrow .hud-form-label,
.hud-form-row.hud-sub-row .hud-form-label {
    padding-left: 28px !important;
    position: relative !important;
}

.hud-sub-row .hud-form-label::before,
.hud-form-row.is-subrow .hud-form-label::before,
.hud-form-row.hud-sub-row .hud-form-label::before {
    content: "↳" !important;
    position: absolute !important;
    left: 12px !important;
    top: 5px !important;
    color: var(--color-primary, #b06a41) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
}

@media (max-width: 768px) {
    .hud-form-row,
    .hud-sub-row {
        grid-template-columns: 1fr !important;
        gap: 0.25rem !important;
        padding: 0.5rem 0 !important;
    }
    .hud-form-label,
    .hud-sub-row .hud-form-label {
        width: 100% !important;
        padding: 0 0 4px 0 !important;
        min-height: auto !important;
    }
    .hud-sub-row .hud-form-label::before {
        display: none !important;
    }
    .hud-form-value,
    .hud-sub-row .hud-form-value {
        width: 100% !important;
        padding: 0 !important;
    }
}

/* ==========================================================================
   INSTANT QUOTE VS. CUSTOM RFQ DUAL-MODE HUD TOKENS
   ========================================================================== */

/* Spec Button Bolt Icon (Solid, Minimal, Right of text) */
.hud-spec-bolt {
    font-family: 'Material Symbols Outlined' !important;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20 !important;
    font-size: 0.70rem !important;
    line-height: 1 !important;
    margin-left: 3px !important;
    margin-right: 0 !important;
    color: var(--color-primary, #b06a41) !important;
    opacity: 0.9 !important;
    vertical-align: middle !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}

.hud-spec-btn:hover .hud-spec-bolt,
.hud-spec-btn.active-state .hud-spec-bolt,
.hud-spec-btn.active .hud-spec-bolt {
    color: var(--color-primary, #b06a41) !important;
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

/* Color Swatch Bolt Icon Badge */
.hud-swatch-bolt {
    font-family: 'Material Symbols Outlined' !important;
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 20 !important;
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background: var(--color-primary, #b06a41) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 12px !important;
    height: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.55rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* Slim Footer Instant Advisory Bar */
.hud-instant-advisory-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 16px !important;
    background: #fbf9f5 !important;
    border-top: 1px solid rgba(176, 106, 65, 0.15) !important;
    color: #475569 !important;
    font-family: var(--font-tech, 'Source Code Pro', monospace) !important;
    font-size: 0.73rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    border-left: 3.5px solid var(--color-primary, #b06a41) !important;
}

.hud-instant-advisory-icon {
    font-family: 'Material Symbols Outlined' !important;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24 !important;
    font-size: 1.05rem !important;
    color: var(--color-primary, #b06a41) !important;
    flex-shrink: 0 !important;
}

.hud-inline-bolt {
    font-family: 'Material Symbols Outlined' !important;
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 20 !important;
    font-size: 0.78rem !important;
    color: var(--color-primary, #b06a41) !important;
    vertical-align: middle !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 2px !important;
}

/* Custom RFQ Sticky Terminal Pill State */
.summary-live-pill.rfq-mode {
    background: rgba(217, 119, 6, 0.15) !important;
    border: 1px solid rgba(217, 119, 6, 0.45) !important;
}

.summary-live-pill.rfq-mode .summary-live-dot {
    background: #d97706 !important;
    box-shadow: 0 0 8px rgba(217, 119, 6, 0.8) !important;
    animation: pulseAmber 1.8s infinite ease-in-out !important;
}

.summary-live-pill.rfq-mode .summary-live-text {
    color: #fde68a !important;
}

@keyframes pulseAmber {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(217, 119, 6, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
}

.quote-val-rfq {
    font-size: 1.15rem !important;
    letter-spacing: 0.03em !important;
    color: #fde68a !important;
    text-shadow: 0 0 10px rgba(217, 119, 6, 0.35) !important;
}