:root{--header-height:44px;--max-content-width:1200px;--detail-width:450px;--detail-min-width:300px;--z-header:50;--z-panel:100;--z-resize:10;}html,body{height:100dvh;margin:0;overflow:clip;}.app-container{display:flex;flex-direction:column;height:100dvh;overflow:hidden;}.global-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-sm);height:var(--header-height);padding:0 var(--space-md);background:var(--bg-primary);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:var(--z-header);@media (width <= 480px){padding:0 var(--space-sm);}}.logo{justify-self:start;}.header-actions{display:flex;align-items:center;gap:2px;justify-self:end;}.view-toggle{@media (width <= 768px){display:none;}}.header-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:none;border:none;color:var(--text-tertiary);text-decoration:none;cursor:pointer;
&:hover{color:var(--text-primary);background:var(--accent-light);}
&.donate-btn{@media (width <= 480px){display:none;}}
&::-webkit-details-marker{display:none;}
& svg{width:16px;height:16px;}}.search-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--space-sm);width:100%;max-width:400px;height:32px;padding:0 var(--space-md);background:none;border:1px solid var(--border);border-radius:9999px;color:var(--text-tertiary);font-size:var(--font-size-sm);cursor:pointer;justify-self:center;
&:hover{border-color:var(--text-tertiary);}
&:focus-visible{outline:none;border-color:var(--accent);}@media (width <= 480px){max-width:none;padding:0 var(--space-sm);}
& svg{width:14px;height:14px;flex-shrink:0;}}.search-btn-inner{display:flex;align-items:center;gap:var(--space-sm);}.search-btn-text{white-space:nowrap;}.search-shortcut{display:inline-flex;align-items:center;gap:1px;padding:2px 6px;background:color-mix(in srgb,var(--text-primary) 10%,transparent);border-radius:4px;font-size:11px;font-weight:500;font-family:inherit;color:var(--text-tertiary);white-space:nowrap;letter-spacing:.05em;
& svg{width:12px;height:12px;}@media (width <= 600px){display:none;}}.login-btn,.user-btn{display:none;}.user-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;}html:not([data-authenticated="true"]) .login-btn{display:inline-flex;}html[data-authenticated="true"] .user-btn{display:inline-flex;}.search-panel{position:fixed;inset:0;margin:12vh auto auto;width:min(90vw,600px);max-height:min(80vh,600px);background:var(--bg-primary);border:1px solid var(--border);box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;display:none;flex-direction:column;overflow:hidden;z-index:100;border-radius:16px;outline:none;
&:popover-open,
&.visible{display:flex;}
&::backdrop{background:color-mix(in srgb,var(--bg-primary) 60%,transparent);backdrop-filter:blur(4px);}@media (width <= 600px){inset:0;width:100%;max-width:100%;max-height:85dvh;border-radius:0 0 20px 20px;margin:0 0 auto;padding-top:env(safe-area-inset-top,0);}}.search-field{display:flex;align-items:center;border-bottom:1px solid var(--border-light);background:var(--bg-primary);padding:0 var(--space-md);flex-shrink:0;
& .search-icon{color:var(--text-tertiary);margin-right:var(--space-sm);display:flex;opacity:.7;
& svg{width:18px;height:18px;}}
& input[type="search"]{flex:1;width:100%;padding:var(--space-md) 0;border:none;background:none;color:var(--text-primary);font-size:1rem;outline:none;height:auto;font-weight:400;
&:focus{background:none;}
&::placeholder{color:var(--text-tertiary);font-weight:400;opacity:.6;}
&::-webkit-search-cancel-button{display:none;}}
& .search-clear{background:none;border:none;font-size:1.25rem;color:var(--text-tertiary);cursor:pointer;padding:0 var(--space-xs);line-height:1;opacity:.6;
&:hover{opacity:1;color:var(--text-primary);}}}.panel-body{flex:1;overflow-y:auto;padding:0;display:flex;flex-direction:column;}.panel-section{padding:var(--space-md) var(--space-lg);@media (width <= 600px){padding:var(--space-md);}}.filters-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md) var(--space-lg);@media (width <= 600px){grid-template-columns:1fr;gap:var(--space-md);}}.panel-footer{display:flex;justify-content:flex-end;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);padding-bottom:max(var(--space-sm),env(safe-area-inset-bottom,0px));border-top:1px solid var(--border-light);background:none;flex-shrink:0;
& .btn{flex:none;min-width:auto;padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);}}.filter-group{display:flex;flex-direction:column;gap:4px;
& label{font-size:10px;color:var(--text-tertiary);font-weight:500;text-transform:uppercase;letter-spacing:.05em;}}.filter-input-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:4px 0;min-height:32px;background:none;border-bottom:1px solid var(--border-light);cursor:text;
&:focus-within{border-color:var(--text-tertiary);}}.filter-tags-container{display:contents;}.filter-tag{display:inline-flex;align-items:center;gap:2px;padding:1px 6px;background:var(--accent-light);border:none;border-radius:3px;font-size:11px;font-weight:500;color:var(--text-secondary);white-space:nowrap;user-select:none;
&:hover{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--text-primary);}
&[data-exclude="true"]{text-decoration:line-through;opacity:.6;}}.filter-tag-remove{display:inline-flex;align-items:center;background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:0;margin-left:1px;font-size:12px;opacity:.5;line-height:1;
&:hover{opacity:1;color:var(--text-primary);}}.filter-input-wrapper input{flex:1 0 50px;min-width:50px;border:none;background:none;color:var(--text-primary);font-size:var(--font-size-sm);padding:2px 0;outline:none;margin:0;
&::placeholder{color:var(--text-tertiary);opacity:.4;}}.custom-select-wrapper.full-width{width:100%;display:flex;
& .custom-select{width:100%;padding-right:24px;}}.content-area{display:flex;flex:1;min-height:0;position:relative;overflow:hidden;}html.search-open .content-area{pointer-events:none;}.results-panel{display:flex;flex-direction:column;flex:1;min-width:0;background:var(--bg-primary);overflow:hidden;@media (width > 768px){min-width:300px;}}#resultsCount{font-size:var(--font-size-sm);color:var(--text-tertiary);font-weight:500;text-transform:uppercase;letter-spacing:.08em;}.results-list{flex:1;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior-y:none;}@media (width > 768px){.app-container:has(#gridViewRadio:checked){
& .results-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));align-content:start;}@supports (display:grid-lanes){
& .results-list{display:grid-lanes;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
& .result-item{grid-column:span 1;}}}}.result-item{position:relative;display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);border:1px solid var(--border-light);text-decoration:none;color:inherit;cursor:pointer;
&:hover,
&.active{border-color:var(--border);background:var(--accent-light);}}.bookmark-indicator{position:absolute;inset:var(--space-xs) var(--space-xs) auto auto;color:var(--bookmark);opacity:1;pointer-events:none;
& svg{width:16px;height:16px;fill:currentColor;}}.summary-title{font-size:var(--font-size-sm);font-weight:600;color:var(--text-primary);margin:0;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.summary-description{font-size:var(--font-size-sm);color:var(--text-secondary);margin:0;line-height:1.5;}.summary-meta{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap;margin-top:0;padding-top:var(--space-xs);}.summary-language{font-size:var(--font-size-xs);font-weight:500;color:var(--text-tertiary);}.summary-votes{display:flex;align-items:center;}.summary-tags{display:flex;gap:var(--space-xs);align-items:center;margin-left:auto;overflow:hidden;}.vote-score{display:inline-flex;align-items:center;font-size:var(--font-size-xs);font-weight:500;font-variant-numeric:tabular-nums;color:var(--text-tertiary);
&.vote-positive{color:var(--vote-positive);}
&.vote-negative{color:var(--vote-negative);}}.resize-handle{display:none;width:5px;background:var(--border);cursor:col-resize;z-index:var(--z-resize);flex-shrink:0;position:relative;touch-action:none;
&:after{content:"";position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:1px;height:24px;background:var(--text-tertiary);opacity:.5;}
&:hover,
&:active{background:var(--accent);
&:after{opacity:0;}}
&:before{content:"";position:absolute;inset:0 -4px;}@media (width <= 768px){display:none !important;}}.detail-panel{display:none;width:var(--detail-width);min-width:var(--detail-min-width);flex-shrink:1;flex-direction:column;background:var(--bg-primary);border-left:1px solid var(--border);will-change:width;
&.visible{display:flex;}html[data-resizing="true"]
&:after{content:"";position:absolute;inset:0;z-index:1000;background:none;}@media (width <= 768px){position:fixed;inset:0;width:100%;border-left:none;z-index:var(--z-panel);}}.detail-frame{flex:1;width:100%;border:none;background:var(--bg-primary);}html.js-enabled .content-area:has(.detail-panel.visible) .resize-handle{display:block;position:relative;}.pagination{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:var(--space-xs);padding-bottom:max(var(--space-xs),env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);margin-top:auto;flex-shrink:0;}.pagination-controls{display:flex;gap:4px;
&.start{justify-content:flex-end;}
&.end{justify-content:flex-start;}}.pagination-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;background:none;border:none;color:var(--text-secondary);cursor:pointer;user-select:none;text-decoration:none;
&:hover:not(.disabled){color:var(--text-primary);background:var(--accent-light);}
&.disabled{opacity:.2;pointer-events:none;}
& svg{width:14px;height:14px;}}.pagination-info{font-size:var(--font-size-xs);color:var(--text-primary);font-variant-numeric:tabular-nums;font-weight:600;}.loading-state,.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-xl);min-height:200px;text-align:center;color:var(--text-secondary);grid-column:1 / -1;width:100%;}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-xl);min-height:200px;text-align:center;color:var(--text-secondary);height:100%;width:100%;grid-column:1 / -1;
& .empty-icon{display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-md);color:var(--text-tertiary);width:64px;height:64px;
& svg{width:24px;height:24px;opacity:.8;}}
& h3{margin:0 0 var(--space-xs) 0;font-size:var(--font-size-base);font-weight:600;color:var(--text-primary);}
& p{margin:0;font-size:var(--font-size-sm);color:var(--text-secondary);max-width:250px;line-height:1.5;}}.error-state{
& .error-message{color:var(--error);margin-bottom:var(--space-md);}}.custom-select-wrapper{position:relative;display:inline-flex;align-items:center;gap:8px;height:32px;}@media (horizontal-viewport-segments:2){.content-area{display:contents;}.app-container{display:grid;position:relative;grid-template-columns:minmax(320px,env(viewport-segment-width 0 0,50vw)) 1fr;grid-template-rows:auto 1fr;column-gap:max(0px,calc(100vw - env(viewport-segment-width 0 0,50vw) - env(viewport-segment-width 1 0,50vw)));height:100dvh;}.global-header{grid-column:1;grid-row:1;width:100%;border-right:1px solid var(--border);}.results-panel{grid-column:1;grid-row:2;width:100%;border-right:1px solid var(--border);flex:none;}.detail-panel{grid-column:2;grid-row:1 / -1;width:100%;border-left:none;flex:none;display:flex !important;position:relative !important;inset:auto !important;z-index:1 !important;}.resize-handle{display:none !important;}.search-panel{height:auto;z-index:200;border-right:1px solid var(--border);border-radius:12px 12px 0 0;border-bottom:none;box-shadow:var(--shadow-md);grid-column:auto;grid-row:auto;align-self:auto;position:fixed !important;inset:auto auto 0 0 !important;width:env(viewport-segment-width 0 0,50vw) !important;max-height:80dvh !important;margin:0 !important;}}@media (vertical-viewport-segments:2){.content-area{display:contents;}.app-container{display:grid;position:relative;height:100dvh;grid-template-rows:env(viewport-segment-height 0 0,50dvh) calc(100dvh - env(viewport-segment-height 0 0,50dvh) - env(viewport-segment-height 0 1,50dvh)) auto 1fr;grid-template-columns:100%;}.detail-panel{grid-row:1;width:100%;height:100%;border-left:none;flex:none;display:flex !important;position:relative !important;inset:auto !important;z-index:1 !important;}.global-header{grid-row:3;width:100%;border-top:1px solid var(--border);}.results-panel{grid-row:4;width:100%;flex:none;border-bottom:none;min-height:0;}.resize-handle{display:none !important;}.search-panel{height:auto;z-index:200;border-radius:12px 12px 0 0;box-shadow:var(--shadow-md);grid-column:auto;grid-row:auto;align-self:auto;position:fixed !important;inset:auto 0 0 !important;width:100% !important;max-height:80dvh !important;margin:0 !important;}}html[data-resizing="true"]{cursor:col-resize !important;}html[data-resizing="true"] body{user-select:none;}