:root{--listing-bg: #f8fafc;--listing-sidebar-bg: #ffffff;--listing-filter-border: #e2e8f0;--listing-filter-hover: #f1f5f9;--listing-card-bg: #ffffff;--listing-card-shadow: 0 2px 8px rgba(0, 0, 0, .1);--listing-card-hover-shadow: 0 4px 16px rgba(0, 0, 0, .15);--listing-loading-bg: rgba(255, 255, 255, .9);--listing-toast-bg: #ffffff;--listing-toast-shadow: 0 4px 12px rgba(0, 0, 0, .15)}.dark{--listing-bg: #1e293b;--listing-sidebar-bg: #1e293b;--listing-filter-border: #334155;--listing-filter-hover: #334155;--listing-card-bg: #2d3748;--listing-card-shadow: 0 4px 12px rgba(0, 0, 0, .4);--listing-card-hover-shadow: 0 8px 24px rgba(0, 0, 0, .5);--listing-loading-bg: rgba(0, 0, 0, .9);--listing-toast-bg: #1e293b;--listing-toast-shadow: 0 4px 12px rgba(0, 0, 0, .4)}.listing-container{display:grid;grid-template-columns:300px 1fr;gap:1.5rem;min-height:100vh;background:var(--listing-bg);padding:1rem}@media(max-width:1024px){.listing-container{grid-template-columns:1fr;gap:1rem}}.listing-sidebar{background:var(--listing-sidebar-bg);border-radius:.75rem;padding:1rem;height:-moz-fit-content;height:fit-content;position:sticky;top:1rem;border:1px solid var(--listing-filter-border);box-shadow:var(--listing-card-shadow)}.listing-main{display:flex;flex-direction:column;gap:1rem}.listing-top-bar{background:var(--listing-sidebar-bg);padding:1rem;border-radius:.75rem;border:1px solid var(--listing-filter-border);box-shadow:var(--listing-card-shadow);display:flex;flex-direction:column;gap:.75rem}.listing-top-row,.listing-controls-row{display:flex;justify-content:space-between;align-items:center}.view-options-container{display:flex;align-items:center;gap:.5rem}.view-options-label{font-size:.875rem;font-weight:500;color:#64748b;margin:0}.view-options-buttons{background:#fff!important;border:none!important;border-radius:.75rem!important;padding:.25rem!important;box-shadow:0 2px 8px #0000001a!important;display:flex!important;gap:.25rem!important}.view-btn{background:transparent!important;border:none!important;border-radius:.5rem!important;padding:.5rem!important;color:#64748b!important;transition:all .3s ease!important;display:flex!important;align-items:center!important;justify-content:center!important;min-width:40px!important;min-height:40px!important}.view-btn:hover{background:#f1f5f9!important;color:#1e293b!important;transform:translateY(-1px)!important}.view-btn.active{background:#6366f1!important;color:#fff!important;box-shadow:0 2px 8px #6366f14d!important}.view-btn.active:hover{background:#4f46e5!important;color:#fff!important;transform:translateY(-1px)!important}.mobile-controls{display:none;gap:.5rem}.mobile-filter-toggle,.mobile-view-toggle{background:#fff!important;border:none!important;border-radius:.75rem!important;padding:.75rem 1rem!important;color:#1e293b!important;font-weight:500!important;transition:all .3s ease!important;box-shadow:0 2px 8px #0000001a!important;display:flex!important;align-items:center!important;gap:.5rem!important;width:100%!important;justify-content:center!important}.mobile-filter-toggle:hover,.mobile-view-toggle:hover{background:#6366f1!important;color:#fff!important;transform:translateY(-2px)!important;box-shadow:0 4px 16px #6366f14d!important}.sort-select{background:#fff!important;border:none!important;border-radius:.75rem!important;padding:.75rem 2.5rem .75rem 1rem!important;color:#1e293b!important;font-weight:500!important;transition:all .3s ease!important;box-shadow:0 2px 8px #0000001a!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")!important;background-position:right .75rem center!important;background-repeat:no-repeat!important;background-size:1.5em 1.5em!important}.sort-select:hover{background:#6366f1!important;color:#fff!important;transform:translateY(-1px)!important;box-shadow:0 4px 12px #6366f133!important}.breadcrumb{display:flex;align-items:center;gap:.25rem;font-size:.875rem}.breadcrumb a{color:#6366f1;text-decoration:none;transition:color .2s ease}.breadcrumb a:hover{color:#4f46e5}.breadcrumb-separator{color:#94a3b8}.breadcrumb-current{color:#64748b}.listing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;min-height:400px;transition:all .3s ease}.listing-grid.grid-small,div[id$=-grid].grid-small{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important;gap:1rem!important}.listing-grid.grid-medium,div[id$=-grid].grid-medium{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))!important;gap:1.5rem!important}.listing-grid.grid-large,div[id$=-grid].grid-large{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))!important;gap:2rem!important}.listing-grid.list-view,.listing-grid.list,div[id$=-grid].list-view,div[id$=-grid].list{grid-template-columns:1fr!important;gap:1rem!important}@media(max-width:768px){.listing-top-bar{padding:.75rem}.listing-top-row,.listing-controls-row{flex-direction:column;gap:.75rem;align-items:stretch}.mobile-controls{display:flex;justify-content:center}.view-options-container{display:none}.sort-container,.sort-select{width:100%}div[id$=-grid].grid-small{grid-template-columns:repeat(2,1fr)!important;gap:.5rem!important}div[id$=-grid].grid-medium{grid-template-columns:repeat(2,1fr)!important;gap:.75rem!important}div[id$=-grid].grid-large,div[id$=-grid].list-view,div[id$=-grid].list{grid-template-columns:1fr!important;gap:1rem!important}}.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:998;opacity:0;visibility:hidden;transition:all .3s ease}.sidebar-overlay.active{opacity:1;visibility:visible}.listing-sidebar.sidebar-open{transform:translate(0);z-index:999}@media(max-width:768px){.listing-sidebar{position:fixed!important;top:0!important;left:0!important;width:280px!important;height:100vh!important;transform:translate(-100%)!important;transition:transform .3s ease!important;z-index:999!important;overflow-y:auto!important;padding-top:1rem!important;background:var(--listing-sidebar-bg)!important;box-shadow:2px 0 10px #0000001a!important}.listing-sidebar.sidebar-open{transform:translate(0)!important}.listing-container{grid-template-columns:1fr!important}.listing-main{margin-left:0!important}}.loading-state,.error-state{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 1rem;text-align:center;background:var(--listing-loading-bg);border-radius:.75rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.loading-spinner{width:40px;height:40px;border:4px solid var(--listing-filter-border);border-top:4px solid #6366f1;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.loading-dots{display:flex;gap:.25rem;margin-top:.75rem}.loading-dot{width:8px;height:8px;background:#6366f1;border-radius:50%;animation:pulse 1.5s ease-in-out infinite}.loading-dot:nth-child(2){animation-delay:.2s}.loading-dot:nth-child(3){animation-delay:.4s}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:.3}50%{opacity:1}}.toast{position:fixed;top:1rem;right:1rem;padding:.75rem 1rem;background:var(--listing-toast-bg);color:#1e293b;border-radius:.5rem;box-shadow:var(--listing-toast-shadow);z-index:1000;border:1px solid var(--listing-filter-border);display:flex;align-items:center;gap:.5rem;max-width:400px;opacity:0;transform:translate(100%);transition:all .3s ease}.toast.show{opacity:1;transform:translate(0)}.toast-success{border-left:4px solid #10b981;background:#10b9811a}.toast-error{border-left:4px solid #ef4444;background:#ef44441a}.toast ion-icon{font-size:20px;flex-shrink:0}.toast-success ion-icon{color:#10b981}.toast-error ion-icon{color:#ef4444}.dark .listing-container{background:var(--listing-bg)}.dark .listing-sidebar,.dark .listing-top-bar{background:var(--listing-sidebar-bg);border-color:#334155}.dark .view-options-buttons{background:#334155!important;box-shadow:0 2px 8px #0000004d!important}.dark .view-btn{color:#cbd5e1!important}.dark .view-btn:hover{background:#475569!important;color:#f8fafc!important}.dark .view-btn.active{background:#6366f1!important;color:#fff!important;box-shadow:0 2px 8px #6366f166!important}.dark .mobile-filter-toggle,.dark .mobile-view-toggle{background:#334155!important;color:#f8fafc!important;box-shadow:0 2px 8px #0000004d!important}.dark .mobile-filter-toggle:hover,.dark .mobile-view-toggle:hover{background:#6366f1!important;color:#fff!important;box-shadow:0 4px 16px #6366f166!important}.dark .sort-select{background:#334155!important;color:#f8fafc!important;box-shadow:0 2px 8px #0000004d!important}.dark .sort-select:hover{background:#6366f1!important;color:#fff!important;box-shadow:0 4px 12px #6366f14d!important}.dark .breadcrumb a{color:#6366f1}.dark .breadcrumb a:hover{color:#4f46e5}.dark .breadcrumb-separator{color:#64748b}.dark .breadcrumb-current{color:#cbd5e1}.dark .toast{background:var(--listing-toast-bg);color:#f8fafc;border-color:#334155}