:root {
	--card-w: 180px;
	--card-h: 217px;
	--inner-img-w: 158px;
	--inner-img-h: 118px;
	--gap: calc(var(--inner-img-w) / 2);
	--card-bg: #f2f2f4; /* slightly darker than page background */
	--card-border: rgba(0,0,0,0.06);
	--meta-bg: rgba(15,23,42,0.03);
}

body{font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;background:#f7f7f8;color:#222;margin:0;overflow-x:hidden}
html{overflow-x:hidden;}
header{padding:16px;background:#222;color:#fff;display:flex;align-items:center;justify-content:center}
header h1{margin:0;font-size:20px}
.tabs{display:flex;gap:8px;padding:12px;background:#fff;border-bottom:1px solid #eee;justify-content:center}
.tabs button{padding:8px 12px;border:1px solid #ddd;background:#fafafa;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:64px}
.tabs button.active{background:#222;color:#fff;border-color:#222}

.grid{display:flex;flex-wrap:wrap;gap:12px;padding:16px;justify-content:center;margin:0 auto}

.card{flex:0 0 var(--card-w);width:var(--card-w);height:var(--card-h);padding:0 0 3px;display:flex;flex-direction:column;align-items:center;text-align:left;background:var(--card-bg) url('./bg_waterfall.png') no-repeat 100% 100%;background-size:cover;border-width:1px 0 0;border-top:1px solid #EAEAEA;border-radius:6px;overflow:hidden;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;box-sizing:border-box}
.card:hover{transform:translateY(-6px);box-shadow:0 10px 30px rgba(2,6,23,0.06);border-color:rgba(0,0,0,0.12)}

.thumb{position:relative;background:#efefef;width:var(--inner-img-w);height:var(--inner-img-h);display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(0,0,0,0.03);margin-top:6px}
.thumb img{width:var(--inner-img-w);height:var(--inner-img-h);object-fit:cover;display:block}
.vtime{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,0.6);color:#fff;padding:2px 6px;border-radius:3px;font-size:12px}

.title{padding:5px;font-size:13px;line-height:1.25;height:66px;overflow:hidden;background:var(--meta-bg);border-top:1px solid rgba(0,0,0,0.02);margin:0;margin-top:6px;width:var(--inner-img-w);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;text-align:left}
.meta{width:var(--inner-img-w);display:flex;justify-content:space-between;align-items:center;padding:4px 6px;font-size:12px;color:#666;background:transparent}
.meta .uploaded{float:left;font-size:11px;color:#666;text-align:left}
.meta .views{float:right}
.pagination{display:flex;gap:12px;align-items:center;justify-content:center;padding:12px}
.pagination .jump{display:flex;gap:4px;align-items:center}
.pagination .jump input{width:60px;padding:4px 6px;font-size:12px;border:1px solid #ccc;border-radius:4px}
.pagination .jump button{padding:4px 8px;font-size:12px;border:1px solid #222;background:#222;color:#fff;border-radius:4px;cursor:pointer}
.error-box{background:#ffe8e6;color:#b80000;padding:8px 12px;margin:8px auto;border:1px solid #ffb3aa;border-radius:4px;max-width:680px;font-size:13px}
.search-bar{display:flex;gap:8px;justify-content:center;align-items:center;padding:8px 12px;flex-wrap:wrap;max-width:820px;margin:0 auto;text-align:center}
.search-container{width:100%;display:flex;justify-content:center}
.search-bar input{padding:6px 10px;font-size:14px;border:1px solid #ccc;border-radius:4px;min-width:240px}
.search-bar button{padding:6px 12px;font-size:14px;border:1px solid #222;background:#222;color:#fff;border-radius:4px;cursor:pointer}
.search-bar button:disabled{opacity:.5;cursor:not-allowed}
.search-info{font-size:12px;color:#555}
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center}
.player{background:#000;border-radius:6px;padding:12px;width:60%;max-width:576px}
.player h3{font-size:14px;line-height:1.2;margin:0 0 8px;color:#fff}
.player .close{position:absolute;right:18px;top:18px;border:none;background:none;font-size:16px;color:#dcd6d6}
	.player{background:#000;border-radius:6px;padding:12px;width:80%;max-width:576px;aspect-ratio:16/9;display:flex;flex-direction:column}
	.player video{width:100%;height:100%;background:#000;object-fit:cover}
@media (min-width: 1400px) { .grid{max-width: calc( (var(--card-w) * 6) + (12px * 5) )} }
@media (min-width: 1000px) and (max-width: 1399px) { .grid{max-width: calc( (var(--card-w) * 4) + (12px * 3) )} }
@media (min-width: 700px) and (max-width: 999px) { .grid{max-width: calc( (var(--card-w) * 3) + (12px * 2) )} }
@media (min-width: 480px) and (max-width: 699px) { .grid{max-width: calc( (var(--card-w) * 2) + (12px * 1) )} }
@media (max-width: 479px) { :root { --card-w: calc(100vw - 20px); --inner-img-w: calc(100vw - 20px - 22px); --inner-img-h: calc((100vw - 20px - 22px) * 0.66); } body { -webkit-text-size-adjust:100%; } .grid { max-width:100%; padding:10px 8px 70px; gap:8px; justify-content:stretch; } .card { flex:1 1 auto; width:100%; height:auto; } .thumb { width:100%; height:auto; aspect-ratio:4/3; margin-top:0; } .thumb img { width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; } .title { width:100%; height:auto; min-height:0; -webkit-line-clamp:3; line-clamp:3; } .pagination { flex-wrap:wrap; gap:8px; } .pagination .jump input { width:70px; } .player { width:100%; max-width:100%; margin:0 8px; aspect-ratio:16/9; padding:8px; } .player video { width:100%; height:100%; } header h1 { font-size:18px; } .tabs { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; gap:6px; padding:8px 8px; scrollbar-width:none; mask-image:linear-gradient(to right, rgba(0,0,0,0.4), #000 20%, #000 80%, rgba(0,0,0,0.4)); overscroll-behavior-x:contain; } .tabs::-webkit-scrollbar { display:none; } .tabs button { flex:0 0 auto; min-width:auto; font-size:12px; padding:6px 10px; white-space:nowrap; } }
@media (min-width:480px) and (max-width:699px){ :root { --card-w: 48vw; --inner-img-w: calc(48vw - 22px); --inner-img-h: calc((48vw - 22px) * 0.66); } .grid { max-width:100%; } }
.card{transition:transform .12s ease, box-shadow .12s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 8px 22px rgba(0,0,0,0.12)}

@media (max-width: 479px) { :root { --card-w:180px; --inner-img-w:158px; --inner-img-h:118px; } body { -webkit-text-size-adjust:100%; } .grid { max-width:100%; padding:10px 8px 80px; gap:8px; justify-content:center; } .card { flex:0 0 var(--card-w); width:var(--card-w); height:var(--card-h); } .thumb { width:var(--inner-img-w); height:var(--inner-img-h); margin-top:0; } .thumb img { width:100%; height:100%; object-fit:cover; } .title { width:var(--inner-img-w); height:66px; -webkit-line-clamp:3; line-clamp:3; } .tabs { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; gap:6px; padding:8px 12px 8px calc(12px + env(safe-area-inset-left)); scrollbar-width:none; mask-image:none; -webkit-mask-image:none; justify-content:flex-start; scroll-snap-type:x mandatory; scroll-padding-left:12px; } .tabs::-webkit-scrollbar { display:none; } .tabs button { flex:0 0 auto; min-width:auto; font-size:12px; padding:6px 10px; white-space:nowrap; margin-left:0; } }