.panel{padding:var(--space-xl);border-radius:var(--border-radius-lg);transition:all var(--anim-duration-base) var(--anim-ease-base);margin-bottom:var(--space-xl);background:linear-gradient(135deg, color-mix(in srgb, var(--color-primary) calc(var(--opacity-very-low) * 100%), transparent) 0%, color-mix(in srgb, var(--color-highlight) 2.5%, transparent) 50%, color-mix(in srgb, var(--color-accent) 1.5%, transparent) 100%);position:relative;overflow:hidden}.panel:hover{transform:var(--transform-lift-sm);background:linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 6%, transparent) 0%, color-mix(in srgb, var(--color-highlight) calc(var(--opacity-very-low) * 100%), transparent) 50%, color-mix(in srgb, var(--color-accent) 2.5%, transparent) 100%)}.panel-header{padding:0 0 var(--space-lg) 0;border-bottom:var(--border-width-thin) solid color-mix(in srgb, var(--color-primary) calc(var(--opacity-low) * 100%), transparent);background:0 0;position:relative}.panel-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin:0 0 var(--space-sm) 0;color:var(--color-primary);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-tight);font-family:var(--font-family-serif);position:relative}.panel-title:after{content:"";bottom:calc(-1 * var(--space-xs));width:40px;height:var(--border-width-thick);background:linear-gradient(90deg, var(--color-highlight) 0%, var(--color-accent) 100%);border-radius:var(--border-radius-sm);transition:width var(--anim-duration-base) var(--anim-ease-out);position:absolute;left:0}.panel:hover .panel-title:after{width:60px}.panel-content{margin-top:var(--space-lg);padding:0}.panel-footer{padding:var(--space-lg) 0 0 0;border-top:var(--border-width-thin) solid color-mix(in srgb, var(--color-primary) calc(var(--opacity-low) * 100%), transparent);margin-top:var(--space-lg);background:0 0}.no-items,.no-activities{color:var(--color-text-light);text-align:center;padding:var(--space-xl) 0;font-style:italic;font-size:var(--font-size-lg);margin:0}.item-list,.activities-list{gap:var(--space-md);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.view-all-container{padding:var(--space-lg) 0 0 0;border-top:var(--border-width-thin) solid color-mix(in srgb, var(--color-primary) calc(var(--opacity-low) * 100%), transparent);margin-top:var(--space-lg);text-align:center}.panel-activities{background:linear-gradient(135deg, color-mix(in srgb, var(--color-success) 3%, transparent) 0%, color-mix(in srgb, var(--color-highlight) 2.5%, transparent) 50%, color-mix(in srgb, var(--color-primary) 1.5%, transparent) 100%)}.panel-activities:hover{background:linear-gradient(135deg, color-mix(in srgb, var(--color-success) 5%, transparent) 0%, color-mix(in srgb, var(--color-highlight) calc(var(--opacity-very-low) * 100%), transparent) 50%, color-mix(in srgb, var(--color-primary) 2.5%, transparent) 100%)}.panel-items{background:linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 3%, transparent) 0%, color-mix(in srgb, var(--color-highlight) 2.5%, transparent) 50%, color-mix(in srgb, var(--color-primary) 1.5%, transparent) 100%)}.panel-items:hover{background:linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 5%, transparent) 0%, color-mix(in srgb, var(--color-highlight) calc(var(--opacity-very-low) * 100%), transparent) 50%, color-mix(in srgb, var(--color-primary) 2.5%, transparent) 100%)}.filter-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-light);margin-bottom:var(--space-sm);display:block}.year-filters{gap:var(--space-xs);flex-wrap:wrap;display:flex}.type-filters-section{margin-bottom:var(--space-lg)}.type-filters-container{gap:var(--space-xs);flex-wrap:wrap;display:flex}.filter-button{padding:var(--space-2xs) var(--space-sm);background-color:var(--color-surface-alt);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--border-radius);font-size:var(--font-size-sm);cursor:pointer;transition:background-color var(--anim-duration-fast) var(--anim-ease-out)}.filter-button:hover{background-color:var(--color-surface-border)}.filter-button.active{background-color:var(--color-primary);color:var(--color-background);border-color:var(--color-primary)}:global(html.dark) .panel{background:linear-gradient(135deg, color-mix(in srgb, var(--color-primary) calc(var(--opacity-low) * 100%), transparent) 0%, color-mix(in srgb, var(--color-highlight) 5%, transparent) 50%, color-mix(in srgb, var(--color-accent) 3%, transparent) 100%)}:global(html.dark) .panel:hover{background:linear-gradient(135deg, color-mix(in srgb, var(--color-primary) calc(var(--opacity-medium) * 100%), transparent) 0%, color-mix(in srgb, var(--color-highlight) calc(var(--opacity-low) * 100%), transparent) 50%, color-mix(in srgb, var(--color-accent) 5%, transparent) 100%)}:global(html.dark) .panel-activities{background:linear-gradient(135deg, color-mix(in srgb, var(--color-success) 6%, transparent) 0%, color-mix(in srgb, var(--color-highlight) 5%, transparent) 50%, color-mix(in srgb, var(--color-primary) 3%, transparent) 100%)}:global(html.dark) .panel-activities:hover{background:linear-gradient(135deg, color-mix(in srgb, var(--color-success) calc(var(--opacity-low) * 100%), transparent) 0%, color-mix(in srgb, var(--color-highlight) calc(var(--opacity-low) * 100%), transparent) 50%, color-mix(in srgb, var(--color-primary) 5%, transparent) 100%)}:global(html.dark) .panel-items{background:linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 6%, transparent) 0%, color-mix(in srgb, var(--color-highlight) 5%, transparent) 50%, color-mix(in srgb, var(--color-primary) 3%, transparent) 100%)}:global(html.dark) .panel-items:hover{background:linear-gradient(135deg, color-mix(in srgb, var(--color-accent) calc(var(--opacity-low) * 100%), transparent) 0%, color-mix(in srgb, var(--color-highlight) calc(var(--opacity-low) * 100%), transparent) 50%, color-mix(in srgb, var(--color-primary) 5%, transparent) 100%)}@media (width<=639px){.panel{padding:var(--space-lg);margin-bottom:var(--space-lg)}.panel-title{font-size:var(--font-size-xl)}.panel-title:after{width:30px;height:var(--border-width-medium)}.panel:hover .panel-title:after{width:45px}}@media (prefers-reduced-motion:reduce){.panel,.panel-title:after{transition:none}.panel:hover{transform:none}}
