/* shorts/assets/style.css */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:Tahoma,Arial,sans-serif; background:linear-gradient(135deg,#0f0c29,#302b63,#24243e); min-height:100vh; color:#fff; }
.shorts-page { max-width:1400px; margin:0 auto; padding:20px; }
.shorts-header { text-align:center; padding:40px 20px; background:rgba(0,0,0,0.4); border-radius:30px; margin-bottom:30px; backdrop-filter:blur(10px); border:1px solid rgba(231,76,60,0.3); }
.shorts-header h1 { font-size:42px; margin-bottom:10px; background:linear-gradient(45deg,#e74c3c,#f39c12); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.shorts-header p { color:rgba(255,255,255,0.8); font-size:18px; }
.shorts-stats { display:flex; justify-content:center; gap:40px; margin-top:20px; flex-wrap:wrap; }
.shorts-stats span { background:rgba(231,76,60,0.2); padding:8px 20px; border-radius:50px; font-size:14px; color:#e74c3c; }
.back-link { display:inline-block; margin-top:15px; color:#e74c3c; text-decoration:none; font-weight:bold; transition:0.3s; }
.back-link:hover { color:#fff; transform:translateX(-5px); }
.shorts-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:20px; }
.short-card { background:rgba(255,255,255,0.95); border-radius:16px; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,0.3); transition:transform 0.3s, box-shadow 0.3s; cursor:pointer; }
.short-card:hover { transform:translateY(-8px); box-shadow:0 15px 40px rgba(231,76,60,0.3); }
.short-video-wrapper { position:relative; width:100%; aspect-ratio:9/16; background:#000; overflow:hidden; }
.short-video { width:100%; height:100%; display:block; object-fit:cover; background:#000; }
.short-duration { position:absolute; right:10px; bottom:42px; background:rgba(0,0,0,0.8); color:#fff; padding:4px 8px; border-radius:5px; font-size:12px; font-weight:bold; }
.short-info { padding:14px; color:#222; }
.short-info h2 { font-size:15px; line-height:1.5; margin:0 0 10px; font-weight:bold; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.short-stats { display:flex; gap:15px; color:#777; font-size:12px; }
.load-more { display:block; margin:40px auto; padding:14px 40px; border:none; border-radius:50px; background:linear-gradient(45deg,#e74c3c,#c0392b); color:#fff; cursor:pointer; font-size:16px; font-weight:bold; transition:all 0.3s; box-shadow:0 8px 25px rgba(231,76,60,0.3); }
.load-more:hover { transform:scale(1.05); box-shadow:0 12px 35px rgba(231,76,60,0.5); }
.load-more:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
.loading { text-align:center; color:rgba(255,255,255,0.7); padding:20px; }
.no-shorts { grid-column:1/-1; text-align:center; padding:80px 20px; background:rgba(255,255,255,0.05); border-radius:20px; }
.no-shorts h2 { color:#e74c3c; font-size:28px; }
.no-shorts p { color:rgba(255,255,255,0.7); }
.no-shorts a { color:#e74c3c; text-decoration:none; font-weight:bold; }
@media (max-width:1000px){ .shorts-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .shorts-page { padding:12px; } .shorts-header { padding:25px 15px; } .shorts-header h1 { font-size:28px; } .shorts-header p { font-size:14px; } .shorts-grid { grid-template-columns:repeat(2,1fr); gap:12px; } .short-info h2 { font-size:13px; } .shorts-stats { gap:15px; } .shorts-stats span { font-size:12px; padding:5px 14px; } }
@media (max-width:430px){ .shorts-grid { grid-template-columns:1fr; gap:16px; } .short-card { max-width:400px; margin:0 auto; } }