:root {
  color-scheme: light;
  --bg: #f4f6f8; --glow: #e0f1f0; --panel: rgba(255,255,255,.91); --panel-solid: #fff; --soft: #f6f8f8;
  --text: #142126; --muted: #65747a; --faint: #94a1a6; --border: #dce4e5; --border-strong: #c7d3d5;
  --primary: #0d5b5a; --primary-hover: #084847; --primary-soft: #e0f1f0; --accent: #d17b38; --danger: #b8463d; --success: #167357;
  --shadow-sm: 0 2px 12px rgba(18,38,43,.05); --shadow: 0 18px 46px rgba(18,38,43,.08); --radius: 20px; --radius-sm: 12px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root[data-theme="dark"] { color-scheme: dark; --bg:#101819; --glow:#123233; --panel:rgba(24,35,36,.92); --panel-solid:#182324; --soft:#202d2e; --text:#edf5f3; --muted:#a5b5b4; --faint:#718181; --border:#314143; --border-strong:#46595a; --primary:#71cbc3; --primary-hover:#9aded8; --primary-soft:#1d4140; --accent:#f1a766; --danger:#ff9388; --success:#70d9ae; --shadow-sm:0 2px 12px rgba(0,0,0,.18); --shadow:0 18px 46px rgba(0,0,0,.25); }
* { box-sizing: border-box; }
html { background: var(--bg); } body { min-width:320px; margin:0; background:radial-gradient(900px 450px at 90% -100px,var(--glow),transparent 70%),var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; } button,input,select { font:inherit; } button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid color-mix(in srgb,var(--primary) 42%,transparent); outline-offset:3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.page-shell { width:min(1280px,calc(100% - 40px)); margin:0 auto; padding:24px 0 56px; }
.topbar { min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.brand,.topbar-actions,.theme-toggle,.panel-heading,.live-pill,.link-button { display:inline-flex; align-items:center; }
.brand { gap:10px; font-size:.98rem; font-weight:780; letter-spacing:-.025em; }.brand-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; color:white; background:linear-gradient(135deg,var(--primary),#398e8a); box-shadow:0 5px 12px color-mix(in srgb,var(--primary) 30%,transparent); font-family:Georgia,serif; font-weight:700; }
.topbar-actions { gap:14px; color:var(--muted); font-size:.84rem; }.theme-toggle { gap:7px; min-height:34px; padding:0 10px; border:1px solid var(--border); border-radius:999px; background:var(--panel); color:var(--text); box-shadow:var(--shadow-sm); cursor:pointer; }
.hero,.search-shell,.results-shell,.config-shell { border:1px solid var(--border); background:var(--panel); box-shadow:var(--shadow); backdrop-filter:blur(16px); }
.hero { position:relative; overflow:hidden; display:flex; justify-content:space-between; gap:40px; align-items:flex-start; padding:clamp(28px,5vw,52px); border-radius:var(--radius); margin-bottom:18px; background:linear-gradient(120deg,var(--panel-solid),var(--panel)); }.hero::after { content:""; position:absolute; width:300px; height:300px; right:-100px; bottom:-170px; border:1px solid color-mix(in srgb,var(--primary) 18%,transparent); border-radius:50%; box-shadow:0 0 0 38px color-mix(in srgb,var(--primary) 6%,transparent),0 0 0 78px color-mix(in srgb,var(--primary) 4%,transparent); }.hero-content,.status-stack { position:relative; z-index:1; }
.eyebrow { margin:0 0 9px; color:var(--primary); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; font-weight:780; }.hero h1,.results-header h2,.empty-state h2 { margin:0; letter-spacing:-.045em; line-height:1.04; }.hero h1 { max-width:650px; font-size:clamp(2rem,4vw,3.55rem); }.hero h1 span { color:var(--primary); }.hero-copy { max-width:570px; margin:17px 0 0; color:var(--muted); font-size:1.02rem; line-height:1.65; }
.status-stack { display:grid; gap:8px; justify-items:end; min-width:220px; }.pill,.chip,.time-badge { display:inline-flex; align-items:center; gap:6px; width:fit-content; border:1px solid var(--border); border-radius:999px; padding:.42rem .7rem; background:var(--soft); color:var(--text); font-size:.76rem; line-height:1.1; white-space:nowrap; }.pill.subtle { color:var(--muted); }.action-pill { cursor:pointer; color:#fff; border-color:var(--primary); background:var(--primary); font-weight:740; transition:transform .16s ease,background .16s ease; }.action-pill:hover:not(:disabled) { background:var(--primary-hover); transform:translateY(-1px); }.action-pill:disabled { cursor:not-allowed; opacity:.6; }.live-pill { border-color:color-mix(in srgb,var(--success) 28%,var(--border)); background:color-mix(in srgb,var(--success) 9%,var(--soft)); color:var(--success); }.status-dot { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent); }.pill.warning,.time-badge.warning { border-color:#efc46f; background:#fff5de; color:#935609; }.pill.success,.time-badge.success { border-color:#a2dbbf; background:#eaf9f0; color:var(--success); }.pill.danger,.time-badge.danger { border-color:#f4bdb7; background:#fff0ee; color:var(--danger); }
.search-shell,.results-shell,.config-shell { border-radius:var(--radius); padding:18px; margin-bottom:18px; }.search-bar { display:grid; grid-template-columns:minmax(0,1fr) 190px auto; gap:10px; align-items:center; }.search-input-wrap { position:relative; min-width:0; }.search-glyph { position:absolute; top:50%; left:16px; color:var(--faint); font-size:1.35rem; line-height:1; transform:translateY(-53%); pointer-events:none; }.search-input-wrap input,.search-bar select,.filter-group input,.filter-group select { width:100%; min-height:50px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 14px; background:var(--soft); color:var(--text); outline:none; transition:border-color .16s ease,box-shadow .16s ease,background .16s ease; }.search-input-wrap input { padding-left:45px; padding-right:72px; font-size:1rem; }.search-input-wrap input:focus,.search-bar select:focus,.filter-group input:focus,.filter-group select:focus,.field input:focus { border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent); background:var(--panel-solid); }.search-actions { display:contents; }
.icon-button,.primary-button,.link-button { border:1px solid transparent; border-radius:var(--radius-sm); min-height:50px; padding:0 16px; font-weight:700; cursor:pointer; transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease; }.icon-button { position:absolute; top:50%; right:8px; min-height:33px; padding:0 9px; transform:translateY(-50%); background:transparent; color:var(--muted); font-size:.78rem; }.icon-button:hover { background:var(--panel-solid); color:var(--text); }.primary-button { color:#fff; background:var(--primary); box-shadow:0 6px 15px color-mix(in srgb,var(--primary) 24%,transparent); }.primary-button:hover:not(:disabled) { background:var(--primary-hover); transform:translateY(-1px); }.primary-button:disabled,.icon-button:disabled { cursor:not-allowed; opacity:.55; }.search-hint { margin:11px 4px 0; color:var(--muted); font-size:.8rem; } kbd { border:1px solid var(--border); border-bottom-width:2px; border-radius:5px; padding:1px 4px; background:var(--soft); font-family:inherit; font-size:.72rem; }
.filters-disclosure { grid-column:1/-1; border-top:1px solid var(--border); margin-top:4px; padding-top:13px; }.filters-disclosure summary { display:flex; align-items:center; justify-content:space-between; color:var(--text); cursor:pointer; font-size:.86rem; font-weight:720; list-style:none; }.filters-disclosure summary::-webkit-details-marker { display:none; }.filters-disclosure summary::after { content:"+"; color:var(--primary); font-size:1.2rem; font-weight:400; }.filters-disclosure[open] summary::after { content:"−"; }.filter-summary { margin-left:auto; margin-right:10px; color:var(--muted); font-size:.78rem; font-weight:500; }.filter-panel { display:grid; grid-template-columns:1.5fr repeat(3,minmax(150px,1fr)); gap:16px; padding-top:16px; }.filter-group { display:grid; align-content:start; gap:8px; }.filter-label { color:var(--muted); font-size:.76rem; font-weight:740; }.filter-options { display:flex; flex-wrap:wrap; gap:7px; min-height:50px; align-content:center; }.filter-option { display:inline-flex; align-items:center; gap:6px; padding:7px 10px 7px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted); cursor:pointer; font-size:.78rem; transition:border-color .16s ease,color .16s ease,background .16s ease; }.filter-option:has(input:checked) { border-color:color-mix(in srgb,var(--primary) 50%,var(--border)); background:var(--primary-soft); color:var(--primary); }.filter-option input { width:14px; height:14px; margin:0; flex:0 0 14px; accent-color:var(--primary); }
.content-grid { display:grid; grid-template-columns:300px minmax(0,1fr); gap:18px; align-items:start; }.sidebar-shell { position:sticky; top:16px; }.sidebar-shell .config-shell { margin-bottom:0; }.panel-heading { gap:10px; margin-bottom:18px; }.panel-heading>div { min-width:0; }.panel-heading h2,.results-header h2 { margin:0; font-size:1.16rem; letter-spacing:-.025em; }.panel-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; color:var(--primary); background:var(--primary-soft); font-size:1.15rem; }.muted,.status-note,.result-copy,.result-source,.empty-state p,.error-banner span { color:var(--muted); }.muted { margin:5px 0 0; font-size:.82rem; line-height:1.45; }.config-grid { display:grid; gap:12px; }.config-card { border:1px solid var(--border); border-radius:14px; padding:13px; background:var(--soft); }.config-card h3 { margin:0 0 12px; font-size:.88rem; }.field { display:grid; gap:6px; margin-bottom:10px; }.field:last-child { margin-bottom:0; }.field span { color:var(--muted); font-size:.76rem; }.field input { width:100%; min-height:40px; border:1px solid var(--border); border-radius:9px; padding:0 10px; background:var(--panel-solid); color:var(--text); outline:none; }.config-actions { display:grid; }.config-actions .primary-button { min-height:44px; font-size:.84rem; }
.results-shell { min-height:480px; }.results-header { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }.results-eyebrow { margin-bottom:6px; }.results-header h2 { font-size:1.35rem; }.results-header .muted { font-size:.87rem; }.status-note { max-width:38ch; text-align:right; font-size:.78rem; }.results-list { display:grid; gap:12px; }.result-card { display:grid; grid-template-columns:148px minmax(0,1fr); gap:16px; padding:14px; border:1px solid var(--border); border-radius:16px; background:var(--panel-solid); box-shadow:var(--shadow-sm); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; animation:card-in .28s ease both; }.result-card:hover { transform:translateY(-2px); border-color:var(--border-strong); box-shadow:var(--shadow); }.result-card.ended { opacity:.7; }.thumb { width:148px; height:148px; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--soft); }.thumb img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }.result-card:hover .thumb img { transform:scale(1.04); }.thumb-placeholder,.skeleton-box { display:grid; place-content:center; justify-items:center; gap:8px; width:100%; height:100%; color:var(--faint); background:linear-gradient(135deg,var(--soft),color-mix(in srgb,var(--primary-soft) 50%,var(--soft))); font-size:.76rem; }.thumb-placeholder span:first-child { font-size:1.4rem; }.result-body { display:grid; min-width:0; align-content:start; gap:10px; }.result-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; min-width:0; }.result-title-wrap { min-width:0; }.result-source { margin:0 0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.75rem; font-weight:650; }.result-title { margin:0; font-size:1.04rem; line-height:1.35; letter-spacing:-.016em; overflow-wrap:anywhere; }.result-title a { transition:color .16s ease; }.result-title a:hover { color:var(--primary); }.result-price { flex:0 0 auto; max-width:44%; padding:6px 9px; border-radius:8px; background:var(--primary-soft); color:var(--primary); font-size:.86rem; font-weight:780; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.result-meta { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }.chip { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:.33rem .55rem; color:var(--muted); font-size:.72rem; }.time-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; }.time-left { font-size:.82rem; font-weight:760; }.time-badge { padding:.32rem .55rem; font-size:.7rem; }.result-copy { display:-webkit-box; margin:0; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:.85rem; line-height:1.5; }.result-links { display:flex; }.link-button { gap:6px; min-height:34px; padding:0 10px; border-color:var(--border); background:transparent; color:var(--primary); font-size:.78rem; }.link-button:hover { border-color:var(--primary); background:var(--primary-soft); }.link-button.disabled { pointer-events:none; opacity:.42; }.pagination { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:20px; }.pagination-note { color:var(--muted); font-size:.8rem; }.empty-state,.error-banner { display:grid; place-items:center; min-height:250px; padding:28px; border:1px dashed var(--border-strong); border-radius:16px; background:var(--soft); text-align:center; }.empty-state h2 { font-size:1.15rem; }.empty-state p { max-width:42ch; margin:8px 0 0; font-size:.88rem; line-height:1.5; }.error-banner { min-height:auto; place-items:start; margin-bottom:14px; border-style:solid; border-color:color-mix(in srgb,var(--danger) 35%,var(--border)); color:var(--danger); text-align:left; }
.progress-shell { display:grid; width:min(300px,100%); gap:7px; justify-items:end; }.progress-track { width:100%; height:8px; overflow:hidden; border:1px solid var(--border); border-radius:999px; background:var(--soft); }.progress-fill { width:0%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),var(--accent)); transition:width .18s ease; }.progress-shell.indeterminate .progress-fill { width:100%!important; background:linear-gradient(90deg,transparent,var(--primary),transparent); background-size:200% 100%; animation:progress-shimmer 1.1s linear infinite; }.progress-meta { display:flex; width:100%; justify-content:space-between; gap:12px; color:var(--muted); font-size:.72rem; }.progress-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.progress-percent { font-variant-numeric:tabular-nums; }.skeleton { pointer-events:none; }.skeleton-box,.skeleton-line { background:linear-gradient(100deg,var(--soft) 25%,color-mix(in srgb,var(--soft) 60%,#fff) 45%,var(--soft) 65%); background-size:200% 100%; animation:skeleton-shimmer 1.5s infinite; }.skeleton-line { height:13px; border-radius:5px; }.skeleton-line.short { width:28%; }.skeleton-line.medium { width:62%; }.skeleton-line.long { width:85%; } @keyframes card-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } } @keyframes progress-shimmer { to { background-position:-200% 0; } } @keyframes skeleton-shimmer { to { background-position:-200% 0; } }
@media (max-width:960px) { .content-grid { grid-template-columns:1fr; }.sidebar-shell { position:static; }.hero { gap:24px; }.filter-panel { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px) { .page-shell { width:min(100% - 24px,1280px); padding-top:16px; }.desktop-only,.theme-toggle-label { display:none; }.topbar { margin-bottom:16px; }.hero { display:block; padding:28px 22px; }.hero::after { display:none; }.hero h1 { font-size:2.2rem; }.status-stack { justify-items:start; margin-top:24px; }.status-stack .pill.subtle:nth-of-type(n+4),.progress-shell { display:none; }.search-shell,.results-shell,.config-shell { padding:13px; border-radius:16px; }.search-bar { grid-template-columns:1fr auto; }.search-input-wrap { grid-column:1/-1; }.search-actions select { min-width:0; }.primary-button { padding:0 14px; }.filter-panel { grid-template-columns:1fr; gap:14px; }.filter-options { min-height:0; }.filter-summary { display:none; }.results-header { align-items:flex-start; }.status-note { display:none; }.result-card { grid-template-columns:88px minmax(0,1fr); gap:12px; padding:10px; }.thumb { width:88px; height:88px; border-radius:10px; }.result-top { display:block; }.result-price { display:inline-block; margin-top:8px; }.result-title { font-size:.94rem; }.result-copy { display:none; }.result-meta { margin-top:4px; }.pagination { gap:7px; }.pagination .link-button { padding:0 8px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }