.poetry-page{display:flex;gap:var(--spacing2xl);height:calc(100vh - var(--navHeight));width:80%;margin:0 auto}.filter-sidebar{flex-shrink:0;width:200px;padding:var(--spacingLg) 0 0;display:flex;flex-direction:column;overflow:hidden}.filter-header{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:var(--spacingSm);margin-bottom:var(--spacingMd);flex-shrink:0}.filter-title{font-size:var(--fontSizeXs);font-weight:500;color:var(--colorTextMuted);text-transform:uppercase;letter-spacing:.08em}.filter-clear{font-size:var(--fontSizeXs);color:var(--colorTextMuted);transition:color var(--transitionFast)}.filter-clear:hover{color:var(--colorPrimary)}.filter-section{flex:1;min-height:0;overflow-y:auto;padding-top:0;padding-bottom:var(--spacingMd);scrollbar-width:none}.filter-section::-webkit-scrollbar{display:none}.filter-section-title{font-size:var(--fontSizeBase);font-weight:600;color:var(--colorText);margin-bottom:var(--spacingMd);letter-spacing:.02em}.filter-group{margin-bottom:var(--spacingMd)}.filter-group-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--spacingXs) 0;font-size:var(--fontSizeSm);font-weight:500;color:var(--colorTextLight);transition:color var(--transitionFast)}.filter-group-toggle:hover{color:var(--colorText)}.toggle-icon{transition:transform var(--transitionFast);opacity:.4}.filter-group-toggle.collapsed .toggle-icon{transform:rotate(-90deg)}.filter-options{padding:var(--spacingXs) 0;display:flex;flex-direction:column;gap:2px}.filter-options.hidden{display:none}.filter-option{display:flex;align-items:center;gap:var(--spacingSm);padding:5px var(--spacingSm);border-radius:var(--radiusMd);cursor:pointer;transition:background-color var(--transitionFast)}.filter-option:hover{background-color:var(--colorBackgroundHover)}.filter-option:has(input:checked){background-color:var(--colorPrimaryAlpha4)}.filter-option input{position:absolute;opacity:0;width:0;height:0}.checkbox-custom{width:15px;height:15px;border:1.5px solid var(--colorBorder);border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all var(--transitionFast);flex-shrink:0}.filter-option:hover .checkbox-custom{border-color:var(--colorPrimary)}.filter-option input:checked+.checkbox-custom{background-color:var(--colorPrimary);border-color:var(--colorPrimary)}.filter-option input:checked+.checkbox-custom:after{content:"";width:4px;height:7px;border:solid white;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-1px)}.option-label{font-size:var(--fontSizeSm);color:var(--colorTextLight);transition:color var(--transitionFast)}.filter-option:hover .option-label,.filter-option:has(input:checked) .option-label{color:var(--colorText)}.poetry-main{flex:1;min-width:0;min-height:0;padding:var(--spacingLg) 0 var(--spacingLg) 0;display:flex;flex-direction:column}.search-row{display:flex;align-items:center;gap:var(--spacingMd);margin-bottom:var(--spacingLg);flex-shrink:0}.search-bar{flex:1;display:flex;align-items:center;gap:0;background:var(--colorBackground);border-radius:var(--radiusFull);overflow:hidden;box-shadow:0 2px 8px var(--colorShadow3),0 1px 3px var(--colorShadow1);transition:box-shadow var(--transitionNormal)}.search-bar:hover,.search-bar:focus-within{box-shadow:0 4px 16px var(--colorShadow4),0 2px 6px var(--colorShadow2)}.search-input-wrapper{flex:1;position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:var(--spacingMd);color:var(--colorTextMuted);width:15px;height:15px;pointer-events:none}.search-input{width:100%;padding:10px var(--spacingMd) 10px calc(var(--spacingMd) + 15px + 10px);border:none;border-radius:0;background:transparent;font-size:var(--fontSizeSm);color:var(--colorText)}.search-input:focus{outline:none}.search-input::placeholder{color:var(--colorTextMuted)}.search-button{padding:10px var(--spacingLg);background:transparent;color:var(--colorPrimary);border-radius:0;font-size:var(--fontSizeSm);font-weight:600;transition:background-color var(--transitionFast),color var(--transitionFast);flex-shrink:0;align-self:stretch;letter-spacing:.02em}.search-button:hover{background:var(--colorPrimaryAlpha6)}.poem-count{font-size:var(--fontSizeXs);color:var(--colorTextMuted);flex-shrink:0;white-space:nowrap;min-width:5em;text-align:right}.poem-list{flex:1;min-height:0;overflow-y:auto;position:relative}.virtual-scroll-sentinel{width:100%}.virtual-scroll-viewport{position:absolute;top:0;left:0;right:0;pointer-events:none}.poem-item{display:flex;align-items:center;gap:var(--spacingSm);padding:var(--spacingSm) var(--spacingMd);border-radius:var(--radiusMd);transition:background-color var(--transitionFast);position:absolute;left:0;right:0;box-sizing:border-box;pointer-events:auto;text-decoration:none}.poem-item:hover{background-color:var(--colorBackgroundHover)}.poem-dot{width:5px;height:5px;background:var(--colorPrimary);border-radius:50%;flex-shrink:0;opacity:.5}.poem-title{font-size:var(--fontSizeSm);color:var(--colorText);transition:color var(--transitionFast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.03em}.poem-item:hover .poem-title{color:var(--colorPrimary)}.poem-text-container{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.poem-snippet{font-size:var(--fontSizeXs);color:var(--colorTextMuted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.poem-item:hover .poem-snippet{color:var(--colorTextLight)}.poem-list-empty{display:none;align-items:center;justify-content:center;padding:var(--spacing2xl);color:var(--colorTextMuted);font-size:var(--fontSizeBase);flex:1}.poem-list-empty.visible{display:flex}.filter-trigger{display:none;align-items:center;gap:var(--spacingSm);padding:var(--spacingSm) var(--spacingMd);background:var(--colorBackground);border:1px solid var(--colorBorder);border-radius:var(--radiusFull);font-size:var(--fontSizeSm);color:var(--colorText);transition:all var(--transitionFast);position:relative}.filter-trigger:hover{border-color:var(--colorPrimary);color:var(--colorPrimary)}.filter-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;background:var(--colorPrimary);color:#fff;font-size:11px;font-weight:600;border-radius:var(--radiusFull);display:flex;align-items:center;justify-content:center}.filter-overlay{display:none;position:fixed;inset:0;background:#0006;z-index:1099;opacity:0;transition:opacity var(--transitionNormal)}.filter-overlay.active{opacity:1}@media(max-width:1024px){.poetry-page{gap:var(--spacingXl)}.filter-sidebar{width:180px;padding:var(--spacingMd) 0 0}.poetry-main{padding:var(--spacingMd) 0}}@media(max-width:768px){.poetry-page{flex-direction:column;gap:0;height:calc(100vh - var(--navHeight))}.filter-trigger{display:flex}.filter-sidebar{position:fixed;bottom:0;left:0;right:0;width:100%;height:60vh;max-height:60vh;padding:var(--spacingLg) var(--spacingLg) var(--spacingMd);border-bottom:none;border-radius:16px 16px 0 0;background:var(--colorBackground);box-shadow:0 -4px 20px #00000026;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:1100;overflow:hidden}.filter-sidebar.active{transform:translateY(0)}.filter-sidebar:before{content:"";position:absolute;top:8px;left:50%;transform:translate(-50%);width:36px;height:4px;background:var(--colorBorder);border-radius:2px}.poetry-main{flex:1;min-height:0;padding:var(--spacingMd) var(--spacingLg)}.search-bar{border-radius:var(--radiusFull)}.search-input{font-size:16px}.search-row{flex-wrap:wrap;margin-bottom:var(--spacingMd)}.poem-count{order:-1;width:100%;text-align:left;margin-bottom:var(--spacingXs)}}@media(max-width:480px){.poetry-page{width:100%}.filter-sidebar{padding:var(--spacingMd) var(--spacingMd) 0}.filter-section-title{font-size:var(--fontSizeSm)}.filter-group-toggle,.option-label{font-size:var(--fontSizeXs)}.poetry-main{padding:var(--spacingMd)}.search-input{font-size:16px;padding:8px var(--spacingSm) 8px calc(var(--spacingSm) + 15px + 8px)}.search-button{padding:8px var(--spacingMd);font-size:var(--fontSizeXs)}.poem-item{padding:var(--spacingXs) var(--spacingSm)}.poem-title{font-size:var(--fontSizeXs)}.poem-snippet{font-size:11px}}
