.reel-hub{max-width:1200px;margin:0 auto;padding:5.5rem .75rem 2rem}.reel-hub-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;padding-inline:.25rem}.reel-hub-head h1{font-size:1.35rem;font-weight:700;margin:0 0 .35rem;color:var(--text-primary,#0f172a);font-family:Montserrat,Tajawal,sans-serif}.reel-hub-head p{margin:0;font-size:.85rem;line-height:1.45;color:var(--text-secondary,#64748b);max-width:36rem}.reel-hub-random{display:inline-flex;align-items:center;border-radius:999px;background:var(--brand-blue,#0052ff);color:#fff;font-size:.8rem;font-weight:600;padding:.45rem .95rem;text-decoration:none;white-space:nowrap}.reel-hub-random:hover{background:var(--brand-blue-hover,#003ecc);color:#fff}.reel-hub-empty{color:var(--text-secondary,#64748b);padding:2rem .25rem}.reel-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:transparent}.reel-hub-card{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:#0a0f1c;text-decoration:none;color:#fff}.reel-hub-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}.reel-hub-card:hover img{transform:scale(1.04)}.reel-hub-play{position:absolute;inset:0;margin:auto;width:40px;height:40px;border-radius:50%;background:#00000059;color:#fff;display:grid;place-items:center;opacity:0;transition:opacity .2s ease;pointer-events:none}.reel-hub-card:hover .reel-hub-play{opacity:1}.reel-hub-meta{position:absolute;inset:auto 0 0;padding:2rem .55rem .55rem;background:linear-gradient(transparent,#000000c7);display:flex;flex-direction:column;gap:.2rem}.reel-hub-meta strong{font-size:.72rem;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.reel-hub-stats{display:inline-flex;align-items:center;gap:.65rem;font-size:.65rem;opacity:.9}.reel-hub-stats span{display:inline-flex;align-items:center;gap:.35rem}@media(min-width:640px){.reel-hub{padding-inline:1rem}.reel-hub-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}.reel-hub-head h1{font-size:1.5rem}}@media(min-width:1024px){.reel-hub{padding:5.75rem 1.25rem 2.5rem}.reel-hub-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.reel-hub-meta strong{font-size:.78rem}}@media(min-width:1280px){.reel-hub-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}.reel-stage{position:relative;display:flex;justify-content:center;align-items:flex-start;min-height:calc(100vh - 4.5rem);padding:4.75rem 0 0;background:#000;margin:0;max-width:none}.reel-frame{position:relative;width:100%;max-width:480px;height:calc(100vh - 4.75rem);max-height:calc(100vh - 4.75rem);background:#0a0f1c;overflow:hidden;margin:0 auto;border:0;border-radius:0;aspect-ratio:auto}.reel-video{width:100%;height:100%;object-fit:cover;background:#000;display:block;cursor:pointer}.reel-play-hint{position:absolute;inset:0;margin:auto;width:72px;height:72px;border:0;border-radius:50%;background:#00000073;color:#fff;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .2s ease;z-index:2}.reel-frame:not(.is-playing) .reel-play-hint{opacity:1}.reel-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#fff3;z-index:4;pointer-events:none}.reel-progress-bar{height:100%;width:0%;background:var(--brand-blue, #0052ff)}.reel-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding:1.25rem .85rem 1.5rem;background:linear-gradient(transparent 40%,#0a0f1ce0);color:#fff;pointer-events:none;z-index:3}.reel-copy{flex:1;min-width:0;padding-inline-end:.25rem}.reel-owner{font-size:.8rem;font-weight:700;margin:0 0 .35rem;opacity:.95}.reel-overlay h1{font-size:1.05rem;font-weight:700;margin:0 0 .35rem;font-family:Montserrat,Tajawal,sans-serif;line-height:1.35}.reel-caption{font-size:.88rem;opacity:.9;margin:0 0 .6rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.reel-meta{display:flex;flex-wrap:wrap;gap:.75rem;font-size:.75rem;opacity:.8;margin-bottom:.5rem}.reel-idea{display:inline-block;font-size:.78rem;color:#7dd3fc;pointer-events:auto}.reel-side{display:flex;flex-direction:column;align-items:center;gap:.85rem;flex-shrink:0;padding-bottom:.25rem}.reel-side-form{margin:0}.reel-icon-btn{pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;width:48px;min-height:48px;border:0;background:transparent;color:#fff;text-decoration:none;cursor:pointer;padding:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}.reel-icon-btn:hover,.reel-icon-btn:focus-visible{color:#fff;opacity:.9;outline:none}.reel-icon-btn.is-active{color:#ff4d6d}.reel-icon-count{font-size:.7rem;font-weight:600;line-height:1}.reel-comments{position:fixed;z-index:50;max-height:min(55vh,420px);overflow:auto;background:var(--bg-card, #fff);border-radius:16px 16px 0 0;padding:1rem 1.25rem 1.5rem;box-shadow:0 -8px 30px #00000040;max-width:480px;margin:0 auto;inset:auto 0 0 50%;transform:translate(-50%);width:100%}[dir=rtl] .reel-comments{left:50%;right:auto}.reel-comments[hidden]{display:none!important}.reel-comments-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem}.reel-comments h2{font-size:1.05rem;margin:0;color:var(--text-primary, #0f172a);font-family:Montserrat,Tajawal,sans-serif}.reel-comments-close{border:0;background:transparent;color:var(--text-secondary, #64748b);cursor:pointer;padding:.25rem}.reel-comment-form{display:grid;gap:.6rem;margin-bottom:1rem}.reel-comment-form textarea{width:100%;border:1px solid var(--border-color, rgba(15,23,42,.12));border-radius:var(--radius-sm, 8px);padding:.75rem;font:inherit;background:var(--bg-card, #fff);color:var(--text-primary, #0f172a)}.reel-comment-form textarea:focus{outline:none;border-color:var(--border-focus, #0052ff);box-shadow:0 0 0 3px #0052ff33}.reel-comment-form button,.reel-comments li button{justify-self:start;border:0;background:var(--brand-blue, #0052ff);color:#fff;border-radius:var(--radius-sm, 8px);padding:.45rem .9rem;font-size:.8rem;font-weight:600;cursor:pointer}.reel-comment-form button:hover{background:var(--brand-blue-hover, #003ecc)}.reel-comments ul{list-style:none;padding:0;margin:0;display:grid;gap:1rem}.reel-comments li strong{display:block;font-size:.85rem;color:var(--text-primary, #0f172a)}.reel-comments li p{margin:.25rem 0 .4rem;font-size:.9rem;color:var(--text-secondary, #334155);line-height:1.5}.reel-comments li button{background:transparent;color:var(--text-secondary, #64748b);padding:0;border:0;text-decoration:underline}.reel-empty{color:var(--text-secondary, #64748b);font-size:.9rem}.reel-empty a{color:var(--brand-blue, #0052ff);text-decoration:underline}.reel-error{color:var(--danger-text, #b91c1c);font-size:.8rem;margin:0}body:has(.reel-stage) .site-footer,body:has(.reel-stage) .ambient-bg{display:none}body:has(.reel-stage) main{background:#000}@media(min-width:900px){.reel-frame{border-radius:12px;max-height:min(92vh,860px);height:min(92vh,860px);margin-top:.5rem;margin-bottom:1rem;border:1px solid #334155}.reel-stage{padding-top:5.25rem;min-height:100vh;align-items:center}.reel-comments{border-radius:12px;bottom:1.5rem}}