.vlog-page{min-height:calc(100dvh - 150px);background:#f7f5f0}.vlog-hero{position:relative;min-height:245px;margin:0 14px;border-radius:12px;overflow:hidden;color:#fff;background:#003f30}.vlog-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}.vlog-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#002d23df,#003f3070),linear-gradient(0deg,#00261dcf,transparent 70%)}.vlog-hero-copy{position:relative;z-index:1;padding:31px 25px}.vlog-hero-copy small{font-size:8px;letter-spacing:2px;color:#bed7cb}.vlog-hero-copy h1{font-size:34px;line-height:1.18;letter-spacing:-1.8px;margin:13px 0 10px}.vlog-hero-copy h1 span{color:#9fd1ba}.vlog-hero-copy p{font-size:10px;line-height:1.8;color:#d7e7df}.vlog-hero-stamp{position:absolute;z-index:2;right:20px;bottom:21px;width:68px;height:68px;border:1px solid #ffffff6b;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:8px;line-height:1.5;transform:rotate(7deg)}
.vlog-content{padding:25px 24px 10px}.vlog-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.vlog-heading small{display:block;color:#6f8279;font-size:8px;letter-spacing:1.4px;margin-bottom:5px}.vlog-heading h2{font-size:19px}.vlog-upload-open{border-radius:22px;background:#004836;color:#fff;padding:10px 13px;font-size:9px;font-weight:800;white-space:nowrap}.vlog-status{margin:12px 0 17px;padding:10px 12px;border-radius:8px;background:#e7eee9;color:#46675a;font-size:8px;line-height:1.55}
.vlog-class-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:20px}.vlog-class-tabs button{min-height:42px;border:1px solid #dce4de;border-radius:8px;background:#fff;color:#537064;font-size:10px;font-weight:800}.vlog-class-tabs .vlog-all-tab{grid-column:1/-1;min-height:38px}.vlog-class-tabs button.selected{background:#004836;border-color:#004836;color:#fff;box-shadow:0 4px 9px #00483625}.vlog-status.is-cloud{background:#d9ede3;color:#174d3a}.vlog-status.is-cloud:before{content:'●';margin-right:6px;color:#15a56d}
.vlog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.vlog-card{position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:#dfe7e2;color:#fff;text-align:left}.vlog-card img,.vlog-card video{width:100%;height:100%;object-fit:cover}.vlog-card:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#001c16d9)}.vlog-card-copy{position:absolute;z-index:2;left:11px;right:11px;bottom:10px}.vlog-card-copy b{display:block;font-size:11px}.vlog-card-copy small{display:block;margin-top:4px;color:#d7e5de;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vlog-video-badge{position:absolute;z-index:2;top:9px;right:9px;padding:4px 6px;border-radius:13px;background:#001d17b8;font-size:7px}.vlog-empty{grid-column:1/-1;padding:45px 18px;text-align:center;border:1px dashed #cedbd3;border-radius:11px;color:#6f8178}.vlog-empty span{display:block;font-size:37px;margin-bottom:13px}.vlog-empty strong{font-size:14px}.vlog-empty p{font-size:9px;line-height:1.8;margin-top:7px}
.vlog-dialog{width:calc(100% - 28px);max-width:430px;padding:0;border:0;border-radius:15px;overflow:hidden;background:#f7f5f0}.vlog-dialog::backdrop{background:#001c16b8;backdrop-filter:blur(4px)}.vlog-dialog-head{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;background:#004836;color:#fff}.vlog-dialog-head small{display:block;font-size:7px;letter-spacing:1.4px;color:#b9d2c7;margin-bottom:5px}.vlog-dialog-head h2{font-size:18px}.vlog-dialog-close{width:36px;height:36px;border-radius:50%;background:#ffffff17;color:#fff;font-size:18px}.vlog-form{padding:19px}.vlog-field{display:block;margin-bottom:15px}.vlog-field>span{display:block;font-size:9px;font-weight:800;margin-bottom:7px;color:#53675e}.vlog-field select,.vlog-field input,.vlog-field textarea{width:100%;border:1px solid #dce2dc;border-radius:8px;background:#fff;padding:12px;font:inherit;font-size:11px}.vlog-field textarea{resize:vertical;min-height:75px}.vlog-file-note{font-size:8px;color:#78837d;line-height:1.6}.vlog-submit{width:100%;padding:14px;border-radius:8px;background:#004836;color:#fff;font-size:11px;font-weight:800}.vlog-message{min-height:18px;margin-top:10px;color:#9a4c3b;font-size:8px;text-align:center}
.vlog-viewer{background:#07140f;color:#fff}.vlog-viewer-shell{position:relative;min-height:min(82dvh,720px);display:flex;flex-direction:column}.vlog-progress{display:flex;gap:3px;padding:10px 11px 0;z-index:4}.vlog-progress-piece{height:3px;flex:1;overflow:hidden;border-radius:4px;background:#ffffff45}.vlog-progress-piece i{display:block;height:100%;width:0;background:#fff;border-radius:inherit}.vlog-viewer-top{display:flex;align-items:center;justify-content:space-between;padding:10px 15px 12px;z-index:2}.vlog-viewer-top b{font-size:12px}.vlog-viewer-media{flex:1;min-height:0;display:grid;place-items:center;background:#020705;touch-action:pan-y}.vlog-viewer-media img,.vlog-viewer-media video{width:100%;max-height:68dvh;object-fit:contain}.vlog-viewer-caption{padding:15px 18px 20px;font-size:10px;line-height:1.7;color:#dce8e2}.vlog-viewer-actions{display:flex;gap:7px;padding:0 16px 16px}.vlog-viewer-actions button{flex:1;padding:11px;border-radius:7px;background:#ffffff14;color:#fff;font-size:9px}.vlog-viewer-actions .danger{color:#ffb3a4}.vlog-nav{position:absolute;z-index:3;top:50%;width:38px;height:52px;border-radius:8px;background:#001b15a8;color:#fff;font-size:23px}.vlog-nav:disabled{opacity:.18}.vlog-prev{left:8px}.vlog-next{right:8px}
@media(max-width:370px){.vlog-content{padding-left:18px;padding-right:18px}.vlog-class-tabs{gap:4px}.vlog-class-tabs button{font-size:9px}.vlog-hero-copy h1{font-size:30px}}