/* === BASE === */
        .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        body {
            min-height: 100dvh;
            background-image:
                radial-gradient(ellipse at 50% -20%, rgba(255, 107, 53, 0.12) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 100%, rgba(173, 198, 255, 0.04) 0%, transparent 40%);
        }
        .hidden { display: none !important; }
        @media print {
            body * { visibility: hidden; }
            #view-monitor, #view-monitor * { visibility: visible; }
            #view-monitor { position: absolute; left: 0; top: 0; width: 100%; }
            nav, header, .no-print { display: none !important; }
        }
        @keyframes highlight-fade { 0% { background-color: rgba(255, 107, 53, 0.3); } 100% { background-color: transparent; } }
        .field-highlight { animation: highlight-fade 1.5s ease-out forwards; border-radius: 0.75rem; }

        /* === MODERNIZATION LAYER === */

        /* Custom scrollbar */
        * { scrollbar-width: thin; scrollbar-color: rgba(255,181,157,0.12) transparent; }
        ::-webkit-scrollbar { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(255,181,157,0.15); border-radius: 999px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(255,181,157,0.25); }

        /* Smooth transitions on interactive elements */
        input, select, button, textarea { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }

        /* Focus-visible ring for accessibility & polish */
        input:focus-visible, select:focus-visible {
            border-color: #ff6b35 !important;
            box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.12), 0 0 20px rgba(255, 107, 53, 0.06);
        }
        button:focus-visible { outline: 2px solid rgba(255, 107, 53, 0.4); outline-offset: 2px; }

        /* Subtle hover tint on form controls */
        input:not(:focus):hover, select:not(:focus):hover {
            border-color: rgba(255, 181, 157, 0.2) !important;
        }

        /* Button press micro-interaction */
        button:active:not(:disabled):not(.nav-btn) { transform: scale(0.97); }

        /* Dynamic card hover (yard, historico, rua bar) */
        #yard-list > div, #historico-list > div {
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }
        #yard-list > div:hover, #historico-list > div:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 40px rgba(0,0,0,0.25);
            border-color: rgba(255,181,157,0.1);
        }
        #rua-status-bar > div {
            transition: transform 0.15s ease, border-color 0.2s ease;
        }
        #rua-status-bar > div:hover {
            transform: translateY(-1px);
            border-color: rgba(255,181,157,0.12);
        }

        /* Modal entrance animation */
        @keyframes modal-enter {
            from { opacity: 0; transform: scale(0.96) translateY(6px); }
            to   { opacity: 1; transform: scale(1) translateY(0); }
        }
        #status-modal > div, #edit-modal > div {
            animation: modal-enter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Toast slide-in */
        @keyframes toast-enter {
            from { transform: translate(-50%, -12px); }
            to   { transform: translate(-50%, 0); }
        }
        #toast.opacity-100 { animation: toast-enter 0.25s ease-out; }
        #toast { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

        /* Dashboard stat cards hover */
        #view-monitor .grid > div {
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        #view-monitor .grid > div:hover { transform: translateY(-1px); }

        /* Pills/tabs smooth toggle */
        .filter-pill, .filter-pill-historico, .loc-pill, .resumo-tab-btn {
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        .filter-pill:hover, .filter-pill-historico:hover, .loc-pill:hover {
            opacity: 0.85;
        }
        .filter-pill, .filter-pill-historico, .loc-pill {
            position: relative;
            overflow: hidden;
        }
        .filter-pill::after, .filter-pill-historico::after, .loc-pill::after, .resumo-tab-btn::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.12) 50%, transparent 80%);
            transform: translateX(-120%);
            transition: transform 0.45s ease;
            pointer-events: none;
        }
        .filter-pill:hover::after, .filter-pill-historico:hover::after, .loc-pill:hover::after, .resumo-tab-btn:hover::after {
            transform: translateX(120%);
        }

        /* Login card ambient glow */
        #login-view > div {
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25), 0 0 80px rgba(255,107,53,0.06);
        }

        /* Save button hover glow */
        #btn-save:hover {
            box-shadow: 0 0 40px rgba(255,107,53,0.25) !important;
            transform: scale(1.01);
        }

        /* Nav bar upward shadow */
        #app-view > nav {
            box-shadow: 0 -4px 30px rgba(0,0,0,0.3);
        }

        /* Mobile + notch / home indicator (Yard-style) */
        html { -webkit-tap-highlight-color: transparent; }
        .safe-pad {
            padding-left: max(1rem, env(safe-area-inset-left, 0px));
            padding-right: max(1rem, env(safe-area-inset-right, 0px));
            padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
            padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
        }
        #app-view > nav {
            padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
            padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
            padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
        }
        #app-view > nav .nav-btn {
            min-width: 0;
            flex: 1 1 0;
            max-width: none;
            padding-left: 0.35rem;
            padding-right: 0.35rem;
        }
        #loc-selector, #street-filters, #street-filters-historico {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        #loc-selector::-webkit-scrollbar, #street-filters::-webkit-scrollbar, #street-filters-historico::-webkit-scrollbar {
            display: none;
        }
        @media (max-width: 639px) {
            #main-header { padding-left: 1rem; padding-right: 1rem; }
            #view-container > section[class*="max-w"] { padding-left: 1rem !important; padding-right: 1rem !important; }
            .patio-actions { width: 100%; flex-direction: column; align-items: stretch !important; }
            .patio-actions > * { width: 100%; justify-content: center; }
            .patio-resumo-stats { width: 100%; justify-content: space-between; gap: 1rem; flex-wrap: nowrap; }
            .patio-resumo-stats > div { flex: 1; min-width: 0; }
            .patio-resumo-stats .border-l { padding-left: 0.75rem !important; margin-left: 0 !important; border-left: 1px solid rgba(255,255,255,0.06); }
            .resumo-tab-btn { padding-left: 1rem !important; padding-right: 1rem !important; font-size: 0.75rem !important; }
            #btn-save { padding-top: 1.1rem; padding-bottom: 1.1rem; font-size: 1rem !important; }
            #btn-save .material-symbols-outlined { font-size: 1.5rem !important; }
            #loc-selector, #street-filters, #street-filters-historico {
                display: flex;
                flex-wrap: nowrap !important;
                overflow-x: auto;
                overscroll-behavior-x: contain;
                scroll-snap-type: x proximity;
                padding-bottom: 0.25rem;
            }
            #loc-selector > *, #street-filters > *, #street-filters-historico > * {
                flex: 0 0 auto;
                scroll-snap-align: start;
            }
            .filter-pill, .filter-pill-historico, .loc-pill {
                min-height: 44px;
                white-space: nowrap;
            }
            .resumo-tab-btn {
                min-height: 44px;
                position: relative;
                overflow: hidden;
            }
        }