:root{--pepsi-red:#e32934;--pepsi-red-bright:#ff2d42;--pepsi-red-glow:#ff4d5e;--pepsi-blue:#004b93;--pepsi-blue-bright:#06f;--pepsi-blue-glow:#39f;--pepsi-white:#fff;--bg-dark:#0a0e1a;--bg-card:#12182b;--text-muted:#8a9bb8;--radius:12px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{background:var(--bg-dark);color:var(--pepsi-white);-webkit-user-select:none;user-select:none;touch-action:manipulation;direction:rtl;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.app{background:radial-gradient(ellipse at 0% 0%, #e3293440 0%, transparent 50%), radial-gradient(ellipse at 100% 100%, #0066ff40 0%, transparent 50%), var(--bg-dark);flex-direction:column;height:100%;display:flex}.toolbar{padding:calc(8px + var(--safe-top)) 12px 8px;background:linear-gradient(135deg, var(--pepsi-red) 0%, #b81d2a 40%, var(--pepsi-blue) 100%);flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;display:flex;box-shadow:0 4px 20px #e3293466}.toolbar-brand{align-items:baseline;gap:4px;display:flex}.logo{letter-spacing:-1px;font-size:1.3rem;font-weight:900}.logo-red{color:var(--pepsi-white);text-shadow:0 0 12px var(--pepsi-red-glow)}.logo-blue{color:var(--pepsi-blue-glow);text-shadow:0 0 12px var(--pepsi-blue-bright)}.app-name{opacity:.9;font-size:.85rem;font-weight:300}.toolbar-modes{background:#0000004d;border-radius:20px;gap:6px;padding:4px;display:flex}.mode-btn{width:36px;height:36px;color:var(--pepsi-white);cursor:pointer;background:0 0;border:none;border-radius:50%;font-size:1rem;font-weight:700;transition:all .2s}.mode-btn.active{background:linear-gradient(135deg, var(--pepsi-red-bright), var(--pepsi-blue-bright));transform:scale(1.1);box-shadow:0 0 16px #ff2d4299}.toolbar-actions{gap:6px;display:flex}.action-btn{border-radius:var(--radius);cursor:pointer;background:#ffffff1a;border:2px solid #ffffff4d;width:40px;height:40px;font-size:1.1rem;transition:all .2s;position:relative}.action-btn:active{background:#ffffff40;transform:scale(.95)}.library-btn .badge{background:var(--pepsi-red-bright);color:#fff;border-radius:9px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 4px;font-size:.65rem;font-weight:700;display:flex;position:absolute;top:-4px;left:-4px}.main-content{flex:1;min-height:0;padding:8px;overflow:hidden}.split-grid{gap:6px;width:100%;height:100%;display:grid}.grid-2{grid-template-rows:1fr;grid-template-columns:1fr 1fr}.grid-3{grid-template-rows:1fr;grid-template-columns:1fr 1fr 1fr}.grid-4{grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr}@media (orientation:portrait){.grid-2{grid-template-rows:1fr 1fr;grid-template-columns:1fr}.grid-3{grid-template-rows:1fr 1fr 1fr;grid-template-columns:1fr}}.video-cell{background:var(--bg-card);border-radius:var(--radius);border:2px solid #06f3;min-height:0;transition:border-color .2s,box-shadow .2s;position:relative;overflow:hidden}.video-cell.drag-over{border-color:var(--pepsi-red-bright);box-shadow:0 0 24px #ff2d4280}.video-cell.has-video{border-color:#06f6}.video-cell video{object-fit:contain;background:#000;width:100%;height:100%;display:block}.video-cell.has-video{flex-direction:column;display:flex}.video-cell.has-video video{flex:1;min-height:0}.cell-badge{background:linear-gradient(135deg, var(--pepsi-red), var(--pepsi-blue));color:#fff;z-index:2;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:.7rem;font-weight:700;display:flex;position:absolute;top:6px;right:6px;box-shadow:0 2px 8px #0006}.cell-placeholder{height:100%;min-height:120px;color:var(--text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:16px;display:flex}.placeholder-icon{opacity:.5;font-size:2.5rem}.cell-placeholder p{font-size:.85rem}.cell-placeholder .hint{opacity:.6;font-size:.75rem}.cell-controls{opacity:0;background:linear-gradient(#0009,#000000e6);flex-shrink:0;padding:8px 10px;transition:opacity .3s}.cell-controls.visible{opacity:1}.cell-header{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.cell-title{white-space:nowrap;text-overflow:ellipsis;max-width:80%;color:var(--pepsi-blue-glow);font-size:.75rem;overflow:hidden}.btn-icon{color:#fff;cursor:pointer;background:#e3293499;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:.8rem;display:flex}.cell-progress{align-items:center;gap:8px;margin-bottom:6px;display:flex}.cell-progress input[type=range]{height:6px;accent-color:var(--pepsi-red-bright);cursor:pointer;flex:1}.time-label{color:var(--text-muted);white-space:nowrap;font-size:.65rem}.cell-actions{align-items:center;gap:8px;display:flex}.btn-control{background:linear-gradient(135deg, var(--pepsi-red-bright), var(--pepsi-blue-bright));color:#fff;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;width:44px;height:44px;font-size:1.2rem;box-shadow:0 4px 12px #e3293466}.volume-group{flex:1;align-items:center;gap:4px;min-width:0;display:flex}.volume-group input[type=range]{height:4px;accent-color:var(--pepsi-blue-bright);flex:1}.cell-actions select{color:#fff;border:1px solid var(--pepsi-blue-bright);cursor:pointer;background:#004b9399;border-radius:8px;padding:6px 8px;font-size:.8rem}.library-overlay{z-index:100;background:#000000b3;align-items:flex-end;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.library-panel{background:linear-gradient(180deg, #1a2240 0%, var(--bg-dark) 100%);width:100%;max-height:75vh;padding:20px 16px calc(16px + var(--safe-bottom));border-top:3px solid;border-image:linear-gradient(90deg, var(--pepsi-red-bright), var(--pepsi-blue-bright)) 1;border-radius:20px 20px 0 0;flex-direction:column;animation:.3s slideUp;display:flex;overflow:hidden}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.library-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.library-header h2{background:linear-gradient(90deg, var(--pepsi-red-bright), var(--pepsi-blue-bright));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.2rem}.btn-import{border-radius:var(--radius);background:linear-gradient(135deg, var(--pepsi-red), var(--pepsi-blue));color:#fff;cursor:pointer;border:none;width:100%;margin-bottom:12px;padding:14px;font-size:1rem;font-weight:600;box-shadow:0 4px 16px #e3293466}.btn-import:active{transform:scale(.98)}.library-hint{color:var(--text-muted);text-align:center;margin-bottom:12px;font-size:.8rem}.library-list{flex-direction:column;flex:1;gap:8px;display:flex;overflow-y:auto}.library-item{border-radius:var(--radius);cursor:pointer;background:#ffffff0d;border:2px solid #0000;align-items:center;gap:12px;padding:10px;transition:all .2s;display:flex}.library-item.selected{border-color:var(--pepsi-red-bright);background:#e3293426;box-shadow:0 0 12px #ff2d424d}.library-item:active{transform:scale(.98)}.library-item .thumb{background:#000;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:64px;height:40px;display:flex;overflow:hidden}.library-item .thumb img{object-fit:cover;width:100%;height:100%}.library-item .info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.library-item .name{white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;overflow:hidden}.library-item .meta{color:var(--text-muted);font-size:.7rem}.btn-delete{cursor:pointer;opacity:.6;background:0 0;border:none;padding:4px;font-size:1.2rem}.btn-delete:hover{opacity:1}.empty-msg{text-align:center;color:var(--text-muted);padding:24px;font-size:.9rem}.landscape-hint{text-align:center;color:var(--text-muted);padding:6px 12px calc(6px + var(--safe-bottom));background:#0000004d;flex-shrink:0;font-size:.7rem}@media (orientation:landscape){.landscape-hint{display:none}.grid-3{grid-template-rows:1fr;grid-template-columns:1fr 1fr 1fr}.grid-2{grid-template-rows:1fr;grid-template-columns:1fr 1fr}}