.filter-panel{position:relative}.filter-toggle{align-items:center;gap:var(--space-2);min-height:var(--touch-target-min,44px);padding:var(--space-3)var(--space-5);font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text-tertiary);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);font-weight:600;display:inline-flex}.filter-toggle:before{content:"";width:18px;height:18px;transition:all var(--transition-fast);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain;flex-shrink:0}.filter-toggle:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-subtle)}.filter-toggle:hover:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232563eb'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z'/%3E%3C/svg%3E")}.filter-content{top:calc(100% + var(--space-3));background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-xl);min-width:400px;max-width:500px;padding:var(--space-6);box-shadow:var(--shadow-2xl);z-index:200;transform-origin:0 0;animation:.2s ease-out scaleIn;position:absolute;left:0}.filter-content:before{content:"";background:linear-gradient(90deg,var(--color-primary-dark),var(--color-primary),var(--color-primary-light));border-radius:var(--radius-xl)var(--radius-xl)0 0;height:3px;position:absolute;top:0;left:0;right:0}.filter-group{margin-bottom:var(--space-6)}.filter-group:last-of-type{margin-bottom:var(--space-5)}.filter-group label{font-family:var(--font-heading);font-size:var(--text-xs);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-3);font-weight:600;display:block}.filter-group .filter-hint{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-3);line-height:1.4;display:block}.filter-unit-toggle{gap:var(--space-2);margin-bottom:var(--space-3);display:flex}.filter-unit-toggle button{min-height:var(--touch-target-min,44px);padding:var(--space-2)var(--space-4);font-size:var(--text-sm);color:var(--color-text-tertiary);background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-weight:600}.filter-unit-toggle button:hover{border-color:var(--color-primary);color:var(--color-primary)}.filter-unit-toggle button.active{background:var(--color-primary-subtle);border-color:var(--color-primary);color:var(--color-primary)}.filter-inputs{align-items:center;gap:var(--space-3);display:flex}.filter-inputs input,.filter-group>input,.filter-group select{min-height:40px;padding:var(--space-3)var(--space-4);font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text-primary);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-fast);flex:1;width:100%}.filter-inputs input:focus,.filter-group>input:focus,.filter-group select:focus,.filter-inputs input:focus-visible,.filter-group>input:focus-visible,.filter-group select:focus-visible{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-alpha);outline:none}.filter-inputs input::placeholder,.filter-group>input::placeholder{color:var(--color-text-muted)}.filter-inputs span{color:var(--color-text-muted);font-weight:500;font-size:var(--text-sm);flex-shrink:0}.filter-actions{justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-5);border-top:1px solid var(--color-border);margin-top:var(--space-5);display:flex}.filter-actions button{min-height:var(--touch-target-min,44px);padding:var(--space-3)var(--space-5);font-family:var(--font-body);font-size:var(--text-sm);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);background:var(--color-bg-tertiary);color:var(--color-text-secondary);border:1px solid var(--color-border);font-weight:600}.filter-actions button:hover{background:var(--color-bg-hover);border-color:var(--color-border-secondary)}.filter-actions .apply-btn{background:var(--color-primary);color:var(--color-primary-text);border:1px solid var(--color-primary)}.filter-actions .apply-btn:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark)}.filter-inputs input[type=date]{cursor:pointer}.filter-inputs input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6;transition:opacity var(--transition-fast)}.filter-inputs input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:1}.filter-inputs input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.filter-inputs input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.filter-group>input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.filter-group>input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.filter-inputs input[type=number],.filter-group>input[type=number]{-moz-appearance:textfield}.filter-toggle.has-filters{background:var(--color-primary-subtle);border-color:var(--color-primary);color:var(--color-primary)}.filter-toggle.has-filters:after{content:"";background:var(--color-primary);width:8px;height:8px;margin-left:var(--space-1);border-radius:50%;flex-shrink:0}@media (max-width:768px){.filter-content{border-radius:var(--radius-2xl)var(--radius-2xl)0 0;min-width:auto;max-width:none;max-height:80vh;padding:var(--space-8)var(--space-5)var(--space-10);transform-origin:bottom;z-index:300;animation:.3s ease-out slideUp;position:fixed;inset:auto 0 0;overflow-y:auto}.filter-content:before{border-radius:var(--radius-2xl)var(--radius-2xl)0 0}.filter-content:after{content:"";top:var(--space-3);background:var(--color-border);border-radius:var(--radius-full);width:40px;height:4px;position:absolute;left:50%;transform:translate(-50%)}.filter-inputs{gap:var(--space-2);flex-direction:column}.filter-inputs input,.filter-group select{width:100%}.filter-inputs span{display:none}}@keyframes slideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}